目录
01 css样式的大致分类
02 css颜色设置的方式
03 font字体设置以及font的连写
04 css的书写位置
05 css的选择器
06 css元素的分类及显示模式的转换
07 css的三大特性
01 css样式的大致分类
1.尺寸类: 宽高 边框 内边距
2.外观类: 文本(字体大小 字体 字体样式) 背景(背景颜色 背景图片 背景图片定位 大小...)
3.位置类: 外边距 定位 浮动
4.其他样式
02 css颜色设置的方式
1.颜色单词 red blue pink
2.rgb(0~255,0~255,0~255)三原色 红绿蓝 红色： rgb(255,0,0)
3.#十六进制颜色设置 红色：#f00 #ff0000 绿色：#0f0 蓝色：#00f
4.rgba(0~255,0~255,0~255,0~1) 设置当前颜色是否为透明 0表示透明 1表示不透明
03 font字体设置以及font的连写
font:
字体加粗: font-weight :100~900 没有单位 100~500不加粗 600~900加粗
字体大小: font-size: px 有单位 (浏览器默认的字体大小是16px)
字体倾斜: font-style:normal(默认值)|italic(倾斜)
字体: font-family: 字体名称 字体可以写中文名称,也可以写英文名称
(谷歌浏览器默认的字体是微软雅黑)
font连写： font:weight style size family (font连写中必须要写的属性是 size 和 family )
04 css的书写位置
css的引入方式:
1.内嵌式(开发中不用讲课中常用)
在当前html文件中 head标签内部 定义style标签 在style标签内定义css代码
内嵌式没有真正的实现样式与结构的分离
2 行内式(不建议使用)
标签都有一个通用的属性 style属性 style="css代码"
只能针对当前标签生效 没有实现结构和样式的分离
3 外链式(实际开发中必须用)
单独定义.css文件
在css文件里面 直接写css代码(不需要style标签了)
需要在当前html的head标签里面 通过link引入这个css文件
真正的实现了 样式和结构分离
05 css的选择器
css选择器分为基本选择器和复合选择器
基本选择器包括:
1.标签选择器：就是使用标签名来作为选择器的名字
2.类选择器：使用class属性定义的，使用.class属性值作为选择器的名字
一个标签可以有多个类选择器，一个类选择器也可以作用在多个标签上
3.ID选择器：使用id属性定义的 ，使用#id值作为选择器的名字
一个标签只能有一个id选择器 ，一个id选择器也只能作用在一个标签上
4.通配符选择器：使用 * 来作为选择器的名字
使用通配符选择器设置的样式会作用在所有的标签上面
复合选择器包括：
1.后代选择器：后代选择器使用空格隔开(选择的是子孙后代标签)
例：div p 表示p标签是属于div标签里面的
2.子代选择器： 使用 符号 > 来隔开 (只能选择自己的子元素标签)
3.并集选择器：使用符号逗号 , 来隔开
4.交集选择器：选择器之间不需要用符号来隔开（表示既是...又是...）
06 css元素的分类及显示模式的转换
在css中把页面标签(元素)分为三种类型：
1.块级元素：p h1~h6 ul>li ol>li dl>dt dd html body div form
特点： 独占一行 可以设置宽高
2.行内元素： span a i/em u/ins b/strong s/del
特点：在一行显示不可以设置宽高
3.行内块元素：input img
特点： 在一行显示并且可以设置宽高
css显示模块的转换
1.display:block(转换为块级元素)
2.display:inline(转换为行内元素)
3.display:inline-block(转换为行内块元素)
07 css的三大特性
1.层叠性：就是把给标签设置的所有样式都叠加起来 所以叫做层叠性
2.继承性：一部分样式设置给父元素的同时 子元素也会生效该样式，这就是css的继承性
哪些属性会被继承：关于文本设置的属性会被继承 color和 font会 其他的不会被继承
css继承性的需要注意的点：
1.h系列标签不要继承字体大小
否则会变的比继承的字体要大，因为h系列标签的默认字体单位是em，
是按照父元素字体大小来确定的 ，所以会变大。
2.a标签不会继承字体颜色
因为a标签的字体颜色是由多个伪类选择器来设置的
所以想要改变a标签的文字颜色 需要选择器直接选择到a标签
3.优先级(权重性)：
给标签设置样式时，可能会出现不同类型的选择器去给同一个标签设置
相同属性，只是属性值不同的情况下则会使用到css的优先级特性。
选择器优先级高的会被使用。
选择器的优先级排序：
继承<标签选择器<类选择器<id选择器<行内样式<!important
