文章目录
《前端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">
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
