css常用属性

CSS常用属性

1.CSS选择器

1.1元素选择器

元素是选择器

p{color:red;}

 

1.2选择器分组

H1,p,em{color:blue;}

多个元素作为选择器

 

1.3id选择器

Id作为选择器

#intro{font-weight:blod}

<p id=”intro”>This is a paragraph of intrduction</p>

 

1.4class选择器

类作为选择器

.class {color:red;}

<h1 class=”important ”>

This heading is very important

</h1>

 

1.5派生选择器

CSS派生选择器

1.5.1CSS后代选择器

后代选择器可以选择作为某元素后代的元素

H1 em{color:red;}

<h1>This is a<em>import</em>heading</h1>

 

 

1.5.2CSS子元素选择器

子元素选择器只能选择作为某元素子元素的元素

H1>strong{color:red;}

<h1>This is <strong>very</strong>import</h>

 

 

1.5.3CSS相邻兄弟选择器

相邻兄弟选择器可选择紧接在另一个元素后的元素，且两者有相同父元素

H1+p{margin-top:50px;}

<h1></h1>

<p></p>

 

1.6通配选择器

*{}

 

1.7CSS伪类

:active         向被激活（选择）的元素添加样式

:focus          向拥有鼠标键盘输入焦点的元素添加样式

:hover         当鼠标悬浮在元素上方时，向元素添加样式

:visited         向被访问的链接添加样式

:first-child       元素第一个子元素添加样式

 

1.8CSS伪元素

:first-letter       向文本第一个字母添加样式

:first-line        向文本首行添加样式

:before          在元素之前添加样式

:after           在元素之后添加样式

 

 

2CSS样式

2.1CSS背景

Backgound-color        设置背景色

Background-image       将图片放入背景

Background-repeat      在页面上对背景图像平铺

Background-position     改变图像在背景中的位置

Background-attachment  防止滚动

 

2.2CSS文本

Text-index              实现文本缩进

Text-align               影响一个元素中的文本行之间的对齐方式

Word-spacing            改变字之间的标准间隔

Letter-spacing           字母之间的间隔

Text-transform          处理文本的大小写(none,uppercase,lowercase.capitalize(首字母大写))

Text-decoration           加划线情况(none,underline,overline,line-through,blink)  

White-space           影响到用户代理对源文档的空格，换行的处理（normal,nowrap()防止文本换行）

 

2.3CSS字体

Font-family             定义文本字体

Font-style              常用于规定斜体文本(normal,italic)

Font-variant             设置小型大写字母

Font-weight             设置文本的粗细

Font-size                设置文本的大小(数值)

 

2.4CSS链接

a:link        未访问的链接

a:visited      用户已访问的链接

A:hover    鼠标指针位于链接上方

A:active    链接被点击时刻

 

3.5列表

List-style-type          将图像设置为列表标志(none无,disc实心圆,circle空心圆,square实心方块)

List-style-image         列表项标志的位置

List-style-position       列表项标志的类型

 

3.5表格

border   th td               表格边框              

Width和height         表格宽度和高度

Padding               表格内边距      

 

4框模型

Padding                内边距

Border                 边框

Margin                 外边距

 

 

5定位

Position:relative    

Position:absolute

 

 

Float                 浮动(left,right)

Clear                 清除浮动元素(both,left,right)

 

 

6CSS高级

6.1CSS对齐

使用marging属性水平对齐            auto表示居中

使用position属性左和右对齐

使用float属性左和右对齐

 

6.2CSS尺寸

Width                              宽

Height                              高

 

6.3CSS分类

Cursor                   规定当只想元素上时指针类型(auto,pointer)

Display                   是否和如何显示元素

Visibility                  是否可见(visible,hidden,inherit)

 

6.4图片透明

Opacity                   透明度

Hove                     鼠标在其上有的变化

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

CSS3属性

1边框

Border-radius             创建圆角

Box-shadow              向方框添加阴影     

border-image             用于边框的图片

 

z-index

 

2背景

Background-size

Background-origin            规定图片的定位区域

 

 

 

3文本效果

Text-shadow              向文本应用阴影        （水平阴影，水平阴影，模糊距离，阴影的颜色）

Word-wrap               自动换行

 

4.2D转换方法

Translate                 元素从当前位置移动

Rotate                   元素顺时针旋转给定角度

Scale （2，3）                   元素尺寸增加或减少

 

 

 

5过渡

transition

CSS3过渡是元素从一种样式改变成另一种效果

 

 

 

 

6动画

 

@keyframes myfirst       用于创建动画

@keyframes myfirst

{

From {background:red;}

To{background:yellow;}

}

 

7创建多列

column-count

Column-gap

 

 

8用户界面

Resize                重设元素尺寸

Box-sizing             盒尺寸(border-box带边框)

Outline-offset          对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓

 

 

 

 

 

 

 

 

 

 

 

注意：Chrome和Safari需要前缀-webkit-

IE9需要-ms-