标签:列表 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.动画
标签:列表 relative idt 动画 固定 自动 :active 美的 上线
原文地址:http://www.cnblogs.com/bugdeaitaigaoshang/p/6881755.html