【Web前端系列课程（一）】HTML+CSS

老夏

第九章 CSS样式
    9.1 字体

        CSS字体属性定义文本的字体系列、大小、加粗、风格和变形。
        字体属性如下：

属性	属性值	描述
font-family	Times New Roman、Georgia等	字体样式
font-size	px	字体大小
font-style	normal（默认）或italic等	字体类型
font-weight	normal（默认）或bold或700	字体粗细

老夏

第九章 CSS样式
    9.2 文本

        CSS文本属性可定义文本的外观，包括文本的颜色、字符间距、对齐文本、装饰文本、对文本进行缩进等。
        文本属性如下：

属性	属性值	描述
letter-spacing	px	词间距
word-spacing	px	字间距
text-decoration	none定义标准的文本（默认） underline定义文本下的一条线 overline定义文本上的一条线 line-through定义穿过文本下的一条线	下划线
text-align	left把文本排列到左边（默认） right把文本排列到右边 center把文本排列到中间	文本对齐
text-indent	px	文本缩进
line-height	px	文本高度
color	十进制、十六进制或英文	文本颜色
word-break	normal使用浏览器默认的换行规则 break-all词折行	文本自动换行（词）
word-wrap	normal使用浏览器默认的换行规则 break-word字折行（默认）	文本自动换行（字）

老夏

第九章 CSS样式
    9.3 背景

        CSS允许应用纯色作为背景，也允许使用背景图像创建复杂的效果。
        背景属性如下：

属性	属性值	描述
background-color	十进制、十六进制或英文	背景颜色
background-image	url(bgimage.gif)	背景图片
background-repeat	repeat背景图像将在垂直方向和水平方向重复。（默认） repeat-x背景图像将在水平方向重复。 repeat-y背景图像将在垂直方向重复。 no-repeat背景图像将仅显示一次。	背景重复
background-attachment	scroll背景图像会随着页面其余部分的滚动而移动。（默认） fixed当页面的其余部分滚动时，背景图像不会移动。	背景滚动
background-position	10px 10px或top left或10% 10%	背景定位，非常重要，精灵图定位需要

        背景属性可以缩写，具体格式如下：

1. background:#00FF00 url(bgimage.gif) no-repeat fixed 10px 10px;

复制代码

老夏

第九章 CSS样式
    9.4 表格

        CSS表格属性可以改善表格的外观。
        表格属性如下：

属性	属性值	描述
border-collapse	separate边框会被分开（默认）。 collapse边框会合并为一个单一的边框，会忽略border-spacing。	边框合并
border-spacing	length length，如果定义一个length参数，那么定义的是水平和垂直间距。如果定义两个length参数，那么第一个设置水平间距，而第二个设置垂直间距	表格空隙

老夏

第九章 CSS样式
    9.5 尺寸

        CSS尺寸属性可以控制元素的高度和宽度，也可以增加行间距。
        尺寸属性如下：

属性	属性值	描述
height	px	高度
width	px	宽度
max-width	px	最大宽度，该属性值会对元素的宽度设置一个最高限制，因此，元素可以比指定值窄，但不能比其宽。不允许指定负值。
min-width	px	最小宽度，该属性值会对元素的宽度设置一个最小限制，因此，元素可以比指定值宽，但不能比其窄。不允许指定负值。
max-height	px	最大高度，该属性值会对元素的高度设置一个最高限制。因此，元素可以比指定值矮，但不能比其高。不允许指定负值。
min-height	px	最小高度，该属性值会对元素的高度设置一个最低限制。因此，元素可以比指定值高，但不能比其矮。不允许指定负值。

老夏

第九章 CSS样式
    9.6 文本框

        CSS文本框属性仅可用于textarea标签。
        文本框属性如下：

属性	属性值	描述
resize	none用户无法调整元素的尺寸。 both用户可调整元素的高度和宽度。 horizontal用户可调整元素的宽度。 vertical用户可调整元素的高度。	文本框样式

老夏

第九章 CSS样式
    9.7 列表

        CSS列表属性允许放置、改变列表项标志，或者将图像作为列表项标志。
        列表属性如下：

属性	属性值	描述
list-style-type	none无标记。 disc标记是实心圆。（默认）	列表样式

老夏

第九章 CSS样式
    9.8 轮廓

        轮廓是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
        CSS轮廓属性规定元素轮廓的样式、颜色和宽度。
        轮廓属性如下：

属性	属性值	描述
outline-color	十进制、十六进制或英文	轮廓颜色
outline-style	none（默认） solid实线	轮廓样式
outline-width	px	轮廓尺寸

老夏

第九章 CSS样式
    9.9 鼠标

        CSS鼠标属性规定当指向某元素之上时显示的指针类型。
        鼠标属性如下：

属性	属性值	描述
cursor	crosshair十字 pointer小手 text文本 wait等待 default默认 help帮助	鼠标样式

老夏

第九章 CSS样式
    9.10 display和visibility

        display属性用于定义建立布局时元素生成的显示框类型。
        visibility属性规定元素是否可见。
        display和visibility属性如下：

属性	属性值	描述
display	none此元素不会被显示。 block此元素将显示为块级元素，此元素前后会带有换行符。 inline        此元素会被显示为内联元素，元素前后没有换行符。（默认） inline-block行内块元素。	元素生成的显示框类型
visibility	visible元素是可见的。（默认）hidden元素是不可见的。	元素是否可见

        注意，如果使用visibility属性，即使设置元素不可见，其也会占据页面上的空间，如果使用display属性，则可以创建不占据页面空间的不可见元素。