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 }
这个示例的效果为，页面中段落之间的文字居中显示，并且字体的颜为黑。
为了使定义的样式表阅读方便，可以采用分行的书写格式：
p
{text-align: center;
color: black;
font-family: "华文行楷"
}
2．选择符的组合
如果几个选择符具有相同属性值对，则可以把这几个选择符进行组合，用逗号将各选择符分开，以便减少样式的重复定义。例如：
h1,h2,h3,h4,h5,h6 { color: Blue }
这个选择符组合使得所有的标题定义的字体均为蓝。
3．类选择符
用类选择符能够把相同的HTML标记分类定义不同的样式。定义类选择符时，在自定义类的名称前加一个点号“.”。例如，使用分段标记<p>定义两个不同的段落，一个段落向左对齐，一个段落居中。则定义的两个类选择符如下：
p.left {text-align: left}
css外部样式表代码p.center {text-align: center}
然后，在不同的段落里使用相应的类。使用上面定义的两个类选择符如下：
<p class="left">这个段落左对齐</p>
<p class="center">这个段落居中排列</p>
类选择符的名称可以是任意英文单词或以英文开头与数字的组合，一般以其功能和效果简要命名。
类选择符还有一种用法，即在选择符中省略HTML标记名，这样可以把几个不同的元素定义成相同的样式。例如：
.center {text-align: center}
上面的代码片段定义.center类选择符为文字居中。该类可以被应用到任何元素上。下面使用h1标记（标题1）和p标记（段落）都归为“center”类。如下所示：
<h1 class="center">这个标题居中排列</h1>
<p class="center">这个段落也居中排列</p>
使用这种方法，可以很方便的在任意元素上套用预先定义好的类样式。
4．ID选择符
在页面中，元素的ID属性指定了某个惟一元素的标识，同样ID选择符可以用来对某个特定元素定义独特的样式。ID选择符的应用和类选择符类似，只要把CLASS换成ID即可。将上例中类用ID替代：
<p id="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内的链接定义样式：
div a{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中插入注释来说明代码的意思，注释可以提高代码的可读性。在浏览器中，注释并不显示。CSS注释以"/*" 开头，以"*/" 结尾，如下：
p{
text-align: center; /* 文本居中排列 */
color: blue; /* 文字为蓝 */
font-family:"华文行楷" /* 字体为华文行楷*/
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。