CSS3
CSS3
CSS-以审美的角度负责页面的样式
*
1.css是cascading style sheet 层叠式样式表的简写。
2.css三种导入方式：行内样式（style:””），内部样式表（写在head当中），
外部样式表(<link href=’ xxxx’ rel=”stylesheet”/>)
3. 标签选择器 tagName{}
类选择器: .className{}
Id选择器 #idName{}唯一性
4.常用的属性
--字体效果：
字号大小：font-size:40px;
加粗：font-weight: bold;不加粗font-weight: normal;
斜体：font-style: italic;font-style: normal;
--文本效果：
字体颜色：color:red
下划线：text-decoration: underline;
--背景：
背景颜色：background-color: blue;
背景图片：background-image:url(“xxx”) no-repeat;
--列表
去除列表样式list-style-type:none;
***
--浮动—可以不记
浮动的元素高于文档流，不和标准文档流当中的元素一块排如果浮动元素的哥哥是浮动元素，飘到它后面去如果浮动元素的哥哥是标准文档流，那么这个浮动元素就不飘不上普通元素视角：哥哥是浮动元素，在排版的时候无视哥哥占的位置（叠加）哥哥不是浮动元素，跟着排在下一行。
特性：字围 塌陷（如何解决
--定位—可以不记
1./*fixed固定定位，相对屏幕距离*/设置position:fixed，设置距离left，top
列子：随着屏幕滚动的广告
2.relative相对定位，还在文档流当中,本身的位置还在标准文档流当中占据
相对自己做偏移
3.绝对定位
使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移
如果没有已经定位的祖先元素，会以浏览器窗口为基准进行定位
4z-index:当多个元素定位重叠的时候，谁在上线由这个属性值决定
最大5，默认是0
**
5.高级选择器：
后代选择器-- parent child:{}
交集选择器-- AB{}这个标签不仅符合A也符合B
并集选择器-- p,div,span{}个样式作用到p，也作用到div，也作用到span
通用选择器-- *{}
儿子选择器—parent>child:{}
兄弟选择器— +,~
*****
6.CSS选择器的继承性和层叠性
1.有一些属性，当给自己设置的时候，自己的后代都继承上了，这个就是继承性。继承性是从自己开始，直到最小的元素。
那些属性能被继承？Color，text开头的，line开头的，font开头的。
2.层叠性--选择器冲突，计算权重
Id，class，标签
如果不能直接选中某个元素，通过继承性影响的话，那么权重是0。
如果大家都是0，那么有一个就近原则：谁描述的近，听谁的。
**
Css+div布局------通过div对你页面切割，css来加样式
**
盒子模型:
行高的设置会让文字自动居中（垂直方向）
2.一个div的margin的设置会让这个盒子自动居中（水平）
3.margin和padding的距离设置上右下左
4.盒子本身占据的地盘是内外+边框+内容
但是盒子的width属性只包含内容
/*box-sizing: border-box;*/如果是这种盒子，那么
width就是内+边框+内容。
*
伪类和伪元素
伪类---:active样式添加到被激活的
:focus添加到被选中的
:hover悬浮的时候
:link未被访问过的链接
:visited被访问过的链接
:first-child讲样式添加到元素的第一个子元素
伪元素种类--
::first-letter将样式添加到文本的首字母
::first-line首行
::before在某元素之前插入一些内容{content:''}
:nth-xx-type(odd || even || n||2n||3)
**
CSS3的东西
1.文字阴影效果text-shadow:red 10px 10px 1px;
2.圆角效果:border-radius可以用来画圆，半圆
3.盒子阴影box-shadow: inset 20px 10px 100px green;
4.2d平移旋转缩放倾斜
5.过渡
6.动画
CSS3常用
CSS3：
1.文字阴影效果text-shadow:red 10px 10px 1px;
2.背景颜色渐变background:linear-gradient(to top,green,red,pink)
3.圆角效果:border-radius可以用来画圆，半圆
4.盒子阴影box-shadow: inset 20px 10px 100px green;
CSS常用点：
1.行高的设置会让文字自动居中（垂直方向）
2.一个div的margin的设置会让这个盒子自动居中（水平）
3.margin和padding的距离设置上右下左
4.盒子本身占据的地盘是内外+边框+内容
但是黑子的width属性只包含内+边框+内容
5.浮动：
浮动的元素高于文档流，不和标准文档流当中的元素一块排版
--如果浮动元素的哥哥是浮动元素，飘到它后面去
如果浮动元素的哥哥是标准文档流，那么这个浮动元素就不飘不上
--普通元素视角：哥哥是浮动元素，在排版的时候无视哥哥占的位置（叠加）
哥哥不是浮动元素，跟着排在下一行
伪类---:active样式添加到被激活的
:focus添加到被选中的
:hover悬浮的时候
:link未被访问过的链接
:visited被访问过的链接
:first-child讲样式添加到元素的第一个子元素
伪元素种类--
::first-letter将样式添加到文本的首字母
::first-line首行
::before在某元素之前插入一些内容{content:''}
