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;
}