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:''}