前端基础第三周（下）-CSDN博客

本文链接：https://blog.csdn.net/2301_78135225/article/details/130904409

css基础选择器和字体属性

1.css简介
使用场景：美化网页，布局页面
1.1html的局限性：只关注内容的语义
1.2css的作用：层叠样式表，也是一种标记语言
用于设置HTML网页中的文本内容（字体、大小、对齐方式），图片的外形（宽高、边框样式、边距），以及版面的布局和外观显示样式。
1.3语法规范：有两个部分组成：选择器和一条或多条声明。
注意：（1）选择器适用于指定css样式的HTML标签。
（2）属性和属性之间以“键值对”的形式出现。
（3）每组“键值对”用分号进行结尾。
1.4代码风格：符合实际开发书写方式。
1.4.1样式格式书写
(1)紧凑格式:
（2）展开格式:

1.4.2样式大小写：一般采取小写
1.4.3空格规范
（1）属性值前面；冒号后面，保留一个空格。
（2）选择器（标签）和大括号中间保留空格。
2.css基础选择器：
2.1作用：选择不同的标签
2.2分类：
2.2.1基础选择器：由单个选择器组成
（1）标签选择器（2）类选择器（3）id选择器（4）通配符选择器
2.2.2组合选择器
2.3标签选择器：用HTML标签名称作为选择器
语法：

作用：把某一类标签全部选择出来。
优点：能快速为页面中同类型的标签统一设置样式。
缺点：不能差异化设置。
2.4类选择器：可以单独选一个或某几个标签
语法：

注意（1）类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义）。
（2）给标签取名。
（3）长名称或词组使用中横线来为选择器命名。
（4）不要使用纯数字、中文命名。
（5）命名要有意义，一目了然。
（6）命名规范：附件（Web前端开发规范手册）
2.4类选择器-多类名
2.4.1多类名使用方式
注意（1）在标签class属性里面可以写多个类名
（2）多个类名之间要用空格分开
2.4.2使用场景
（1）可以把一些标签元素相同的样式放到一个类里面。
（2）节省代码，统一修改。
2.5id选择器：以“#”来定义，id来调用。
语法格式：

注意：id属性只能在每个HTML文档中出现一次。口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用。
id选择器和类选择器的区别：
（1）类相当于名字，一个人可以有多个名字，一个名字也可以被多人使用。
（2）id相当于身份证号码，是唯一的，不能重复。
（3）两个选择器区别最大在于使用次数。
（4）类在修改样式中用的最多，id与js配套使用。
2.6通配符选择器：用“*”定义，表示选取页面中所有元素。
语法规范：

选择器总结：

3.字体属性
3.1字体系列：font-family
语法：
注意：（1）各种字体之间用英文逗号隔开。
（2）若有空格隔开的多个单词组成的字体，加引号。
（3）尽量使用系统默认字体，保证在任何用户的默认浏览器中都能正确显示。
（4）常见字体：Microspft YaHei,tahoma,Arial,'Hiragino Sans GB'。
3.2字体大小：
语法：