文章目录
- 《前端web开发-CSS3基础》
- ==1.CSS引入方式==
- ==2.选择器-标签和类==
- ==3.选择器-id和通配符选择器==
- ==4.画盒子==
- ==5.字体修饰属性==
- ==6.字体大小、粗细和倾斜==
- 6.1字体大小
- 6.2 字体粗细
- 6.3字体倾斜
- ==7.行高==
- ==8.字体族==
- ==9.font复合属性==
- ==10.缩进、对齐和修饰线==
- 10.1 文本缩进
- 10.2 文本和图片对齐
- 10.3 文本修饰线
- ==11.文字颜色==
- ==12.调试工具==
- ==13.综合案例1-新闻详情==
- ==14.综合案例2-CSS简介==
- ==15.复合选择器==
- ==16.伪类选择器==
- ==17.CSS三大特性==
- 17.1 继承性
- 17.2 层叠性
- 17.3 优先级
《前端web开发-CSS3基础》
1.CSS引入方式
-
内部样式表
- CSS代码写在
style标签里面； - 代码示例:
- CSS代码写在
-
外部样式表
- CSS代码写在单独的CSS文件中；
- 在HTML中使用
link标签引入； - 语法：
<link rel="stylesheet" hre="./my.css" > - 代码示例：
-
-
行内样式表
- 配合JavaScript使用
- CSS代码写在标签的
style属性值里面 - 语法：
<div style=“font-size:20px;color:red”>这是div标签\</div>
2.选择器-标签和类
- 标签选择器
- 使用标签名作为选择器，选中同名标签，设置相同的样式；
- 特点:所有同名标签都会被设置相同的样式，无法差异化同名标签样式；
- 类选择器
- 作用：查找标签，差异化标签的显示效果；
- 创建和使用步骤：1.定义类选择器
.类名；2.使用类选择器class=“类名”。 - 注意：
- 类名自定义，不能使用纯数字或中文，尽量使用英文；
- 一个类选择器可以供多个标签使用；
- 一个标签可以使用多个类名，类名之间用空格隔开；
- 开发习惯：类名见名知意，多个单词可以使用
-链接;
3.选择器-id和通配符选择器
- id选择器
- 作用：查找标签，差异化标签的显示效果；
- 场景：id选择器一般配合JavaScript使用，很少用来设置CSS样式；
- 创建和使用步骤：1.定义id选择器
#id名；2.使用id选择器，标签添加id=id名
- 通配符选择器
- 作用：查找页面所有便签，设置相同样式；
- 通配符选择器不需要调用，浏览器会自定查找相同标签，设置相同样式；
4.画盒子
5.字体修饰属性
| 序号 | 描述 | 属性 | 备注 |
|---|---|---|---|
| 1 | 字体大小 | font-size | 常用单位为px |
| 2 | 字体粗细 | font-weight | |
| 3 | 字体倾斜 | font-style | |
| 4 | 行高 | line-height | |
| 5 | 字体族 | font-family | |
| 6 | 字体复合属性 | font | |
| 7 | 文本缩进 | text-indent | |
| 8 | 文本对齐 | text-align | |
| 9 | 修饰线 | text-decoration | |
| 10 | 字体颜色 | color |
6.字体大小、粗细和倾斜
6.1字体大小
- 扩展：在谷歌浏览器中文字的默认大小为16px；
- 总结：font-size必须有单位，否则不生效；
6.2 字体粗细
- 总结：需要掌握400是正常字体 700是加粗字体；
6.3字体倾斜
- 总结：font-style属性用来清除文字的倾斜效果；
7.行高
-
总结：行高可以用px设置，也可以用数字设置，如果用数字设置，表示当前标签字体大小的倍数；
-
div标签中文字垂直居中的技巧：设置行高属性值等于盒子高度属性值。
8.字体族
- 字体族
- 属性名:font-family
- 属性值:字体名
-
font-family:楷体;
-
font-family: Microsoft YaHei, Heiti sc, tahoma, arial, Hiragino Sans GB,“\5B8B\4F53”, sans-serif；
- 拓展(了解):font-family属性值可以书写多个字体名，各个字体名用逗号隔开，执行顺序是从左向右依次查找。
- font-family 属性最后设置一个字体族名，网页开发建议使用无衬线字体。
- 代码示例：
9.font复合属性
- 使用场景：设置网页文字公共样式；
- 复合属性:属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开。
- font: 是否倾斜 是否加粗 字号/行高 字体(必须按顺序书写)
div {font:italic 700 30px/2 楷体;
}
-
注意:字号和字体值必须书写，否则 font属性不生效
-
代码测试效果：
10.缩进、对齐和修饰线
10.1 文本缩进
- 属性名:text-indent
- 属性值
- 数字+ pX
- 数字+em (推荐:1em=当前标签的字号大小)
- 语法：
text-indent:2em;首行缩进2个字
- 代码效果测试
10.2 文本和图片对齐
- 文本对齐方式
- 作用:控制内容水平对齐方式
- 属性名:text-align属性值
- 属性值：
- left ：左对齐(默认)
- center：居中对齐
- right：右对齐
- 本质：text-align本质是控制内容的对齐方式，属性要设置给内容的父级
- 效果测试：
- 图片对齐方式
- 本质：text-align本质是控制内容的对齐方式，属性要设置给内容的父级
- 本质：text-align本质是控制内容的对齐方式，属性要设置给内容的父级
10.3 文本修饰线
- 属性名:text-decoration
- 属性值
- none ：无
- underline：下划线
- line-through：删除线
- overline：上划线
- 效果测试：
11.文字颜色
12.调试工具
- 调试工具的细节
- 如果是错误的属性，有黄色叹号；
- CSS 属性的前面有多选框，如果勾选:这个属性生效:如果没有勾选:这个属性不生效；
13.综合案例1-新闻详情
<!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>h1 {text-align: center;font-size: 30px;font-weight: 400;color: #333;}div {font-size: 14px;color: #999;}p {text-indent: 2em;color: #333;font-size: 18px;}.div-center {text-align: center;}</style>
</head>
<body><h1>在希望的田野上｜湖北秋收开镰 各地多举措保增产增收</h1><div>来源：央视网 | 2222年12月12日 12:12:12</div><p><strong>央视网消息：</strong> 眼下，湖北省秋收开镰已有一周多的时间。水稻收割已经超过四成，玉米收割七成。湖北省通过大力推广新品种水稻，建设高标准农田等一系列措施，为秋粮稳产提供有力支撑。</p><p>中稻占据了湖北全年粮食产量的一半以上。在湖北的主产区荆门市，370万亩中稻已经收割四成以上。</p><div class="div-center"><img src="./秋收.webp" alt=""></div><p>王化林说的新品种，是湖北省研发的杂交水稻“华夏香丝”，不仅产量高，还具有抗病、抗倒、抗高温的特性。在荆门漳河镇的一工程示范田内，像“华夏香丝”这样抗旱节水的品种还有20多个，这些水稻新品将在荆门全面推广，确保来年增产增收。</p><p>此外，湖北还大力推进高标准农田建设。截至今年6月，已建成3980万亩高标准农田。目前，湖北全省仍有1800多万亩中稻正在有序收割中，预计10月中旬收割完毕。</p></body>
</html>
效果如下：
14.综合案例2-CSS简介
代码示例:
<!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>h1 {color: #333;}p {text-indent: 2em;color: #444;font-size: 14px;line-height: 30px;}a {color: #0069c2;}li {color: #444;line-height: 30px;}</style>
</head>
<body><h1>CSS（层叠样式表）</h1><p>层叠样式表（Cascading Style Sheets，缩写为CSS）是一种<a href="#">样式表</a> 语言，用来描述HTML或XML(包括如 SVG、MahML、XHTML之类的XML分支语言)文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。</p><p><strong>C5S是开放网络的核心语言之一</strong> ，由 W3C 规范 实现跨测览器的标准化。CSS节省了大量的工作。样式可以通过定义保存在外部.cs 文件中，同时控制多个网页的布局，这意味着开发者不必经历在所有网页上编辑布局的麻烦。CSS 被分为不同等级:CSS1现已废弃，CSS2.1是推荐标准，CSS3 分成多个小模块且正在标准化中。</p><ul><li>CSS 介绍 如果你是 Web 开发的新手，選务必阅读我们的 CSS 基础 文章以学习 CSS 的含义和用法</li><li>CSS 教程 我们的 CSS 学习区包含了丰富的教程，它们覆盖了全部基础知识，能使你在 CSS 之路上从初出茅庐到游刃有余。</li><li>CSS 参考 针对资深 Web 开发者的<a href="#">详细参考手册</a> ，描述了 CSS 的各个属性与概念。</li></ul>
</body>
</html>
效果如下：
15.复合选择器
-
后代选择器
- 后代选择器:选中某元素的后代元素选择器写法:
- 父选择器 子选择器{CSS属性}，父子选择器之间用空格隔开。
<style> div span { color:red; </style> <span>span 标签</span> <div> <span>这是 div 的儿子 span</span > </div>
-
子代选择器
<div><span>这是 div 里面的 span</span><p><span>这是 div 里面的 p里面的 span</span></p> </div><style>div > span {color: red;} </style>- 子代选择器:选中某元素的子代元素(最近的子级)。
- 选择器写法:父选择器>子选择器{CSS 属性}，父子选择器之间用 >隔开
-
并集选择器
- 并集选择器:选中多组标签设置相同的样式。
- 选择器1,选择器2,…, 选择器N{CSS 属性}，选择器之间用，隔开选择器
- 写法:
<style>div,p,span {color:red;} </style><div>div 标签</div> <p>p 标签</p> <span>span 标签</span> -
交集选择器
-
交集选择器:选中同时满足多个条件的元素。
<p class="box">p 标签，使用了类选择器 box</p> <p>p 标签</p> <div class="box">div 标签，使用了类选择器 box</div> -
选择器写法:选择器1选择器2{CSS 属性}，选择器之间连写，没有任何符号。
p.box { color:red; } -
注意:如果交集选择器中有标签选择器，标签选择器必须书写在最前面。
-
16.伪类选择器
-
伪类选择器:伪类表示元素状态，选中元素的某个状态设置样式鼠标悬停状态:选择器:hover{Css 属性}
<style>a:hover color:red;.box:hover {color:green;} </style> <a href="#">这是a标签</a> <div class="box">div 标签</div>
17.CSS三大特性
17.1 继承性
- 继承性：子级标签默认集成父级的文字控制属性；
- 注意：如果标签有自己样式，则生效自己的样式，不继承；
17.2 层叠性
- 特点
- 相同的属性会覆盖:后面的 CSS 属性覆盖前面的 CSS 属性。
- 不同的属性会叠加:不同的 CSS 属性都生效。
<style>div {color:red; font-weight:700;}div {color:green; font-size:30px;} </style> <div>div 标签</div>
17.3 优先级
-
优先级:也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则。
<style>div {color:red;}.box{color: green;} </style> <div class="box">div 标签</div> -
规则：选择器优先级高的样式生效，
-
公式：通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important
-
（选中标签的范围越大，优先级越低)
-
优先级-叠加计算规则
<style> div {color:red; } .box {color: green; } </style><style> .box div {color:red; } .box {color:green; } </style> -
叠加计算：如果是复合选择器，则需要权重叠加计算。公式:(每一级之间不存在进位)
-
(行内样式，id选择器个数，类选择器个数，标签选择器个数)
-
规则:
- ·从左向右依次比较选个数，同一级个数多的优先级高，如果个数相同，则向后比较
- !important 权重最高
- 继承权重最低
