css样式使用示例

1,背景样式

body {
background-color: crimson;
/*背景图片*/
background-image: url("b.jpg");
/*背景图片重复*/
background-repeat: no-repeat;
/*背景图片位置;第一个图片位置，(默认center)第二个图片本省从哪里显示
*/
background-position: left top;
/*背景图片　跟随内容滚动(默认滚动scroll),fixed不滚动*/
background-attachment: fixed;
/*背景图片　尺寸或属性*/
background-size: auto;
}

p {
background-color: aqua;
padding: 5px;
width: 100px;
}

2,文本样式

p {
/*对齐方式*/
text-align: left;
/*首行缩进    */
text-indent: 2em;
}

#p1 {
/*文字样式设置-首字母大写*/
text-transform: capitalize;
}

#p2 {
text-transform: inherit;
}

#p3 {
/*文字样式设置-字母平铺*/
text-transform: full-width;
}

#p4 {
/*文字样式设置-字母全部大写*/
text-transform: uppercase;
/*文本阴影效果 背景距离文本左方距离，背景距离文本上方距离,清晰度，背景颜色*/
text-shadow: 5px 5px 1px #ff0000;
}

#p5 {
/*文本换行 每行长度，包裹方式normal 如果是英文不会拆开*/
width: 100px;
text-wrap: normal;
}

3,字体样式

p {
font-size: 20px;
/*字体*/
font-family: inherit;
/*字体粗细*/
font-weight: bolder;
/*字体风格*/
font-style: normal;
/*字体变形*/
font-variant: inherit;
}

4,链接样式

/*a标签 未被点击状态*/
a:link {
color: red;
/*去除下滑线*/
text-decoration: none;
}
/*a标签 被点击过状态*/
a:visited {
color: green;
}
/*a标签 获取焦点状态*/
a:hover {
color: blue;
}
/*a标签 被按下状态*/
a:active {
color: brown;
}

5,列表样式

ul li {
/*列表的标志 的类型*/
list-style-type: circle;
/*列表的标志 的图片*/
list-style-image: url("b.jpg");
/*列表的标志 的位置*/
list-style-position: inside;;
}

6,表格样式

#tbId, tr, th, td {
/*边框 宽度,风格,颜色*/
border: 1px solid red;
/*边框 合并成为 一条线*/
border-collapse: collapse;
/*内容对齐方向*/
text-align: center;
}

#tbId {
width: 400px;
height: 400px;;
}

.abc {
background-color: blueviolet;
}

7,轮廓样式

p {
/*样式 轮廓,宽度，风格，颜色*/
outline: 1px solid red;
}