css概述
为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,CSS由此思想而诞生,CSS是 Cascading Style Sheets 的首字母缩写,意思是层叠样式表。有了CSS,html中大部分表现样式的标签就废弃不用了,html只负责文档的结构和内容,表现形式完全交给CSS,html文档变得更加简洁。
css基本语法
- css的定义方法是:
选择器 { 属性:值; 属性:值; 属性:值;}
选择器是将样式和页面元素关联起来的名称,属性是希望设置的样式属性,每个属性有一个或多个值。属性和值之间用冒号,一个属性和值与下一个属性和值之间用分号,最后一个分号可以省略,代码示例:
div{
width:100px;
height:100px;
background:gold;
}
css引入方式
css引入页面的方式有三种:
1、内联式:通过标签的style属性,在标签上直接写样式。
<div style="width:100px; height:100px; background:red ">
......
</div>
2、嵌入式:通过style标签,在网页上创建嵌入的样式表。
<style type="text/css">
div{ width:100px; height:100px; background:red }
......
</style>
3、外链式:通过link标签,链接外部样式文件到页面中。
<link rel="stylesheet" type="text/css" href="css/main.css">
样式选择器
1、标签选择器
标签选择器,此种选择器影响范围大,一般用来做一些通用设置,或用在层级选择器中。
举例:
div{color:red}
......
<div>这是第一个div</div> <!-- 对应以上样式 -->
<div>这是第二个div</div> <!-- 对应以上样式 -->
2、类选择器
通过类名来选择元素,一个类可应用于多个元素,一个元素上也可以使用多个类,应用灵活,可复用,是css中应用最多的一种选择器。
举例:
.blue{color:blue}
.big{font-size:20px}
.box{width:100px;height:100px;background:gold}
......
<div class="blue">....</div>
<h3 class="blue big box">....</h3>
<p class="blue box">....</p>
3、层级选择器
主要应用在标签嵌套的结构中,层级选择器,是结合上面的两种选择器来写的选择器,它可与标签选择器结合使用,减少命名,同时也可以通过层级,限制样式的作用范围。
举例:
.con{width:300px;height:80px;background:green}
.con span{color:red} # 只选择con下的span标签
.con .pink{color:pink}
.con .gold{color:gold}
......
<div class="con">
<span>....</span>
<a href="#" class="pink">....</a>
<a href="#" class="gold">...</a>
</div>
<span>....</span>
<a href="#" class="pink">....</a>
4、id选择器
通过id名来选择元素,元素的id名称不能重复,所以一个样式设置项只能对应于页面上一个元素,不能复用,id名一般给程序使用,所以不推荐使用id作为选择器。
举例:
#box{color:red}
......
<p id="box">这是一个段落标签</p> <!-- 对应以上一条样式,其它元素不允许应用此样式 -->
<p>这是第二个段落标签</p> <!-- 无法应用以上样式,每个标签只能有唯一的id名 -->
<p>这是第三个段落标签</p> <!-- 无法应用以上样式,每个标签只能有唯一的id名 -->
5、组选择器
多个选择器,如果有同样的样式设置,可以使用组选择器。
举例:
.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}
<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>
6、伪类选择器
常用的伪类选择器有hover,表示鼠标悬浮在元素上时的状态。
.box1:{width:100px;height:100px;background:gold;}
.box1:hover{width:300px;}