01-CSS基础选择器和CSS字体属性

1. CSS基础选择器

1.1 选择器分类

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

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

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

1.2 标签选择器

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

作用：可以把某一类标签全部选择出来，比如所有的<div>和所有的<span>标签

1.3 类选择器

如果想要单独选一个或几个标签可以使用类选择器

类选择器在HTML中以 class 属性表示，在CSS中，类选择器以一个点 “.” 号显示

.类名 {
    属性1：属性值;
    ...
}

1. 类选择器使用 " . "（英文点号）进行标识，后面紧跟类名（自定义）
2. 可以理解为给这个标签起了一个名字
3. 长名称或词组可以使用横线来为选择器命名
4. 不要使用纯数字、中文等命名，尽量使用英文字母来表示
5. 命名要有意义，尽量使别人一眼就知道这个类名的意思

常见的类命名规则：

头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
页面主体：main

1.4 类选择器-多类名

1. 多类名使用方式

 <div class="red font35"></div>

1. 在标签class属性中写多个类名
2. 多个类名中间必须用空格分开
3. 这个标签就可以分别具有这些类名的样式

2. 多类名开发中的使用场景

1. 把一些公共的样式都放到一个类名中，方便调用
2. 这些标签都可以调用这个公共的类，然后再调用自己独有的类
3. 节省CSS代码，便于统一修改

1.5 id选择器

id 选择器可以为特有 id 的 HTML 元素指定特定的样式

HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以 " # " 来定义

#id名{
    属性1：属性值1;
    ...
}

注意：id 属性只能在一个HTML文档中出现一次

id 选择器和类选择器的区别

• 类选择器 class 好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用
• id 选择器好比人的身份证号，全国是唯一的，不可重复
• id 选择器和类选择器最大的不同在于使用次数上
• 类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用

1.6 通配符选择器

在CSS中，通配符选择器使用 " * " 定义，它选取页面中所有元素（标签）

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

• 通配选择器不需要调用，自动就给所有的元素使用样式
• 特殊情况才使用，下面是清除所有的元素标签的内外边距

* {
    margin: 0;
    padding: 0;
}

2. CSS字体属性

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

2.1 字体系列

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

p { font-family: "微软雅黑";}
div { font-family: Arial."Microsoft YaHei","微软雅黑";}

• 各种字体之间必须使用英文状态下的逗号隔开
• 一般情况下，如果有空格隔开的多个单词组成的字体加引号
• 尽量使用系统默认自带字体，保证在任何用户的浏览器中能够正确显示
• 最常见的几个字体：body { font-family: “Microsoft YaHei”, tahoma, Arial, “Hiragino Sans GB”; }

2.2 字体大小

CSS 使用 font-size 属性来定义字体大小

p {font-size: 20px;}

• px (像素)大小是网页中常用的单位
• 谷歌浏览器默认的字体大小是 16px
• 不同浏览器可能默认显示的字号大小不一致，所以尽量给一个明确值
• 可以给 body 指定整个页面文字的大小

2.3 字体粗细

CSS 中用 font-weigth 属性设置文字字体的粗细

p {
    font-weight: bold;
}

属性值	描述
normal	默认值（不加粗）
bold	定义粗体（加粗的）
100-900	400等同于normal，700等同于bold，不加单位

2.4 文字样式

CSS 使用 font-style 属性设置文本的风格

p {
    font-style: normal;
}

属性值	作用
normal	默认值，浏览器会显示标准的字体样式 font-style: normal;
italic	浏览器会显示斜体的字体样式

注：经常使用这个来给斜体标签如：em/i 改为不倾斜字体

2.5 字体复合属性

字体属性可以把以上文字属性样式综合起来写，可以节约代码：

body {
    font: font-style font-weight font-size/line-height font-family;
}

• 使用 font 属性，必须按照以上顺序书写，不能更换顺序，并且各个属性间以空格隔开
• 不需要设置的属性可以省略（取默认值，或者不写），但是必须保留 font-size/line-height 和 font-family 属性，否则 font 属性将不起作用