1200字范文 > B 站黑马程序员 pink 老师前端课程学习笔记_02 CSS3

B 站黑马程序员 pink 老师前端课程学习笔记_02 CSS3

时间：2022-04-19 16:12:30

CSS_01

1. CSS 简介

1.1 语法规范

<style>/* 选择器{样式} */p {color: red;font-size: 12px;}</style>

1.2 代码风格

1.2.1 样式格式书写

紧凑格式：

<style>p {color: red;font-size: 12px;}</style>

展开格式：

<style>p {color: red;font-size: 12px;}</style>

1.2.2 样式大小写

样式选择器、属性名、属性值关键字全部使用小写字母，特殊情况除外

1.2.3 空格规范

h3 {color: red;}

属性值前、冒号后保留一个空格选择器（标签）和大括号中间保留空额

2. 基础选择器

2.1 CSS 选择器的作用

选择器（选择符）就是根据不同雪球把不同的标签选出来这就是选择器的作用。

2.2 选择器分类

选择器分为基础选择器和复合选择器

基础选择器是由单个选择器组成

基础选择器包括：标签选择器、类选择器、id选择器、和通配符选择器

2.3 标签选择器

标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式

**作用：**把某一类标签全部选择出来

**优点：**快速为页面中同类型的标签统一设置样式

**缺点：**不能差异化样式，只能选择全部的当前标签

2.4 类选择器

2.4.1 类名

差异化不同标签的样式，单独选一个或几个标签

需要调用class属性类选择器使用.(英文句号)进行标识，后面紧跟类名(自己定义)类名不要使用纯数字、中文等命名，尽量使用英文字母命名有意义(代码可读性)，《Web前端开发规范手册》

<style>/* 类选择器口诀：样式点定义结构类（class）调用一个或多个开发最常用*/.text{color: red;}</style>...<div class="text">标签内示例文字</div>

2.4.2 多类名

给一个标签指定多个类名

把标签元素相同样式放到一个分类里多个类名中间必须用空格分开节省代码量，便于修改

用<div>画盒子:

<style>.box{width: 100px;height: 100px;font-size: 30px;}.bg_red {background-color: red;}.bg_gree {background-color: green;}</style>...<body><div class="box bg_red">红色</div><div class="box bg_gree">绿色</div>

2.5 id 选择器

id 选择器可以为标由特定 id 的HTML 元素指定特定样式HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以“#”来定义id 属性只能在每个 HTML 文档中出现一次(只能调用一次)

<style>/* 口诀：样式 # 定义，结构 id 调用，只能调用一次，别人切勿使用 */#gold {color: gold;}</style></head><h4 id="gold">golden eage</h4>

类选择器与 id 选择器的区别：

类选择器*(class)*可以被多次调用id 选择器只能调用一次类选择器多用于修改样式，id 选择器用于页面唯一元素上，经常和 Javascript 搭配使用

2.6 通配符选择器

用 “*” 定义，表示选取页面中所有元素（标签）

通配符不需要调用特殊情况使用，权重低于类选择器

*{属性1：属性1值；...}

2.7 基础选择器总结

3. CSS 字体属性

CSS Fonts （字体属性）用于定义文字去系列、大小、粗细、和文本样式

3.1 字体系列

CSS 使用font-family属性定义文本的字体系列

各种字体之间必须使用英文状态下的逗号隔开如果有空格隔开的多个单词组成的字体加引号尽量使用系统默认字体，保证在任何浏览器中都能正确显示

<style>body {font-family: 'Times New Roman', Times, serif;}</style>

3.2 字体大小

CSS 使用font-size属性定义文本的字体大小

px（像素）大小是网页最常用单位谷歌浏览器默认文字大小为 16px不同浏览器默认显示文字大小不一致，要确认一个明确值可以给 body 指定整个页面文字大小标题需要单独指定大小

<style>body {/* 字体样式 */font-family:'Times New Roman', Times, serif;/* 字体大小 */font-size: 14px;}</style>

3.3 字体粗细

CSS 使用font-weigth属性定义文本的字体粗细

<style>body {/* 字体加粗 *//* font-weight: bold等价于700; */font-weight: 700;}h4 {/* 标题减去加粗效果 *//* font-weight: normal等价于400; */font-weight: 400;}

3.4 文字样式

CSS 使用font-style属性定义文本的字体风格

不常用，一般用于给斜体标签<em> <i>改为正常样式

<style>/* 斜体变为正常 */em{font-style: normal;}</style>

3.5 字体复合属性

把文字样式综合来写，节约代码

使用 font 属性时，必须按照语法格式中的顺序书写，各个属性以空格隔开不需要设置的属性可以省略，但必须保留font-size font-family属性，否则 font 属性不起作用

<style>body{font: font-style font-weigth font-size/line-height font-family;}</style>

<style>div {/* font: font-style font-weigth font-size/line-height font-family;必须按顺序书写 *//* font-size font-family 属性必须保留 */font: italic bold 16px 'microsoft yahei'}</style><div><p>字体复合属性测试</p></div>

3.6 字体属性总结

4. CSS 文本属性

CSS Text（文本）属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等

4.1 文本颜色

color属性用来定义颜色

<style>div {/*预定义巧克力色*/color: chocolate;/*rgb 粉色*/color: rgb(255, 0, 128);/*十六进制白色*/color: #ffffff;}</style>

4.2 对齐文本

text-align属性用于设置元素内文本内容的水平对齐方式

<style>text-align: center;</style>

4.3 装饰文本

text-decoration属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等

取消超链接下划线常用装饰文本none属性值

4.4 文本缩进

text-indent属性用来指定文本第一行的缩进，通常是段落的首行缩进

通过该设置，所有元素的第一行都可以缩进一个给定长度，甚至该长度可以是负值em是一个相对单位，就是当前元素（font-size）1 个文字的大小

<style>p {text-indent: 2em;}</style>

４.５行间距

line-height属性用于设置行间的距离（行高），可以控制文字狱行之间的距离。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0CDJADDe-1610544801075)(D:%5CDesktop%5C%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%5CCSS%5CCSS3.assets%5Cimage-0102204027236.png)]

<style>/* 设置行间距为25像素 */line-height: 25px;</style>