




版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
第8章使用CSS格式化网页主要内容CSS在页面风格设计中的作用用多个HTML页面调用一个CSS文件用DIV+CSS的方式来写HTML页面用CSS控制背景图片的显示方式用CSS设置滚动条的样式用CSS设置滚动条的样式8.1.1CSS的简介CSS的英文名为CascadingStyleSheet,译成中文的意思为层叠样式表。样式就是格式,对于网页来说,像网页显示的文字的大小、颜色以及图片位置以及段落、列表等,都是网页显示的样式。层叠就是指当HTML文件引用多个CSS样式时,如果CSS的定义发生冲突,浏览器将依据层次的先后顺序来应用样式,如果不考虑样式的优先级时,一般会遵循“最近优选原那么〞。CSS能将样式的定义与HTML文件内容别离。只要建立定义样式的CSS文件,并且让所有的HTML文件都来调用CSS文件所定义的样式,如果要改变HTML文件中任意局部的显示风格时,只要把CSS文件翻开,更改样式就可以了。8.1.2CSS构造构造样式规那么样式表的每个规那么都有两个主要局部:选择符〔selector〕和声明〔declaration〕。选择器决定哪些因素要受到影响,声明由一个或多个属性值对组成。根本语法:selector{属性:属性值[[;属性:属性值]…]}语法说明:selector表示希望进行格式化的元素;声明局部包括在选择器后的大括号中;用“属性:属性值〞描述要应用的格式化操作;声明中的多个属性值对之间必须用分号隔开。CSS构造在样式规那么中添加注释在样式表规那么中添加注释有助于记住复杂的样式规那么的作用,应用的范围等,便于进行维护和应用。例如,下面是一个添加注释的样例。
注意:注释不能嵌套。
/*此标记应用在文档中*/h1{color:red;background:yellow;}CSS构造继承继承是CSS的一个主要特征,许多CSS属性不但影响选择符所定义的元素,而且会被这些元素的后代继承。例如一个body定义了的颜色值也会应用到段落的文本中。下面举例说明。<!--程序8-1--><html><head><title>CSS的继承性</title><styletype="text/css"><!--body{color:red;}--></style></head><body><p>CSS的继承性</p></body></html>8.2样式表的定义与使用在CSS里可以使用四种不同的方法,将样式表的功能加到网页里。直接定义标记的style属性定义内部样式表嵌入外部样式表链接外部样式表定义标记的style属性将CSS样式定义在HTML标记内的,这是最简单的样式定义方法。根本语法:<标记style="样式属性:属性值;样式属性:属性值;…">语法说明:标记:HTML标记,如body、table、p等;标记的style定义只能影响标记本身;style的多个属性之间用分号分割;标记本身定义的style优先于其他所有样式定义。<!--程序8-2--><html><head> <title>直接定义标记的style属性</title></head><body><pstyle="font-size:18px;color:#003366">此行文字被style属性定义为蓝色显示</p><p>此行文字没有被style属性定义</p></body></html>例如代码第一个段落标记被直接定义了style属性,此行文字将显示18像素大小,蓝色字体;而第二个段落标记没有被定义,将按照默认设置来显示文字样式。结果如图10-2所示。定义内部样式表内部样式表允许在他们所应用的HTML文档的顶部设置样式,后在整个HTML文件中直接调用使用该样式的标记。根本语法:<html><head><title>直接定义标记的style属性</title><styletype="text/css"><!--选择符1{样式属性:属性值;样式属性:属性值;……}
选择符2{样式属性:属性值;样式属性:属性值;……}
选择符3{样式属性:属性值;样式属性:属性值;……}……选择符n{样式属性:属性值;样式属性:属性值;……}--></style></head></html><style>元素是用来说明所要定义的样式,type属性是指style元素以CSS的语法定义;隐藏标记:防止了因浏览器不支持CSS而导致错误,加上这些标记后,不支持CSS的浏览器,会自动跳过此段内容,防止一些错误;;选择符可以使用HTML标记的名称,所有的HTML标记都可以作为选择符;样式属性主要是关于对选择符格式化显示风格的样式属性名称定义内部样式表语法说明:<style>元素是用来说明所要定义的样式,type属性是指style元素以CSS的语法定义;<!--……-->隐藏标记:防止了因浏览器不支持CSS而导致错误,加上这些标记后,不支持CSS的浏览器,会自动跳过此段内容,防止一些错误;选择符1……选择符n:选择符可以使用HTML标记的名称,所有的HTML标记都可以作为选择符;样式属性主要是关于对选择符格式化显示风格的样式属性名称;属性值设置对应样式属性的值。定义内部样式表<!--程序8-3--><html><head><title>定义内部STYLE属性</title><styletext="text/css"><!--.p1{font-size:18px;color:blue;}--></style></head><body><pclass="p1">此行文字被内部的样式定义为蓝色显示</p><p>此行文字没有被内部的样式定义</p></body></html>定义内部样式表嵌入外部样式表嵌入外部样式表就是在HTML代码的主体中直接导入样式表的方法。根本语法:<styletype="text/css">@importurl("外部样式表的文件名称");</style>语法说明:import语句后的“;〞号,一定要加上!外部样式表的文件名称是的是要嵌入的样式表文件名称,后缀为.css;@import应该放在style元素的任何其他样式规那么前面。嵌入外部样式表<!--程序8-4--><html><head><title>嵌入外部样式表</title><styletype="text/css">@importurl("style.css");</style></head><body><pclass=p1>此行文字被style属性定义为蓝色显示</p><p>此行文字没有被style属性定义</p></body></html>嵌入外部样式表例如代码调用的外部style.css文件的内容是:.p1{font-size:18px;color:blue}执行结果如图链接外部样式表除了以嵌入外部样式表的方法到达在HTML文件中引用样式表的目的外,还可以用链接的方式,使用外部CSS文件。根本语法:<linktype="text/css"rel="stylesheet"href="外部样式表的文件名称">语法说明:链接外部样式表时,不需要使用style元素,只需直接用<link>标记放在<head>标记中就可以了;同样外部样式表的文件名称是要嵌入的样式表文件名称,后缀为.css;CSS文件一定是纯文本格式;在修改外部样式表时,引用它的所有外部页面也会自动地更新;外部样式表中的URL相对于样式表文件在效劳器上的位置;外部样式表优先级低于内部样式表;可以同时链接几个样式表,靠后的样式表优先于靠前的样式表。链接外部样式表<!--程序8-5--><html><head><title>嵌入外部样式表</title><linkrel="stylesheet"type="text/css"href="style.css"></head><body><pclass="p1">此行文字被style属性定义为蓝色显示</p><p>此行文字没有被style属性定义</p></body></html>8.3定义选择符选择符决定了格式化将应用于哪些元素。最简单的选择符可以对给定类型的所有元素进行格式化,更复杂的选择符可以根据元素的class或id、上下文、状态等来应用格式化规那么。按照名称选择元素选择要格式化的元素最常用的标准可能是元素的名称或类型。例如,可以让所有p元素显示为红色、且大小为16像素。下面的例如中除非指定其他情况,指定类型的所有元素〔这里是标记p〕都将被格式化。<styletype="text/css">p{font-size:16px;color:red;}</style>按照id和class选择元素如果已经在页面元素中标识了id或class属性,那么就可以在选择器定义中使用,从而对被标识的元素进行格式化。<styletype="text/css"><!--#idname{样式属性:属性值;样式属性:属性值;......}.classname{样式属性:属性值;样式属性:属性值;......}--></style>或者<styletype="text/css"><!--HTML标记.classname1{样式属性:属性值;样式属性:属性值;......}HTML标记.classname2{样式属性:属性值;样式属性:属性值;......}--></style>语法说明可以单独使用classname和idname选择器,也可以与其他选择器标准一起使用。例如,“.news{color:red;}〞会影响所有标记中定义了“class="news"〞类的元素,而“h1.news{color:red;}〞只影响属性中定义了“class="news"〞类的h1元素。例如<!--程序8-7--><html><head><title>ID和类的定义</title><styletype="text/css"><!--#divdemo{background-color:#90EE90;border:0.2cmgrooveorange;}.p1{font-size:16px;color:#FF0000;}p.p2{font-size:26px;color:#FF0066;}--></style></head><body><divid="divdemo"> <p>此段文字以默认方式显示</p><pclass="p1">此段文字以16像素大小,红色字体显示</p><pclass="p2">此段文字以26像素大小,玫红色字体显示
</div></body></html>按照上下文选择元素在CSS中,可以根据元素的祖先元素、父元素或同胞元素来定位它们。祖先元素就是包含所关心元素〔希望样式影响的元素〕的任何元素,父元素就是直接包含所关心元素的元素。根本语法:祖先元素[祖先元素…]显示元素{属性名:属性值;…}.语法说明:祖先元素是希望格式化的元素的祖先元素的名称,上面程序中是“#divdemo〞;如果还需要继续指定后续的祖先元素,那么元素名中加空格;最后是最终希望格式化影响的元素名,上面程序中指定了影响段落标记P,也可以是前面讲过的一个ID〔#p1〕或者CLASS〔.p1),例如:#divdemo#p1{font-size:26px;color:#FF0066;}#divdemo.p1{font-size:26px;color:#FF0066;}如果祖先元素和影响元素是父子关系,那么可采取下面的定义风格:#divdemo>p{font-size:26px;color:#FF0066;}选择元素的一局部还可以只选择元素的第一个字母或第一行进行格式化。根本语法:选择符:first-letter{font-size:26px;color:#FF0066;}选择符:first-line{font-size:26px;color:#FF0066;}语法说明:下面是关于此规定的一个实例。p:first-letter{font-size:26px;color:#FF0066;}p:first-line{font-size:26px;color:#FF0066;}指定元素组多个元素使用同样的样式规那么,可以组合使用选择器。例如:h1,h2,div{color:#FF0066;}这里规定了标记h1、h2和div的color都是同样的颜色。组合选择其中的元素名中间要用“,〞隔开。h1,h2,div{color:#FF006;}
h1,h2,div{color:#FF0066;}CSS全局选择符CSS全局选择符--匹配文档中的任意一个元素语法:**代表文档中的所有元素说明:匹配文档中的任意一个元素如果全局选择符只是一个简单项选择择符的一局部,*可以省略*{color:pink;font-size:12px;border:1pxsolidblue;}8.4文字与排版样式的使用CSS的网页排版功能十分强大,使用CSS,不仅可以控制文字的大小、颜色、对齐方式和字体,还可以控制行高、字母间距、大小写〔全部大写、首字大写、小型大写或全部都小写等〕,甚至还可以控制文本的第一个字或第一行的样式。不仅如此,只需要在某一位置创立样式规那么〔即样式表〕,就可以让这些样式规那么应用于整个网站的所有文本〔当然也可以为特定的段落或网页的某些区域创立特别的样式表〕。此外,任何时候发现需要让网站上的文字增大,或是需要改变正文的字体,只需更改样式表中的“值〞即可。长度、百分比单位在CSS文字、排版、边界等的设置上,常常会在属性值后加上长度或者百分比单位,通过本小节的学习将掌握两种单位的使用。长度单位百分比单位百分比单位也是一种常用的相对类型,通常的参考依据为元素的font-size属性,下面的语句将设置margin属性值为font-size的150%,如下所示:p{margin:150%}此处表示的是相对于font-size高度的150%。需要注意的是,不管使用哪种单位,在设置的时候,数值与单位间不需要加上空格。8.4.2文字样式属性font-family设置字体font-size设置字号font-style设置字体样式font-weight设置字体加粗font-variant设置字体变体text-decoration设置文字效果属性font设置综合字体属性font-family设置字体除了利用HTML的标记来设置字体外,也可以用CSS的font-family属性来设置需要的字体。根本语法:font-family:字体一,字体二,字体三…语法说明:上面的语法定义了几种不同的字体,并用逗号隔开,当浏览器找不到字体一时,将会用字体二代替,以此类推,当浏览器完全找不到字体时,那么使用默认字体〔宋体〕。<!--程序8-8--><html><head><title>设置字体</title><styletype="text/css"><!--.p1{font-size:16px;font-family:黑体,草书,宋体;}.p2{font-size:16px;font-family:琥珀,草书,宋体;}--></style></head><body><pclass="p1">设置字体的顺序为,黑体,草书,宋体<pclass="p2">设置字体的顺序为,琥珀,草书,宋体</body></html>font-size设置字号font-size设置字号可以用<fontsize=值>标记来设置文字的大小。在CSS里,利用font-size属性来设置字号。根本语法:font-size:绝对大小|相对大小语法说明:绝对大小:是以pt为单位,以绝对大小的方式来设置字号。可以指定精确的大小,如16px,或者使用关键字来指定大小,如:font-size属性的关键字〔xx-small|x-small|small|medium|large|x-large|xx-large〕。不过这些关键字,在不同的设备下,可能会显示不同的字号。相对大小:利用百分比或者em(当前字母中,字母的宽度),以相对父元素大小的方式来设置大小。例如指定font-size的属性值时父元素的1.5em或150%,或者使用相对关键字(larger|smaller)来指定。<!--程序8-9--><html><head><title>设置字号的绝对大小</title><styletype="text/css"><!--p{color:blue}.p1{font-size:xx-small}.p2{font-size:x-small}.p3{font-size:small}.p4{font-size:medium}.p5{font-size:large}.p6{font-size:x-large}--></style></head><body><pclass="p1">设置字号为xx-small</p><pclass="p2">设置字号为x-small</p><pclass="p3">设置字号为small</p><pclass="p4">设置字号为medium</p><pclass="p5">设置字号为large</p><pclass="p6">设置字号为x-large</p></body></html><!--程序8-10--><html><head><title>设置字号的相对大小</title><styletype="text/css"><!--p{font-size:14px;}.b{font-size:200%;}--></style></head><body><p>设置字号的相对大小</p><pclass="b">设置字号的相对大小</p></body></html>font-style设置字体样式在HTML里,可以使用<I>标记,将网页文字设置为斜体。而在CSS里,那么可以利用font-style属性来到达字体变化的效果。根本语法:font-style:normal|italic|oblique语法说明:normal为默认值,一般以浏览器默认的字体来显示,italic为斜体效果,oblique为歪斜体效果。font-weight设置字体加粗在HTML里,可以利用<b>标记或者<strong>标记将文字设置为粗体。在CSS里,那么可以利用font-weight属性来设置字体的粗细。根本语法:font-weight:normal|blod|bolder|lighter|100-900语法说明:normal表示默认字体,bold表示粗体,bolder表示粗体再加粗,lighter表示比默认字体还细,100-900共分为九个层次〔100、200……、900〕,数字越小字体越细、数字越大字体越粗。<!--程序8-12--><html><head><title>font-weight字体加粗</title><styletype="text/css"><!--.p1{font-weight:normal}.p2{font-weight:blod}.p3{font-weight:bolder}.p4{font-weight:lighter}.p5{font-weight:900}--></style></head><body><pclass="p1">此段文字正常显示</p><pclass="p2">此段文字以blod方式显示</p><pclass="p3">此段文字以bolder方式显示</p><pclass="p4">此段文字以lighter方式显示</p><pclass="p5">此段文字以900方式显示</p></body></html>font-variant设置字体变体在HTML里设置字体变体,实际就是设置字体是否显示为小型的大写字母。而CSS中的字体变体主要用于设置英文字体。根本语法:font-variant:normal|small-caps语法说明:normal表示默认值,small-caps表示英文字体显示为小型的大写字母。<!--程序8-13--><html><head><title>font-variant字体变体</title><styletype="text/css"><!--.p1{font-variant:normal}.p2{font-variant:small-caps}--></style></head><body><pclass="p1">font-variant:normal字体变体</p><pclass="p2">font-variant:small-caps字体变体</p></body></html>text-decoration设置文字效果属性text属性所提供的text-decoration属性,主要完成文字加下划线、顶线、删除线及文字闪烁效果。根本语法:text-decoration:underline|overline|line-through|blink|none语法说明:<!--程序8-14--><html><head><title>文字效果属性</title><styletype="text/css"><!--.p1{text-decoration:underline}.p2{text-decoration:line-through}--></style></head><body><pclass="p1">文字加下划线</p><pclass="p2">文字加删划线</p></body></html>font设置综合字体属性font属性是一种复合属性,可以同时对文字设置多个属性。包括字体族科、大小、风格、加粗及字体变体。根本语法:font:font-stylefont-weightfont-variantfont-size/line-heightfont-family语法说明:如果要利用font属性,同时设置多个文字属性时,属性与属性之间必须利用空格隔开;前三个属性次序不定或者省略,默认为normal;大小和字体系列必须显式地指定,先设置大小,再设置字体系列,字体系列如果有多个,以逗号分割;行高必须直接出现在字体大小后面,中间用斜杠分开,行高是可选的属性;font属性是继承的。<!--程序8-15--><html><head><title>font字体设置</title><styletype="text/css"><!--.p1{font-family:黑体;font-size:25px;font-weight:bolder;}.p2{font:italic25px黑体;}--></style></head><body><pclass="p1">本行文字以黑体25像素大小加粗来显示</p><pclass="p2">本行文字以黑体斜体25像素大小加粗来显示</p></body></html>8.4.3排版样式属性text-indent首行缩进属性letter-spacing字符间距属性line-height行距属性text-align水平对齐属性text-transform转换英文大小写利用text-transform属性可以转英文大小写。根本语法:text-transform:uppercase|lowercase|capitalize|none语法说明:uppercase表示使所有单词的字母都大写,lowercase表示使所有单词的字母都小写,capitalize表示使每个单词的首字母大写,none表示默认值。text-indent首行缩进属性text-indenttext-indent首行缩进属性,通常被用来指定一个段落,第一行文字缩进的距离。根本语法:text-indent:长度单位|百分比单位语法说明:letter-spacing字符间距属性letter-spacingletter-spacing字符间距属性,可以设置字符与字符间的距离。根本语法letter-spacing:normal|长度单位语法说明:normal表示默认值,此处的长度单位可使用负数line-height行距属性line-height是用来设置行与行之间的距离。根本语法:line-height:normal|比例|长度单位|百分比语法说明:normal为默认值,比例是倍数,相对于元素font-size的几倍大小,长度单位和百分比请参考的说明,此处的长度单位可使用负数。text-align水平对齐属性text-align属性可以控制文字段落的水平对齐方式。根本语法:text-align:left|right|center|justify语法说明:left为默认值,right表示右对齐,center表示居中对齐,justify表示左右对齐。text-transform转换英文大小写利用text-transform属性可以转英文大小写。根本语法:text-transform:uppercase|lowercase|capitalize|none语法说明:uppercase表示使所有单词的字母都大写,lowercase表示使所有单词的字母都小写,capitalize表示使每个单词的首字母大写,none表示默认值。8.5背景与颜色的使用设置颜色方法背景颜色的属性背景图片的属性设置颜色方法利用RGB设置颜色利用RGB函数设置颜色利用颜色名称设置颜色利用RGB设置颜色在HTML网页,或者CSS样式的颜色定义里,设置颜色的方式是利用RGB概念,在RGB的概念中,所有颜色都是由红色、绿色、蓝色混合而成。CSS那么有四种定义颜色的方法:十六进制数RGB函数〔整数〕RGB函数〔百分比〕颜色名称颜色的表示在计算机中,定义每种颜色的强度都是由0~255。当所有颜色的强度为0时,将产生黑色,当所有颜色的强度都是255时,将产生白色。在HTML中,要使用RGB来指定颜色时,将使用#号,加上6个十六进制的数字来表示,表示方法如下:#RRGGBB其中R,G,B这三个字母的值范围0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f这16个数字。比方要表示红色的值,那么表示方法为:#FF0000。
利用RGB函数设置颜色RGB函数在CSS里,可以利用RGB函数,加上三组范围为0~255的数字来设置所要的颜色。因为每组数字可表现256种颜色强度,所以利用RGB函数共可表达出256*256*256种颜色表示方法如下:RGB(R,G,B)其中,R,G,B代表的整数范围为0~255。比方现在要表示红色的值,那么表示方法为:RGB〔255,0,0〕。
利用颜色名称设置颜色背景颜色的属性背景颜色在HTML里,可以使用标记的bgcolor属性来设置网页的背景颜色,而在CSS里,不仅可以用background-color属性来设置网页背景颜色的变化,还可以设置文字的背景颜色。根本语法:background-color:关键字|RGB值|transparent语法说明:transparent表示透明的意思,也是浏览器的默认值。<!--程序8-21--><html><head><title>背景颜色的属性</title><styletype="text/css"><!--body{background-color:#ADD8E6}.p1{background-color:#FF0000;font-size:30px}.p2{background-color:yellow;font-size:30px}--></style></head><body><pclass="p1">此行文字以红色背景显示n</p><pclass="p2">此行文字以黄色背景显示</p></body></html>背景图片的属性background-image插入背景图片background-attachment插入背景附件background-repeat设置重复背景图片background-position设置背景图片位置background-image插入背景图片除了可以设置背景的颜色以外,还可以用background-image来设置背景图片。根本语法:background-image:url|none语法说明:url表示要插入背景图片的路径,路径可以是绝对路径也可以是相对路径,none表示不加载图片。background-attachment插入背景附件background-attachment背景附件属性是用来设置背景图片是否随着滚动条的移动而一起移动。根本语法:background-attachment:scroll|fixed语法说明:scroll表示背景图片是随着滚动条的移动而移动,是浏览器的默认值;fixed表示背景图片固定在页面上不动,不随着滚动条的移动而移动。background-repeat设置重复背景图片background-img属性设置网页的背景图片重复显示方式。根本语法:background-repeat:repeat|repeat-x|repeat-y|no-repeat语法说明:repeat表示背景图片在水平和垂直方向平铺,是默认值;repeat-x表示背景图片在水平方向平铺;repeat-y表示背景图片在垂直方向平铺;no-repeat表示背景图片不平铺。background-position设置背景图片位置当在网页中插入背景图片时,每一次插入的位置,都是位于网页的左上角,所以通过background-position属性来改变图片的插入位置。根本语法:background-position:百分比|长度|关键字语法说明:利用百分比和长度来设置图片位置时,都要指定两个值,并且这两个值都要用空格隔开。一个代表水平位置,一个代表垂直位置。水平位置的参考点是网页页面的左边,垂直位置的参考点是网页页面的上边。关键字在水平方向的主要有left、center、right,关键字在垂直方向的主要有top、center、bottom。水平方向和垂直方向相互搭配使用。8.6美化网页与超链接的设置设置网页链接属性设置滚动条属性设置光标属性设置网页链接属性在HTML里,可以使用<a>标记来建立网页的链接,CSS允许按照链接的状态来设置网页链接文字的效果。语法如表8-5:设置滚动条属性有些网页的窗口滚动条上,增加了许多漂亮的颜色,其实这些滚动条的颜色效果,是利用CSS所制作出来的。以下图显示了滚动条的区域划分。设置滚动条属性滚动条的属性参见表8-6。设置光标属性在浏览网页时,常看到不同的光标,有的代表程序正在执行,有的代表文字位置光标,或者是超链接光标等,在HTML里并没有提供设置光标的功能,但在CSS的cursor属性刚好可以弥补这个缺点,设置出许多变化的光标图形。根本语法:cursor:s-resize语法说明:s-resize:cursor属性共提供了16种属性值,具体见课本表10-7所示。8.7矩形模块的概念与使用矩形模块设置边界设置元素边框设置元素内边界矩形模块在CSS中,将样式调用在每一个元素上,都以一个假想的矩形格式模型看待.一般使用矩形模块的时候,搭配margin属性、border属性以及padding属性,可以更好的控制元素的样式。设置边界margin的四个属性主要是控制元素边界与文件其他内容的空白距离,四个边界一般按顺时针方向上〔margin-top〕、右〔margin-right〕、下〔margin-bottom〕、左〔margin-left〕属性。四个边界的设置语法一样。根本语法:margin-(top、right、bottom、left):长度单位|百分比单位|auto设置元素边框border-style边框样式属性border-width边框宽度属性border-color边框色彩属性border属性的综合设置border-style边框样式属性在CSS里了,利用边框样式属性不仅可以设置单位边框样式属性,还可以对单位边框进行设置,而且也可以利用复合边框样式属性来统一设置四条边框的样式。根本语法:border-style:样式值border-top-style:样式值border-bottom-style:样式值border-left-style:样式值border-right-style:样式值border-style边框样式属性语法说明:border-style是一个复合属性,复合属性的值有四种设置方法,其他4个都是单个边框的样式属性,只能取一个值。样式值属性的具体说明见表8-8。设置一个值:四条边框宽度均使用一个值。设置两个值:上边框和下边框宽度调用第一个值,左边框和右边框宽度调用第二个值。设置三个值:上边框宽度调用第一个值,右边框与左边框宽度调用第二个值,下边框调用第三个值。设置四个值:四条边框宽度的调用顺序为上、右、下、左。border-width边框宽度属性border-width属性,是控制元素边框的宽度的一个综合属性,和border-style一样也有四种单独的设置方法,分别来定义四条边框的宽度,设置方法和边框样式一样。根本语法:border-width边框宽度属性语法说明:thin、medium、thick分别表示细、中等、粗,length表示长度单位border-color边框色彩属性border-color属性是用来控制边框显示的颜色,和边框宽度、边框样式的设置方法一样,也可以分别来设置每个边框的颜色.根本语法:border-color:颜色关键字|RGB值border-top-color:颜色关键字|RGB值border-bottom-color:颜色关键字|RGB值border-left-color:颜色关键字|RGB值border-right-color:颜色关键字|RGB值border属性的综合设置在CSS中,border属性用来同时设置边框的样式、宽度和颜色,也可以另外对每个边界属性单独进行设置根本语法:border:边框宽度|边框样式|边框颜色border-top:上边框宽度|上边框样式|上边框颜色border-bottom:下边框宽度|下边框样式|下边框颜色border-left:左边框宽度|左边框样式|左边框颜色border-right:右边框宽度|右边框样式|右边框颜色语法说明:每一个属性都是一个复合属性,都可以同时设置边框的样式、宽度和颜色,每个属性的值中间用空格隔开,在这5个属性中,只有border可以同时设置四条边框的属性,其他的只能设置单边框的属性。设置元素内边界元素内边界主要是指边框和内部元素之间的空白距离,利用padding属性设置元素内的边界时,也包括5个属性,同样也有四种设置方法。根本语法:padding:长度|百分比padding-top:长度|百分比padding-bottom:长度|百分比padding-left:长度|百分比padding-right:长度|百分比语法说明:长度包括长度值和长度单位,百分比是相对于上级元素宽度的百分比,不允许用负数,padding作为复合属性的四种取值方法请参考边框样式的取值方法。8.8CSS的进阶应用区域组件div标记的使用<span>标记的使用<div>与<span>的区别列表list-style-type列表样式list-style-image图像列表list-style-position列表符号的缩进div标记的使用div在写HTML文件时,要定义区域间不同样式时,可以使用<div>标记到达这个效果,除此以外,通过设置<div>的z-index属性还可以设置层次的效果。根本语法:<divstyle="position:absolute;left:29px;top:12
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 三方询价报价单合同模板(2025版)
- 铝合金采购合同2025年
- 人教版数学六年级上册6.3增加或减少百分之几 同步测试(含解析)
- 2025年中小学学生宿舍节能改造与绿色环保服务合同
- 2025年度绿色建材石渣回收再利用运输合作协议
- 山东技能考试试题及答案
- 2025年中小企业人力资源优化配置与薪酬福利设计合同
- 2025年全方位知识产权布局专利代理专项服务合同
- 教育投资基金的风险识别与评估技术
- 2025年度短视频创作者与MCN机构培训服务合同
- 2025年上海租房合同范本下载
- 《习作即景》教学课件
- 胃肠疾病健康科普教育
- 2025至2030全球及中国汽车48V系统行业产业运行态势及投资规划深度研究报告
- 低碳经济视域下陕西省能源产业的转型与发展:挑战、机遇与策略研究
- GB/T 45701-2025校园配餐服务企业管理指南
- DB3301T 0235-2018 城市公共厕所设置标准
- 运输风险防控记录表
- 三类汽车维修管理制度doc-收费标准
- 第四次全国经济普查先进集体事迹材料
- 博世力士乐运动控制器常用编程指令手册
评论
0/150
提交评论