系列文章目录
文章目录
7.1 CSS3 基本用法
7.1.1 CSS3 样式、应用样式
CSS3 样式
CSS3代码由样式表、样式、选择器和声明组成。
CSS3样式是 最小的效果渲染单元，由选择器和声明构成
div选择符｛声明1；声明2｝
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
p{font-size: 24px; color: #f00;}
</style>
</head>
<body>
<p>莫等闲、白了少年头，空悲切。</p>
</body>
</html>
应用样式
行内样式：把CSS3样式设置为HTML标签的style属性值
内部样式：把CSS3样式放在< style >标签
外部样式：把CSS3样式保存到独立的文本文件中
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
</style>
</head>
<body>
<p style="color:red;">红色字体</p>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
p { color:red; }
</style>
</head>
<body>
<p>红色字体</p>
</body>
</html>
7.1.2 CSS3 样式表
CSS3 样式表
< style >定义内部样式表
外部样式必须导入网页文档中才能有效。
- 使用< link >标签导入
- 使用@import关键字导入
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="style1.css" rel="stylesheet" type="text/css" />
<style type="text/css">
@import url("style2.css");
</style>
</head>
<body>
<p>莫等闲、白了少年头，空悲切。</p>
</body>
</html>
7.1.3 CSS3 继承性、层叠性
继承性
后代元素可以继承祖先元素样式
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {font-size:12px;}
</style>
</head>
<body>
<article>
<h1>游子吟</h1>
<p>慈母手中线，游子身上衣。</p>
<p>临行密密缝，意恐迟迟归。</p>
<p>谁言寸草心，报得三春晖。</p>
<section>
<h2>翻译</h2>
<article>
<p>慈母用手中的针线，为远行的儿子赶制身上的衣衫。临行前一针针密密地缝缀，怕的是儿子回来得晚衣服破损。有谁敢说，子女像小草那样微弱的孝心，能够报答得了像春晖普泽的慈母恩情呢？</p>
</article>
</section>
</article>
</body>
</html>
层叠性
通配选择器 0
标签选择器 1
伪元素伪对象选择器1
类选择器 10
ID选择器 100
style行间 1000
！important 10000
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
article p { font-size:18px;}
article section p { font-size:14px;}
</style>
</head>
<body>
<article>
<h1>游子吟</h1>
<p>慈母手中线，游子身上衣。</p>
<p>临行密密缝，意恐迟迟归。</p>
<p>谁言寸草心，报得三春晖。</p>
<section>
<h2>翻译</h2>
<article>
<p>慈母用手中的针线，为远行的儿子赶制身上的衣衫。临行前一针针密密地缝缀，怕的是儿子回来得晚衣服破损。有谁敢说，子女像小草那样微弱的孝心，能够报答得了像春晖普泽的慈母恩情呢？</p>
</article>
</section>
</article>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
article p { font-size:18px;}
section p { font-size:14px;}
</style>
</head>
<body>
<article>
<h1>游子吟</h1>
<p>慈母手中线，游子身上衣。</p>
<p>临行密密缝，意恐迟迟归。</p>
<p>谁言寸草心，报得三春晖。</p>
<section>
<h2>翻译</h2>
<article>
<p>慈母用手中的针线，为远行的儿子赶制身上的衣衫。临行前一针针密密地缝缀，怕的是儿子回来得晚衣服破损。有谁敢说，子女像小草那样微弱的孝心，能够报答得了像春晖普泽的慈母恩情呢？</p>
</article>
</section>
</article>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
section p { font-size:14px;}
article p { font-size:18px;}
</style>
</head>
<body>
<article>
<h1>游子吟</h1>
<p>慈母手中线，游子身上衣。</p>
<p>临行密密缝，意恐迟迟归。</p>
<p>谁言寸草心，报得三春晖。</p>
<section>
<h2>翻译</h2>
<article>
<p>慈母用手中的针线，为远行的儿子赶制身上的衣衫。临行前一针针密密地缝缀，怕的是儿子回来得晚衣服破损。有谁敢说，子女像小草那样微弱的孝心，能够报答得了像春晖普泽的慈母恩情呢？</p>
</article>
</section>
</article>
</body>
</html>
7.2 CSS3 选择器
7.2.1 标签选择器、类选择器
标签选择器
根据HTML标签名匹配同类型的所有标签，精确度不够。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p { font-size:14px; color:#444;}
</style>
</head>
<body>
<article>
<h1>游子吟</h1>
<p>慈母手中线，游子身上衣。</p>
<p>临行密密缝，意恐迟迟归。</p>
<p>谁言寸草心，报得三春晖。</p>
<section>
<h2>翻译</h2>
<article>
<p>慈母用手中的针线，为远行的儿子赶制身上的衣衫。临行前一针针密密地缝缀，怕的是儿子回来得晚衣服破损。有谁敢说，子女像小草那样微弱的孝心，能够报答得了像春晖普泽的慈母恩情呢？</p>
</article>
</section>
</article>
</body>
</html>
类选择器
以点号为前缀后面为类名
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 颜色类 */
.red { color: #f00; }
/* 下划线类 */
.underline { text-decoration: underline; }
/* 斜体类 */
.italic { font-style: italic; }
</style>
</head>
<body>
<article>
<h1>游子吟</h1>
<p class="underline">慈母手中线，游子身上衣。</p>
<p class="red italic underline">临行密密缝，意恐迟迟归。</p>
<p class="italic">谁言寸草心，报得三春晖。</p>
</article>
</body>
</html>
7.2.2 ID 选择器、包含选择器
ID 选择器
#为前缀后面为ID名称
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#tangshi {/* ID样式 */
width:300px; /* 固定宽度 */
border:solid 2px red; /* 红色实线边框 */
margin:auto; /* 网页居中显示 */
text-align:center; /* 文本在框内居中显示 */
}
</style>
</head>
<body>
<article id="tangshi">
<h1>游子吟</h1>
<p>慈母手中线，游子身上衣。</p>
<p>临行密密缝，意恐迟迟归。</p>
<p>谁言寸草心，报得三春晖。</p>
</article>
</body>
</html>
包含选择器
通过空格连接两个选择器，前面选择器包含祖先，后面选择器包含后代。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
header h1{ font-size:18px;}
footer h1 {font-size:12px;}
</style>
</head>
<body>
<header>
<h1>网页标题</h1>
</header>
<footer>
<h1>页脚标题</h1>
</footer>
</body>
</html>
7.2.3 子选择器、相邻选择器
子选择器
用>连接两个选择器，前面选择要匹配的父元素，后面选择器表示被包含的匹配子对象
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
article p { font-size: 14px; color:#666; }
article > p { font-size: 20px; color:#000; }
</style>
</head>
<body>
<article>
<p>慈母手中线，游子身上衣。临行密密缝，意恐迟迟归。谁言寸草心，报得三春晖。</p>
<section>
<p>慈母用手中的针线，为远行的儿子赶制身上的衣衫。临行前一针针密密地缝缀，怕的是儿子回来得晚衣服破损。有谁敢说，子女像小草那样微弱的孝心，能够报答得了像春晖普泽的慈母恩情呢？</p>
</section>
</article>
</body>
</html>
相邻选择器
用+连接两个选择器，前面选择要匹配特定元素，后面根据结构关系指定同级、相邻的匹配元素
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
article p { font-size: 14px; color:#666; }
h1 + p { font-size: 20px; color:#000; }
</style>
</head>
<body>
<article>
<h1>游子吟</h1>
<p>慈母手中线，游子身上衣。</p>
<p>临行密密缝，意恐迟迟归。</p>
<p>谁言寸草心，报得三春晖。</p>
</article>
</body>
</html>
7.2.4 兄弟选择器、属性选择器
兄弟选择器
用~连接两个选择器，前面选择要匹配特定元素，后面根据结构关系指定同级、相邻的匹配元素
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
article { font-size: 14px; color:#666; }
h1 ~ p { font-size: 20px; color:#000; }
</style>
</head>
<body>
<article>
<h1>游子吟</h1>
<p>慈母手中线，游子身上衣。</p>
<p>临行密密缝，意恐迟迟归。</p>
<p>谁言寸草心，报得三春晖。</p>
</article>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
h1, h2, h3, h4, h5, h5, h6 {
margin: 0; /* 清除标题的默认外边距 */
margin-bottom: 10px; /* 使用下边距拉开标题距离 */
}
</style>
</head>
<body>
<article>
<h1>游子吟</h1>
<p>慈母手中线，游子身上衣。</p>
<p>临行密密缝，意恐迟迟归。</p>
<p>谁言寸草心，报得三春晖。</p>
</article>
</body>
</html>
属性选择器
根据标签的属性来匹配元素 ，使用[ ] 进行标识
E表示匹配元素的选择符，可以省略；中括号为属性选择器标识符，不可或缺；attr表示HTML属性名，value 表示HTML属性值
7.2.5 结构伪类选择器、否定伪选择器
结构伪类选择器
E:last-child 选择父元素的倒数第一个子元素E，相当于E:nth-last-child(1) 3
E:nth-child(n) 选择父元素的第n个子元素，n从1开始计算 3
E:nth-last-child(n) 选择父元素的倒数第n个子元素，n从1开始计算 3
E:first-of-type 选择父元素下同种标签的第一个元素，相当于E:nth-of-type(1) 3
E:last-of-type 选择父元素下同种标签的倒数第一个元素，相当于E:nth-last-of-type(1) 3
E:nth-of-type(n) 与:nth-child(n)作用类似，用作选择使用同种标签的第n个元素 3
E:nth-last-of-type 与:nth-last-child作用类似，用作选择同种标签的倒数第一个元素 3
E:only-child 选择父元素下仅有的一个子元素，相当于E:first-child:last-child或E:nth-child(1):nth-last-child(1) 3
E:only-of-type 选择父元素下使用同种标签的唯一子元素，相当于E:first-of-type:last-of-type或E:nth-of-type(1):nth-last-of-type(1) 3
E:empty 选择空节点，即没有子元素的元素，而且该元素也不包含任何文本节点 3
E:root 选择文档的根元素，对于HTML文档，根元素永远HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style>
/*列表样式*/
ul { list-style-type: none; margin: 0; padding: 0; font-size: 14px; }
ul li { background: url(images/top10-bullet.png) no-repeat 2px 10px; padding-left: 24px; line-height: 30px; }
li a { text-decoration: none; color:#444; }
/*结构伪类应用*/
li:first-child { background-position: 2px 10px; }
li:last-child { background-position: 2px -277px;}
li:nth-child(2) { background-position: 2px -31px;}
li:nth-child(3) { background-position: 2px -72px; }
li:nth-child(4) { background-position: 2px -113px; }
li:nth-child(5) { background-position: 2px -154px; }
li:nth-child(6) { background-position: 2px -195px; }
li:nth-child(7) { background-position: 2px -236px; }
</style>
</head>
<body>
<ul>
<li><a href="#">:first-child：匹配第一个子元素。</a></li>
<li><a href="#">:last-child：匹配最后一个子元素。</a></li>
<li><a href="#">:nth-child()：按正序匹配特定子元素。</a></li>
<li><a href="#">:nth-last-child()：按倒序匹配特定子元素。</a></li>
<li><a href="#">:nth-of-type()：在同类型中匹配特定子元素。</a></li>
<li><a href="#">:nth-last-of-type()：按倒序在同类型中匹配特定子元素。</a></li>
<li><a href="#">:first-of-type：匹配第一个同类型子元素。</a></li>
<li><a href="#">:last-of-type：匹配最后一个同类型子元素。</a></li>
</ul>
</body>
</html>
否定伪选择器
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style>
p { font-size: 24px; }
p:not(.author){ font-size: 14px; }
</style>
</head>
<body>
<h2>虞美人·春花秋月何时了</h2>
<p class="author">李煜 </p>
<p>春花秋月何时了？往事知多少。小楼昨夜又东风，故国不堪回首月明中。 </p>
<p>雕栏玉砌应犹在，只是朱颜改。问君能有几多愁？恰似一江春水向东流。 </p>
</body>
</html>
7.2.6 状态伪选择器、目标伪类选择器
状态伪选择器
CSS3 包含以下三个UI状态伪类选择器
E:enabled : 匹配指定范围内所有可用的UI元素。
E:disabled : 匹配指定范围内所有不可用的UI元素。
E:checked : 匹配指定范围内所有选择的UI元素。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style>
input[type="checkbox"] ~ input[type="submit"] {display:none; }
input[type="checkbox"] ~ span {display:inline; }
input[type="checkbox"]:checked ~ input[type="submit"] {display:inline; }
input[type="checkbox"]:checked ~ span {display:none; }
</style>
</head>
<body>
<form action="#">
<h1>用户协议</h1>
<p>协议具体内容</p>
<p>......</p>
<p><input type="checkbox">同意 <br><br>
<input type="submit" value="提交协议" /><span>注意，请认真阅读协议条款，如果同意请勾选上面复选框。</span></p>
</form>
</body>
</html>
目标伪类选择器
（E：target）表示选择匹配 E 的所有元素，且匹配元素被相关URL指向。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 设计导航条固定在窗口右上角位置显示 */
h1{ position:fixed; right:12px; top:24px;}
/* 让锚点链接堆叠显示*/
h1 a{ display:block;}
/* 设计锚点链接的目标高亮显示*/
h2:target { background:hsla(93,96%,62%,1.00); }
</style>
</head>
<body>
<h1><a href="#p1">图片1</a> <a href="#p2">图片2</a> <a href="#p3">图片3</a> <a href="#p4">图片4</a> </h1>
<h2 id="p1">图片1</h2>
<p><img src="images/1.jpg" /></p>
<h2 id="p2">图片2</h2>
<p><img src="images/2.jpg" /></p>
<h2 id="p3">图片3</h2>
<p><img src="images/3.jpg" /></p>
<h2 id="p4">图片4</h2>
<p><img src="images/4.jpg" /></p>
</body>
</html>
7.2.7 动态伪类选择器、伪对象选择器
动态伪类选择器
与用户交互时有效
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style>
body { background:#fcc;} /* 浅色网页背景 */
label {
display:inline-block;
margin-right:6px;
width:3em;
text-align:right;
}
input[type="text"], input[type="password"] {
padding: 4px;
width:10em;
border:solid 1px #f99;
}
input[type="submit"] {/* 默认样式 */
margin-left:4.2em;
border:solid 1px; /* 定义1像素实线边框 */
padding: 0.5em 3em; /* 增加补白，显示更大方 */
color: #444; /* 深灰色字体 */
background: #f99; /* 深红色背景 */
border-color: #fff #aaab9c #aaab9c #fff; /* 分配边框颜色 */
zoom:1; /* 解决IE浏览器无法显示问题*/
}
input[type="submit"]:hover {/* 鼠标经过时样式 */
color: #800000; /* 字体颜色 */
background: transparent; /* 清除背景色 */
border-color: #aaab9c #fff #fff #aaab9c; /* 分配边框颜色 */
}
</style>
</head>
<body>
<h2>用户登录</h2>
<form id="login" action="#" method="post">
<label for="email">Email</label>
<input type="text" id="email" name="email"/><br><br>
<label for="password">密码</label>
<input type="password" id="password" name="password"/><br><br>
<input type="submit" name="commit" value="登 录"/>
</form>
</body>
</html>
伪对象选择器
匹配内容变化的对象，以：为语法标识符。冒号前可以添加选择符，限定伪对象应用的范围，冒号后为伪对象名称，冒号前没有空格。
经常会遇到的伪对象选择器主要有以下几个：
-
：before 选择器在被选元素的内容前面插入内容。
-
：after 选择器在被选元素的内容后面插入内容。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style>
p{ font-size:18px; line-height:1.6em;}
/* 在段落文本前添加动态内容 */
p:before { content: '路';}
p:first-letter {/* 段落文本中第一个字符样式 */
float:left; /* 靠左浮动*/
font-size:60px; /* 特大号字体 */
font-weight:bold; /* 加粗显示 */
margin:26px 6px; /* 调整间距 */
}
p:first-line {/* 段落文本中第一行字符样式 */
color:red;
font-size:24px;
text-shadow:2px 2px 2px rgba(147,251,64,1); /* 浅色文本阴影 */
}
</style>
</head>
<body>
<p>希望本是无所谓有，无所谓无的。这正如地上的路；其实地上本没有路，走的人多了，也便成了路。 </p>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
