HTML基础样式(二)

一、使用css设置文字效果

1、文字样式常用属性

设置字体:font-family
设置字号:font-size
设置斜体:font-style:nomal(正常显示)/ italic(斜体)/oblique(比斜体还斜)
设置加粗:font-weight:normal(正常粗细)|bold(粗体)|bolder(加粗体)|lighter(细体)|number(100~900九个级别,数字越大文字越粗。);
设置颜色:color
设置变体:font-variant:normal(正常)|small-caps(小型大写字母);
组合设置字体属性:font

              例:p{font:italic bold small-caps 15pt 宋体;}

2、网页中元素的长度单位

    绝对长度单位

    相对长度单位

3、css段落和其他文字样式属性

(1)修饰文字:text-decoration;underline(为文字添加下划线)|  overline)(添加上划线)|   line-through(添加删除线)|   blink(添加闪烁效果,浏览器不支持)|   none(没有文本修饰,常用于取消超链接产生的下划线)
(2)转换英文字母大小写:text-transform:capitalize(每个单词首字母大写)|uppercase(所有字母大写)|lowercase(所有字母小写)|none(默认值显示);
(3)设置中文字符间距:letter-spacing:normal(正常)| 绝对数值(12px)|字体高度(2em)
(4)设置英文单词间距:word-spacing;
(5)设置段落的水平对齐方式:text-align:left(文本左对齐)|right(文本右对齐)|center(文本居中对齐)|justify(文本两端对齐)
(6)设置段落缩进:text-indent:2em
(7)设置行间距(行高):line-height:12px;

二、HTML常用符号

1、css列表样式常用属性

        (1) 设置列表符号:list-style-type:


(2)使用图片符号:list-style-image:url
(3)调整列表位置(列表项的位置):list-style-position:outside(列表符号不向内缩进),默认值|inside(列表符号向内缩进)

  2、清除列表的默认边距

      ul、ol{

            padding:0;

            margin:0;

       }

3、<div>和<span>标签的区别

     div标签是一个块级元素,会独占一行,自带换行功能

    span标签为行内元素,在它前后的元素都不会自动换行

     <span>标签没有结构上的意义,纯粹是为了方便为它独立出来的内容应用样式。

4、块级元素与行内元素的区别

     (1)HTml中的元素分为两大类型:块级元素和行内元素(内联元素

            块级元素可以作为容器,可以把其他元素放在元素中

            而行内元素需要超过其父元素的宽度才换行

     (2)行内元素的特点:

            a、设置宽度width无效。
           b、设置高度height无效,可以通过line-height来设置行高。
           c、设置margin只有左右有效,上下无效。
           d、设置padding只有左右有效,上下则无效。


猜你喜欢

转载自blog.csdn.net/qq_41672590/article/details/79521830