-
文本标签
-
em 与strong
em和strong这两个标签都表示一个强调的内容
em主要表示语气上的强调，在浏览器中默认使用斜体显示
strong表示强调的内容，比em更强烈，默认使用粗体显示
<body>
<p>今天<em>天气</em>很好</p>
<p>
<strong>注意:注意:注意</strng>
</p>
</body>
-
i 与 b
i标签中的内容会以斜体显示
b标签中的内容会以粗体显示
h5规范中规定：对于不需要着重的内容，而是单纯的斜体或者是加粗，就可以使用i和b标签
<body>
<p>
<i>i标签,呈现的是斜体</i>
<b>b标签,呈现的是粗体</b>
</p>
</body>
-
small 与 big
small标签中的内容会比他父元素中的文字要小一些
在H5中使用small标签来表示一些细则一类的内容.比如：合同中的小字，网站的版权声明都可以放到small
big的显示效果 比正常的字体大
<body>
<p>
<small>small标签的效果</small>
<big>big标签的效果</big>>
</p>
</body>
-
cite
网页中所有的加书名号的内容都可以使用cite标签，表示参考的内容，比如：书名、歌名、话剧名、电影名…
呈现斜体效果
<body>
<p><cite>《三体》</cite>是我最喜欢的一本书</p>
</body>
-
q 与 blockquote
q标签表示一个短的引用（行内引用），q标签引用的内容，浏览器会默认加上引号
blockquote标签表示一个长引用（块级引用）
自动换行,缩进两个字符
<body>
<p>
<q>长引用</q>
<blockquote>长引用</blockquote>
</p>
</body>
-
sub 与 sup
sub 下标
sup 上标
<body>
<p>
22
log210
</p>
</body>
-
ins 与 del
ins:下划线
表示一个插入的内容，会自动添加下划线
del:删除线
使用del标签来表示一个删除的内容，会自动添加删除 -
code 与 pre
pre是一个预格式标签，会将代码中的格式保存，不会忽略多个空格及换行
code专门用来表示代码,但是没有格式
我们一般结合使用pre和code来表示一段代码 -
列表
列表之间都是可以互相嵌套，可以在无序列表中放个有序列表，也可以在有序列表中放一个无序列表
-
无序列表
无序列表
使用ul标签来创建一个无序列表
使用li在ul中创建一个一个的列表项，一个li就是一个列表项
ul和li都是块元素
通过type属性可以修改无序列表的项目符号，可选值：
disc：默认值，实心的圆点
square：实心的方块
circle：空心的圆圈
注意：默认的项目符号我们一般都不使用,如果需要设置项目符号，则可以采用为li设置背景图片的方式来设置
<body>
<ul type = 'circle'>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
-
有序列表
有序列表和无序列表类似，只不过它使用ol来代替ul
有序列表使用有序的序号作为项目符号
type属性，可以指定序号的类型，可选值：
1，默认值，使用阿拉伯数字
a/A，采用小写或大写字母作为序号
i/I，采用小写或大写的罗马数字作为序号
ol也是块元素
<body>
<ol type="A">
<li>q</li>
<li>a</li>
<li>z</li>
</ol>
</body>
-
定义列表
定义列表用来对一些词汇或内容进行定义
使用dl来创建一个定义列表，它有两个子标签
dt：被定义的内容
dd：对定义内容的描述
同样，dl、ul、ol之间都可以互相嵌套
快速定义
dl>dt+dd
<body>
<dl>
<dt>123</dt>
<dd>1</dd>
<dd>2</dd>
<dd>3</dd>
</dl>
</body>
-
长度单位
1.px显示效果越好、越清晰，像素就越小，反之像素越大
自己输入的像素 -
%
使用百分比的好处是，当父元素的属性值发生变化时，子元素也会按照比例发生改变
在我们创建一个自适应的页面时，经常使用百分比作为单位
在子元素中使用,相对于父元素中对应的长度值来计算 -
em
em和百分比类似，它是相对于当前元素的字体大小来计算的
1em = 1font-size
使用em时，当字体大小发生改变时，em也会随之改变
当设置字体相关的样式时，经常会使用em
<head>
<style>
<style type = 'text/css'>
.box{
width: 200px;
height: 200px;
background-color: black;
}
.box1{
background-color: yellow;
font-size: 20px;
width: 5em;
height: 50%;
}
</style>
</head>
<body>
<div class="box">
<div class=" box1"></div>
</div>
</body>
- 颜色
- 直接使用颜色的单词来表示
- 红色:red
- 绿色:green
- 蓝色:blue
-
GRB值来表示
每一个原色的值在0-255之间
数字表示方法(0-255):
rgb(10,255,60)百分数表示方法(0-100%):
rgb(20%,50%,60%) -
十六进制表示方法(00-ff):
-
0000ff
- 当rgb的三个值都是两两相同时.可以缩写成三位数
-
00f
-
-
字体的样式
-
字体的颜色
color:red
-
字体大小
font-size:30px
-
文字的字体
font-family:arial,微软雅黑,华文彩云,'Segoe Script'
<head>
<style>
p{
color: red;
font-size: 20px;
font-family: 华文彩云,宋体
}
</style>
</head>
<body>
<p>我是一个p标签，ABCDEFGabcdefg</p>
</body>
-
font-style----斜体
可选值：
normal 默认值，文字正常显示
italic 文字会以斜体显示
oblique 文字会以倾斜的效果显示
*大部分浏览器都不会对倾斜和斜体做区分，也就是说我们设置italic和oblique效果是一样的,一般我们只会使用italic
font-style:italic -
font-weight---加粗
可选值：
normal 默认值，文字正常显示
bold 文字加粗显示
bold的值有:100 200 300 400(正常) 500 600 700(bold) 800 900font-weight:bold;
font-weight:100; -
font-variant---小型大写字母
*可选值：
normal 默认值，文字正常显示
small-caps 文本以小型大写字母显示
小型大写字母：
将所有的字母都以大写形式显示，但是小写字母的小型大写，要比大写字母小一些
将小写字符大写,但是字号比正常大写字母要小 -
样式使用注意事项
在CSS中还为我们提供了一个样式叫font，使用该样式可以同时设置字体相关的所有样式,可以将字体的样式值统一写在font样式中，不同的值之间使用空格隔开
使用font设置字体样式时，斜体 加粗 小大字母，没有顺序要求，甚至可写可不写，如果不写则使用默认值
但是要求文字的大小和字体必须写，而且字体必须是最后一个样式，大小必须是倒数第二个样式
实际上使用简写属性也会有一个比较好的性能
<head>
<style>
p{font: small-caps bold 20px 微软雅黑;}
<style>
</head>
<body>
<p>我是一个p标签，ABCDEFGabcdefg</p>
</body>
-
字体的分类
serif（衬线字体）------宋体
sans-serif（非衬线字体）------黑体
monospace （等宽字体）
cursive （草书字体）
fantasy （虚幻字体)
<body>
<p style="font-size: 50px; font-family: serif;">衬线字体：我是一段文字，ABCDEFGabcdefg</p>
<p style="font-size: 50px; font-family: sans-serif;">非衬线字体：我是一段文字，ABCDEFGabcdefg</p>
<p style="font-size: 50px; font-family: monospace;">等宽字体：我是一段文字，IHABCDEFGabcdefg</p>
<p style="font-size: 50px; font-family: cursive;">草书字体：我是一段文字，ABCDEFGabcdefg</p>
<p style="font-size: 50px; font-family: fantasy;">虚幻字体：我是一段文字，ABCDEFGabcdefg</p>
</body>
-
行间距---line-height
行间距 = 行高 - 字体大小
通过设置line-height可以间接的设置行高
可以接收的值：
1.直接接收一个大小,20px
2.可以指定一个百分数，则会相对于字体去计算行高
3.可以直接传一个数值，则行高会设置字体大小相应的倍数对于单行文本来说，可以将行高设置为和父元素的高度一致，这样可以是单行文本在父元素中垂直居中
<style>
.box{
width: 200px;
height: 200px;
background-color: #bfa;
line-height: 200px;
}
</style>
-
文本的样式
-
text-transform---文本的大小写
可选值：
none 默认值，该怎么显示就怎么显示，不做任何处理
capitalize 单词的首字母大写，通过空格来识别单词
uppercase 所有的字母都大写
lowercase 所有的字母都小写
text-transform: lowercase; -
text-decoration可以用来设置文本的修饰
可选值：
none：默认值，不添加任何修饰，正常显示
underline 为文本添加下划线
overline 为文本添加上划线
line-through 为文本添加删除线
text-decoration: line-through;
超链接中下划线
超链接的text-decoration的默认值是underline
如果需要去除超链接的下划线则需要将该样式设置为none*/
text-decoration: none; -
字间距----letter-spacing
letter-spacing:10px;
-
单词见得距离----word-spacing
word-spacing: 100px;
-
对齐方式----text-align
通过调整文本之间的空格的大小，来达到一个两端对齐的目的
默认值
left 默认值，文本靠左对齐
right 文本靠右对齐
center 文本居中对齐
justify 两端对齐
text-align: justify; -
首行缩进---text-indent
一般都会使用em作为单位
当给它指定一个正值时，会自动向右侧缩进指定的像素
如果为它指定一个负值，则会向左移动指定的像素
通过这种方式可以将一些不想显示的文字隐藏起来
text-indent: -99999px;
网友评论