- 层叠样式表(Cascading Style Sheets)
- CCS可以用来为网页创建样式表，通过样式表可以对网页进行装饰
- 所谓层叠，可以将整个网页想象成是一层一层的结构，层次高的将会覆盖层次低的；
- 而CSS就可以分别为网页的各个层次设置样式。
1.内联样式与内部样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS</title>
<!--
内部样式表：只能对当前页面起作用
也可以将CSS样式编写到head中的style标签中
将样式表编写到style标签中，然后通过css选择器选中指定的元素
然后可以同时为这些元素一起设置样式，这样可以是样式进一步的复用
将样式表编写到style标签中，也可以使表现和结构进一步的分离，它也是我们推荐的使用方式
-->
<style type="text/css">
p{
color: red;
font-size: 20 px;
}
</style>
</head>
<body>
<!--
可以将CSS样式编写到元素的style属性当中
将样式直接编写到style属性中，这种样式我们成为内联样式
内联样式只对当前的元素中的内容起作用
内联样式属于结构与表现耦合，不方便后期的维护，不推荐使用
<p style="color: brown;font-size: 40 px;">锄禾日当午，汗滴禾下土</p>
<p style="color: brown;font-size: 40 px;">谁知盘中餐，粒粒皆辛苦。</p>
-->
<p>锄禾日当午，汗滴禾下土</p>
<p>锄禾日当午，汗滴禾下土</p>
<p>锄禾日当午，汗滴禾下土</p>
<p>锄禾日当午，汗滴禾下土</p>
<p>锄禾日当午，汗滴禾下土</p>
</body>
</html>
2.外部样式表
/* style.css*/
p{
color: red;
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS</title>
<!--
还可以将样式表编写到外部的css文件中,然后通过link标签将外部的CSS稳健引入到当前页面中
这样外部文件中的CSS样式表将会应用到当前页面中，
将CSS样式统一编写到外部样式表中，完全使得结构与表现分离，可以使得样式表在不同的页面中使用，
最大限度地使样式进行复用，将样式统一写在样式表中，然后通过link标签引入，可以利用浏览器的缓存
加快用户的访问速度，所以在开发中，推荐使用的方式是外部样式表
-->
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<p>锄禾日当午，汗滴禾下土</p>
<p>锄禾日当午，汗滴禾下土</p>
<p>锄禾日当午，汗滴禾下土</p>
<p>锄禾日当午，汗滴禾下土</p>
<p>锄禾日当午，汗滴禾下土</p>
</body>
</html>
3.块元素和内联元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS</title>
</head>
<body>
<!--
块元素和内联元素
div就是一个块元素，
所谓的块元素就是独占一行的元素,无论内容有多少，他都会独占一行
并且不会为它里面的元素设置任何默认样式
div元素主要是用来对页面进行布局的
span是一个内联元素（行内元素）
所谓的行内元素，指的是只占自身大小的元素，不会占用一行
常见的内联元素：
a img iframe span
span没有任何语义，span标签专门用来选中文字，
然后为文字来设置样式
a元素可以包含除了它本身的任意元素
p元素是一个块元素，但不能包含任何其他的块元素
块元素只要用来做页面中的布局
内联元素主要是为了选中文本设置样式，一般情况下，只是用块元素去包含内联元素
-->
<div style="background-color: red;">我是一个div</div>
<div style="background-color:yellow;">我是一个div</div>
<hr />
<span>我是一个span元素</span>
<span>我是一个span元素</span>
<span>我是一个span元素</span>
<span>我是一个span元素</span>
<span>我是一个span元素</span>
<span>我是一个span元素</span>
</body>
</html>
4.常用的选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用选择器</title>
<style type="text/css">
/*为标签中的所有p元素，设置一个字体颜色为红色*/
/*
元素选择器
作用：通过元素选择器可以选择页面中的所有指定元素
语法：标签名
*/
/* p{
color: red;
}
h1{
color: yellow;
} */
/*
id选择器：
- 通过元素id属性值选中唯一的一个元素,不能重复
- 语法：
#id属性值{}
*/
#p1{
font-size: 20px;
}
/*
类选择器：
- 通过元素的class属性值选中一组元素
- 语法：
.class属性值{}
- 可以同时为一个元素设置多个class属性值，多个值之间用空格隔开
*/
.p2{
color: blue;
}
.hello{
font-size: 50px;
}
/*
为id为p1的元素，class为p2的元素，还有h1，同时设置一个背景颜色为黄色
选择器分组(并集选择器)
- 通过选择器分组可以同时选中多个选择器对应的元素
- 语法：选择器1，选择器2，...选择器N{}
*/
#p1,.p2,.hello{
background-color: antiquewhite;
}
/*
通配选择器
- 用来选择页面中的所有元素
语法：*{}
*/
/* *{
color: pink;
} */
/*
为拥有class p3 span元素设置一个背景颜色为黄色
复合选择器（交集选择器）
- 作用：
- 可以选中同时满足多个选择器的元素
- 语法
- 选择器1选择器2...选择器N{}
*/
p.p3{
background-color: aquamarine;
}
</style>
</head>
<body>
<h1>悯农</h1>
<p>锄禾日当午</p>
<p>锄禾日当午</p>
<p id="p1">锄禾日当午</p>
<!--
可以为元素设置class属性
class属性与id属性类似，只不过class属性可以重复
-->
<p class="p2 hello">锄禾日当午</p>
<p class="p2">锄禾日当午</p>
<p class="p2">锄禾日当午</p>
<p>锄禾日当午</p>
<p>锄禾日当午</p>
<p class="p3">锄禾日当午</p>
<span class="p3">汗滴禾下土</span>
</body>
</html>
5.子元素和后代元素选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*
1、为div中span元素设置为绿色
后代元素选择器：
- 作用：
- 选中指定元素的指定后代元素
- 语法：
祖先元素 后代元素{}
*/
#p1 span {
color: green;
}
/*
2、选中id为p1的div的p元素中的span元素
*/
#p1 p span{
color: red;
font-size: 40px;
}
/*
为div的子元素span设置一个背景颜色为黄色
子元素选择器：
- 作用：
- 选中指定父元素的指定子元素
- 语法：
- 父元素 > 子元素
*/
div>span{
background-color: yellow;
}
</style>
</head>
<!--
以下代码中，p是div的子元素，span是p的子元素
元素之间的关系：
父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或者间接包含后代元素的元素
后代元素：直接或者间接被祖先元素包含的元素，子元素也是后代元素
兄弟元素：拥有相同父元素的元素叫做兄弟元素
-->
<body>
<div id="p1">
<span>我是div标签中的span</span>
<p>
<span>
我是p标签中的span
</span>
</p>
</div>
<div>
<span>
我是body中的span元素
</span>
</div>
</body>
</html>
6.伪类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器</title>
<style type="text/css">
/*
伪类选择器专门用来表示元素的一种特殊的状态
比如，访问过的超链接，比如普通的超链接，比如获取焦点的文本框
我们要处理处在这些状态的元素设置样式时，就可以使用伪类
*/
/*
为没访问过的连接设置一个颜色为绿色
:link
- 表示一个普通的连接
*/
a:link{
color: red;
font-size: 50px;
}
/*
为访问过的连接设置一个颜色为红色
:visited
- 表示一个访问过的连接
浏览器是通过历史记录来判断一个连接是否访问过
由于涉及到了用户隐私问题，所以使用visited伪类只能设置字体的颜色
*/
a:visited{
color: blue;
}
/*
:hover伪类表示鼠标移入的状态
*/
a:hover{
color:pink;
}
/*
:active伪类表示超链接被点击的状态
*/
a:active{
color: blueviolet;
}
/*
:hover和:active对于其他元素也可以使用
但是在IE6中，仅有a标签可以
*/
/* p:active{
color: aquamarine;
} */
/*
文本框获取焦点以后，修改背景颜色为黄色
*/
input:focus{
background-color: yellow;
}
/*
为p标签中选中的内容设置样式
可以使用:::selection伪类表示选中类容的状态
*/
p::selection{
background-color: orange;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">访问过的连接</a>
<br/><br/>
<a href="http://www.baidu123456.com">未访问过的连接</a>
<p>我是一个p标签</p>
<!--
使用input可以创建一个文本输入框
-->
<input type="text"/>
</body>
</html>
7.伪元素选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>为元素</title>
<style type="text/css">
/*
使用伪元素来表示元素中的一些特殊的位置
*/
/*
为p中的第一个字符来设置一个特殊的样式
*/
p::first-letter{
color: antiquewhite;
font-size: 40px;
}
/*
为p的第一行来设置一个特殊的格式
*/
p::first-line{
color: aquamarine;
font-size: 20px;
}
/*
::before表示元素最前面的部分
一般before都需要结合content这个样式一起使用
通过content可以向before或者after的位置添加一些内容
*/
p::before{
content: "今天星期天,不上班";
color: blue;
}
p::after{
content: "你在想屁吃";
color: blue;
}
</style>
</head>
<body>
<p>我是一个段落1111111111111111111111111111111111111111111111111111111111111111111222222222222222222222222222222222222222222222222222222222222222222222222111。</p>
</body>
</html>
8.子元素的伪类
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>子元素的伪类</title>
<style type="text/css">
/*
为第一个p标签设置背景颜色为黄色
:first-child 可以选中第一个子元素 无论它的父类是谁
*/
/* body > p:first-child{
background-color: yellow;
} */
/* div:last-child{
background-color: yellow;
} */
/*
:nth-child() 可以选中任意位置的子元素
该选择器的后面可以选定一个特定的参数，指定要选择第几个参数
可以放入 even odd
*/
/* p:nth-child(2){
background-color: aquamarine;
} */
/*
:first-of-type
:last-of-type
:nth-of-type
和 :first-child这些类似
只不过child是指所有的子元素中排列
但是type实在当前类型的子元素中排列
*/
p:first-of-type{
background-color: aqua;
}
</style>
</head>
<body>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<div>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
</div>
</body>
</html>
9.兄弟元素选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>兄弟元素选择器</title>
<style type="text/css">
/*
为span后的一个p元素设置一个背景颜色为黄色
后一个兄弟元素选择器
作用：
可以选中一个元素后的紧挨着的指定的元素的兄弟元素
*/
/* span + p{
background-color: azure;
} */
/*
选中后边的所有兄弟元素
语法:前一个~后边所有
*/
span ~ p{
background-color: yellowgreen;
}
</style>
</head>
<body>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<span>我是一个span标签</span>
<div>我是一个div标签</div>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
</body>
</html>
10.边框属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>边框属性</title>
<style>
div{
border:1px solid red;
width:300px;
height:300px;
background-color: saddlebrown;
}
</style>
</head>
<body>
<div>这是一个div标签</div>
</body>
</html>
11.盒子模型
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>边框属性</title>
<style>
div{
border:1px solid red;
width:300px;
height:300px;
/*
内边距HTML元素里的内容体 到 HTML元素边框 的距离
*/
padding-top: 20px;
padding-left: 40px;
/*
外边距 HTML元素的距离 到 其他HTML的距离
*/
margin-top: 20px;
margin-left: 20px;
}
</style>
</head>
<body>
<span>这是一个span标签</span>
<div>这是一个div标签</div>
</body>
</html>
网友评论