什么是CSS？
- CSS全称为层叠样式表（Cascading Style Sheet）,通常又称为风格样式表（Style Sheet），它是用来进行网页风格设计的。使用层叠样式表，还可以精确地定位网页元素位置，美化网页外观。
CSS发展史
- 1996年12月推出了CSS规范的第一版，即CSS1.0版本。
- 1998年5月W3C发布了CSS的第二版，即CSS2.0版本。（DIV块 + CSS,HTML与CSS结构分离的思想，网页变得简单，SEO）
- 2004年W3C升级了CSS2.0版本，变为CSS2.1版本。（浮动，定位）
- 2010年W3C推出了CSS3版本，它包括CSS2.1的所以功能，是目前最新版。（圆角,阴影，动画…… 浏览器兼容性~）
练习格式
CSS3的基本语法结构
1.CSS规则由两部分组成，选择器和声明。
2.声明必须放在大括号中，声明可以是多条。
3.每条声明由一个属性和值组成，属性和值用冒号分开，每条语句以英文分号结尾。
注意：在CSS一条声明中，基于W3C标准规范考虑，建议都以";"结束。
选择器{
声明1;
声明2;
声明3;
}
style标签
- style标签建议写在head标签内
- 在style标签里面可以写css的样式
- 这是没有和html代码分离的写法（不建议，练习的时候代码少可以这样写）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<style> 可以编写css代码
语法:
选择器{
声明1;
声明2;
声明3;
}
-->
<style>
h1{
<!--设置字体颜色-->
color: crimson;
}
</style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
CSS的优势：
- 内容和表现分离
- 网页结构表现统一，可以实现复用
- 样式十分丰富
- 建议使用独立于html的css文件
- 利用SEO，容易被搜索引擎收录！
CSS的3种导入方式
优先级：行内样式>内部样式>外部样式
-
行内样式
- 行内样式就是在HTML标签中直接使用style属性设置CSS样式。
<h1 style="color:red;">style属性的应用<h1> <p style="font-size:14px;color:green;">直接在HTML标签中设置样式</p> -
内部样式
- 把CSS代码写在< head >的< style >标签中，与HTML内容位于同一个HTML文件中。
-
外部样式
- 链接外部样式表
<!-- rel="stylesheet"是指页面中使用这个外部样式表 type="text/css"是指文件的类型是样式表文本 --> <head> …… <link href="样式表地址" rel="stylesheet" type="text/css"/> …… </head>- 导入外部样式表
<!--@import表示导入文件，前面必须有一个@符号--> <head> <style> @import url("样式表位置") </style> </head>
链接式和导入式的区别
- 它们的本质都是将一个独立的CSS样式表引用到HTML页面中，但是两者还是有一些
- 标签属于XHTML范畴。而@import是CSS2.1中特有
-
使用时先将外部CSS文件加载到网页中再进行显示，即使网速再慢也是一样的效果。
-
使用@import导入的CSS文件，浏览页面时先将HTML结构呈现出来，再把外部CSS文件加载到网页当中，最终的效果与使用效果一样，网速较慢时会先显示没有CSS布局的HTML网页。
CSS选择器
基本选择器
作用：选择页面上的某一个或一些元素
1. 标签选择器
<!--
一个HTML网页由很多的标签组成，如<h1>~<h6>、<p>、<img/>等，CSS标签选择器就是用来声明这些标签的。
每个HTML标签的名称都可以作为相应的标签选择器名称。
-->
标签名{
font-size:字体大小；
color:字体颜色；
}
缺点：选中一个标签，页面中所有的相同与它相同的标签都跟随改变
2. 类选择器
- 定义好类名，去给标签加上class属性，值为类名称
- 优点：可以多个标签归类，同一个class，可以复用
.cgz{
<!--设置字体大小-->
font-size:16px;
}
.cgz2{
font-size:20px;
}
<!--使用样式-->
<!--<标签名 calss="类名称">标签内容</标签名>-->
<P class="cgz">搜嘎</P>
<p class="cgz2">呦西</p>
CSS选择器命名规范：
- 使用英文字母小写
- 不要和ID选择器同名
- 使用具有语义化的单词命名
- 长名称或词组可以使用驼峰命名方式选择器命名。
3. id选择器
- id选择器在页面中只能使用一次，也就是说在同一个页面中同一个id属性只能设置一次；
- id名用的是 # 号，class名用的是 .
#cgz{
<!--设置字体大小-->
font-size:16px;
}
#cgz2{
font-size:20px;
}
<!--<标签名 id="id名称">标签内容</标签名>-->
<P id="cgz">搜嘎</P>
<p id="cgz2">呦西</p>
三种基本选择器的优先级：ID选择器>class类选择器>标签选择器
高级选择器
1.层次选择器
1.后代选择器
- 后代选择器的作用就是可以选择某元素的后代元素。
- 例如"E F",E为祖先元素，F为后代元素，那么F元素无论是E元素的子元素、孙辈元素，或者更深层次的关系，都将被选中。
2.子选择器
- 子选择器(E>F),只能选择某元素的子元素，其中E为父元素。
3.相邻兄弟选择器
- 相邻兄弟选择器(E+F)可以紧接着另一个元素后面的元素，它们有一个相同的父级元素，换句话说，E和F是同辈元素，F元素在E元素后面，并且相邻。
4.通用兄弟选择器
- 通用兄弟选择器(E ~F )用于选择某元素后面的所有兄弟元素，它和相邻兄弟选择器类似，需要在同一个父元素之中。也就是说E和F都是同辈元素，并且F元素在E元素之后，E~F将选中E元素后面的所有F元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*后代选择器:选中body下的所有p标签(选中的这些p标签全是body的后代)*/
body p{
background: red;
}
/*子选择器:选中body的儿子p标签(选中的p标签只是body的儿子)*/
body >p{
background: lightcoral;
}
/*相邻兄弟选择器:选中p标签后面紧接着的同级p标签,它们是同一个爹*/
.p1 +p{
background: lightseagreen;
}
/*通用兄弟选择器:选中的是跟p标签所有同级的p标签*/
.p1 ~p{
background: yellow;
}
</style>
</head>
<body>
<p class="p1">p1</p>
<p class="p2">p2</p>
<p class="p3">p3</p>
<ul>
<li><p class="p4">p4</p></li>
<li><p class="p5">p5</p></li>
<li><p class="p6">p6</p></li>
</ul>
<p class="p7">p7</p>
<p class="p8">p8</p>
</body>
</html>
2.结构伪类选择器
| 不分类型 |
|---|
E:first-child 作为父元素的第一个子元素的元素E |
E:last-child 作为父元素的最后一个子元素的元素E |
E F:nth-child(n) 选择父级元素E的第n个子元素F，(n可以是1、2、3)，关键字为even、odd |
| 分类型 |
|---|
E:first-of-type 选择父元素内具有指定类型的第一个E元素 |
E:last-of-type 选择父元素内具有指定类型的最好一个E元素 |
E F:nth-of-type(n) 选择父元素内具有指定类型的第n个F元素 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*选中ul的第一个子元素*/
ul li:first-child{
background: lightblue;
}
/*ul的最后一个子元素*/
ul li:last-child{
background: lightcoral;
}
/*
选中p1：定位到父元素，选择当前第一个元素(不分类型)
*/
p:nth-child(2){
background: lightsalmon;
}
/*选中父元素第一个类型为p的子元素*/
p:first-of-type{
background: lightgray;
}
/*选中父元素最后一个类型为p的子元素*/
p:last-of-type{
background: magenta;
}
/*选中父元素第二个类型为p的子元素、*/
p:nth-of-type(3){
background: yellow;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>
3.属性选择器
E[attr] |
用来选择某个具有属性的元素，无论这个属性值是什么 |
|---|---|
E[attr=val] |
元素E设置了属性attr，并且属性值是val才能被选中 |
E[attr*=val] |
属性值中包含字符串val就能被选中 |
E[attr^=val] |
属性attr的属性值是以val开头的 |
E[attr$=val] |
属性attr的属性值是以val结尾的 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*这个是后面学的，不用认识*/
.demo a{
float: left;
display: block;
height: 50px;
width: 50px;
border-radius: 10px;
background: lightcoral;
text-align: center;
color: darkgray;
line-height: 50px;
margin-right: 5px;
font: bold 20px/50px Arial;
}
/*存在id属性的元素*/
a[id]{
background: lightblue;
}
/*存在href="abc"的元素*/
a[href="abc"]{
background: lemonchiffon;
}
/*选中存在href属性，并且值里有doc元素*/
a[href*=doc]{
background: lightgreen;
}
/*选中存在href属性并且值以ima开头的元素*/
a[href^=ima]{
background: maroon;
}
/*选中存在href属性并且值以pdf结尾的元素*/
a[href$=pdf]{
background: moccasin;
}
</style>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="links item first" id="first">1</a>
<a href="" class="links item active" target="_blank" title="test">2</a>
<a href="images/123.html" class="link item">3</a>
<a href="images/123.png" class="link item">4</a>
<a href="images/123.jpg" class="link item">5</a>
<a href="abc" class="link item">6</a>
<a href="/a.pdf" class="link item">7</a>
<a href="/abc.pdf" class="link item">8</a>
<a href="abc.doc" class="link item">9</a>
<a href="abcd.doc" class="link item">10</a>
</p>
</body>
</html>