一, 引入 CSS 样式表
1, 行内式
通过标记的 style 属性来设置元素的样式. 基本语法如下:
< 标记名 style="属性 1: 属性值 1; 属性 2: 属性值 2; 属性 3: 属性值 3;">
主体内容
</ 标记名 >
示例:
- <!doctype>
- <html>
- <head>
- <meta charset="utf-8">
- <title > 行内式引入 CSS 样式表 </title>
- </head>
- <body>
- <h2 style="font-size:20px; color:red;"> 使用 CSS 行内式修饰二级标题的字体大小和颜色 </h2>
- </body>
- </HTML>
注: 只在样式规则较少且只在该元素上使用一次, 或者需要临时修改某个样式规则时使用.
2, 内嵌式
将 CSS 代码集中写在 HTML 文档的 < head > 头部标签中, 并且用 < style > 标记定义. 基本语法如下:
- <head>
- <style type="text/css">
选择器 {属性 1: 属性值 1; 属性 2: 属性值 2; 属性 3: 属性值 3; }
</style>
</head>
示例:
- <!doctype>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title > 内嵌式引入 CSS 样式表 </title>
- <style type="text/css">
- h2{text-align:center;}
- p{
- font-size:16px;
- color:red;
- text-decoration:underline;
- }
- </style>
- </head>
- <body>
- <h2 > 内嵌式 CSS 样式 </h2>
- <p > 使用 style 标记可定义内嵌式 CSS 样式表, style 标记一般位于 head 头部标记中, title 标记之后.</p>
- </body>
- </HTML>
3, 链入式
将所有的样式放在一个或多个以. CSS 为扩展名的外部样式表文件中, 通过 < link/> 标记将外部样式表文件链接到 HTML 文档中, 基本语法为:
- <head>
- <link href="CSS 文件的路径" type="text/css" rel="stylesheet" />
- </head>
- <link/> 标记必须放在 < head > 头部标记中, 并且必须指定 < link/> 标记的三个属性:
href: 定义所链接外部样式表文件的 URL.
type: 定义所链接文档的类型, 在这里需要指定为 "text/css".
rel: 定义当前文档与被链接文档之间的关系, 在这里需要指定为 "stylesheet", 表示被链接的文档是一个样式表文件.
HTML 文档:
- <!doctype>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title > 链入式引入 CSS 样式表 </title>
- <link href="style/css" type="text/css" rel="stylesheet" />
- </head>
- <body>
- <h2 > 链入式 CSSY 样式 </h2>
- <p > 通过 link 标记可以将扩展名为. CSS 的外部样式表文件链接到 HTML 文档中.</p>
- </body>
- </HTML>
CSS 文档:
- h2{ text-aligh:center; }
- p{
- font-size:16px;
- color:red;
- text-decoration:underline;
- }
二, CSS 基础选择器
1, 标记选择器
指用 HTML 标记名作为选择器, 按标记名称分类, 为页面中某一类标记指定统一的 CSS 样式.
基本语法:
标记名 {属性 1: 属性值 1; 属性 2: 属性值 2; 属性 3: 属性值 3; }
代码:
- <head>
- <style>
- /* 标签选择器 */
- p{
- font-size:12px;
- color:#666;
- font-family:"微软雅黑";
- }
- </style>
- </head>
- <!-- 标签选择器 -->
- <body>
- <p > 这段文字用标签选择器设置 CSS 样式 </p>
- </body>
注: 优点: 能快速为页面中同类型的标记统一样式. 缺点: 不能设计差异化样式.
2, 类选择器
类选择器使用 "."(英文点号) 进行标识, 后面紧跟类名.
基本语法:
. 类名 {属性 1: 属性值 1; 属性 2: 属性值 2; 属性 3: 属性值 3; }
优势: 可以为元素对象定义单独或相同的样式.
代码:
- <!doctype>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title > 类选择器 </title>
- <style type="text/css">
- .red{color:red;}
- .green{color:green;}
- .font22{font-size:22px;}
- p{
- text-decoration:underline;
- font-family:"微软雅黑";
- }
- </style>
- </head>
- <body>
- <h2 class="red"> 二级标题文本 </h2>
- <p class="green" font22 > 段落一文本内容 </p>
- <p class="red" font22 > 段落二文本内容 </p>
- </body>
- </HTML>
注: 类名第一个字符不能使用数字, 并且严格区分大小写.
3,id 选择器
id 选择器使用 "#" 进行标识, 后面紧跟 id 名.
基本语法:
#id 名 { 属性 1: 属性值 1; 属性 2: 属性值 2; 属性 3: 属性值 3; }
代码:
- <!doctype>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>id 选择器 </title>
- <style type="text/css">
- #bold {font-weight:bold;}
- #font24 {font-size:24px;}
- </style>
- </head>
- <body>
- <p id="bold"> 段落 1:id="bold", 设置粗体文字.</p>
- <p id="font24"> 段落 2:id="font24", 设置字号为 24px.</p>
- <p id="font24"> 段落 3:id="font24", 设置字号为 24px.</p>
- <p id="bold font24"> 段落 4:id="bold font24", 同时设置粗体和字号 24px.</p>
- </body>
- </HTML>
4, 通配符选择器
通配符选择器用 "*" 表示, 它是所有选择器中作用范围最广的, 能匹配页面中所有的元素.
基本格式:
*{属性 1: 属性值 1; 属性 2: 属性值 2; 属性 3: 属性值 3; }
代码:
- *{
- margin:0; /* 定义外边距 */
- padding:0; /* 定义内边距 */
- }
注: 实际开发中不建议使用通配符选择器.
5, 标签指定式选择器
标签指定选择器又称交集选择器, 由两个选择器构成. 第一个为标记选择器, 第二个为 class 选择器或 id 选择器.
代码:
- <!doctype>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title > 标签指定式选择器的应用 </title>
- <style type="text/css">
- p{color:blue; }
- .special{color:red; }
- </style>
- </head>
- <body>
- <p > 普通段落文本 (蓝色)</p>
- <p class="special"> 指定了. special 类的段落文本 (红色)</p>
- <h3 class="special"> 指定了. special 类的标题文本 (绿色)</h3>
- </body>
- </HTML>
注: 两个选择器之间不能有空格. 如 h3.special 或 p#one.
6, 后代选择器
后代选择器用来选择或元素组的后代, 其写法就是把外层标记写在前面, 内层标记写在外面, 中间用空格分隔.
当标记发生嵌套时, 内层标记就成为外层标记的后代.
代码:
- <!doctype>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title > 后代选择器 </title>
- <style type="text/css">
- p strong{color:red;}
- Strong{color:blue;}
- </style>
- </head>
- <body>
- <p > 段落文本 < strong > 嵌套在段落中, 使用 strong 标记定义的文本 (红色).</strong></p>
- <strong > 嵌套之外由 strong 标记定义的文本 (蓝色).</strong>
- </body>
- </HTML>
7, 并集选择器
并集选择器是各个选择器通过逗号连接而成的, 任何形式的选择器 (包括标记选择器, 类选择器及 id 选择器等), 都可以作为并集选择器的一部分.
代码:
- <!doctype>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title > 并集选择器 </title>
- <style type="text/css">
- h2,h3,p{color:red; font-size:14px;}
- h3,special,#one{text-decoration:underline;}
- </style>
- </head>
- <body>
- <h2 > 二级标题文本.</h2>
- <h3 > 三级标题文本, 加下划线.</h3>
- <p class="special"> 段落文本 1, 加下划线.</p>
- <p id="one"> 段落文本 3: 加下划线.</p>
- </body>
- </HTML>
三, 字体样式属性
1,font-size: 字号大小
用于设置字号, 该属性的值可以使用相对长度单位, 也可以使用绝对长度单位.
CSS 长度单位:
相对长度单位:
em: 相对于当前对象内文本的字体尺寸
px: 像素, 最常用, 推荐使用
绝对长度单位:
im: 英寸
cm: 厘米
mm: 毫米
pt: 点
2,font-family: 字体
用于设置字体.
示例:
p{font-family:"微软雅黑";}
可以同时指定多个字体, 中间以逗号隔开:
body{font-family:"华文彩云","宋体","黑体";}
注: 使用 font-family 设置字体时, 需要注意以下几点.
各种字体之间必须使用英文状态下的逗号隔开.
中文字体需要加英文状态下的引号, 当需要设置英文字体时, 英文字体名必须位于中文字体名之前, 例如:
- body{
- font-family:Arial,"华文彩云","宋体","黑体";
- } /* 正确 */
- body{
- font-family:"华文彩云","宋体","黑体",Arial;
- } /* 错误 */
如果字体名中包含空格,#,$ 等符号, 则该字体必须加英文状态下的单引号或双引号.
3,font-weight: 字体粗细
用于定义字体的粗细.
font-weight 可用属性值
nomal: 默认值. 定义标准的字符
bold: 定义粗体字符
bolder: 定义更粗的字符
lighter: 定义更细的字符
100~900(100 的整数倍):
定义由细到粗的字符.
注; 常用的 font-weight 的属性值为 normal 和 bold.
4,font-style: 字体风格
用于定义字体风格, 如设置斜体, 倾斜或正常字体. 其可用属性值为:
normal: 默认值, 浏览器会显示标准的字体样式.
italic: 浏览器会显示斜体的字体样式.
oblique: 浏览器会显示斜体的字体样式.
注: 实际工作中一般用 italic 定义斜体.
5,font: 综合设置字体样式
基本语法格式:
选择器 {font:font-style font-weight font-size/line-height font-family;}
注: 必须按上面语法格式中的顺序书写, 各个属性以空格隔开.
- p{
- font-family:Arial,"宋体";
- font-size:30px;
- font-style:italic;
- font-weight:bold;
- font-variant:small-caps;
- line-height:40px;
- }
注: 必须设置 font-size 和 font-family 属性, 否则 font 属性将不起作用.
- <!doctype>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>font 属性 </title>
- <style type="text/css">
- .one{ font:italic 18px/30px "隶书";}
- .two{ font:italic 18px/30px;}
- </style>
- </head>
- <body>
- <p class="one"> 段落 1: 使用 font 属性综合设置段落文本的字体风格, 字号, 行高和字体.</p>
- <p class="two"> 段落 2: 使用 font 属性综合设置段落文本的字体风格, 字号和行高. 由于省略了字体属性 font-family, 这时 font 属性不起作用.</p>
- </body>
- </HTML>
6,Word-wrap 属性
用于实现长单词和 URL 地址自动换行.
基本语法格式:
选择器 {Word-wrap: 属性值;}
Word-wrap 属性值:
normal: 只在允许的断字点换行
break-Word: 在长单词或 URL 地址内部进行换行
示例:
- <!doctype>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>Word-wrap 属性 </title>
- <style type="text/css">
- p{
- width:100px;
- height:100px;
- border:1px solid #000;
- }
- .break_word{Word-wrap:break-Word;}
- </style>
- </head>
- <body>
- <span>Word-wrap:normal;</span>
- <p > 百度浏览器网址: http://baidu.com</p>
- <span>Word-wrap:break-Word;</span>
- <p class="break_word"> 百度浏览器网址: http://baidu.com</p>
- </body>
- </HTML>
四, 文本外观属性
1,color: 文本颜色
用于定义文本的颜色, 其取值方式有如下 3 种.
预定义的颜色值, 如 red,green,blue 等.
十六进制, 如 #FF0000,#FF6600,#29D794 等.
RGB 代码, 如红色可以表示为 rgb(255,0,0) 或 rgb(100%,0%,0%).
2,letter-spacing: 字间距
用于定义字间距. 允许使用负值, 默认为 normal.
3,Word-spacing: 单词间距
用于定义单词之间的间距, 对中文字符无效. 允许使用负值, 默认为 normal.
示例:
- <!doctype>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>Word-spacing 和 letter-spacing</title>
- <style type="text/css">
- .letter{ letter-spacing:20px; }
- .Word{ Word-spacing:20px; }
- </style>
- </head>
- <body>
- <p class="letter">letter spacing(字母间距)</p>
- <p class="word">Word spacing Word spacing(单词间距)</p>
- </body>
- </HTML>
4,line-height: 行间距
用于设置行间距.
示例:
- <!doctype>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>Word-spacing 和 letter-spacing</title>
- <style type="text/css">
- .one{
- font-size:16px;
- line-height:18px;
- }
- .two{
- font-size:12px;
- line-height:2em;
- }
- .three{
- font-size:12px;
- line-height:120%;
- }
- </style>
- </head>
- <body>
- <p class="one"> 段落 1: 使用像素 px 设置 line-height. 该段落字体大小为 16px,line-height 属性值为 18px.</p>
- <p class="two"> 段落 2: 使用相对值 em 设置 line-height. 该段落字体大小为 12px.line-height 属性值为 2em.</p>
- <p class="three"> 段落 3: 使用百分比 % 设置 line-height. 该段落字体大小为 14px.line-height 属性值为 150%.</p>
- </body>
- </HTML>
5,text-transform: 文本转换
用于控制英文字符的大小写.
name: 不转换 (默认值)
capitalize: 首字母大写
uppercase: 全部字符转换为大写
lowercase: 全部字符转换为小写
6,text-deciration: 文本装饰
用于设置文本的下划线, 上划线, 删除线等装饰效果.
none: 没有装饰 (正常文本默认值)
underline: 下划线
overline: 上划线
line-through: 删除线
注: text-transform 后可以赋多个值, 用于给文本添加多种显示效果.
示例:
- <!doctype>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title > 文本装饰 text-decoration</title>
- <style type="text/css">
- .one{text-decoration:underline;}
- .two{text-decoration:overline;}
- .three{text-decoration:line-through;}
- .four{text-decoration:underline line-through;}
- </style>
- </head>
- <body>
- <p class="one"> 设置下划线 (underline)</p>
- <p class="two"> 设置上划线 (overline)</p>
- <p class="three"> 设置删除线 </p>
- <p class="four"> 同时设置下划线和删除线 (underline line-through)</p>
- </body>
- </HTML>
7,text-align: 水平对齐方式
用于设置文本内容的水平对齐, 相当于 HTML 中的 align 对齐属性, 其可用属性值:
left: 左对齐 (默认值)
right: 右对齐
center: 居中对齐
注:
1.text-align 属性仅适用于块级元素, 对行内元素无效.
8,text-indent: 首行缩进
用于设置首行文本的缩进.
- <!doctype>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title > 首行缩进 text-indent</title>
- <style type="text/css">
- p{font-size:14px;}
- .one{text-indent:2em;}
- .two{text-indent:50px;}
- </style>
- </head>
- <body>
- <p class="one"> 这是段落 1 中的文本, text-indent 属性可以对段落文本设置首行缩进效果, 段落 1 使用 text-indent:2em;.</p>
- <p class="two"> 这是段落 2 中的文本, text-indent 属性可以对段落文本设置首行缩进效果, 段落 2 使用 text-indent:50px;.</p>
- </body>
- </HTML>
注: text-line 属性仅适用于块级元素. 对行内元素无效
来源: http://www.bubuko.com/infodetail-3344208.html