PHP培训之CSS简介（二）

CSS基本选择器

基本选择器

Style属性(行内样式)：直接写在标签内

如：u<p style=”font-size:12px; color:red;” >文字内容</p>

标签选择器

针对HTML的标签设置样式，这个需要写在<style>标签内。(biaoqiancss.html)

ID选择器

ID 选择器可以为标有特定 ID 的 HTML 元素指定特定的样式。 根据元素ID来选择元素，具有唯一性，这意味着同一id在同一文档页面中只能出现一次尽管你会发现即便你把几个元素都命名成相同的id名字，css选择器还是会把这些元素都选中应用样式，对于css选择器，id属性的唯一性似乎不存在。然而，对于js而言，它只会选择具有相同id名字元素中的第一个。出于一个好的编程习惯，同一个id不要在页面中出现第二次。

语法：以”#”开头

使用方法：<p id=”id的名称”></p>

类选择器

语法：以”.”开头，后面跟类名

使用方法：<p class=”类名”>内容</p>

通配符选择器

针对当前页面所用的标签应用同样的样式(对标签的初始化)

*{CSS规则}

如：*{margin:0;padding:0;border:0;}

标签和类结合

如：p.test{color:red}=>针对p标签应用类名为test的样式

组合选择器

多元素选择器

多个标签或选择器同时声明。

如：h1,h2,ul,li{margin:0;padding:0;}

定义的方法：选择器之间用逗号隔开

后代选择器

后代选择器也称为包含选择器，用来选择特定元素或元素组的后代，将对父元素的选择放在前面，对子元素的选择放在后面，中间加一个空格分开。后代选择器中的元素不仅仅只能有两个，对于多层祖先后代关系，只要对祖先元素的选择在后代元素之前、中间以空格分开即可。

例如：p空格span{color:red;}

子元素选择器

请注意这个选择器与后代选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一个后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。

例如：p>span{color:red;}

只会针对p标签内的第一级span标签有效

伪类选择器

有时候还会需要用文档以外的其他条件来应用元素的样式，比如鼠标悬停等。这时候我们就需要用到伪类了。

如：<a href=”#”></a>

A:link链接的政策状态

A:visited鼠标单击过的链接状态

A:hover鼠标放在链接上面的(悬停)状态

A:active当前正在访问的链接状态