文本标签 列表

• 1. 文本标签
  • 1. em 与strong
  • 2. i 与 b
  • 3. small 与 big
  • 4. cite
  • 5. q 与 blockquote
  • 6. sub 与 sup
  • 7. ins 与 del
  • 8. code 与 pre
• 2. 列表
  • 1. 无序列表
  • 2. 有序列表
  • 3. 定义列表
• 3. 长度单位
  • 1.px
  • 2. %
  • 3. em
• 4. 颜色
  • 1. 直接使用颜色的单词来表示
  • 2. GRB值来表示
  • 3. 十六进制表示方法(00-ff):
• 5. 字体的样式
  • 1. 字体的颜色
  • 2. 字体大小
  • 3. 文字的字体
  • 4. font-style----斜体
  • 5. font-weight---加粗
  • 6. font-variant---小型大写字母
  • 7. 样式使用注意事项
• 6. 字体的分类
• 7. 行间距---line-height
• 8. 文本的样式
  • 1. text-transform---文本的大小写
  • 2. text-decoration可以用来设置文本的修饰
  • 3. 字间距----letter-spacing
  • 4. 单词见得距离----word-spacing
  • 5. 对齐方式----text-align
  • 6. 首行缩进---text-indent

1. 文本标签

1. em 与strong

• em和strong这两个标签都表示一个强调的内容
  • em主要表示语气上的强调，在浏览器中默认使用斜体显示
  • strong表示强调的内容，比em更强烈，默认使用粗体显示

    
今天天气很好
    

        注意:注意:注意
    

2. i 与 b

• i标签中的内容会以斜体显示
• b标签中的内容会以粗体显示
• h5规范中规定：对于不需要着重的内容，而是单纯的斜体或者是加粗，就可以使用i和b标签

    

        i标签,呈现的是斜体
        

        b标签,呈现的是粗体
    

3. small 与 big

• small标签中的内容会比他父元素中的文字要小一些
  • 在H5中使用small标签来表示一些细则一类的内容.比如：合同中的小字，网站的版权声明都可以放到small
• big的显示效果 比正常的字体大

    

        small标签的效果
        big标签的效果>
    

4. cite

• 网页中所有的加书名号的内容都可以使用cite标签，表示参考的内容，比如：书名、歌名、话剧名、电影名…
• 呈现斜体效果

    
《三体》是我最喜欢的一本书

5. q 与 blockquote

• q标签表示一个短的引用（行内引用），q标签引用的内容，浏览器会默认加上引号
• blockquote标签表示一个长引用（块级引用）
  • 自动换行,缩进两个字符

    

        长引用
        

        
长引用
    

6. sub 与 sup

• sub 下标
• sup 上标

    

        22
        

        log210
    

7. ins 与 del

• ins:下划线
  • 表示一个插入的内容，会自动添加下划线
• del:删除线
  • 使用del标签来表示一个删除的内容，会自动添加删除线

    

        附近的江苏省经济师事实上你是谁
        是男是女是南宁市jjsnnsn dddd

    

8. code 与 pre

• pre是一个预格式标签，会将代码中的格式保存，不会忽略多个空格及换行
• code专门用来表示代码,但是没有格式
• 我们一般结合使用pre和code来表示一段代码

    

        
            
if a > b:
    print(a)
            
        

    

2. 列表

• 列表之间都是可以互相嵌套，可以在无序列表中放个有序列表，也可以在有序列表中放一个无序列表

1. 无序列表

• 无序列表
  • 使用ul标签来创建一个无序列表
  • 使用li在ul中创建一个一个的列表项，一个li就是一个列表项
  • ul和li都是块元素
  • 通过type属性可以修改无序列表的项目符号，可选值：
    • disc：默认值，实心的圆点
    • square：实心的方块
    • circle：空心的圆圈
  • 注意：默认的项目符号我们一般都不使用,如果需要设置项目符号，则可以采用为li设置背景图片的方式来设置

    

        
1
        
2
        
3
    

2. 有序列表

• 有序列表和无序列表类似，只不过它使用ol来代替ul
  • 有序列表使用有序的序号作为项目符号
  • type属性，可以指定序号的类型，可选值：
    • 1，默认值，使用阿拉伯数字
    • a/A，采用小写或大写字母作为序号
    • i/I，采用小写或大写的罗马数字作为序号
  • ol也是块元素

    

        
q
        
a
        
z
    

3. 定义列表

• 定义列表用来对一些词汇或内容进行定义
• 使用dl来创建一个定义列表，它有两个子标签
  • dt：被定义的内容
  • dd：对定义内容的描述
• 同样，dl、ul、ol之间都可以互相嵌套
• 快速定义
  • dl>dt+dd

    

        
123
        
1
        
2
        
3
    

3. 长度单位

1.px

• 显示效果越好、越清晰，像素就越小，反之像素越大
• 自己输入的像素

2. %

• 使用百分比的好处是，当父元素的属性值发生变化时，子元素也会按照比例发生改变
• 在我们创建一个自适应的页面时，经常使用百分比作为单位
• 在子元素中使用,相对于父元素中对应的长度值来计算

