一, 文本标签
(1)<em > 和 < strong>,<i>,<b>,<cite > 标签
通常 em 显示为斜体, 而 strong 显示为粗体
<i>,<b > 这两个标签和 em 和 strong 类似, 但是这两 个标签没有语义.
small 标签表示细则一类的旁注, 通常包括 免责声明, 注意事项, 法律限制, 版权信 息等.
使用 cite 标签可以指明对某内容的引用或参 考. 例如, 戏剧, 文章或图书的标题, 歌 曲, 电影, 照片或雕塑的名称等.
blockquote 和 q 表示标记引用的文本.
blockquote 用于长引用, q 用于短引用.
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 文本标签 </title>
- </head>
- <body>
- <p>
- /*em 标签用于表示一段内容中的着重点.*/
今天是个 < em > 好日子 < em>
- </p>
- <p>
- /*strong 标签用于表示一个内容的重要性.*/
- <strong>
注意: 你不好好上课, 以后就找不到好工作
- </strong>
- </p>
- <p>
- /*i 标签会使文字变成斜体.*/
- <i>i 标签 </i><br>
- /*b 标签会使文字变成粗体.*/
- <b>b 标签 </b>
- </p>
- <p>
- <small > 我是 small 标签 </small>
- </p>
- <p>
你是 < q > 局外人 </q > 吗?
- </p>
- </body>
- </html>
(2)sup 和 sub 标签
sup 和 sub 用于定义上标和下标.
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 文本标签 </title>
- </head>
- <body>
- <p>5<sup>2</sup>0</p>
- <p>3<sub>2</sub>0</p>
- <p > 林志玲 < sup><a href="">[1]</a></sup></p>
- </body>
- </html>
(3)<ins > 和 < del > 标签
ins 表示插入的内容, 显示时通常会加上下 划线.
del 表示删除的内容, 显示时通常会加上删 除线.
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 文本标签 </title>
- </head>
- <body>
- <p>
郭敬明的个头 < ins > 真高啊 </ins>
- </p>
- </body>
- </html>
(4)<code > 和 < pre> 标签
如果你的内容包含代码示例或文件名, 就 可以使用 code 元素.
pre 元素表示的是预格式化文本, 可以使用
pre 包住 code 来表示一段代码.
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 文本标签 </title>
- </head>
- <body>
- <pre>
- <code>
- function fun(){ alert("hello");
- }
- </code>
- </pre>
- </body>
- </html>
(5) 有序列表和无序列表
使用 ol 和 li 来创建一个有序列表.
使用 ul 和 li 来创建一个无序列表.
使用 dl,dd,dt 来创建一个定义列表.
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 有序列表 </title>
- <style type="text/CSS">
- </style>
- </head>
- <body>
- <ul>
- <li > 西门庆 </li>
- <li > 潘金莲 </li>
- <li > 武大郎 </li>
- <li > 武松 </li>
- </ul>
- <ol type="1">
- <li > 结构 </li>
- <li > 表现 </li>
- <li > 行为 </li>
- </ol>
- <li>
鱼香肉丝
- <ol>
- <li > 鱼 </li>
- <li > 香 </li>
- <li > 肉 </li>
- <li > 丝 </li>
- </ol>
- </li>
- <dl>
- <dt > 武松 </dt>
- <dd > 景阳冈打虎 </dd>
- <dd > 为哥哥报仇 </dd>
- <dd > 杀死嫂嫂 </dd>
- <dd > 投奔梁山 </dd>
- </dl>
- </body>
- </html>
二, 文本样式
(1), 单位
px
如果我们将一个图片放大的话, 我们会发现一个图片 是有一个一个的小色块构成的, 这一个小色块就是一 个像素, 也就是 1px, 对于不同的显示器来说一个像素 的大小是不同的.
百分比
也可以使用一个百分数来表示一个大小, 百分比是相 对于父元素来说的, 如果父元素使用的大小是 16px, 则 100% 就是 16px,200% 就是 32px.
em
em 和百分比类似, 也是相对于 font-size 说的, 1em 就相 当于 100%,2em 相当于 200%,1.5em 相当于 150%
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 单位 </title>
- <style type="text/css">
- .box{
- /* 宽度 */
- width: 200px;
- /* 高度 */
- height: 200px;
- /* 背景颜色 */
- background-color: yellow;
- }
- .box1{
- width: 50%;
- height: 50%;
- background-color: red;
- }
- </style>
- </head>
- <body>
- <div class="box">
- <div class="box1"></div>
- </div>
- </body>
- </html>
(2) 颜色单位
在 CSS 中可以直接使用颜色的关键字来代表 一种颜色
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 颜色单位 </title>
- <style type="text/css">
- /* 颜色单位 */
- .p1{
- color: yellow;
- }
- /* 十六进制颜色单位 */
- .p2{
- color: #FF0000;
- }
- /*RGB 颜色单位 */
- .p3{
- color: rgb(200 130 100);
- }
- </style>
- </head>
- <body>
- <p class="p1"> 这是一个颜色单位 </p>
- <p class="p2"> 这是一个十六进制颜色单位 </p>
- <p class="p3"> 这是一个 RGB 颜色单位 </p>
- </body>
- </html>
(3) 字体单位
font-size 用来指定文字的大小.
通过 font-family 可以指定标签中文字使用 的字体
font-style 用来指定文本的斜体.
font-weight 用来指定文本的粗体
font-variant 属性可以将字母类型设置为小 型大写. 在该样式中, 字母看起来像是稍 微缩小了尺寸的大写字母.
text-transform 样式用于将元素中的字母全都变成大写.
text-align 用于设置文本的对齐方式
font 可以一次性同时设置多个字体的样式.
语法 :- font: 加粗 斜体 小型大写 大小 / 行高 字体
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 字体的样式 </title>
- <style type="text/css">
- .p1{
- color: blue;
- font-size: 50px;
- font-family: 华文行楷;
- /* 斜体 */
- font-style: italic;
- /* 粗体 */
- font-weight: bold;
- /* 小型大写字母 */
- font-variant: small-caps;
- }
- /* 字体简写 */
- .p2{
- font: bold small-caps 60px "微软雅黑";
- }
- </style>
- </head>
- <body>
- <p class="p1"> 我在你眼里到底算什么 </p>
- <p style="font-size: 50px;font-family: 方正姚体; color: yellow;"> 我在你眼里到底算什么 </p>
- <p style="font-size: 50px;font-family: 华文隶书; color: red;"> 我在你眼里到底算什么 </p>
- <p style="font-family: 华文彩云; font-size: 50px;color: black"> 我在你眼里到底算什么 </p>
- <dl>
- <dt > 武松 </dt>
- <dd > 武松打虎 </dd>
- <dd > 武松杀嫂嫂 </dd>
- </dl>
- <<p class="p2" style="font-style: italic;"> 我在你眼里到底算什么 </p>
- </body>
- </html>
三, 盒子
一个盒子我们会分成几个部分:
内容区 (content)
内边距 (padding)
边框 (border)
外边距 (margin)
通过 width 和 height 两个属性可以设置内容区的大 小.
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 盒子 </title>
- <style type="text/css">
- .box1{
- width: 100px;
- /* 高度 */
- height: 100px;
- /* 背景颜色 */
- background-color: #bfa;
- /* 外面的盒子宽度 */
- border-width: 60px 60px 60px 60px;
- /* 颜色 */
- border-color: yellow red green blue;
- border-style: groove;
- }
- </style>
- </head>
- <body>
- <div class="box1"> </div>
- </body>
- </html>
这个盒子运行结果如下:
image.png
目前只学习了那么多
来源: http://www.jianshu.com/p/b2035d80a091