css样式使用示例

css是层叠样式表,以下列出 样式demo,简单列出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;
}