一. 学习目标。
- 掌握CSS的使用以及多种CSS选择器的用法。
- 了解选择器的优先级。
- 掌握常用的CSS样式。
二. CSS简介。
CSS：层叠式样式表。
作用：为标签元素添加各种样式（css属性），让网页美观。
三. CSS的引入方式。
1. css内部引入方式。
1.1 实现方式：在html文件的head标签中，添加上一对style标签，将样式写到style标签中即可。
1.2 优点:
1.2.1 不用来回调文件写代码。
1.2.2 因为html结构和css样式在同一个文件中，可以非常方便的查找以及写css样式。
1.3 缺点：
1.3.1 不能复用。
1.3.2 如果写大型网站，会出现html文件中css代码多余html结构代码。
1.4 使用场景。
网页比较小/课堂代码/测试。
<!--1.行间引入 不推荐使用,会造成代码过于冗杂!-->
<div style="width:200px ; height: 100px; background-color:sandybrown ;">今天天气好好啊哈哈哈哈!</div>
2. css外部引入方式。
2.1 实现方式：
2.1.1 在工程的css文件夹中单独创建一个独立的css文件，在该css文件中添加css样式。（注意：不需要在css文件中添加style标签）
2.1.2 在html文件的head标签中，添加link标签，引入关联外部的css样式文件。
2.2 优点：
2.2.1 能够实现html规范中的html结构和css样式的分离。
2.2.2 方便复用。
2.3 缺点:
2.3.1 不方便查看结构和样式。
2.4 使用场景。
中大型网页。
<!--外部引入css文件-->
<link rel="stylesheet" type="text/css" href="css文件路径"/>
3. CSS内联式。
3.1 实现方式：在开始标签中，添加style属性，属性值直接给上css属性即可。
在head中设置如下代码
<!--内部引入 -->
<style type="text/css">
/*注释!!!*/
p{
width: 500px;
height: 50px;
background-color: deeppink;
}
div{
width: 600px;
height: 200px;
background-color: palegreen;
text-align: center;
}
</style>
四. CSS选择器以及优先级。
选择器的作用：
选择要进行css样式设置的标签元素。
1. id选择器。
实现方式：给元素添加id属性，给上对应的id属性值value。
格式： #value { css样式; }
用途：当单独针对于某一个元素进行样式设置时，考虑。
2. class选择器。
实现方式：给所有要进行统一样式调整的元素添加class属性，给上对应的class属性值value。
格式： .value { css样式; }
用途：当针对于多个元素进行统一样式调整时，可以考虑。
Ps：多个元素（可以是不同类型的元素，也可以是同一类型的元素）
3. 元素选择器。
格式：E （E就是元素的名字）
设置css样式： E { css样式; }
用途：可以对同一种元素做同一种样式设置。
4. 后代选择器。
格式：E F （E和F都可以是元素选择器）
E F { css样式; }
5. 子代选择器。
格式： E>F { css样式; }
6.群组选择器
格式: E, F, G (E和F和G可以是元素名字可以是任意选择器)
7.兄弟选择器
格式:E+F (E和F是相邻的兄弟标签, 最终查找的是标签F)
8.hover伪类选择器
hover伪类选择器, 是鼠标进入标签 此选择器才会被触发 注意 : 冒号前后 不允许加空格!
格式:E:hover (E可以是标签名可以是id或者class选择器)
选择器优先级：id选择器 > class选择器 > 元素选择器
注意：复合选择器的优先级问题。
css选择器上课代码：
<html>
<head>
<meta charset="UTF-8">
<title>css选择器</title>
<style type="text/css">
/*1.标签名选择器 通过名称选中本文档中所有的此类标签!!*/
div{
background-color: salmon;
}
/*2. id选择器 搭配符号#
选中一个确定的标签! id值不准重复!!!
*/
#d3{
background-color: seagreen;
}
#d4{
font-size: 20px;
}
/*3. class选择器 搭配符号.
选中同一类class值的所有标签(可以是一个可以是多个)! */
.c1{
color: chartreuse;
}
.c2{
text-decoration: line-through;
}
/*4. 群组选择器 搭配符号 ,
选中多个标签,可以写id, class 标签名选择器!*/
#d3, .c2, span{
font-family: "KaiTi";
font-weight: bold;
}
/*5. 后代选择器 注意 搭配符号是空格
查找#box中 所有的a标签*/
#box a{
text-decoration: none;
}
/*6. 子代选择器 注意 搭配符号是 >
查找#box中 子级别的a标签*/
#box>a{
font-size: 40px;
}
/*7. 兄弟选择器 搭配符号 + */
h5+h5{
background-color: palevioletred;
}
/*8. hover伪类选择器, 是鼠标进入标签 此选择器才会被触发
要求 :冒号前后 不允许加空格 */
#d3:hover{
background-color: blue;
height: 100px;
}
a:hover{
color: yellow;
}
.c1:hover{
}
/*-------------*/
/*9. 最高级别 */
#d3{
font-size: 30px;
}
.c1{
/*只针对一个属性 优先级最高*/
font-size: 50px !important;
}
</style>
</head>
<body>
<!--选择器
就是为了更精确的获取某一个或者某一些标签.更好的进行样式设置!
-->
<!--div{div$}*5-->
<div>div1</div>
<div class="c1 c2" >div2</div>
<div id="d3" class="c1">div3</div>
<div id="d4">div4</div>
<div>div5</div>
<p class="c1">段落1</p>
<p>段落2</p>
<p class="c2">段落3</p>
<span>span标签无意义行元素</span>
<!---------------------------------->
<a href="###">京东</a>
<div id="box">
<a href="###">淘宝</a>
<a href="###">天猫</a>
<a href="###">百度</a>
<div>
<a href="###">抖音</a>
</div>
</div>
<!------------------>
<!--(h4{标题$}+h5{标题$})*5-->
<h4>标题1</h4>
<h4>标题2</h4>
<h5>标题1</h5>
<h5>标题2</h5>
<h4>标题3</h4>
<h5>标题3</h5>
<h4>标题4</h4>
<h5>标题4</h5>
<h4>标题5</h4>
<h5>标题5</h5>
</body>
</html>
五. CSS常用的样式。
- 和文字相关的样式。
1.1 文字大小。 Font-size: 30px; 单位：px，像素。
1.2 文字颜色。 Color: red；
1.3 文字字体。 Font-family：Kaiti;
1.4 文字粗细。 Font-weight:900; 可选值：100~900的值，bold，bolder。
1.5 文字水平对齐方式。 Text-align:center; 可选值：left，right，center。
1.6 文字行高。 Line-height：100px; 单位：px，像素;
1.7 文本装饰器。 Text-decoration: underline; 可选值：underline, overline, line-through, none.
1.8 文本缩进 text-indent: 2em; 单位em em单位是参考当前标签的字号 * 例如字号为16px 1em = 16px; 2em=32px; * 例如字号为20px 1em = 20px; 3em = 60px;。
1.9 单词间距 word-spacing: 20px; 默认值normal 相当于0px 可以设置负值。
1.10 字母间距 letter-spacing:2px; 默认是normal(正常) 相当于0px 可以设置负值。
1.12 文本换行 white-space: nowrap; 默认是normal 正常换行 nowrap 不换行。
1.13 文本溢出的处理方式 text-overflow:ellipsis ; clip 裁剪掉 ellipsis 用省略号代替.
1.14 overflow: hidden; 是超出标签范围的内容,进行隐藏!
单行省略效果:
white-space: nowrap;
text-overflow:ellipsis ;
overflow: hidden;
- 和背景相关的样式
.1 背景颜色。 Background-color： red；
2.2 宽度。 Width：100px； 单位：px，像素。
2.3 高度。 Height：100px； 单位：px，像素。
- 字体设置
<html>
<head>
<meta charset="UTF-8">
<title>字体设置</title>
<style type="text/css">
div{
width: 400px;
height: 200px;
background-color: skyblue;
/*字体系列 font*/
/*1.字号 默认16px*/
font-size: 20px;
/*2.字体风格 */
font-family: "KaiTi";
/*3. 加粗
bold加粗, bolder更粗 (但是大多数浏览器对此无区别)
也可以使用数字 100--600 正常; 600--900 加粗;
*/
font-weight: bold;
/*font-weight: 700;*/
/*综合写法 如果有加粗 必须先设置加粗属性!
必须按照 加粗 字号 字体顺序!!*/
font:bold 40px "微软雅黑" ;
}
</style>
</head>
<body>
<div>
蒹葭苍苍,白露为霜. <br />
所谓伊人,再水一方.
</div>
</body>
</html>
五.行块元素水平居中的问题 (为晚上作业做准备,不详细多讲)
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*初始化 取消所有标签的默认间隔
* 星号, 表示所有标签 */
*{
margin: 0;
padding: 0;
}
/*取消ul列表的小黑点*/
ul{
list-style: none;
}
#box{
width:600px;
height:400px;
background-color:pink;
/*关键 此属性对行元素和普通文本有效!!! */
text-align: center;
margin: 0 auto;
}
span{
background-color:yellow;
}
#box p , #box div{
/*注意 此属性只作用于本元素 使块元素位置在父级标签中左右居中!!! margin 间距间隔!! 0代表上下间距 auto代表左右间距! */
margin: 10px auto;
background-color:skyblue;
width:300px;
text-align: left;
}
</style>
</head>
<body>
<div id="box">
普通文本
<a href="###">京东</a>
<span>哈喽呀span</span>
<p>段落p1</p>
<div>div1标签块元素</div>
</div>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
</ul>
<h1>映纷创意</h1>
<p>哈哈哈哈哈</p>
</body>
</html>
