本教程案例在线演示
有路网 PC 端
有路网挪动端
收费配套视频教程
收费配套视频教程
教程配套源码资源
教程配套源码资源
思考对人的形容形式
人 {
身高:175cm;
体重:70kg;
肤色: 黄色
}CSS 根本语法结构
选择器 {
申明 1;
申明 2;
}
h1 {
font-size:12px;
color:#F00;
}
style 标签
<style type="text/css">
h1 {
font-size:12px;
color:#F00;
}
</style>
标签选择器
HTML 标签作为标签选择器的名称
<h1>…<h6>、<p>、<img/>p {font-size:16px;}
类选择器
< 标签名 class= “ 类名称 ”> 标签内容 </ 标签名 >
. 类名称 {font-size:16px;}
ID 选择器
< 标签名 id= “id 名称 ”> 标签内容 </ 标签名 >
#id 名称 {font-size:16px;}
标签选择器间接利用于 HTML 标签
类选择器可在页面中屡次应用
ID 选择器在同一个页面中只能应用一次
制作《浣溪沙》
应用标签选择器设置题目字体大小为 20px
页面中所有段落中的文本字体大小为 16px
应用类选择器设置注释和译文内容字体色彩为绿色
应用 ID 选择器设置译文题目色彩为蓝色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>《浣溪沙》</title>
<style type="text/css">
h1 {font-size: 20px;}
p {font-size: 16px;}
.poem {color: green;}
#title {color: blue;}
</style>
</head>
<body>
<h1> 浣溪沙 </h1>
<hr />
<p class="poem"> 一曲新词酒一杯，<br />
去年天气旧亭台。<br />
夕阳西下几时回？<br />
无可奈何花落去，<br />
似曾相识燕归来。<br />
小园香径独彷徨。</p>
<p id="title"> 译文 </p>
<p class="poem"> 听一支新曲喝一杯美酒，还是去年的天气旧日的亭台，西落的夕阳何时再回来？那花儿落去我也无可奈何，那归来的燕子似曾相识，在小园的花径上单独彷徨。</p>
</body>
</html>CSS 复合选择器
后辈选择器
交加选择器
并集选择器
后辈选择器
在 CSS 选择器中通过嵌套的形式，对非凡地位的 HTML 标签进行申明.
外层的标签写在后面，内层的标签写在前面，之间用空格分隔.
标签嵌套时，内层的标签成为外层标签的后辈.
h3 strong{color:blue; font-size:36px;}交加选择器
由两个选择器间接连贯形成，选中二者各自元素范畴的交加.
第一个必须是标签选择器，第二个必须是类选择器或者 ID 选择器.
选择器之间不能有空格，必须间断书写
p.txt{color:blue; line-height:28px;}
并集选择器
多个选择器通过逗号连贯而成.
利用并集选择器同时申明格调雷同款式.
h3,.first,.second,#end{
font-size:16px;
color:green;
font-weight:normal;
}
制作《花千骨大结局》
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
p strong,
h1 strong {color: red;}
</style>
</head>
<body>
<h1><strong> 花千骨 </strong> 大结局 </h1>
<p> 世间帝王轩辕郎、无所不知所不能西方彧卿（其实他就是超脱六界之外的异朽君）、妖魔两界圣君杀阡陌那时都是爱花千骨的，都心愿白子画可能善待花千骨。</p>
<p> 白子画的善待是八十一根消魂钉，一般仙一根消魂钉就死去活来。花千骨受了 17 根，又被白子画用断念剑看了近百剑，<strong> 花千骨心里那个苦楚显而易见 </strong>。而后，花千骨扔到地牢。白子画替她接受了剩下的消魂钉。<strong> 白子画 </strong>
在霓漫天的告知下，白子画的师兄摩严得悉花千骨竟然逆悖天理爱上白子画，用绝情水泼到花千骨的喉咙里，脸上，于是花千骨又瞎又哑又毁容，被发配到了简直不可能走进去的蛮荒之地。</p>
<strong> 花千骨又瞎又哑又毁容 </strong>
</body>
</html>HTML 中引入 CSS 款式
- 行内款式
- 外部样式表
- 内部样式表
行内款式
<h1 style="color:red;">style 属性的利用 </h1>
<p style="font-size:14px; color:green;"> 间接在 HTML 标签中设置的款式 </p>
外部样式表
CSS 代码写在 <head> 的 <style> 标签中长处
不便在同页面中批改款式
毛病
不利于在多页面间共享复用代码及保护，对内容与款式的拆散也不够彻底
内部样式表
CSS 代码保留在扩大名为.css 的样式表中.
HTML 文件援用扩大名为.css 的样式表，有两种形式
- 链接式
- 导入式
链接内部样式表
<head>
……
<link href="style.css" rel="stylesheet" type="text/css" />
……
</head>
导入内部样式表
<head>
……
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
</head>
CSS 继承个性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body{color:red;}
</style>
</head>
<body>
<p>
父级 P
<strong> 子级 strong</strong>
父级 P
</p>
<ul>
<li> 子级 li1</li>
<li> 子级 li2</li>
</ul>
</body>
</html>
子标签能够继承父标签的款式格调
子标签能够覆写父标签的款式，但不会影响父标签的款式格调
<h1> 勇气 </h1>
<p class="first"> 三年级时，我还是一个 <strong> 浑身是胆 </strong> 的小女孩，上课素来不敢答复老师提出的问题，惟恐答复错了老师会批评我。就始终没有这个勇气来答复老师提出的问题。学校举办的流动我也没勇气加入。</p>
<p id="second"> 到了三年级下学期时，咱们班上了一节公开课，老师提出了一个很 <strong> 简略 </strong> 的问题，班里很多同学都举手了，甚至问题比我差很多的，也举手了，还说着："我来，我来。" 我环视了周围，就我没有举手。</p>p{color:red;}
.first strong{color: blue}
CSS 的优先级
ID 选择器 > 类选择器 > 标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
p{color:red;}
.first{color:green;}
</style>
</head>
<body>
<p class="first" id="pid"> 三年级时，我还是一个 <strong> 浑身是胆 </strong> 的小女孩。</p></body>
</html>p 和.first 都匹配到了 p 这个标签上，green 是正确的色彩
在 html 文件中对于同一个元素能够有多个 css 款式存在，当有雷同权重的款式存在时，会依据这些 css 款式的前后程序来决定，处于最初面的 css 款式会被利用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
p{color:red;}
p{color:green;}
</style>
</head>
<body>
<p class="first" id="pid"> 三年级时，我还是一个 <strong> 浑身是胆 </strong> 的小女孩。</p>
</body>
</html>内联样式表（标签外部）> 嵌入样式表（以后文件中）> 内部样式表（内部文件中）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
p{color:red;}
p{color:blue;}
</style>
</head>
<body>
<p class="first" id="pid" style="color:green"> 三年级时，我还是一个 <strong> 浑身是胆 </strong> 的小女孩。</p>
</body>
</html>
有些非凡的状况须要为某些款式设置具备最高权值，怎么办？这时候咱们能够应用!important 来解决。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
p{color:red!important;}
.first{color:blue;}
</style>
</head>
<body>
<p class="first" id="pid" style="color:green"> 三年级时，我还是一个 <strong> 浑身是胆 </strong> 的小女孩。</p>
</body>
</html>