实现效果
CSS简介
- 原称：层叠样式表；亦称为：CSS样式表、级联样式表
- 一种标记语言
- 主要用于HTML 页面的文本内容，图像的完了以及页面的布局和外观显示样式
语法规范
- 选择器
- 用于指定CSS 样式的 HTML标签，花括号里面是对该对象设置的具体样式
- 属性和属性值之间是以键值对隔开
- 属性和属性之间是用英文冒号隔开
- 每组键值对最后是用英文分号结尾
- （详见后面案例代码）
CSS 代码风格
- 样式格式书写
- 样式大小写
- 空格规范
- 属性值前面，冒号后面，保留一个空格
- 选择器和大括号之间保留一个空格
CSS 基础选择器
标签选择器
- 定义：使用HTML 标签名作为选择器，按照标签名分类
- 语法
类名 {
属性1: 属性值1;
...
}
- 作用：将某一类标签全部选择出来
- 优点：能快速为页面同类型的标签统一设置样式
- 缺点：不能差异化设置
- 案例：
<!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>
<!-- 如果CSS样式表 和 HTML 写在同一个文件中，则CSS 需要则在 <style> 标签中 -->
<style>
p {
color: skyblue;
}
div {
color: blue;
}
</style>
</head>
<body>
<p>男生</p>
<p>男生</p>
<p>男生</p>
<div>女生</div>
<div>女生</div>
<div>女生</div>
</body>
</html>
类选择器
- 差异化选择不同的标签，单独选择一个或者几个标签
- 语法
.类名 {
属性1: 属性值1;
...
}
- 注意事项
- 结构需要用class属性
- 类选择器使用“英文点号”进行表示，后面紧跟（自定义的）类名
- 可以认为给标签起了一个小名，使用这个小名来找到标签从而更改样式
- 长名称或词组可以使用中横线来为选择器命名
- 不要使用纯数字或者中文来命名，最好使用英文字母来表示
- 尽量做到见名知意
- 案例
<!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>
.red {
color: red;
}
.anyname {
color: skyblue;
}
</style>
</head>
<body>
<ul>
<li class="red">张起灵</li>
<li>吴邪</li>
<li class="anyname">王胖子</li>
<li class="red">潘子</li>
</ul>
<div class="red">解语花</div>
</body>
</html>
- 效果图
多类名
- 使用方式
- 在标签class属性中写多个类名
- 多个类名中间必须用空格分开
- 表示标签分别拥有这些类名的样式
- 使用场景
- 标签可以调用公共的类，并同时调用自己独有的类
- 节省CSS代码，并可以统一修改
- 代码
<!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>
.red {
color: red;
}
.anyname {
color: skyblue;
}
.fount20 {
font-size: 20px;
}
</style>
</head>
<body>
<ul>
<li class="red fount20">张起灵</li>
<li>吴邪</li>
<li class="anyname fount20">王胖子</li>
<li class="red">潘子</li>
</ul>
</body>
</html>
- 效果图
id选择器
- 定义：为标有特定id的HTML元素指定特定的样式
- HTML 元素以id属性来设置id选择器，CSS中id选择器则用“#”来定义
- 语法
#id名 {
属性1: 属性值1;
...
}
- id 选择器和类选择器的区别
- 类选择器可以被多个标签使用，而id选择器不能被重复使用
- 类选择器在修改样式中用得比较多，而id选择器一般用在界面唯一性的元素上，常与JS搭配使用
- 代码
<!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>id选择器</title>
<style>
#red {
color: red;
}
</style>
</head>
<body>
<div id="red">吴邪</div>
</body>
</html>
- 效果图
通配符选择器
* {
属性1: 属性值1;
...
}
- 注意事项
- 通配符选择器不需要被调用，自动就会给所有的元素使用其定义的样式
- 在特殊情况下才是用
- 代码
<!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>
* {
color: skyblue;
}
</style>
</head>
<body>
<div>通配符</div>
<span>选择器</span>
<ul>
<li>会</li>
<li>影响</li>
<li>全部</li>
</ul>
<p>元素</p>
</body>
</html>
- 效果图
总结
| 基础选择器 | 作用 | 特点 | 使用情况 | 用法 |
|---|
| 标签选择器 | 可以选取所有相同的标签 | 不能差异化选择 | 较多 | p {color: red;} |
| 类选择器 | 可以选出一个或多个标签 | 可以根据需求选择 | 非常多 | .nav {color: red;} |
| id选择器 | 一次只能选择一个标签 | ID属性只能在每个HTML文档中出现一次 | 一般和JS搭配使用 | #nav {color: red;} |
| 通配符选择器 | 选择所有的标签 | 选择的太多，有部分并不需要 | 特殊情况使用 | * {color: red;} |
CSS 字体属性
- 定义：fonts 属性用于定义字体系列，比如大小、粗细和字体样式等
字体系列
- font-family 属性定义文本的字体系列
- 注意事项
- 各种字体之间必须用英文逗号分割
- 如果包含多个单词组成的字体，建议加上引号
- 尽量使用系统默认的自带字体，来保证所有浏览器中都能正确显示
- 案例
<!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>
h2 {
font-family: "微软雅黑";
}
p {
font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h2>长相思</h2>
<p>长相思，在长安。</p>
<p>络纬秋啼金井阑，</p>
<p>微霜凄凄簟色寒。</p>
<p>孤灯不明思欲绝，</p>
<p>卷帷望月空长叹。</p>
<p>美人如花隔云端。</p>
<p>上有青冥之高天，</p>
<p>下有渌水之波澜。</p>
<p>天长路远魂飞苦，</p>
<p>梦魂不到关山难。</p>
<p>长相思，摧心肝。</p>
</body>
</html>
- 效果图
字体大小
<!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>
body {
font-size: 16px;
}
h2 {
font-size: 20px;
}
</style>
</head>
<body>
<h2>长相思</h2>
<p>长相思，在长安。</p>
<p>络纬秋啼金井阑，</p>
<p>微霜凄凄簟色寒。</p>
<p>孤灯不明思欲绝，</p>
<p>卷帷望月空长叹。</p>
<p>美人如花隔云端。</p>
<p>上有青冥之高天，</p>
<p>下有渌水之波澜。</p>
<p>天长路远魂飞苦，</p>
<p>梦魂不到关山难。</p>
<p>长相思，摧心肝。</p>
</body>
</html>
- 效果图
字体粗细
- font-weight 属性设置文本字体粗细
- 注意事项
- 代码
<!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>
.fw {
font-weight: 700;
}
h2 {
/* font-weight: normal; */
font-weight: 400;
}
</style>
</head>
<body>
<h2>长相思</h2>
<p>长相思，在长安。</p>
<p class="fw">络纬秋啼金井阑，</p>
<p>微霜凄凄簟色寒。</p>
<p class="fw">孤灯不明思欲绝，</p>
<p>卷帷望月空长叹。</p>
<p class="fw">美人如花隔云端。</p>
<p>上有青冥之高天，</p>
<p class="fw">下有渌水之波澜。</p>
<p>天长路远魂飞苦，</p>
<p class="fw">梦魂不到关山难。</p>
<p>长相思，摧心肝。</p>
</body>
</html>
- 效果图
文字样式
- font-style 属性设置文本的风格
- 注意事项
- 一般很少给文字加斜体，反而经常将斜体标签（em 和 i）改为不倾斜的字体
- 代码
<!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>
p {
font-style: italic;
}
em {
font-style: normal;
}
</style>
</head>
<body>
<p>说好带你流浪</p>
<em>而我半路返航</em>
</body>
</html>
- 效果图
字体复合属性
<!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 {
/* 原本的书写方式 */
/* font-style: italic;
font-weight: 700;
font-size: 16px;
font-family: "Microsoft Yahei"; */
/* 复合属性：简写的方式 */
/* font: font-style font-weight font-size/line-height font-family; */
font: italic 700 16px 'Microsoft Yahei';
}
</style>
</head>
<body>
<div>可不可以</div>
</body>
</html>
- 效果图
总结
| 属性 | 表示 | 注意点 |
|---|
| font-size | 字号 | 通常单位为px 像素，一定要加单位 |
| font-family | 字体 | 按照具体规定来选择字体 |
| font-weight | 字体粗细 | 加粗是700或者bold；不加粗是normal 或者400；数字不要加单位 |
| font-style | 字体样式 | 倾斜：italic；不倾斜：normal |
| font | 字体连写 | 字体连写有顺序，不能随便换位置；字体和字号必须同时出现 |
CSS 文本属性
文本颜色
| 表示方式 | 属性值 |
|---|
| 预定义的颜色值 | red，green，blue等 |
| 十六进制 | #FF000，#FF6600，#29D794 |
| RGB代码 | rgb(255,0,0)或rgb(100%,0%,0%) |
<!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: skyblue; */
/* color: rgb(0,0,0); */
color: rgb(100%,0%,0%);
}
</style>
</head>
<body>
<div>如果你愿意，一层一层一层的剥开我的心</div>
</body>
</html>
- 效果图
对齐文本
- text-align 属性用于设置元素内文本内容的水平对齐方式
- 其他属性
| 属性值 | 解释 |
|---|
| left | 左对齐（默认） |
| right | 右对齐 |
| center | 居中对齐 |
<!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>
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1>标题</h1>
</body>
</html>
- 效果图
装饰文本
- text-decoration 属性规定添加到文本的装饰，可以给文本添加下划线、删除线、上划线等
- 属性值
| 属性值 | 描述 |
|---|
| none | 默认，没有装饰线 |
| underline | 下划线，链接a 自带下划线 |
| overline | 上划线（几乎不用） |
| line-through | 删除线（不常用） |
<!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 {
/* 下划线 */
/* text-decoration: underline; */
/* 删除线 */
/* text-decoration: line-through; */
/* 上划线 */
text-decoration: overline;
}
a {
/* 取消所有 a标签 的下划线 */
text-decoration: none;
color: skyblue;
}
</style>
</head>
<body>
<div>我不该想你的</div>
<a href="#">我不该想你的</a>
</body>
</html>
- 效果图
文本缩进
- text-indent 属性用来指定文本的第一行的缩进，通常在段落的首行进行缩进
- 单位：em；指的是当前元素1个文字的大小，若当前元素没有设置大小，则按照父元素的1个文字大小进行计算
- 代码
<!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>
p {
text-indent: 2em;
}
</style>
</head>
<body>
<p>正体，双调。三十六字。前后段各四句，三平韵，一叠韵。以白居易《长相思·汴水流》为代表。此调以此词为正体，其馀押韵异同，皆变格也。 此词前后段起二句俱用叠韵，如冯延巳词之“红满枝，绿满枝”、“忆归期，数归期”，张辑词之“山无情，水无情”、“拟行行，重行行”皆照此填。</p>
<p>变体一，双调。三十六字。前段四句，三平韵，一叠韵；后段四句，三平韵。以白居易《长相思·深画眉》为代表。此词后段起句不用韵。如李煜词之“菊花开，菊花残”、欧阳修词之“长江东，长江西”皆照此填。</p>
<p>变体二，双调。三十六字。前后段各四句，三平韵，一叠韵。以晏几道《长相思·长相思》为代表。此词前后段起叠用“长相思”四句，又与各家不同。</p>
<p>变体三，双调。三十六字。前后段各四句，四平韵。以欧阳修《相思令·蘋满溪》为代表。此词前后段起二句不作叠韵，如周邦彦词之“沙棠舟，小棹游”、“烟云愁，箫鼓休”，万俟咏词之“一声声，一更更”、“梦难成，恨难平”，曾觌词之“清夜长，泛玉觞”、“围艳妆，留醉乡”，俱照此填。</p>
<p>变体四，双调。三十六字。前段四句，三平韵，一叠韵；后段四句，三平韵。以刘光祖《相思令·玉尊凉》为代表。此词后段平韵另换，与各家异。 [2-3]</p>
</body>
</html>
- 效果图
行间距
-
line-height 属性用于设置行间的距离（行高），可以控制文字行与行之间的距离
-
组成部分
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pDQh0FCI-1616849720676)(en-resource://database/927:1)]
-
代码
<!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 {
line-height: 26px;
}
p {
line-height: 25px;
}
</style>
</head>
<body>
<div>长相思</div>
<p>正体，双调。三十六字。前后段各四句，三平韵，一叠韵。以白居易《长相思·汴水流》为代表。此调以此词为正体，其馀押韵异同，皆变格也。 此词前后段起二句俱用叠韵，如冯延巳词之“红满枝，绿满枝”、“忆归期，数归期”，张辑词之“山无情，水无情”、“拟行行，重行行”皆照此填。</p>
<p>变体一，双调。三十六字。前段四句，三平韵，一叠韵；后段四句，三平韵。以白居易《长相思·深画眉》为代表。此词后段起句不用韵。如李煜词之“菊花开，菊花残”、欧阳修词之“长江东，长江西”皆照此填。</p>
<p>变体二，双调。三十六字。前后段各四句，三平韵，一叠韵。以晏几道《长相思·长相思》为代表。此词前后段起叠用“长相思”四句，又与各家不同。</p>
<p>变体三，双调。三十六字。前后段各四句，四平韵。以欧阳修《相思令·蘋满溪》为代表。此词前后段起二句不作叠韵，如周邦彦词之“沙棠舟，小棹游”、“烟云愁，箫鼓休”，万俟咏词之“一声声，一更更”、“梦难成，恨难平”，曾觌词之“清夜长，泛玉觞”、“围艳妆，留醉乡”，俱照此填。</p>
<p>变体四，双调。三十六字。前段四句，三平韵，一叠韵；后段四句，三平韵。以刘光祖《相思令·玉尊凉》为代表。此词后段平韵另换，与各家异。 [2-3]</p>
</body>
</html>
- 效果图
总结
| 属性 | 表示 | 注意点 |
|---|
| color | 文本颜色 | 常用十六进制 |
| text-aligh | 文本对齐 | 可以设定文本水平的对齐方式 |
| text-indent | 文本缩进 | 通常用于段落首行缩进2个字的距离 |
| text-decoration | 文本修饰 | 添加下划线：underline；取消下划线：none |
| line-height | 行高 | 控制行与行之间的距离 |
CSS 引入方式
- 按照CSS 样式书写的位置（或者引入的方式），CSS 样式表可以分为三大类
- 行内样式表（行内式）
- 内部样式表（嵌入式）
- 外部样式表（链接表）
内部样式表
- 写在HTML 页面内部，将CSS 代码抽取出来，放在一个单独的
<!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: skyblue;
}
</style>
</head>
<body>
<div>你是人间的四月天</div>
</body>
</html>
行内样式表
- 在元素标签内部的style 属性中设定 CSS 样式，适合于修改简单样式
- 注意事项
- style 其实就是标签的属性
- 在双引号中间，写法要符合CSS 规范
- 可以控制当前的标签设置样式
- 只有对当前元素添加简单样式的时候，考虑视同
- 亦成为：行内式引入
- 代码
<!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>
</head>
<body>
<h2>长相思</h2>
<p style="color: pink;">长相思，在长安。</p>
<p>络纬秋啼金井阑，</p>
<p style="color: pink;">微霜凄凄簟色寒。</p>
<p>孤灯不明思欲绝，</p>
<p style="color: pink;">卷帷望月空长叹。</p>
<p>美人如花隔云端。</p>
<p style="color: pink;">上有青冥之高天，</p>
<p>下有渌水之波澜。</p>
<p style="color: pink;">天长路远魂飞苦，</p>
<p>梦魂不到关山难。</p>
<p style="color: pink;">长相思，摧心肝。</p>
</body>
</html>
外部样式表
- 适合于样式比较多的情况，核心：样式单独写在CSS文件 中，然后再把CSS文件 引入到 HTML页面 中使用
- 步骤
- 新建一个后缀名为.css 的样式文件，要所有CSS代码都放入此文件中
- 在HTML页面 中，使用<link>标签引入这个文件
<link rel="stylesheet" href="CSS文件路径">
HTML页面 部分
<!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="Test18.CSS">
</head>
<body>
<div>可以回头看，不要往回走</div>
</body>
</html>
CSS样式 部分
div {
color: skyblue;
}
总结
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|
| 行内样式表 | 书写方便，权重高 | 结构样式混写 | 较少 | 控制一个标签 |
| 内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面 |
| 外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多 | 控制多个页面 |
78
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
