CSS(day01)

一、CSS概述
1.什么css?
Cascading style sheets
层叠样式表,级联样式表,简称样式表

2.作用
修饰页面中的元素

3.HTML与css的关系
HTML:负责页面的结构搭建,负责数据的显示
CSS:负责装饰页面(亚洲4大邪术)

4.CSS与HTML属性的使用原则
W3C建议,我们尽量使用css的方式来取代html属性
CSS样式:
1.样式代码可以重用
2提高代码可维护性

二、css的语法规范
1.使用css的方式
①行内样式,内联样式
在元素的style属性中,做样式声明

样式声明: 样式属性:样式值;
初学的样式属性:
color:red; 字体颜色
background-color:yellow; 背景颜色
font-size:36px; 字号大小

内联样式的特点:
1.内联样式不能复用
2.内联样式优先级最高
项目中,一般极少使用内联样式,通常在学习和测试的使用

②内部样式
在页面的定义
在style中,编写样式 选择器{样式声明;}
选择器:就是一个条件,页面中符合这个条件的元素,都会应用这个样式
ex div{} p{} h2{}

内部样式的特点:
1.样式可以重用,但是仅对当前页面元素生效
2.内部样式的重用有局限性,项目中使用较少,在学习和测试中使用较多

③外部样式
单独创建一个css文件,在其中声明样式
在任何的html的中
使用link标签引入

可以做到广泛的样式重用

2.CSS样式的特征
①继承性
大部分的css效果,是可以直接被后代元素继承的
②层叠性
可以为一个元素设置多个样式规则
规则中,属性不冲突时,都可以作用到当前元素上
③优先级
如果样式声明时属性冲突,按照样式规则的优先级取应用样式
默认优先级:
最高 内联样式
内部,外部 就近原则(link的编写位置,决定距离远近)
最低 浏览器默认样式
④调整优先级
!important 规则
放在属性值与分号之间,与值之间有空格
如果一个样式属性和值带有!important 不会被其它样式覆盖
内联都不能替代他,
内联样式不能添加!important

三、基础选择器(重点☆☆☆☆)
1.选择器的作用
规范了页面中哪些元素能够使用定义好的样式
选择器就是为了匹配元素(选择器就是一个条件,符合这个条件的元素就可以应用这个样式)
2.选择器详解
①通用选择器
*{样式声明} ,匹配所有元素
但是由于及其低下.*在项目中使用非常少
*{margin:0;padding:0} 所有元素的内外边距清空
ps:为了让代码可以适应各个浏览器,我们一般在开发前,把默认样式一次性清空或者统一,不让不同浏览器出现偏差,这个行为,叫做css reset

②.元素选择器,标签选择器
设置页面中所有这个元素的公用样式
ex:div{样式声明} span{样式声明}

③.ID选择器(专属定制)
eg: <any id="id值"></any>
#id值{样式声明}
匹配页面中,对应id的这个元素的样式
一般id选择器在项目中不单独使用
而是作为后代选择器或者子代选择器的开头部分
#content div>span a:hover{}

④类选择器
定义类选择器 .类名{样式声明}
使用类选择器
注意:类名的规范:
1.声明的时候,必须写点,不能省略
2.class调用的时候不能有点
3.类名不能以数字开头
4.类名中只能有两种符号 - _
类选择器的其它使用方式
1.多类选择器
<any class="类名1 类名2 类型3......">
2.分类选择器1
元素选择器.类名{样式声明}
匹配具体某一个元素,同时这个元素引用这个类名
3.分类选择器2
.类名1.类名2{样式声明}
同一个标签,引用了类名1和类名2,就可以应用这个样式
分类选择器作用:
1.更精确的找到目标元素
2.提升选择器的权值

⑤群组选择器
将多个选择器使用,连接,统一定义公共的样式
legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}

⑥后代选择器
通过元素的后代关系匹配元素
后代:一级或者多于一级的嵌套
div p span{color:red;}

⑦子代选择器
通过元素的子代关系匹配元素
子代:一级的嵌套
div>p>span{background-color:yellow}

⑧伪类选择器
匹配元素不同状态的选择器
:link 匹配元素未访问时的状态
:visited 匹配元素访问后的状态
:active 匹配元素激活的状态
:hover 匹配鼠标悬停到元素上时的状态
:focus 匹配元素获取焦点时的状态

⑨选择器的权值
权值:标识当前选择器的重要程度,权值越大,优先级越高
!important >1000
内联 1000
id选择器 100
类选择器 10
伪类 10
元素选择器 1
*通用选择器 0
继承的样式 无
权值的特点:
1.当一个选择器含有多个选择器时,需要把所有的选择器的权值相加,然后比较,权值大的优先显示
2.权值相同,就近原则
3.群组选择器,不相加,各算个的权值
4.内联样式中不能添加!important
5.选择器权值的计算,最终的结果不会超过本身的最大数量级

四、尺寸和边框
1.尺寸属性
设置元素的宽度和高度
width 宽度 px为单位的数字,%父元素宽度百分比
height 高度 px为单位的数字,%父元素宽度百分比
(父元素没定义高度,%失效)
max-width 最大宽度
min-width 最小宽度
max-height 最大高度
min-height 最小高度

附加知识点----单位
1.px 像素
2.in 英寸 1in=2.54cm
3.pt 磅值 一般修饰字体大小 1pt=1/72in 0.0353cm
4.cm
5.mm
相对单位
6.em 相对于父元素定义的数值的整倍数
7.rem 相对于html元素定义数值的整倍数
8.% 相对于父元素数值的百分比