css 属性

目录： 1.字体 2.文本 3.背景 4.边框、轮廓 5.列表 6.定位属性 7.表格

1.字体属性

---

1.1.font 设置所有字体属性

p{font: italic bold 12px/20px arial,sans-serif;}

1.2.font-family 文本的字体系列

p{font-family: "隶书","Times New Roman",Georgia,Serif;}

1.3.font-size 文本的字体尺寸

.p2{font-size: 90%;}

1.4.font-size-adjust 为元素规定 aspect 值

  略

1.5.font-stretch 收缩、拉伸字体

p{}

1.6.font-style 文本的字体样式

p.style1 {font-style:normal;}
p.style2 {font-style:italic;}

1.7.font-variant 是否以小型大写字母的字体显示文本

p{font-variant: small-caps;}

1.8.font-weight 字体的粗细

p{font-weight: bold;}
p{font-weight: 700;}

1.9.color 字体颜色

p font{ color: pink;}

2.文本属性

---

2.01.color 文本的颜色

.leftForm{color: pink;}

2.02.direction 文本的书写方向

p1{direction: rtl;}
p2{direction: ltr;}

2.03.letter-spacing 字符间距

h1 {letter-spacing: -0.1em;}
h4 {letter-spacing: 5px;}

2.04.line-height 行高

　　妙用，div中使得内容上下居中，尝试设置合适的行高

p.nor {line-height: normal;}
p.han {line-height: 100%;}

2.05.text-align 文本的水平对齐

{text-align: center;}

2.06.text-decoration 装饰效果

a1 {text-decoration: overline;}
a2 {text-decoration: line-through;}
a3 {text-decoration: underline;}
a4 {text-decoration: blink;}
aa {text-decoration: none;}

2.07.text-indent 段落首行缩进

p {text-indent: 2em;}

2.08.text-transform 文本的大小写

.p1 {text-transform: uppercase}
.p2 {text-transform: lowercase}
.p3 {text-transform: capitalize}

2.09.unicode-bidi 文本方向

2.10.white-space 处理元素包含的空白、回车

　　默认normal，全忽略，溢出折行。pre，保留原格式。pre-line，合并空白符，保留换行。nowrap，全忽略，溢出不折行。

white-space: pre;

2.11.work-spacing 单词词距

word-spacing: 1px;

2.12.hanging-punctuation 标点符号

　　当前主流浏览器绝不支持

2.13.punctuation-trim 标点符号

　　当前主流浏览器绝不支持

2.14.text-emphasis 标记

　　当前主流浏览器绝不支持

2.15.text-justify 对齐方式

　　仅IE支持

2.16.text-outline 轮廓

　　所有主流浏览器都不支持

2.17.text-overflow 当文本溢出包含元素时

text-overflow: clip|ellipsis|string;

　　clip，直接截断（不显示超出部分）。ellipsis，显示省略号代替超出内容。

text-overflow: ellipsis;

　　光标划过时显示全部文本

div:hover{text-overflow: inherit; overflow: visible;}

2.18.text-shadow 添加阴影

text-shadow: #h #v #b #color;

　　h、v，表示阴影坐标，必选项。b，羽化程度。最后一个设定颜色。

2.19.text-wrap 换行规则

　　所有主流浏览器都不支持

2.10.word-break 换行规则（非中日韩）

　　默认，由浏览器决定。

2.11.word-wrap 分割单词

3.背景

---

3.1.background 设置所有的属性

3.2.background-p_w_upload 是否随文本等滚动

background-p_w_upload:fixed;

　　背景固定，不随文本内容移动。scroll，随文本一起滚动。

3.3.background-color 背景色

background-color:#00ff00;

3.4.background-p_w_picpath 背景图像

background-p_w_picpath:url(/p_w_picpath/helloNav.gif);

　　默认像木地板一样重复

3.5.background-position 背景图像的开始位置

background-position:center left;

　　第一个值必选（top、center、bottom）、第二个值备选（left、center、right）。默认为center，顺序可以颠倒。

　　或者使用像素值、百分比来定义纵横坐标。三者表示时，可以混用，默认仍然为center。

3.6.background-repeat 背景重叠样式

　　取值：repeat、repeat-x、repeat-y、no-repeat。

3.7.background-clip 背景区域

background-clip:content-box;

　　取值：border-box、padding-box、content-box。

3.8.background-origin 定义position起始位置

　　取值：border-box、padding-box、content-box。

3.9.background-size 背景图像的尺寸

background-size:80px 60px;

