第四章css总结,第四章：CSS样式

* * * * *

**CSS样式目录**

[TOC]

* * * * *

> # 一.背景

* **背景色：** background-color 属性

~~~

p {background-color: gray;} //把元素的背景设置为灰色

~~~

* **背景图像：** background-image 属性

~~~

body {background-image: url(/i/eg_bg_04.gif);} //需要设置一个背景图像，必须为这个属性设置一个 URL 值

~~~

* **背景重复：** background-repeat 属性

~~~

body

{

background-image: url(/i/eg_bg_03.gif);

background-repeat: repeat;

}

~~~

repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。

* **背景位置:** background-position: x y ;

~~~

//第一个参数表示离x轴的距离,y表示离y轴的距离

~~~

> **简写**

background: color image repeat position;

* **背景吸附:** background-attachment: fixed | scroll

* **指定背景图片大小：** background-size

~~~

background-size: x y;

//x表示宽度，y表示高度

background-size:cover;

//此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。相当于background-size:100% 100%;

~~~

> # 二.文本

~~~

text-align文本对齐方式

text-align: right |left |center

~~~

~~~

text-decoration 文本修饰

text-decoration: underline|overline|line-through //下划线，上划线，划掉

~~~

~~~

text-indent 文本缩进

~~~

~~~

text-transform 文本转换(了解)

text-transform:uppercase(转换为全部大写)

text-transform:lowercase(转换为全部小写)

text-transform:capitalize(转换为首字母大写)

~~~

> # 三. 字体

~~~

color:设置字体的颜色

颜色是通过CSS最经常的指定：

十六进制值 - 如: ＃FF0000

一个RGB值 - 如: RGB(255,0,0)

颜色的名称 - 如: red

body {color:red;}

h1 {color:#00ff00;}

h2 {color:rgb(255,0,0);}

~~~

~~~

//font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体

p{font-family:Helvetica,Microsoft YaHei}

~~~

推荐使用简书的

~~~

font-family: -apple-system,SF UI Text,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;

~~~

**字体样式：**

font-style:normal (正常)

font-style:italic(斜体)

font-style:oblique(斜体)

font-weight:bold(加粗)

font-weight:bolder(更粗)

font-weight:lighter(更细)

~~~

行高

line-height

~~~

> # 四.链接

**设置链接的样式**

能够设置链接样式的 CSS 属性有很多种(例如 color, font-family, background 等等)。

链接的特殊性在于能够根据它们所处的状态来设置它们的样式。

**链接的四种状态：**

* a:link - 普通的、未被访问的链接

* a:visited - 用户已访问的链接

* a:hover - 鼠标指针位于链接的上方

* a:active - 链接被点击的时刻

实例

~~~

a:link {color:#FF0000;}/* 未被访问的链接 */

a:visited {color:#00FF00;}/* 已被访问的链接 */

a:hover {color:#FF00FF;}/* 鼠标指针移动到链接上 */

a:active {color:#0000FF;}/* 正在被点击的链接

~~~

> # 五.列表(针对ul)

~~~

list-style:none;

list-style-type:circle|square

list-style-image:url("xxx")

~~~

> # 六.边框

~~~

border-width 边框的宽度

border-style 边框的样式

border-color 边框的颜色

~~~

~~~

//可以简写成

border： width style color

p{border:1px solid #333}

~~~

~~~

//边框-单独设置各边

p

{

border-top:1px solid #ccc;

}

~~~

> # 七.表格

border-collapse //设置表格的边框被折叠成一个单一的边框

table{border-collapse:collapse} //可以在td,th设置这个两个属性

colspan:value //跨越的列

rowspan:value //跨越的行

~~~

/* 技术要点：谁要跨越谁rowspan*/

table,td{

border: 1px solid rgb(221, 23, 23);

}

table{

text-align: center;

border-collapse: collapse;

width: 500px;

line-height: 50px;

}

~~~

> # 八.轮廓(了解)

~~~

//轮廓(outline)是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用

p{outline:1px solid pink}

~~~

> # 九.透明

~~~

opacity：0.0~1.0；

//从 0.0 (完全透明)到 1.0(完全不透明)

~~~