文章目录
一、 CSS简介
CSS——层叠样式表(Cascading Style Sheet)
CSS3是新版本的CSS，与老版本(CSS2.1)相比在性能和成本上有大的提升。
CSS最大价值：由HTML专注去做结构呈现，样式交给CSS。即结构(HTML)与样式(CSS)相分离。
二、 CSS引入方式
- 内部样式表
内部样式表（内嵌样式表）是写到html内部时，将所有的css代码抽取出来，单独放到一个<style></style>标签中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内部样式表</title>
<style>
div {
color: pink;
font-size: 16px;
}
</style>
</head>
<body>
<div> 所谓内部样式表，就是在html页面内部写样式 但是是单独写到style标签内部 </div>
</body>
</html>
- 行内样式表
行内样式表（内联样式表）是在元素标签内部的style属性中设定css样式。适合于修改简单样式
<p style="color: pink ;font-size: 30px;">给我一个粉红的回忆</p>
- 外部样式表
适用于样式比较多的情况，核心是：样式单独写到css文件中，之后把css文件引入到html页面中用
步骤：
（i）新建一个后缀名为.css的样式文件，把所有css代码都放入此文件中。
（ii）在html页面中，使用<link></link>标签引入这个文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外部样式表</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>明天就是中秋节啦</div>
</body>
</html>
div {
color: pink;
font-size: 20px;
}
-
导入式：在.css中引入@import
@import url (引入的css的路径)
三、CSS选择器
基础选择器
- 标签选择器
标签名{
属性名：值;
}
例：
<style>
p {
color: green;
font-size: 20px;
}
div {
color: pink;
font-size: 20px;
}
</style>
- 类选择器
给标签设置class属性,通过class属性值选择标签。标签的class属性值可以重复
记忆口诀：样式点定义，结构类（class）调用；一个或多个，开发最常用
<style>
/* 样式点定义 结构类(class)调用 一个或多个 开发最常用 */
.orange {
color: orange;
}
.red {
color: red;
}
</style>
</head>
<body>
<ul>
<li class="orange">无语</li>
<li>无感</li>
<li>无所谓</li>
<li>三无</li>
</ul>
<div class="red">我可以变成红色吗</div>
</body>
- id选择器
给标签设置id属性，通过id属性值选择标签。标签的id属性值不能重复
#id属性值{
属性名: 值;
}
例：
<style>
/* id选择器的口诀：样式由#定义，结构由id调用，只能调用一次，别人切勿使用 */
#pink {
color: pink;
}
</style>
</head>
<body>
<div id="pink">迈克尔·杰克逊</div>
</body>
记忆口诀：样式#定义，结构id调用；只能调用一次，别人切勿使用
- 通配符选择器
通配符(*),可以匹配页面中的任何元素
例：
<style>
* {
color: red;
}
</style>
</head>
<body>
<p>一二三四五</p>
<p>上山打老虎</p>
<p>老虎有几只</p>
<ul>
<li>
让我数一数
</li>
</ul>
结果：
复合选择器
1. 后代选择器
后代选择器又称为包含选择器，可以选择父元素里面的子元素，其写法就是把外层标签写在前面，内层标签写在后面，中间由空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
语法：
元素1 元素2 { 样式声明 }
- 元素1和元素2中间由空格隔开
- 元素1是父级，元素2是子级，最终选择的是元素2
- 元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可
- 元素1和元素2可以是任意基础选择器
2、子选择器
子元素选择器只能选择作为某元素的最近一级子元素。即选亲儿子元素
语法：
元素1 > 元素2 { 样式声明 }
- 元素1和元素2中间用大于号隔开
- 元素1是父级，元素2是子级，最终选择的是元素2
- 元素2必须是亲儿子，其孙子、重孙之类都不归他管，也可以称为亲儿子选择器
3、并集选择器
并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明
语法：
元素1 ， 元素2 { 样式声明 }
4、相邻选择器
相邻选择器选择紧贴在元素1后的元素2
语法：
元素1+元素2 { 样式声明 }
5、兄弟选择器
兄弟选择器选择元素1后面的所有兄弟元素2
语法：
元素1~元素2 { 样式声明 }
四、CSS字体属性
设置字体系列
<style>
h3 {
font-family: "微软雅黑";
}
p {
font-family: 'Courier New', Courier, monospace;
}
</style>
设置字体大小
<style>
body {
font-size: 18px;
}
/* 标题标签比较特殊 需要单独指定文字大小 */
h3 {
font-size: 20px;
}
</style>
设置字体粗细
<style>
.weight {
/* font-weight: bold */
/* 700后面不要跟单位 等价于bold 都是加粗的效果 */
/* 实际开发中，我们更提倡用数字 表示加粗或者变细 */
font-weight: 700;
}
h3 {
/* font-weight: normal; */
font-weight: 400;
}
</style>
设置文字样式
<style>
p {
font-style: italic;
}
em {
font-style: normal;
}
</style>
字体复合属性
<style>
/* 想要字体变 倾斜 加粗 字号为16px 并且是 微软雅黑 */
/*常规我们写成：
div {
font-style: italic;
font-weight: 700;
font-size: 16px;
font-family: "微软雅黑";
} */
/*复合属性 简写的形式 简化代码 不能更换顺序！！！
div {
font: font-style font-weight font-size font-family;
} */
div {
font: italic 700 16px 微软雅黑;
}
</style>
- 使用font属性时，必须按上面的语法格式中的顺序来写，不能更换顺序，并且每个属性之间以空格隔开
- 不需要设置的属性可以省略（取默认值），但必须保留
font-size和font-family属性，否则font属性将不起作用。
五、CSS文本属性
文本颜色
div {
color: rgb(255, 0, 0);
}
对齐文本
<style>
h1 {
/* 本质是让<h1>盒子里面的文字水平居中对齐 */
/* text-align: center; */
text-align: right;
}
</style>
装饰文本
<style>
div {
/*下划线 */
/* text-decoration: underline; */
/* 删除线 */
/* text-decoration: line-through; */
/* 上划线 */
text-decoration: overline;
color: pink;
}
a {
/* 取消a默认的下划线 */
text-decoration: none;
color: peru;
}
</style>
文本缩进
text-indent 属性用来指定文本的第一行缩进，通常是将段落的首行缩进
<style>
p {
/* 文本首行 缩进多少距离 */
/* text-indent: 20px; */
/* 如果此时写了2em 则是缩进当前元素 2个文字大小的距离 */
text-indent: 2em;
}
</style>
行间距
line-height 属性用于设置行间的距离（行号）。可以控制文字行与行之间的距离。
<style>
p {
line-height: 26px;
}
</style>
行高=上间距+文本高度+下间距
六、列表属性
| 属性 | 值 | 描述 |
|---|---|---|
| list-style-type | circle（空心圆）、square（方块） | 设置无序列表前小圆点的形状 |
| list-style | lower-roman（小写罗马数字i, ii, iii, iv, v, 等）、upper-roman（大写罗马数字I, II, III, IV, V, 等）、lower-alpha（小写字母a,b,c,d等）、upper-alpha（大写字母A,B,C,D等） | 设置有序列表前数字的类型 |
| list-style-image | url(" ") | 将图像设置为列表项标志 |
| list-style-position | inside（列表项目标记放置在文本以内）、outside（默认值。保持标记位于文本的左侧外面。）、inherit（规定应该从父元素继承 list-style-position 属性的值） | 设置列表中列表项标志的位置 |
案例：
<style>
ul li:first-child {
list-style-type: disc;
}
ul .circle {
list-style-type: circle;
}
ul li:last-child {
list-style-type: square;
}
</style>
</head>
<body>
<ul>
<li>实心圆</li>
<li class="circle">空心圆</li>
<li>小方块</li>
</ul>
</body>
539
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