3. em

• em和百分比类似，它是相对于当前元素的字体大小来计算的
  • 1em = 1font-size
  • 使用em时，当字体大小发生改变时，em也会随之改变
  • 当设置字体相关的样式时，经常会使用em

4. 颜色

1. 直接使用颜色的单词来表示

* 红色:red
* 绿色:green
* 蓝色:blue 

2. GRB值来表示

• 每一个原色的值在0-255之间

• 数字表示方法(0-255):

  • rgb(10,255,60)

• 百分数表示方法(0-100%):

  • rgb(20%,50%,60%)

3. 十六进制表示方法(00-ff):

* #0000ff
* 当rgb的三个值都是两两相同时.可以缩写成三位数
    * #00f 

5. 字体的样式

1. 字体的颜色

• color:red

2. 字体大小

• font-size:30px

3. 文字的字体

• font-family:arial,微软雅黑,华文彩云,'Segoe Script'

    


    
我是一个p标签，ABCDEFGabcdefg

4. font-style----斜体

• 可选值：
  • normal 默认值，文字正常显示
  • italic 文字会以斜体显示
  • oblique 文字会以倾斜的效果显示
• *大部分浏览器都不会对倾斜和斜体做区分，也就是说我们设置italic和oblique效果是一样的,一般我们只会使用italic
• font-style:italic

5. font-weight---加粗

• 可选值：
  • normal 默认值，文字正常显示
  • bold 文字加粗显示
    • bold的值有:100 200 300 400(正常) 500 600 700(bold) 800 900

font-weight:bold;
font-weight:100;

6. font-variant---小型大写字母

• *可选值：
  • normal 默认值，文字正常显示
  • small-caps 文本以小型大写字母显示
• 小型大写字母：
  • 将所有的字母都以大写形式显示，但是小写字母的小型大写，要比大写字母小一些
  • 将小写字符大写,但是字号比正常大写字母要小

7. 样式使用注意事项

• 在CSS中还为我们提供了一个样式叫font，使用该样式可以同时设置字体相关的所有样式,可以将字体的样式值统一写在font样式中，不同的值之间使用空格隔开
• 使用font设置字体样式时，斜体 加粗 小大字母，没有顺序要求，甚至可写可不写，如果不写则使用默认值
• 但是要求文字的大小和字体必须写，而且字体必须是最后一个样式，大小必须是倒数第二个样式
  实际上使用简写属性也会有一个比较好的性能

    


    
我是一个p标签，ABCDEFGabcdefg

6. 字体的分类

• serif（衬线字体）------宋体
• sans-serif（非衬线字体）------黑体
• monospace （等宽字体）
• cursive （草书字体）
• fantasy （虚幻字体)

    
衬线字体：我是一段文字，ABCDEFGabcdefg
    
非衬线字体：我是一段文字，ABCDEFGabcdefg
    
等宽字体：我是一段文字，IHABCDEFGabcdefg
    
草书字体：我是一段文字，ABCDEFGabcdefg
    
虚幻字体：我是一段文字，ABCDEFGabcdefg

7. 行间距---line-height

• 行间距 = 行高 - 字体大小
• 通过设置line-height可以间接的设置行高
  • 可以接收的值：
    • 1.直接接收一个大小,20px
    • 2.可以指定一个百分数，则会相对于字体去计算行高
    • 3.可以直接传一个数值，则行高会设置字体大小相应的倍数

---

• 对于单行文本来说，可以将行高设置为和父元素的高度一致，这样可以是单行文本在父元素中垂直居中

8. 文本的样式

1. text-transform---文本的大小写

• 可选值：
  • none 默认值，该怎么显示就怎么显示，不做任何处理
  • capitalize 单词的首字母大写，通过空格来识别单词
  • uppercase 所有的字母都大写
  • lowercase 所有的字母都小写
• text-transform: lowercase;

2. text-decoration可以用来设置文本的修饰

• 可选值：
  • none：默认值，不添加任何修饰，正常显示
  • underline 为文本添加下划线
  • overline 为文本添加上划线
  • line-through 为文本添加删除线
• text-decoration: line-through;
• 超链接中下划线
  • 超链接的text-decoration的默认值是underline
  • 如果需要去除超链接的下划线则需要将该样式设置为none*/
    • text-decoration: none;

3. 字间距----letter-spacing

• letter-spacing:10px;

4. 单词见得距离----word-spacing

• word-spacing: 100px;

5. 对齐方式----text-align

• 通过调整文本之间的空格的大小，来达到一个两端对齐的目的
• 默认值
  • left 默认值，文本靠左对齐
  • right 文本靠右对齐
  • center 文本居中对齐
  • justify 两端对齐
• text-align: justify;

6. 首行缩进---text-indent

• 一般都会使用em作为单位
• 当给它指定一个正值时，会自动向右侧缩进指定的像素
• 如果为它指定一个负值，则会向左移动指定的像素
  • 通过这种方式可以将一些不想显示的文字隐藏起来
  • text-indent: -99999px;