初识css
考虑对人的描述方式
人 {
身高:175cm;
体重:70kg;
肤色:黄色
}
CSS基本语法结构
选择器 {
声明1;
声明2;
……
}
h1 {
font-size:12px;
color:#F00;
}
CSS的最后一条声明后的“;”可写可不写，但是，基于W3C标准规范考虑，建议最后一条声明的结束“;” 都要写上
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选择器在同一个页面中只能使用一次
取色器工具
用来拾取演示，和测量长度的轻量级工具。
双击执行
image.png
弹出取色器，点击按钮
image.png
测量宽高
选择屏幕标尺
image.png
测量
image.png
拾取颜色
选择屏幕取色器
image.png
随意选取颜色
image.png
制作《早发白帝城》
使用标题标签和段落标签制作李白的诗《早发白帝城》，诗正文字体颜色为绿色，字体大小为14px。
image.png
制作《破阵子》
标题颜色为红色，字体大小为18px；正文第一段字体大小为12px，字体颜色为红色，第二段字体颜色为黑色，字体大小为12px
image.png
制作《浣溪沙》
使用标签选择器设置标题字体大小为20px
页面中所有段落中的文本字体大小为16px
使用类选择器设置正文和译文内容字体颜色为绿色
使用ID选择器设置译文标题颜色为蓝色
image.png
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;
}
###制作《花千骨大结局》
###HTML中引入CSS样式
- 行内样式
- 内部样式表
- 外部样式表
###行内样式
使用style属性引入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>
image.png
image.png
子标签可以继承父标签的样式风格
子标签的样式不会影响父标签的样式风格
<h1>勇气</h1>
<p class="first">三年级时，我还是一个<strong>胆小如鼠</strong>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。
</p>
<p id="second">到了三年级下学期时，我们班上了一节公开课，老师提出了一个很<strong>简单</strong>的问题，班里很多同学都举手了，甚至成绩比我差很多的，也举手了，还说着："我来，我来。"我环顾了四周，就我没有举手。
</p>
p{color:red;}
.first strong{color: blue}
image.png
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是正确的颜色
image.png
在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>
image.png
本章项目实战
制作图书列表
image.png
课后作业
必做任务
1.制作经典语录（p标签，h2标签，图片标签）
2.制作莎士比亚的诗（ p标签，h2标签，br标签，hr标签）
3.制作商品列表（ul标签，li标签）
扩展任务
1.制作高数目录（标签嵌套）
2.制作手机app排行榜（标签嵌套，图片标签）
网友评论