CSS样式实战指南-优快云博客

引用： http://www.runoob.com/css/css-examples.html

背景：background:#ffffff url('img_tree.png') no-repeat right top;

文字

上划线：text-decoration:overline;

中划线：text-decoration:line-through;

下划线：text-decoration:underline;

大写：text-transform:uppercase;

小写：text-transform:lowercase;

首字母大写：text-transform:capitalize;

段落缩进：text-indent:250px;

字符间距：letter-spacing:2px;

行距：line-height:200%;

单词间距：word-spacing:30px;

禁用自动换行：white-space:nowrap;

图片与文字的对齐方式：vertical-align:text-top; vertical-align:text-bottom;（文字在图片上方/文字在图片下方）

字体：font-family:Microsoft YaHei;

字体大小：font-size:100%;

font-size:20px;

font-size:2.5em;//1em=16px

文字样式：font-style:normal; font-style:italic;

文字异体：font-variant:small-caps;//小写转大写，但字体大小偏小

字体粗细：font-weight:lighter; font-weight:bold;

文字属性： .ex2
{
font:italic bold 12px/30px Georgia,serif; //字体大小12px，行高30px
}

修改标记属性冒号修改属性值

//设置属性值

a:link,a:visited
{
display:block;//显示背景为块状
font-weight:bold;
color:#FFFFFF;
background-color:red;
width:120px;
text-align:center;
padding:14px;
text-decoration:none;
}

引入外部css文件

只有一个样式引用

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

列表：ul 无序号 ol含序号

ul.a {list-style-type:circle;list-style-image:url('icon.jpg');}//空心圆设置图标图片
ul.b {list-style-type:disc;}//实心圆角
ul.c {list-style-type:square;}//实心矩形
ol.e {list-style-type:cjk-ideographic;}//中文
ol.f {list-style-type:decimal;}//数字
ol.g {list-style-type:decimal-leading-zero;}//首位补0数字

ol.u {list-style-type:none;}//无

ol.v {list-style-type:inherit;}//实心圆

列表图标间距

ul
{
list-style-type:none;
padding:0px;
margin:0px;
}
ul li
{
background-image:url(sqpurple.gif);
background-repeat:no-repeat;
background-position:0px 0px;
padding-left:114px;
}

表格

table
{

width:50%// 父控件的一半高度
margin:100px;
border-collapse:collapse;
}

{

background-color:green;//背景

}
td,th //th:标题 td：列
{

vertical-align:bottom;

text-align:center;

vertical-align:bottom;
padding:5px;
border:3px solid green;

background-color:green;

}

caption {caption-side:bottom;} //表格标题位置

<caption>Table 1.1 Customers</caption>

表格元素

table tr th td

段落边框:

border-bottom:1px solid white;

border-style:dashed;

border-style:solid;
border-width:medium;

border-top-width:15px;

border-color:#0000ff;

border-color:#ff0000 #00ff00 #0000ff;（从上逆时针循环）

边框总体

border:5px solid red;

border-top:thick double #ff0000;

outline:green dotted thick;边框外围轮廓

outline-style:dashed;外围轮廓风格

outline-color:#00ff00;外围轮廓颜色

outline-width:3px;外围轮廓宽度

margin:100px 50px;（从上逆时针循环）

padding:2cm;

组选择器

h1,h2,p
{
color:green;
}

组嵌套选择器

.marked p
{
color:white;
}

段落最大高度宽度

p
{

max-width:20%;

max-width:100px;
max-height:50px;

min-width:150px;

min-height:100px;
background-color:yellow;
}

设置元素可见

visibility: collapse//表格中使用，隐藏一行或一列

visibility:hidden;

display:none;

display:block;

display:inline;

元素的定位

p.pos_fixed
{
position:fixed;
top:30px;
right:-5px;
}

元素的重叠：

img{

position:absolute;//relative
left:0px;
top:0px;
z-index:-1;//负数显示在后面

}

图片的裁切

img{

position:absolute;
clip:rect(20px,150px,100px,0px);//上右下左

}

显示滚动条

div.scroll
{
background-color:#00FFFF;
width:100px;
height:100px;
overflow:auto;
}

浮动

div
{
float:right;
width:120px;
margin:0 0 15px 20px;
padding:15px;
border:1px solid black;
text-align:center;

}

修饰段落中的某几个文字

span
{
float:left;
width:1em;
font-size:800%;
font-family:algerian,courier;
line-height:100%;
}

清除float

div3{
clear:both; //left//right

}

显示链接地址

a:before {content:attr(href);}

列表序号

body {counter-reset:section;}
h1 {counter-reset:subsection;}
h1:before
{
counter-increment:section;
content:"Section " counter(section) ". ";
}
h2:before
{
counter-increment:subsection;
content:counter(section) "." counter(subsection) " ";
}