CSS（六）— 样式设置

CSS属性设置背景效果

1、background-color：背景颜色

div{    background-color: #0000FF;/*背景颜色*/        width: 500px;        height: 40px;}

2、background-image：背景图片

div{    background-image: url("image/kaola.jpg");/*背景图片*/        width: 1000px;        height: 600px;}

3、background-repeat：背景重复

div{    background-image: url("image/kaola.jpg");    background-repeat: no-repeat;/*背景重复，可以设置repeat-x（横向重复）、repeat-y纵向重复或者其他*/    width: 1000px;    height: 600px;}

background-attachment：背景滚动

div{           background-image: url("image/kaola.jpg");           background-attachment: fixed;/*背景固定，只滚动内容*/           width: 1000px;           height: 2000px;       }

background-position：背景定位

 div{           background-image: url("image/kaola.jpg");           background-repeat: no-repeat;           background-position: center;/*背景居中*/           height: 600px;       }

在整理过程中，只是描述了一些用法，对具体的CSS样式的值没有详解，希望读者在可以利用工具对一些背景效果进行了解。

CSS属性设置文本

1、color：改变文本颜色

 .text{    /*三者选择其中一种方式即可*/        color: rgb(255,0,0);/*rgb颜色*/        color: red;/*英文颜色*/        color: #FF0000;/*十六进制颜色*/}

2、text-align：文本对齐方式
3、text-decoration：文本修饰（下划线）

 /* 超级链接默认有下划线，去除下划线的操作*/a:link{    font-size: 20px;    color: red;    text-decoration: none;}

/*鼠标经过时有下划线*/a:hover{    font-size: 20px;        color: #0000FF;        text-decoration: underline;}

4、text-indent：文本缩进
5、font-weight：文本粗细

CSS属性设置字体

• font-family：字体

#test{    font-family: "Times New Roman",Times,serif;}

注意：字体可以设置多个，设置的时候取决于用户电脑是否存在该字体
- font-style：文字效果 斜体

 #test{        font-style: italic;/*斜体*/}

• font-size：文字大小

#test{    font-size: 2em;/*设置文字大小为2em*/}

注意：1em=16px

• text-indent：文字缩进
• font-weight：文字粗细

CSS列表

list-style-type属性及其属性值

HTML代码

<ul>        <li>北京</li>        <li>上海</li>        <li>广州</li>        <li>深圳</li></ul>

样式代码

ul{     /*无标记*/    list-style-type: none;}

CSS表格

HTML代码

<table id="tableTest">        <tr>            <th>编号</th>            <th>运动</th>        </tr>        <tr>            <td>1</td>            <td>篮球</td>        </tr>        <tr>            <td>2</td>            <td>跑步</td>        </tr>        <tr>            <td>3</td>            <td>乒乓球</td>        </tr></table>

样式代码

#tableTest{    border: 1px solid black;/*设置表格1像素 实边 黑色*/        width: 200px;/*设置宽度*/        height: 200px;/*设置高度*/        background-color: aquamarine;        text-align: center;/*文字居中*/}

我们可以在w3cschool在线教程看到更详细的教程。