CSS 笔记2 (属性)

字体属性：

CSS 字体属性定义字体、颜色、大小、加粗和文字样式

color：

css 复制代码

div{ color:red; }
div{ color:#ff0000; } // 十六进制码
div{ color:rgb(255,0,0); } // rgb 通道
div{ color:rgba(255,0,0,0.5); } // rgba 通道

rgba 通道的最后一位表示 " 透明度 "

font-size：

调整字体大小

css 复制代码

h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

font-weight：

设置文本粗细

|------------|---------------------------------|
| 值 | 描述 |
| bold | 定义粗体字符 |
| bolder | 定义更粗的字符 |
| lighter | 定义更细的字符 |
| 100 ~ 900 | 定义由细到粗，400 等同默认，而 700 等同于 bold |

例如：

css 复制代码

H1 {font-weight:normal;}
div {font-weight:bold;}
p {font-weight:900;}

font-style：

指定文本的字体样式

normal --- 默认值 italic --- 定义斜体字

font-family：

指定一个元素的字体

css 复制代码

font-family:"Microsoft YaHei"

背景属性：

|---------------------|------------|
| 属性 | 描述 |
| background-color | 设置背景颜色 |
| background-image | 设置背景图片 |
| background-position | 设置背景图片显示位置 |
| background-repeat | 设置背景图片如何填充 |
| background-size | 设置背景图片大小属性 |

background-color：

css 复制代码

<div class="box"></div>
.box{
    width: 300px;
    height: 300px;
    background-color: red;
}

background-image：

元素的背景是元素的总大小，默认下 background-image 属性放置在元素的左上角，如果不够大会在垂直和水平方向平铺图像，如果图像大小超过元素大小从图像的左上角显示元素大小的那部分；

css 复制代码

<div class="box"></div>
.box{
    width: 600px;
    height: 600px;
    background-image: url("images/img1.jpg");
}

background-repeat：

该属性设置如何平铺背景图像；

|-----------|----------|
| 值 | 说明 |
| repeat | 默认值 |
| repeat-x | 只向水平方向平铺 |
| repeat-y | 只向垂直方向平铺 |
| no-repeat | 不平铺 |

background-size：

该属性设置背景图像的大小

|------------|--------------------------------------------|
| 值 | 说明 |
| length | 设置背景图片的宽度和高度，第一个宽度，第二个高度，如果只设置第一个，第二个值auto |
| percentage | 计算相对位置区域的百分比，第一个宽度，第二个高度，如果只设置第一个，第二个值auto |
| cover | 保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小 |
| contain | 保持图片纵横比并将图片缩放成合适背景定位区域的最大大小 |

background-position：

该属性设置背景图片的起始位置，默认为：0% 0%

第一个值可用 left center right 代替，第二个值可以用 top center bottom代替

当然也可以使用 x% y% 或者 xpos ypos (像素值) 的形式表示

文本属性：

text-align：

指定元素文本的水平对齐方式

|--------|------------|
| 值 | 描述 |
| left | 文本居左排列，默认值 |
| right | 把文本排列到右边 |
| center | 把文本排列到中间 |

text-decoration：

规定添加到文本的修饰，下划线、上划线、删除线等

|--------------|-------|
| 值 | 描述 |
| underline | 定义下划线 |
| overline | 定义上划线 |
| line-through | 定义删除线 |

text-transform：

控制文本的大小写

|------------|------------|
| 值 | 描述 |
| captialize | 定义每个单词开头大写 |
| uppercase | 定义全部大写字母 |
| lowercase | 定义全部小写字母 |

text-indent：

规定文本块中首行文本的缩进

css 复制代码

p{
    text-indent:50px;
}

负值是允许的，如果值是负数，将第一行左缩进；

表格属性：

表格边框：

指定 CSS 表格边框，使用 border 属性；

css 复制代码

table, td {
    border: 1px soild black;
}

三个值分别表示 边框大小 ，边框线样式 和 边框线颜色

折叠边框：

border-collapse 设置表格的边框是否被折叠成一个单一的边框或隔开

css 复制代码

table { border-collapse: collapse; }

表格宽度和高度：

width 和 height 定义表格的宽度和高度

css 复制代码

table { width:100%; }
td { height:50px; }

表格文字对齐：

text-align 属性设置水平对齐属性，vertical-align 属性设置垂直对齐属性

css 复制代码

td {
    text-align: right;
    vertical-align: bottom;
}

表格填充：

如果在表的内容中控制空格之间的边框，应使用 td 和 th 元素的填充属性

css 复制代码

td { padding:15px; }

表格颜色：

边框颜色、th 元素的文本和背景颜色：

css 复制代码

table, td, th { border:1px soild green; }
td { background-color:green; color:white; }