前端基础学习笔记字体文本样式和特殊符号

超、凢脫俗 2022-04-14 04:10 224阅读 0赞

# 字体样式 #

**字体颜色 color  
字体风格 font-family**

span{
    font-family:'微软雅黑','宋体';
    }
    引入外部字体
    @font-face{
    font-family:"名称";
    src:url(' ');
    }

**字体大小 font-size**

div{
    /*具体的值*/
    font-size:50px;
    /*百分比 相当于父容器的字体百分比调整 浏览器默认字体大小16px*/
    font-size:50%;
    /*根据父元素字体大小来调整*/
    font-size:1em;
    /*当html字体大小为100px的时候 我想得到一个14px的字体，14/100 等于0.14rem
    移动端布局比较多*/
    font-size:1rem;
    }

**字体粗细 font-weight**

1.  bold  定义粗的字体
2.  bolder  定义更粗的字体
3.  lighter  定义更细的字体 
4.  100 200 300 400 500 600 700 800 900 数值的写法没有单位
5.  normal 默认  默认一般是用来给本来就加粗的字体，变成普通粗度

**规定字体是否倾斜 font-style**

1.  italic 定义字体倾斜
2.  oblique 定义字体的斜体 (两者没有明显的区别，记住一个就行)
3.  normal 默认  一般用来规定本来就是斜体的字体变成普通字体

**规定小型大写字母 font-variant**

smallcaps = 大型小写字母

**line-height 行高**

**设置行与行之前的距离：**

div{
        line-height:30px;
        line-height:100%;
        line-height:1.2em;
    }

## 复合写法 ##

**基本写法：**

div{
        /*字体大小和字体风格是必须要写的*/
        font:12px ‘微软雅黑’,’宋体’;
    }

**多样式写法:**

/*字体:字体大小/行高 字体风格 字体粗细 小型大写字母 倾斜 顺序不能改变*/
    font:blod small-caps intalic 12px/1.2 ‘微软雅黑’;

# 文本样式 #

**text-transform 控制文本大小写**

uppercase 字母大写   
capitalize 首字母大写   
lowercase 小写字母

**text-align 文本对齐方式**

left 左对齐   
right 右对齐   
center 居中   
justify 两端对齐

**text-indent 首行缩进**

**text-decoration 文本修饰 下划线**

none 去掉下划线   
underline 下划线   
linethrough 中划线   
overline 上划线

**letter-spacing 字间距**

px  
em

**word-spacing 词间距**

px  
em

**white-space 文本不换行**

nowrap 不换行

**word-break 单词内换行**

breakall 单词内换行

**text-overflow 文本省略号**

ellipsis 文本省略号

**给文本单行省略号三步走**

**先不换行，然后溢出隐藏，再加省略号：**

span{
        display:block;
        white-space:nowrap;
        text-overflow:ellipsis;
        overflow:hidden;
    }

# css属性的继承 #

默认继承的属性：

color
    font:small-caps italic bold 50px/100px 'microsoft yahei';
    text-align
    text-indent:
    letter-spacing = 字间距
    word-spacing = 词间距
    list-style

a标签的color不继承，不继承的加上inherit

a{color:inherit;}

# 特殊符号 #

空格 nbsp &;   
大于号 gt   
小于号 lt   
引号 quot   
版权符号 copy   
[http://www.w3school.com.cn/tags/html\_ref\_symbols.html][http_www.w3school.com.cn_tags_html_ref_symbols.html]

# 鼠标样式 #

/*后缀名必须要是`.cur`后面的pointer是防止浏览器不兼容或者出错的时候！就执行后面的一个
    样式！*/
    div{
        cursor:url('路径')，pointer;
    }

[http_www.w3school.com.cn_tags_html_ref_symbols.html]: http://www.w3school.com.cn/tags/html_ref_symbols.html