CSS

CSS作用：

• 快速维护页面元素的样式属性
• 弥补HTML元素的属性不足

CSS基础

CSSCascading Style Sheets，层叠样式表单

CSS的使用方式有三种

1，书写于标记的内部（内联样式）

<标记名称 style="属性：值；属性：值"/>
<标记名称 style="属性：值；属性：值">...

仅对指定的标记有效

2，书写于文档的头部（内部样式）

仅对整个文档的所有标记有效

3，链接到外部的CSS文档

step1，创建css文件

1，CSS文件的扩展名为.css

2，CSS文件的语法结构：选择器{属性:值;...}

step2，在网页文件内链接到外部的CSS文件

CSS语法规范

内联样式

<标记名称 style="属性：值；属性：值"/>
<标记名称 style="属性：值；属性：值">...

外部样式/内部样式

选择器{属性:值;...}

CSS选择器

1，元素选择器（只针对指定的元素有效，且自动应用）

元素名称{属性:值;...}

2，类选择器（可手动应用于任何标记，class="类名称"，多个类名之间以空格分隔）

.类名称{属性:值;...}

3，ID选择器（只能手动应用于唯一的元素，id="ID"）

#id{属性:值;...}

id的用途

1. CSS中的ID选择器
2. JavaScript
3. JQuery

4，群组选择器（实际上是具有相同属性的选择器的简洁写法）

选择器,选择器,...{属性:值;...}

5，派生选择器（两个选择器之间至少为父子关系）

选择器 选择器 ...{属性:值;...}

6，伪类选择器

• :link ：正常显示状态
• :hover ：鼠标放上的状态
• :active ：鼠标按下的状态
• :visited：访问过的状态

CSS单位

长度单位：px（像素）、%（百分比）、em（文字尺寸的倍数）

颜色单位：

• A，英文名称，如red，green，blue等
• B，十六进制表示法，如#ff0000，红绿蓝的顺序
• C，简写的十六位进制，如#f00
• D，RGB表示法，如rgb（255，0，0）
• E，百分比的RGB表示法，如rgb（100%，0%，0%）

布局样式

• width，设置宽度
• height，设置高度

边框样式

• border-top（right|bottom|left）:宽度 线型（none|solid[实线]|dotted[点划线]） 颜色;

HTML标记的种类

根据是否换行，划分成：

• 块级对象：可以自然换行（p，div，h1，h2...ul，ol，li等）块级对象其默认宽度占其父对象的100%
• 内联对象：不能换行

布局样式

1，内边距：

• padding-top：上侧的内边距
• padding:value：四个方向内边距相同
• pading:value（上下） value（左右）
• pading:value（上） value（左右） value（下）
• pading:value（上） value（右） value（下） value（左）

2，外边距

• margin-top：上侧的外边距
• margin:value|auto：四个方向的外边距，同内边距的定义方法。

auto只有左右居中，不能上下居中。

控制元素的现实方式

display：none|inline（内联样式）|block（块级对象）

说明：只有块级元素或者HTML元素中存在width、height属性的对象（如img，table）才能通过CSS样式设置宽度/高度

背景样式

background-color：背景颜色

background-image：url

background-repeat：设置背景图像的平铺方式，repeat|no-repeat|repeat-x|repeat-y;

background-position：设置图像的位置，水平位置（left|center|right）、垂直位置（top|center|bottom）。

background-attachment：scroll（随文档滚动）|fixed（背景固定）

background：背景颜色 url 平铺方式 水平位置 垂直位置。

浮动样式

float:left|right

文本样式

line-height：行高

text-indent：首行缩进

text-align：left|center|right 文本的水平对齐方式

cursor：pointer 手型

font-weight：normal|bold（加粗效果）

列表样式

设置列表样式

• list-style-type：none|disc|circle|lower-alpha...
• list-style-image：
• list-style-position：
• list-style：样式 url(图像的URL) 位置（inside|outside）

border-collapse: collapse/separate;设置是否将表格边框合并为单一边框

定位属性

position：fixed（固定的）|absolute（绝对）|relative（相对）

颜色透明的处理：

• Chrome Firefox等：opacity:Value（0~1）
• IE filter:alpha(opacity=value[0~100]);

left|top|right|bottom:value(设置其余父对象之间的距离);

堆叠顺序

z-index：value（设置叠放次序）

CSS选择器的优先级

style，IDs，classes，tags