CSS基本语法格式

CSS基本语法格式通过CSS样式，网页设计者摆脱了原来的HTML语法的限制，可以进一步将各种HTML标记做更精确的定义。但是并不是所有的浏览器都支持CSS样式表，因此，为了预防浏览器不支持CSS而出现的问题，最好将使用＜!----＞注释标记隐藏CSS样式。1．基本语法CSS样式的定义是由三个部分构成：选择符（selector）、属性（properties）和属性的取值（value）。基本格式如下：selector{property:value}其中，选择符可以是多种形式，一般是要定义样式的HTML标记，如BODY、P、DIV等。注意，属性和值要用冒号“：”隔开。例如：body{color:Gray}选择符body是指页面主体部分，color是控制文字颜色的属性，Gray是颜色的值。此例的效果是：此页面中使用body标记后所有的文字为灰色。如果属性的值是多个单词组成，必须在值上加引号。例如，所使用字体名称经常是几个单词的组合而成：p{font-family:"华文行楷”}此例的效果是：当在页面中使用p定义段落时，段落之间的字体为华文行楷。当对一个选择符指定多个属性时，需要使用分号“;”将各个属性／值对分开。例如：p{text-align:center;color:black}这个示例的效果为，页面中段落之间的文字居中显示，并且字体的颜色为黑色。为了使定义的样式表阅读方便，可以采用分行的书写格式：{text-align:center;color:black;font-family:"华文行楷"2.选择符的组合如果几个选择符具有相同属性值对，则可以把这几个选择符进行组合，用逗号将各选择符分开，以便减少样式的重复定义。例如：h1,h2,h3,h4,h5,h6{color:Blue}这个选择符组合使得所有的标题定义的字体均为蓝色。3．类选择符用类选择符能够把相同的HTML标记分类定义不同的样式。定义类选择符时，在自定义类的名称前加一个点号".”。例如，使用分段标记＜p＞定义两个不同的段落，一个段落向左对齐，一个段落居中。则定义的两个类选择符如下：p.left{text-align:left}p.center{text-align:center}然后，在不同的段落里使用相应的类。使用上面定义的两个类选择符如下：＜pclass="left"＞这个段落左对齐＜/p＞＜pclass="center"＞这个段落居中排列＜/p＞类选择符的名称可以是任意英文单词或以英文开头与数字的组合，一般以其功能和效果简要命名。类选择符还有一种用法，即在选择符中省略HTML标记名，这样可以把几个不同的元素定义成相同的样式。例如：.center{text-align:center}上面的代码片段定义.center类选择符为文字居中。该类可以被应用到任何元素上。下面使用h1标记（标题1）和p标记（段落）都归为“center”类。如下所示:＜h1class="center"＞这个标题居中排列＜/h1＞＜pclass="center"＞这个段落也居中排列＜/p＞使用这种方法，可以很方便的在任意元素上套用预先定义好的类样式。4.ID选择符在页面中，元素的ID属性指定了某个惟一元素的标识，同样ID选择符可以用来对某个特定元素定义独特的样式。ID选择符的应用和类选择符类似，只要把CLASS换成ID即可。将上例中类用ID替代：＜pid="left"＞这个段落向左对齐＜/p＞定义ID选择符时，须在ID名称前加上一个“#”号。和类选择符相同，定义ID选择符的属性也有两种方法。在下面这个例子中，定义所有ID属性值为left的标记的样式：#left{font-size:24px;font-weight:bold;color:red;background-color:transparent此示例定义的样式为：字体大小24个像素，粗体，红色，背景颜色透明。ID选择符的局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用。5．包含选择符当元素1中包含子元素2时，可以针对子元素2定义包含选择符。例如，下面对层div内的链接定义样式：diva{font-size:16px}此示例定义的样式为：层内所有超链接的文字大小为16象素，而层外超链接的文字仍为默认大小。6．样式表的层叠性样式表的层叠性是指样式表的继承，样式表的继承规则是外部元素的样式会保留下来，继承影响该元素内所包含的其他元素。事实上，所有在页面中嵌套的元素都会继承外层父元素指定的属性值，有时还会把很多层嵌套的样式进行叠加，除非另外更改。例如，在DIV元素中嵌套P元素：div{color:blue;font-size:10pt}<div><p>这个段落的文字为蓝色10号字</p></div>这里使得P元素中的内容会继承DIV定义的属性。有些情况下内部选择符不会继承外部选择符的值。例如，边界的属性值不会继承，一个段落不会有表格table一样的边界值。另外，当样式表继承遇到冲突时，总是以最后定义的样式为准。如果上例中定义了P的颜色：div{color:blue;font-size:10pt}p{color:red}<div><p>这个段落的文字为红色10号字</p></div>在这段语句中，段落里的字体大小为10号字是继承div属性，而color属性则依照最后定义的为red。不同的选择符定义相同的元素时，要考虑到不同的选择符之间的优先级。ID选择符，类选择符和HTML标记选择符次之，因为ID选择符是最后加到标记上的，所以优先级最高，其次是类选择符。如果想超越这三者之间的关系，可以用!important提升样式表的优先权，例如：p{color:#FF0000!important}.blue{color:#0000FF}#id1{color:#FFFF00}同时对页面中的一个段落加上这三种样式后，字体的样式会依照被!important定义的将p元素内的内容以红色显示。如果去掉!important，则依照优先权最高的ID选择符为黄色。7．样式表注释可以在CSS中插入注释来说明代码的