- css基础知识
- 概述
css(cascading style sheet)层叠式样式表（关键字：层叠式 样式）
前端三层：
结构层：从html角度描述页面（标签）
样式层：从美化角度书写样式（css）
行为层：从用户交互角度书写行为（js）
-
- css组成
css分为两部分：
第一部分：选择器（给谁设置样式属性）
第二部分：样式属性（给选择器添加样式）
-
- css作用
css作用设置元素样式属性（盒子样式，文字样式）
书写css要求：
有什么样式书写什么属性。
每一条属性，逐条书写，每条属性结尾书写分号;
盒子属性：
width: 盒子宽度，单位是px（像素）
height: 盒子高度，单位是px（像素）
background-color:背景颜色
短横连接的都是单一属性
background复合属性
border: 也是复合属性（边框）
复合写法属性值用空格隔开
border: 1px(边框线宽度) solid（线的类型：实线） #000（线的颜色）;
文字属性：
color: 文字颜色
font-size: 单一属性，文字大小（字号），单位也是px
font-family: 字体
可以同时设置多个字体（用逗号隔开），会从第一个字体开始匹配,字体名称用双引号包裹
先书写英文字体（Arial）
再书写中文，Microsoft Yahei(微软雅黑) 宋体（SimSun）
|
如果要求网页加载更快，书写英文单词
|
-
- css书写位置
内嵌式：所有样式属性书写在head标签中一对style标签里。（练习使用）
type:类型
属性值：text/css，纯文本css文件
|
行内式：前端不使用，书写在标签一个style属性中，属性值包含了所有的css样式属性
|
外链式：通过Link标签引入一个css文件
css文件扩展名.css，样式属性直接书写在css文件中.
link是单标签，书写在head标签中
属性：
rel: 表示html和css关系，样式表
type: 表示类型（可以省略）
href: 路径
|
-
- css杂项
css键值对： k: v
每一条属性结束必须添加分号;
每一条属性独占一行。
css对空格，缩进，换行不敏感。
|
- css基础选择器
2.1 标签选择器
通过标签名选中元素。
语法： 标签名 {}
不管标签嵌套多深，都可以通过标签名查找到。
|
用途：清除，重置默认样式
|
2.2 id选择器
通过id名选中元素
语法：#id名（#和id名紧紧书写）
id名命名规则：html严格区分大小写，必须以字母开头，后面可以有数字，下划线，短横。
id名是唯一的，不管是不是相同的标签只有出现一次该id名
|
一般情况我们不使用id设置样式。
2.3 类选择器
通过类名选中元素。
给元素添加class属性
.类名 {}
类名命名规则和id名一样。
同一个元素可以被不同选择器选中（id选择器设置字号，类选择器设置文字颜色）设置不同的样式属性，这些属性都会加载在元素身上。
层叠性体现（叠加）：同一个元素被不同选择器选中，设置不同的样式，会同时加载。
同一个元素可以设置多个类名，类名之间用空格隔开。
多个元素可以同时有相同类名。
|
类名特殊应用：原子类（我们可以将一些常用属性，设置为原子类，一般原子类只一个属性，便于样式设置）
|
用途：相同样式的元素，添加同一个类名（类名上样式）
2.4 通配符
* {}
通配符可以选中页面上所有的标签（包括body）。
用途：练习阶段使用通配符快速清除默认样式。
|
- 高级选择器
高级选择器是在基础选择器上延伸
-
- 后代选择器
通过嵌套关系进行选择，一般通过标签或者类选择器确定大范围，在大范围内再次选择。
语法：每一层选择器用空格隔开
|
后代选择器不但可以选中儿子，还可以选中孙子等所有的后代元素。
|
一般我们在使用后代选择器是，将每一层祖先补全，精确选择。
|
.box p {}一样会选中下面的结构
|
不管怎么，一定在书写选择器时有对应的结构。
|
|
想要资料的就加我q3252897743，不懂感恩心态的朋友，就不要找我索取了，谢谢