zoukankan      html  css  js  c++  java
  • CSS样式规则及字体样式

    CSS

    CSS(Cascading Style Sheets)

    CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。

    CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。

    CSS样式规则

    使用HTML时,需要遵从一定的规范。CSS亦如此,要想熟练地使用CSS对网页进行修饰,首先需要了解CSS样式规则,具体格式如下:

    在上面的样式规则中:

    1.选择器用于指定CSS样式作用的HTML对象,花括号内是对该对象设置的具体样式。
    2.属性和属性值以“键值对”的形式出现。
    3.属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等。
    4.属性和属性值之间用英文“:”连接。
    5.多个“键值对”之间用英文“;”进行区分。

    CSS字体样式属性

    font-size:字号大小

    font-size属性用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位。其中,相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使用较少。具体如下:

    font-family:字体

    font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等,例如将网页中所有段落文本的字体设置为微软雅黑,可以使用如下CSS样式代码:

    p{ font-family:"微软雅黑";}

    可以同时指定多个字体,中间以逗号隔开,表示如果浏览器不支持第一个字体,则会尝试下一个,直到找到合适的字体。

    常用技巧:

    1. 现在网页中普遍使用14px+。
    2. 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
    3. 各种字体之间必须使用英文状态下的逗号隔开。
    4. 中文字体需要加英文状态下的引号,英文字体一般不需要加引号。当需要设置英文字体时,英文字体名必须位于中文字体名之前。
    5. 如果字体名中包含空格、#、$等符号,则该字体必须加英文状态下的单引号或双引号,例如font-family: "Times New Roman";。
    6. 尽量使用系统默认字体,保证在任何用户的浏览器中都能正确显示。

    CSS Unicode字体

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

    方案一: 你可以使用英文来替代。 比如 font-family:"Microsoft Yahei"。

    方案二: 在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称,浏览器是可以正确的解析的。 font-family: "5FAE8F6F96C59ED1",表示设置字体为“微软雅黑”。

     

    可以通过escape() 来测试属于什么字体。

    字体名称英文名称Unicode 编码
    宋体 SimSun 5B8B4F53
    新宋体 NSimSun 65B05B8B4F53
    黑体 SimHei 9ED14F53
    微软雅黑 Microsoft YaHei 5FAE8F6F96C59ED1
    楷体_GB2312 KaiTi_GB2312 69774F53_GB2312
    隶书 LiSu 96B64E66
    幼园 YouYuan 5E7C5706
    华文细黑 STXihei 534E65877EC69ED1
    细明体 MingLiU 7EC6660E4F53
    新细明体 PMingLiU 65B07EC6660E4F53

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

    font-weight:字体粗细

    字体加粗除了用 b 和 strong 标签之外,可以使用CSS 来实现,但是CSS 是没有语义的。

    font-weight属性用于定义字体的粗细,其可用属性值:normal、bold、bolder、lighter、100~900(100的整数倍)。

     

    小技巧:

    数字 400 等价于 normal,而 700 等价于 bold。  但是我们更喜欢用数字来表示。  

    font-style:字体风格

    字体倾斜除了用 i 和 em 标签之外,可以使用CSS 来实现,但是CSS 是没有语义的。

    font-style属性用于定义字体风格,如设置斜体、倾斜或正常字体,其可用属性值如下:

    normal:默认值,浏览器会显示标准的字体样式。

    italic:浏览器会显示斜体的字体样式。

    oblique:浏览器会显示倾斜的字体样式。

    小技巧:

    平时我们很少给文字加斜体,反而喜欢给斜体标签(em,i)改为普通模式。

    font:综合设置字体样式 (重点)

    font属性用于对字体样式进行综合设置,其基本语法格式如下:

    选择器{font: font-style  font-weight  font-size/line-height  font-family;}

     

    使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,各个属性以空格隔开。

    注意:其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用。


    div {
                /* font-style: italic;
                font-weight: 700;
                font-size: 16px;
                font-family: "Microsoft YaHei"; */
                /* 复合属性写法,font: font-style font-weight font-size/line-height font-family ;*/
                font: italic 700 16px "Microsoft YaHei";
            }

     字体样式应用:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>字体属性</title>
        <style>
            body {
                font-family: "宋体", Arial, Helvetica, sans-serif;
            }
            .size {
                font-size: 12px;
            }
            .bold {
                font-weight: 700;
                /* font-weight: bold;  700后面不要加单位,等价于bold,都是加粗效果*/
                /* 实际开发中提倡使用数字 */
            }
            h4 {
                font-weight: 400;
                /* font-weight: normal; 与400等价,恢复正常粗细值*/
            }
            .xieti {
                font-style: italic;
            }
            em {
                font-style: normal;
            }
        </style>
    </head>
    <body>
        <h4>兰陵美酒郁金香</h4>
        <p class="size">玉碗盛来琥珀光</p>
        <p class="bold">但使主人能醉客</p>
        <p>不知何处是他乡</p>
        <p class="xieti">上课时候的你</p>
        <em>下课时候的你</em>
    </body>
    </html>

    开发者工具(chrome)

    此工具是我们的必备工具,以后代码出了问题,我们首先第一反应就是:

    “按F12”或者是 “shift+ctrl+i” 打开 开发者工具。

    菜单: 右击网页空白出---查看

    小技巧:

    1. ctrl+滚轮 可以 放大开发者工具代码大小。

    2. 左边是HTML元素结构 右边是CSS样式。

    3. 右边CSS样式可以改动数值和颜色查看更改后效果。

     

  • 相关阅读:
    BF算法和KMP算法
    Python课程笔记 (五)
    0268. Missing Number (E)
    0009. Palindrome Number (E)
    0008. String to Integer (atoi) (M)
    0213. House Robber II (M)
    0198. House Robber (E)
    0187. Repeated DNA Sequences (M)
    0007. Reverse Integer (E)
    0006. ZigZag Conversion (M)
  • 原文地址:https://www.cnblogs.com/llanq123/p/13808286.html
Copyright © 2011-2022 走看看