css简介及常用选择器

css简介

1、CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中

2、css的基本语法： 选择器 { 属性: 值 ; 属性: 值;}

3、Css 页面引入的方法：

	行内样式/内联样式：通过标签的 style 属性，在标签上直接写样式。

	

<div style="width:100px; height:100px; color:red "> </div>

	内嵌样式：通过 style 标签在网页上创建嵌入的样式。

<style type="text/css">
div{ width:100px; height:100px; color:red }
</style>

	外联样式：通过 link 标签，链接到外部样式表到页面中。

<link rel="stylesheet" type="text/css" href="css/main.css">

css选择器

1、标签选择器

		标签选择器，此种选择器影响范围大，建议尽量应用在层级选择器中。

*{margin:0;padding:0}   				<!-- *表示匹配所有的标签 -->
div{color:red；}
	<!-- 内嵌样式  外联样式-->


<div>....</div> <!-- 对应以上两条样式 -->

2、ID选择器

通过 id 名来选择元素，元素的 id 名称不能重复，所以一个样式设置项只能对

应于页面上一个元素，不能复用，id 名一般给程序使用，所以不推荐使用 id作为选择器。

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

#box{color:red；}				<!-- 内嵌样式  外联样式-->


<div id="box">....</div> <!-- 对应以上一条样式，其它元素不允许应用此样式 -->

3、类选择器

通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多 个

类，应用灵活，可复用，是 css 中应用最多的一种选择器

.red{color:red；}			<!-- 内嵌样式  外联样式-->

<div class="red"></div>

4、组选择器

多个选择器，如果有同样的样式设置，可以使用组选择器。

.box1,.box2,.box3{width:100px;height:100px}  				<!-- 使用英文逗号将选择器隔开-->

5、子选择器

子选择器仅是指它的直接后代，或者你可以理解为作用于子元素的第一个后代。而后代选择器是作用于所有子后代元素

h1 > strong{color：red；}

6、后代选择器

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

7、伪类选择器

Link表示链接在没有被点击时的样式。Visited表示链接已经被访问时的样式。Hover表示当鼠标悬停在链接上面时的样式。

8、通用选择器

通用选择器用*来表示

*{
font-size: 12px;
}