Html/CSS---文本标签

  1. 文本标签

  2. em 与strong

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


今天天气很好



注意:注意:注意


  1. i 与 b

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



i标签,呈现的是斜体


b标签,呈现的是粗体


  1. small 与 big

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



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


  1. cite

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


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


  1. q 与 blockquote

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



长引用


长引用


  1. sub 与 sup

    sub 下标
    sup 上标



22


log210


  1. ins 与 del

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

  2. code 与 pre

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

  3. 列表

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

  4. 无序列表

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



  • 1

  • 2

  • 3


  1. 有序列表

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



  1. q

  2. a

  3. z


  1. 定义列表

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



123

1

2

3


  1. 长度单位
    1.px

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

  2. %

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

  3. em

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







  1. 颜色
  2. 直接使用颜色的单词来表示
  • 红色:red
  • 绿色:green
  • 蓝色:blue
  1. GRB值来表示

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

    数字表示方法(0-255):
    rgb(10,255,60)

    百分数表示方法(0-100%):
    rgb(20%,50%,60%)

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

  • 0000ff

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

  1. 字体的样式

  2. 字体的颜色

    color:red

  3. 字体大小

    font-size:30px

  4. 文字的字体

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





我是一个p标签,ABCDEFGabcdefg


  1. font-style----斜体

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

  2. font-weight---加粗

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

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

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

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

  4. 样式使用注意事项

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


  1. 文本的样式

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

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

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

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

  4. 字间距----letter-spacing

    letter-spacing:10px;

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

    word-spacing: 100px;

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

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

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

你可能感兴趣的:(Html/CSS---文本标签)