zoukankan      html  css  js  c++  java
  • CSS字体连写及外观属性

    一、font:字体连写

    使用font属性时,必须按以下语法格式中的顺序书写,不能更换顺序,各个属性以空格隔开。
    注意:其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用。

    /*选择器{font: 字体风格 字体粗细 字体大小/行间距 字体样式;}*/
    p{font: font-style  font-weight  font-size/line-height  font-family;}

    1.1 font-size:字号大小
    字号大小一般用px或者em来设定。
    em指相对于当前对象内文本的字体尺寸。

    1.2 font-family:字体样式

    p{ font-family:"微软雅黑","黑体",sans-serif;}
    /*san-serif/serif:无衬线和有衬线字体。很多中文字体都有衬线。*/

    在 CSS 中设置字体名称,直接写中文是可以的。但是在文件编码(GB2312、UTF-8 等)不匹配时会产生乱码的错误。xp 系统不支持类似微软雅黑的中文。
    可以使用英文或者Unicode编码来代替。

    p{ font-family:"Microsoft Yahei","SimHei",sans-serif;}
    p{ font-family:5FAE8F6F96C59ED1,9ED14F53,sans-serif;}

    为了照顾不同电脑的字体安装问题,我们尽量只使用宋体和微软雅黑中文字体。

    1.3 font-weight:字体粗细
    在HTML中,可以用b或者strong等语义化标签,进行加粗。
    在CSS中,可以使用的属性值:normal、bold、bolder、lighter、100~900(100的整数倍)。
    其中,400等价于normal,700等价于bold

    p{font-weight: normal bold bolder lighter 100~900;}

    1.4 font-style:字体风格
    在HTML中,可以用i或者em(强调,也是斜体)
    normal:默认值,浏览器会显示标准的字体样式。
    italic:浏览器会显示斜体的字体样式。
    oblique:浏览器会显示倾斜的字体样式。

    p{font-style: normal italic oblique;}

    二、CSS外观属性

    2.1 color:文本颜色

    color属性用于定义文本的颜色,其取值方式有如下3种: 1.预定义的颜色值,如red,green,blue等。 2.十六进制,如#FF0000,#FF6600,#29D794等。实际工作中,十六进制是最常用的定义颜色的方式。 3.RGB代码,如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。 需要注意的是,如果使用RGB代码的百分比颜色值,取值为0时也不能省略百分号,必须写为0%。

    2.2 line-height:行间距/行高

    line-height属性用于设置行间距,就是行与行之间的距离,即字符的垂直间距,一般称为行高。line-height常用的属性值单位有三种, 分别为像素px,相对值em和百分比%,实际工作中使用最多的是像素px。

    2.3 text-align:水平对齐方式

    text-align属性用于设置文本内容的水平对齐,相当于html中的align对齐属性。

    p{text-align: left|right|center;}

    2.4 text-indent:首行缩进

    text-indent属性用于设置首行文本的缩进,其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%, 允许使用负值, 建议使用em作为设置单位。 一般都是2em

    2.5 text-decoration:文本的装饰

    通常我们用于给链接修改装饰效果

    p{text-decoration: none|underline|overline|line-through;}
  • 相关阅读:
    WPF DelegateCommand 出现Specified cast is not valid
    WPF DelegateCommand 出现Specified cast is not valid
    WPF DelegateCommand 出现Specified cast is not valid
    win10 sdk 是否向下兼容
    win10 sdk 是否向下兼容
    win10 sdk 是否向下兼容
    PHP extract() 函数
    PHP end() 函数
    PHP each() 函数
    PHP current() 函数
  • 原文地址:https://www.cnblogs.com/fanbao/p/10504750.html
Copyright © 2011-2022 走看看