CSS和选择器
一 、CSS介绍
CSS:Cascading Style Sheet,层叠样式表。CSS的作用就是给HTML页面标签添加各种样式,定义网页的显示效果。简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能。
CSS的最新版本是CSS3,但是我们目前学习的是CSS2.1
接下来讲讲我们为什么要使用CSS:
原因:HTML的缺陷
- 数据和显示没有分开
- 功能不够强大
- 不能够适应多种设备
- 要求浏览器必须智能化足够庞大
CSS 优点
- 使整个网站视觉效果一致
- 使开发效率提高了(代码的耦合性降低)
- 使数据和显示分开
- 降低网络流量
比方说:同一个样式多个页面需要用到如果用html来实现的话会很繁琐,但是用CSS的话只需要写一遍。所以现在html只提供数据和一些控件,而各种各样的样式完全交给css提供。
二、CSS选择器
css的选择器:1.基本选择器 2.高级选择器
1. 基本选择器
(1) 标签选择器
- 类型选择符就是以文档对象html中的标签作为选择符,即使用结构中元素名称作为选择符。例如body、div、p,img,em,strong,span…等。`
body{
color:gray;
font-size: 12px;
}
/*标签选择器*/
p{
color: red;
font-size: 20px;
}
span{
color: yellow;
}
(2) id选择器
- 同一个页面中id不能重复,因为id是唯一的(id唯一性)
- 任何的标签都可以设置id
- id命名规范 要以字母 可以有数字 下划线 - 大小写严格区分 aa和AA是两个不一样的属性值
#box{
background:green;
}
#box1{
color: red;
}
#box2{
font-size: 30px;
}
(3) class(类)选择器
- 所谓类:就是class . class与id非常相似 任何的标签都可以加类,但是类是可以重复,属于归类的概念。
- 同一个标签中可以携带多个类,用空格隔开
.boxColor{
color: green;
}
.big{
font-size: 40px;
}
.line{
text-decoration: underline;
}
<!-- 公共类 共有的属性 -->
<div>
<p class="boxColor big">段落1</p>
<p class="boxColor line">段落2</p>
<p class="line big">段落3</p>
</div>
2.高级选择器
(1) 后代选择器
使用**空格**表示后代选择器。顾名思义,父元素的后代(包括儿子,孙子,重孙子)
.father .granson{
color: red;
}
.father .son .granson{
color: yellowgreen;
}
<div class="father">
<div class="son">
<div class="grandson"></div>
</div>
</div>
(2) 子代选择器
使用**>**(大于号)表示后代选择器。顾名思义,父元素的子代(不包含孙子…)元素
.father>.son{
color: red;
}
.father>.son>.granson{
color: yellowgreen;
}
<div class="father">
<div class="son">
<div class="grandson"></div>
</div>
</div>
(3) 并集选择器
多个选择器之间使用**逗号**隔开。表示选中的页面中的多个标签。一些共性的元素,可以使用并集选择器
.box1, .box2, .box3{
border: 1px solid #999;
}
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
比如像重置样式
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
margin: 0;
padding: 0
}
(4) 交集选择器
使用.表示交集选择器。第一个标签必须是标签选择器,第二个标签必须是类选择器 语法:div.box
比如有一个
这样的标签。那么h4{
width: 100px;
font-size: 14px;
}
.active{
color: red;
text-decoration: underline;
}
/* 交集选择器 中间没有空格*/
h4.active{
background: #00BFFF;
}
3.CSS的伪类选择器
属性选择器
E[date~="val"] E[date|="val"] E[date^="val"] E[date$="val"] E[date*="val"]
/*根据属性查找*/
[date]{
color: red;
}
/*找到date属性的等于username的元素 字体颜色设为红色*/
div[date='username']{
color: yellow;
}
/*以....开头 ^*/
div[date^='user']{
color: #008000;
}
/*以....结尾 $*/
div[date$='vvip']{
color: red;
}
/*包含某元素的标签*/
div[date*="vip"]{
color: #00BFFF;
}
/*指定单词的属性*/
label[date~='user1']{
color: red;
}
input[type='text']{
background: red;
}
4.CSS的伪类选择器
伪类选择器一般会用在超链接a标签中,使用a标签的伪类选择器
a:link {color: red;} /* 未访问的链接状态 */
a:visited {color: green;} /* 已访问的链接状态 */
a:hover {color: blue;} /* 鼠标滑过链接状态 */
a:active {color: yellow;} /* 鼠标按下去时的状态 */
input:focus 选择获得焦点的输入框
说明:
1)当这4个超链接伪类选择符联合使用时,应注意他们的顺序,正常顺序为:
a,a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效;
2)为了简化代码,可以把伪类选择符中相同 的声明提出来放在a选择符中;
例如:a{color:red;} a:hover{color:green;}
表示超链接的三种状态都相同,只有鼠标划过变化颜色
再给大家介绍一种css3的选择器 nth-child()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*选中第一个元素*/
div ul li:first-child{
font-size: 20px;
color: red;
}
/*选中最后一个元素*/
div ul li:last-child{
font-size: 20px;
color: yellow;
}
/*选中当前指定的元素 数值从1开始*/
div ul li:nth-child(3){
font-size: 30px;
color: pink;
}
/*n表示选中所有,这里面必须是n, 从0开始的 0的时候表示没有选中*/
div ul li:nth-child(n){
font-size: 40px;
color: red;
}
/*偶数 或者是 odd */
div ul li:nth-child(2n){
font-size: 50px;
color: gold;
}
/*奇数 或者是 even */
div ul li:nth-child(2n-1){
font-size: 50px;
color: yellow;
}
/*隔几换色 就是5n+1,隔3换色就是4n+1 */
div ul li:nth-child(5n+1){
font-size: 50px;
color: blue;
}
</style>
</head>
<body>
<div>
<ul>
<li>1111111111</li>
<li>2222222222</li>
<li>3333333333</li>
<li>4444444444</li>
<li>5555555555</li>
<li>6666666666</li>
<li>7777777777</li>
<li>8888888888</li>
<li>9999999999</li>
<li>0000000000</li>
</ul>
</div>
</body>
</html>
6.CSS的伪元素选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*设置第一个首字母的样式*/
p:first-letter {
color: red;
font-size: 30px;
}
/* 在....之前 添加内容 这个属性使用不是很频繁 了解 使用此伪元素选择器一定要结合content属性*/
p:before {
content: 'alex';
}
/*在....之后 添加内容,使用非常频繁 通常与咱们后面要讲到布局 有很大的关联(清除浮动)*/
p:after {
content: '&';
color: red;
font-size: 40px;
}
</style>
</head>
<body>
<p>我是p标签</p>
</body>
</html>