4.边框和轮廓

---

4.01.border 边框

border:1px solid red;

4.02.border-bottom 底部边框

　　混搭3、4、5。

border-bottom:thick pink inset;

4.03.border-bottom-color 底部边框颜色

border-bottom-color:pink;

4.04.border-bottom-style 底部边框样式

　　可选值：none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset。

border-bottom-style: inset;

4.05.border-bottom-width 底部边框厚度

　　可选值：thin、medium、thick、length。

border-bottom-width: thick;

4.06.border-color 边框颜色

4.07.border-style 边框样式

4.08.border-width 边框厚度

4.09.outline 轮廓属性

outline: pink dotted thick;

4.10.outline-color 轮廓颜色

4.11.outline-style 轮廓样式

4.12.outline-width 轮廓厚度

4.13.border-bottom-left-radius 圆角边框样式

border-bottom-left-radius:2em;

4.14.border-p_w_picpath

　　混搭15、16、17、18、19。

4.15.border-p_w_picpath-outset 边框图像区域超出边框的量

border-p_w_picpath-outset: 30 30 30 30;

　　顺序是上、右、下、左。

4.16.border-p_w_picpath-repeat 边框图像的重叠样式

　　属性值：stretch、repeat、round。表示效果：拉伸、平铺（重复）、缩放。

4.17.border-p_w_picpath-slice 向内偏移

border-p_w_picpath-slice: 50% 50% 50% 50%;

4.18.border-p_w_picpath-source 用作边框的图片

border-p_w_picpath-source: url(border.png);

4.19.border-p_w_picpath-width 图片边框的宽度

border-p_w_picpath-width: 30 20 50 10;

4.20.border-radius 添加圆角边框

border-radius:15px;
border-top-left-radius:2em;

4.21.box-shadow 添加阴影

width:300px;
height:100px;
background-color:magenta;
box-shadow: 50px 50px 15px black;

5.列表

---

　　不用标记

list-style:none

5.1.list-style 定义所有属性

　　混搭234

5.2.list-style-p_w_picpath 以图像做标记

ul{list-style-p_w_picpath: url('/p_w_picpath/hellokitty.png');}

5.3.list-style-position 标记位置

ul.inside{list-style-position: inside;}
ul.outside{list-style-position: outside;}

5.4.list-style-type 标记的类型

6.定位属性

---

6.01.clear 不允许浮动

　　允许的值：left、right、both、none。

6.02.clip 剪裁绝对定位元素

position:absolute;
clip:rect(10px 60px 40px 30px);

　　设置显示的矩形，rect(y1 x2 y2 x1)中的数值设定：起点是左上角（x1,y1）到右下角(x2,y2)。

6.03.cursor 光标样式

cursor:pointer;
cursor:text;
cursor:wait;

　　手型、文本、转圈（等待标志）。

6.04.display 框类型

display:inline;

6.05.float 浮动

float:right;

6.06.overflow 框溢出

overflow: auto;
overflow: scroll;

6.07.position

　　位置测试时，受到padding、margin的约束。

　　取值：absolute、fixed、relative、static。表示：{绝对位置，相对于非static父元素。不在流中}、{固定位置，相对于浏览器。不在流中，覆盖了其他元素}、{相对位置，相对于流中前边-外围元素。不会影响其他布局，自身悬浮起来，位置依然在流中}、{无定位，元素出现在正常的流中。关于位置的定义失效}。

    
        
            *{
                margin:0px;
                padding:0px;
            }
            h2.pos_t
            {
                position:fixed;
                left:10px;
                top:10px;
            }
            h2{
                border:5px dashed green;
            }
            p{
                border:3px solid red;
            }
        
    


    
我在测试（头一个），通过车辆绕行。
    这里是测试（对象）
    
我在测试（后一个），通过车辆绕行。

6.08.top、right、bottom、left

　　如果上边7的"position"属性值是"static"，那么设置这里的属性不会产生任何效果。

6.09.vertical-align

6.10.visibility 可见

6.11.z-index 堆叠顺序

7.表格

---

7.1.border-collapse 合并表格边框

border-collapse:collapse;

　　合并边框

7.2.border-spacing 单元格距离

border-spacing: 10px 5px;

　　水平、垂直间距

7.3.caption-side 标题位置

caption-side: top;

7.4.empty-cells 空单元格的显示

empty-cells: show;
empty-cells: hide;

7.5.table-layout 布局算法

table-layout: fixed;
table-layout: automatic;

　　默认是自动缩放