文本标签
<em > 和 < strong>
em 标签用于表示一段内容中的着重点.
strong 标签用于表示一个内容的重要性.
这两个标签可以单独使用, 也可以一起使用.
<strong > 警告: 任何情况下不要接近僵尸.</strong>
他们只是 < em > 看起来 </em> 很友好, 实际上他们是为了吃你的胳膊!</p>
通常 em 显示为斜体, 而 strong 显示为粗体.
<i > 和 < b>
i 标签会使文字变成斜体.
b 标签会使文字变成粗体.
这两个标签和 em 和 strong 类似, 但是这两个标签没有语义.
所以根据 html5 标准, 当我们只想设置文本特殊显示, 而不需要强调内容时就可以使用 i 和 b 标签.
<small>
small 标签表示细则一类的旁注, 通常包括免责声明, 注意事项, 法律限制, 版权信息等.
浏览器在显示 small 标签时会显示一个比父元素小的字号.
- <p>
- <small>
- ©2016 尚硅谷. 保留所有权利.
- </small>
- </p>
- <cite>
使用 cite 标签可以指明对某内容的引用或参考. 例如, 戏剧, 文章或图书的标题, 歌曲, 电影, 照片或雕塑的名称等.
- <cite>
- 《七龙珠》
- </cite>
- 讲的是召唤神龙的故事
- <blockquote>
- 和
- < q>
blockquote 和 q 表示标记引用的文本.
Blockquote 用于长引用, q 用于短引用
在两个标签中还可以使用 cite 属性来表示引用的地址.
孟子曾经说过:<blockquote > 天将降大任于是人也...</blockquote > 他说的真对啊!
- <p>
- 孔子曾经说过:
- <q>
- 学而时习之不亦说乎
- </q>
- </p>
- <sup>
- 和
- < sub>
sup 和 sub 用于定义上标和下标.
上标主要用于表示类似 103 的 3.
下表主要用于表示类似 H2O 中的 2
<ins > 和 < del>
ins 表示插入的内容, 显示时通常会加上下划线.
Del 表示删除的内容, 显示时通常会加上删除线.
<code > 和 < pre>
如果你的内容包含代码示例或文件名, 就可以使用 code 元素.
Pre 元素表示的预格式化文本, 可以使用 pre 包住 code 表示一段代码
无序列表和有序列表
在 HTML 也可以创建列表, 在网页中一共有三种列表:
1, 无序列表
使用 ul 创建一个无序列表, 使用 li 中创建一个一个的列表项
通过 type 属性可以修改无序列表的项目符号
可选值:
disc, 默认值, 实心的圆点
square, 实心的方块
circle, 空心的圆
注意: 默认的项目符号我们一般都不使用!!
如果需要设置项目符号, 则可以采用为 li 设置背景图片的方式来设置
ul 和 li 都是块元素
2, 有序列表
使用 ol 标签来创建一个无序列表
有序列表使用有序的序号作为项目符号
type 属性, 可以指定序号的类型
可选值: 1, 默认值, 使用阿拉伯数字
a/A 采用小写或大写字母作为序号
i/I 采用小写或大写的罗马数字作为序号
列表之间都是可以互相嵌套, 可以在无序列表中放个有序列表, 也可以在有序列表中放一个无序列表
定义列表
定义列表用来对一些词汇或内容进行定义
使用 dl 来创建一个定义列表
dl 中有两个子标签
dt : 被定义的内容
dd : 对定义内容的描述
同样 dl 和 ul 和 ol 之间都可以互相嵌套
长度单位
px: 像素. 一个像素就相当于屏幕中的一个小点, 不同显示器一个像素的大小也不相同, 显示效果越好越清晰, 像素就越小, 反之像素就越大. 例如 width:200px.
百分比: 可以将单位设置成一个百分比的形式, 这样浏览器会根据父元素的样式来计算该值. 当父元素的属性值发生变化时, 子元素也会按照比例发生改变. 在我们需要创建一个自适应的页面时, 经常使用百分比作为单位. 例如: width:50%
em:em 和百分比类似, 它是相对于当前元素的字体大小来计算的
1em = 1font-size, 使用 em 时, 当字体大小发生改变时, em 也会随之改变, 当设置字体相关的样式时, 经常会使用 em
十六进制 RGB 值
可以使用十六进制的 rgb 值来表示颜色, 原理和上边 RGB 原理一样, 只不过使用十六进制数来代替, 使用三组两位的十六进制数组来表示一个颜色
每组表示一个颜色 , 第一组表示红色的浓度, 范围 00-ff, 第二组表示绿色的浓度, 范围是 00-ff, 第三组表示蓝色的浓度, 范围 00-ff
语法:# 红色绿色蓝色
十六进制:
- 0 1 2 3 4 5 6 7 8 9 a b c d e f
- 00 - ff
00 表示没有, 相当于 rgb 中的 0,ff 表示最大, 相当于 rgb 中 255
红色:#ff0000
像这种两位两位重复的颜色, 可以简写比如:#ff0000 可以写成 #f00,#abc ,#aabbcc 例如 background-color: #00f;
字体的样式
设置字体颜色, 使用 color 来设置文字的颜色. color:red
Font-size: 设置文字的大小, 浏览器中文字的默认大小是 16px,, 我们设置 font-size 实际上是设置格的高度, 并不是字体的大小, 一般情况下文字都要比这个格小. 例如 font-size:30px.
Font-family: 指定文字的字体. 当采用某种字体时, 如果浏览器支持则使用该字体, 如果字体不支持, 则使用默认字体, 该样式可以同时指定多个字体, 多个字体之间使用, 分开, 当采用多个字体时, 浏览器会优先使用前边的字体, 如果前边没有在尝试下一个.
font-family: arial , 微软雅黑;
RGB 值
颜色单位: 在 CSS 可以直接使用颜色的单词来表示不同的颜色.
红色: red
蓝色: blue
绿色: green
也可以使用 RGB 值来表示不同的颜色, 所谓的 RGB 值指的是通过 Red Green Blue 三元色.
通过这三种颜色的不同的浓度, 来表示出不同的颜色
例子: rgb(红色的浓度, 绿色的浓度, 蓝色的浓度);
颜色的浓度需要一个 0-255 之间的值, 255 表示最大, 0 表示没有
例如 background-color:rgb(161,187,215)
浓度也可以采用一个百分数来设置, 需要一个 0% - 100% 之间的数字
使用百分数最终也会转换为 0-255 之间的数, 0% 表示 0,100% 表示 255. 例如 background-color: rgb(100%,50%,50%);
RGBA 表示一个颜色和 RGB 类似, 只不过比 RGB 多了一个 A(alpha) 来表示透明度, 透明度需要一个 0-1 的值. 0 表示完全透明, 1 表示完全不透明. RGBA(255,100,5,0.5)
字体分类
字体的分类
- serif(衬线字体)
- sans-serif(非衬线字体)
- monospace (等宽字体)
- cursive (草书字体)
- fantasy (虚幻字体)
以上这些分类都是一些大的分类, 并没有涉及具体的类型, 如果将字体指定为这些格式, 浏览器会自己选择指定类型的字体
字体样式二
斜体和粗体:
• font-style 用来指定文本的斜体.
指定斜体: font-style:italic
指定非斜体: font-style:normal
指定倾斜的效果: font-style:oblique
• font-weight 用来指定文本的粗体.
指定粗体: font-weight:bold
指定非粗体: font-weight:normal
小型大写字母: font-variant 属性可以将字母类型设置为小型大写. 在该样式中, 字母看起来像是稍微缩小了尺寸的大写字母.
font-variant:small-caps
font: 使用该样式可以同时设置字体相关的所有样式,
语法: font: 加粗 斜体 小型大写 大小 / 行高 字体
可以将字体的样式的值, 统一写在 font 样式中, 不同的值之间使用空格隔开, 使用 font 设置字体样式时, 斜体加粗 小大字母, 没有顺序要求, 甚至可写可不写.
如果不写则使用默认值, 但是要求文字的大小和字体必须写, 而且字体必须是最后一个样式, 大小必须是倒数第二个样式. 实际上使用简写属性也会有一个比较好的性能
font: small-caps bold italic 60px "微软雅黑";
行高
line-height 用于设置行高, 行高越大则行间距越大.
行间距 = line-height - font-size
可以接收的值: 直接就收一个大小; 可以指定一个百分数, 则会相对于字体去计算行高; 可以直接传一个数值. 例如 line-height:200% 或 line-height: 2;
对于单行文本, 可以将行高设置为和父元素的高度一致, 这样可以使单行文本在父元素中垂直居中.
在 font 中也可以指定行高, 来指定行高, 该值是可选的, 如果不指定则会使用默认值. 例如 font:30px/50px"微软雅黑";
文本样式
text-transform 样式用于将元素中的字母全都变成大小.
所有的字母都大写: text-transform:uppercase
所有的字母都小写: text-tansform:lowercase
首字母大写: text-transform:capitalize
正常: text-transform:none
文本的修饰
text-decoration 属性, 用来给文本添加各种修饰. 通过它可以为文本的上方, 下方或者中间添加线条.
可选值
Underline: 为文本添加下划线
overline: 为文本添加上划线
line-through: 为文本添加删除线
none: 默认值不添加任何修饰, 正常显示
例如: text-decoration:line-through;
字母间距和单词间距
letter-spacing 用来设置字符之间的间距.
Word-spacing 用来设置单词之间的间距.
这两个属性都可以直接指定一个长度或百分数作为值. 正数代表的是增加距离, 而负数代表减少距离.
对齐文本
text-align 用于设置文本的对齐方式.
• 可选值:
left: 左对齐
right: 右对齐
justify: 两边对齐
center: 居中对齐
首行缩进
text-indent 用来设置首行缩进. 该样式需要制定一个长度, 并且只对第一行有效. 当给它指定一个正值时, 会自动向右侧缩进指定的像素
如果为它指定一个负值, 则会向左移动指定的像素, 通过这种方式可以将一些不想显示的文字隐藏起来.
up 是一个从事前端开发 6 年的程序员, 在前端领域混了这几年, 总结了一套前端学习的精讲视频和学习路线, 如果有对前端开发感兴趣的伙伴, 不管你是想转行, 或是大学生, 还有工作中想提升自己能力的 web 前端党, 欢迎大家的加入我的前端开发交流群: 603985993 希望大家诚心交流!, 与企业需求同步. 好友都在里面学习交流, 每天都会有大牛定时讲解前端技术!
来源: http://www.jianshu.com/p/85f18f0b4237