前端小白奋斗史03(css)

CSS 基础选择器

1. 选择器分为基础选择器和复合选择器两个大类.
2. 基础选择器是由单个选择器组
3. 基础选择器又包括：标签选择器、类选择器、id 选择器和通配符选择器

- 标签选择器

标签名{
 属性1: 属性值1; 
 属性2: 属性值2; 
 属性3: 属性值3; 
 ...
}

- 类选择器

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

-多类名使用方式

<div class="red font20">亚瑟</div>

多类名开发中使用场景
(1) 可以把一些标签元素相同的样式(共同的部分)放到一个类里面.
(2) 这些标签都可以调用这个公共的类,然后再调用自己独有的类.
(3) 从而节省CSS代码,统一修改也非常方便.

- id 选择器

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

注意：id 属性只能在每个 HTML 文档中出现一次。口诀: 样式#定义,结构id调用, 只能调用一次, 别人切勿使用.

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

- 通配符选择器

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

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

• 以下是清除所有的元素标签的内外边距

 * {
 margin: 0;
 padding: 0;
}

CSS 字体属性

- 字体系列

CSS 使用 font-family 属性定义文本的字体系列。
p { font-family:"微软雅黑";} 
div {font-family: Arial,"Microsoft Yahei", "微软雅黑";}

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

CSS 使用 font-size 属性定义字体大小。
p { 
 font-size: 20px; 
}

• px（像素）大小是我们网页的最常用的单位
• 谷歌浏览器默认的文字大小为16px
  - 不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小 可以给 body 指定整个页面文字的大小

- 字体粗细

p { 
 font-weight: bold;
}

**

- 文字样式

**

p { 
 font-style: normal;
}