Web : CSS

常用属性

1. 使用Web字体

@font-face {
    font-family: Delicious;
    src: url('/Delicious-Roman.otf')
}

然后调用该字体: 
h3 { font-family: Delicious, sans-serif; }

在IE中显示为

 

2. 规定添加到文本的修饰

text-decoration: none

none    默认。定义标准的文本

underline   定义文本下的一条线

overline   定义文本上的一条线

line-through 定义穿过文本的一条线

blink    定义闪烁的文本

 

3. 增加或减少字符间的空白(字符间距)

h1 {letter-spacing: -0.5em}

h2 {letter-spacing: 20px}

在IE中显示为

normal:  默认。规定字符间没有额外的空间

length:   定义字符间的固定空间(允许使用负值)

inherit

 

4. 设置字体的尺寸

font-size: 200%

medium:  默认值

smaller:   设置为比父元素更小的尺寸

larger:    设置为比父元素更大的尺寸

length:   设置为一个固定的值

%:      设置为基于父元素的一个百分比值

inherit

 

5. 规定元素中的文本的水平对齐方式http://www.w3school.com.cn/css/pr_text_text-align.asp

text-align: left;  把文本排列到左边。默认值:由浏览器决定。

right  把文本排列到右边

center   把文本排列到中间

justify    实现两端对齐文本效果

inherit

 

6. 设置所有外边距属性(依次为上右下左)

margin: 10px 5px 15px 20px

margin: 10px  表示4个外边距都是10px

  

7. 设置所有内边距属性(依次为上右下左)

padding: 10px 5px 15px 20px;

padding-left: 20px;

 

8. 设置元素的背景颜色 

backgound-color: yellow

 

9. 设置所有的边框属性

border: 1px dashed #aaaaaa;

 

10. 这是边框样式

border-style: dotted dolid double dashed;  表示上边框是点状 右边框是实线 下边框是双线 左边框是虚线

和margin属性顺序一样

border-style: dotted;  所有4个边框都是点状

 

11. 规定元素应该生成的框的类型

display: inline;  默认。此元素会被显示为内联元素,元素前后没有换行符

none:       此元素不会被显示

block:       此元素会被显示为块级元素,此元素前后带有换行符

inherit:      规定应该从父元素继承display属性的值

 

12. 设置表格的边框是否合并为一个单一的边框

table {

  border-collapse: collapse;

}

siparate   默认值。边框会被分开。不会忽略border-spacing和empty-cells属性

collapse   如果可能,边框会合并为一个单一的边框。会忽略border-spacing和empty-cells属性

inherit

 

13. 设置背景图像http://www.w3school.com.cn/css/pr_background-image.asp

 background-image: url(bgimage.gif);

 background-repeat: none(默认值)  根据此值,可以设置图像无线平铺或者不平铺等。

 

14. 规定元素的定位类型

h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}

在IE中显示为

Web : CSS_第1张图片

static  默认值。没有定位,元素出现在正常的流中(忽略top,bottom,left,right或者z-index声明)

absolute:     生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位。元素的位置通过"left","top","right"以及"bottom"属性进行规定

fixed:       生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过"left","top","right"以及"bottom"属性进行规定。

relative:       生成相对定位的元素,相对于其正常位置进行定位。因此,"left: 20"会向元素的LEFT位置添加20像素。

inherit

 

15. 定义元素在哪个方向浮动

float: none;  默认值。元素不浮动,并会显示在 其在文本中出现的位置

left:  元素向左浮动

right:  元素向右浮动

inherit

 

expression用法 : 

width: expression(document.body.clientWidth);

height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight);

top: expression(document.body.clientHeight / 2 - this.offsetHeight / 2);

left: expression(document.body.clientWidth / 2 - this.offsetWidth / 2);

你可能感兴趣的:(Web : CSS)