码迷,mamicode.com
首页 > Web开发 > 详细

CSS3

时间:2017-05-20 12:30:38      阅读:219      评论:0      收藏:0      [点我收藏+]

标签:列表   relative   idt   动画   固定   自动   :active   美的   上线   

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

标签:列表   relative   idt   动画   固定   自动   :active   美的   上线   

原文地址:http://www.cnblogs.com/bugdeaitaigaoshang/p/6881755.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!