CSS样式表 | 易学教程

使用CSS样式的方式

HTML <!DOCTYPE>声明标签（H5声明标签）

（1）内链样式表：<body style="background-color:green; margin:0; padding:0"></body>

（2）嵌入式样式表：<style type="text/css"></style>（需要将样式放在<head></head>）

（3）引入式样式表：<link rel="StyleSheet" type="text/css" href="style.css">（需要将样式放在<head></head>）

定义样式表

HTML标记定义<p>...</p>

p{属性：属性值；属性1：属性值1} 一个选择器可以控制若干个样式属性，他们之间需要用英语的“;”隔开，最后一个可以不加;

Class定义<p class="p">...</p>

class定义是以"."开始如.p{属性：属性值；属性1：属性值1}

ID定义<p id="p">...</p>

ID定义是“#”开始的，如#p{属性：属性值；属性1：属性值1}

优先级问题

（1）ID>Class>HTML

（2）同级时选择离元素最近的一个，如

#p{color:red}

　　　#p{color:#f60} 执行颜色为#f60

组合选择器（同时控制多个元素）

如，h1,h2,h3{font-size:14px; color:red; } 选择器组合可以使用 “,” 隔开

伪元素选择器

（1）a:link 正常连接的样式

（2）a:hover 鼠标放上去的样式

（3）a:active 选择链接时的样式

（4）a:visited 已经访问过的链接的样式

常见属性

颜色属性

（1）color：green （2） color：#ff6600 （3）color：rgb（255,255,255）（4）color：rgb

字体属性

（1）字体大小：font-size

（2）自定义字体：font-family

（3）字体加粗：font-weight （normal、bold、bolder、lighter）

（4）字体样式：font-style （normal、small-caps、inherit（继承））

（5）小型大写字母显示文本：font-variant （normal、small-caps、inherit（继承））

背景属性

（1）背景颜色：background-color

（2）背景图片：background-image:url（图片路径）

（3）背景重复：background-repeat（repeat、repeat-x、repeat-y、no-repeat）

（4）背景位置（横向：left、center、right；纵向：top、center、bottom）

（5）简写方式：background：背景颜色 url（图像）重复位置

文本属性

（1）横向排列：text-align（left、center、right）

（2）文本行高：line-height

（3）首行缩进：text-indent

（4）字符间距：letter-spacing（normal、length、inherit（继承））

（5）单词间距：word-spacing

（6）文本方向：direction（ltr从左到右/rtl从右到左）

（7）文本大小写：text-transform

边框属性

（1）边框风格：border-style

单独定义某一方向的边框样式：border- bottom-style（下边边框样式）、border- top-style（上边边框样式）、border-left-style（左边边框样式）、border- right-style（右边边框样式）

边框风格样式的属性值：none（无边框）、solid（直线边框）、dashed（虚线边框）、dotted（点状边框）、double（双线边框）、groove（凸槽边框）、ridge（垄状边框）、inset （inset边框）、outside（outside边框）、inherit（继承）

（2）边框宽度：border-width

单独风格：border- bottom-width（下边边框宽度）、border- top-width（上边边框宽度）、border-left-width（左边边框宽度）、border- right-width（右边边框宽度）

边框宽度的属性值：thin（细边框）、medium（中等边框）、thick（粗边框）、px（固定值的边框）、inherit（继承）

（3）边框颜色border-color

单独风格：border- bottom-color（下边边框颜色）、border- top-color（上边边框颜色）、border-left-color（左边边框颜色）、border- right-color（右边边框颜色）

属性值：red、green等颜色值的名称、RGB（rgb（255,255,0））、RGBA（rgba（255,255,0,0.1））、#ff0/#ff0000十六位进制、inherit（继承）

属性值的四种情况：一个值：border-color：（上、下、左、右）、两个值：border-color：（上下（左右）、三个值：border-color：（上）（左、右）（下）、四个值：border-color：（上）（下）（左）（右）

列表属性

（1）标记的类型：list-style-type

none（无标记）、disc（默认。标记是实心圆）、circle（标记是空心圆）、square（标记是实心方块）、decimal-leading-zero（0开头的数字标记）、lower-roman（小写罗马数字）、upper-roman（大写罗马字母）、lower-alpha（小写英文字母）、upper-alpha（大写英文字母）

（2）标记的位置：list-style-position

inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐。

outside默认值，保持标记位于文本的左侧。列表项目标记放置在文本意外，且环绕文本不根据标记对齐。

inherit规定应该从父元素继承list-style-position属性的值。

（3）设置图像列表标记：list-style-image

URL 图像的路径

none 默认，无图形被显示

inherit 规定应该从父元素继承list-style-image属性的值

（4）简写方式

list-style:square inside url("image.jpg")

DIV+CSS布局

div和span