写在前面: CSS 选择器
网页要显示很多内容, 想要为每个内容设置不同的样式, 我们就得首先选中要设置样式的内容, CSS 选择器就是指明该样式是针对 html 里哪一个元素的. 简单的例子, 网页上有几段文字, 我们想把第一段文字调成红色的, 在用 CSS 写完红色文字样式后, 是不是得指明该红色文字样式是针对第一段文字的, 那就得用 CSS 选择器了. CSS 选择器提供了多种方式帮你选中要设置样式的元素, 这里我们介绍常用的三种:
元素选择器, 就是 "选中" 相同的元素, 然后对相同的元素设置同一个 CSS 样式.
ID 选择器, 元素选择器范围太广, 可以选中所有相同的元素, 如果我们想指定某一个元素, 就可以为该元素设置一个 ID, 就是相当于取一个独一无二的名字, 然后用 ID 选择器就可以单独选中它
class 选择器, 假如我们想要为不同类型的多个元素设置相同的样式该怎么办呢, 那么我们就可以写一个 class, 然后在要应用这个 class 样式的元素中声明就可以了.
别罗嗦, 来个例子看看!
- <!DOCTYPE HTML>
- <HTML xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- </title>
- <style type="text/css">
- /* 元素选择器, 直接用元素名称后跟大括号里写样式内容 */ div{color:red;}/* 将所有 div 里的内容设为红色 */
- /*ID 选择器, 前缀 #加 ID 名称后跟大括号里写样式内容 */ #p1{color:green;}/* 将 ID 为 p1 的元素里的内容设为绿色
- */ /*class 选择器, 前缀.(英文点号) 加 class 名称后跟大括号里写样式内容 */ .c1{color:blue;}/* 将声明
- class 为 c1 的元素里的内容设为蓝色 */
- </style>
- </head>
- <body>
- <div>
- 还有诗和远方的田野
- </div>
- <!-- 红色, 响应样式 color:red-->
- <p id="p1">
- 还有诗和远方的田野
- </p>
- <!-- 绿色, 响应样式 color:green-->
- <p class="c1">
- 还有诗和远方的田野
- </p>
- <!-- 蓝色, 响应样式 color:blue-->
- <span class="c1">
- 还有诗和远方的田野
- </span>
- <!-- 蓝色, 响应样式 color:blue-->
- <div>
- 还有诗和远方的田野
- </div>
- <!-- 红色, 响应样式 color:red-->
- </body>
- </HTML>
看一下效果:
HTML 元素: 段落及文字
在 Word 中, 我们可以方便编辑一篇文章, 可以有标题, 段落, 换行, 甚至还有一些特殊字符. 在 HTML 中, 也可以方便的实现这些编辑操作.
- <!DOCTYPE HTML>
- <HTML xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- </title>
- </head>
- <body>
- <div>
- <h3>
- 平凡之路
- </h3>
- <!-- 三级标题 -->
- <p>
- 我曾经跨过山和大海, 也穿过人山人海
- </p>
- <!-- 段落 1-->
- <p>
- 我曾经拥有着一切, 转眼都飘散如烟
- </p>
- <!-- 段落 2-->
- </div>
- <hr />
- <!-- 这里来一条水平分隔线 -->
- <div>
- <h4>
- 上标和下标
- </h4>
- <!-- 四级标题 -->
- <!-- 显示勾股定理公式和二氧化碳分子式, 之间换行 -->
- <p>
- 勾股定理 a
- <sup>
- 2
- </sup>
- +b
- <sup>
- 2
- </sup>
- =c
- <sup>
- 2
- </sup>
- <br />
- 二氧化碳 CO
- <sub>
- 2
- </sub>
- </p>
- </div>
- </body>
- </HTML>
- <!DOCTYPE HTML>
- <HTML xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- <title></title>
- <style type="text/css">
- #p1{
- font-size:13px;/* 文字大小为 12 像素 */
- font-weight:bold;/* 文字加粗 */
- font-style:normal;/* 文字正常, 不设置斜体 */
- color:red;/* 文字颜色为红色 */
- }
- #p2{
- font-size:19px;/* 文字大小为 16 像素 */
- font-weight:normal;/* 文字正常, 不加粗 */
- font-style:italic;/* 文字设置为斜体 */
- color:#1000FF;/* 文字颜色取值用 16 进制 RGB 表示 */
- }
- </style>
- </head>
- <body>
- <div>
- <p id="p1"> 我曾经跨过山和大海 </p>
- <p id="p2"> 我曾经拥有着一切 </p>
- </div>
- </body>
- </HTML>
- <HTML xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- <title></title>
- <style type="text/css">
- div{width:300px;}/* 为 DIV 设置宽度, 方便效果展示 */
- #p0{
- font-size:13px;/* 文字大小为 13 像素 */
- text-indent:26px;/* 首行缩进两个字符, 设置文字大小的 2 倍 */
- line-height:20px;/* 行高 20 像素, 也可以理解为行间距 */
- }
- #p1{
- font-size:13px;/* 文字大小为 13 像素 */
- text-decoration:underline;/* 添加下划线 */
- text-align:center;/* 水平居中 */
- letter-spacing:3px;/* 字符间距 3 个像素 */
- }
- #p2{
- font-size:13px;/* 文字大小为 13 像素 */
- text-align:right;/* 水平靠右 */
- }
- </style>
- </head>
- <body>
- <div>
- <p id="p0"> 生活本来就是一个七日接着一个七日, 时间不会突然中断,
- <p id="p1"> 三更灯火五更鸡 </p>
- <p id="p2"> 正是男儿发愤时 </p>
- </div>
- </body>
来源: http://www.jianshu.com/p/f6f31ee9b098