la police CSS contrôle plusieurs transformations de polices-tutoriel CSS-php.cn

la police CSS contrôle plusieurs transformations de polices

青灯夜游

Libérer： 2021-01-02 09:31:00

avant

2056 Les gens l'ont consulté

la police CSS contrôle plusieurs transformations de polices

Recommandation du didacticiel : tutoriel vidéo CSS

Les propriétés de police CSS définissent la famille de polices, la taille, le gras, le style (comme l'italique) et la déformation (telles que les petites majuscules) font-family contrôle les polices Étant donné que les polices installées dans chaque système informatique sont différentes, il existe essentiellement trois polices : Heilongti, Songti et Microsoft Yahei.

font-sizeContrôlez la taille de la police. Lorsque nous définissons la taille de la police, nous définissons sa largeur et sa hauteur. Généralement, la taille de police par défaut du système informatique est de 16 pixels, la taille de la police ne doit donc pas être inférieure à. 16px, 1em=16px;

font-weight: bold;/*Le poids de la police de contrôle est généralement de 100 à 900. Couramment utilisé, plus léger (corps fin) normal (normal) gras*/

Quant à cela. font-style, la valeur par défaut est normale, c'est également normal. Si vous définissez font-style: italic; italic, l'effet est presque le même que celui de ; l'espacement entre le texte est égal à la hauteur, il est centré verticalement.

Généralement, l'abréviation de font font : font:styleweight size/line-heigt font-family /*Les deux exigences qui doivent apparaître sont la taille et la font-family*/

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css常用样式font字体的多种变换</title>
    <style>
        div{
            font-family: &#39;Microsoft YaHei&#39;;/*微软雅黑*/
            /* font-family: &#39;Lucida Sans&#39;,&#39;Lucida Sans Regular&#39;, 
            &#39;Lucida Grande&#39;, &#39;Lucida Sans Unicode&#39;, Geneva,
             Verdana, sans-serif; */
            /*字体加上双引号或者单引号，当有多个字体的时候，中间逗号分开*/
            color:#f90;
            font-size: 24px;/*控制字体大小*/
            font-weight: bold;
            /*控制字重 常用lighter(细体) normal（正常）bold加粗 */
            font-style: italic;/*等同于em*/
            line-height: 30px;
        }
        /*font字体的简写:font:style weight size/line-heigt font-family*/
        /*要求必须出现的2个是 size font-family*/
        p{  
            font: 24px/1.5em &#39;Lucida Sans&#39;,&#39;Lucida Sans Regular&#39;,
             &#39;Lucida Grande&#39;, &#39;Lucida Sans Unicode&#39;, 
             Geneva, Verdana, sans-serif;
            letter-spacing: 1px;/*英文字母间距*/
            word-spacing: 10px;/*英文单词间距*/
        }
        P::first-letter{
            text-transform: capitalize;
        }/*第一个字母::first-letter*/
        p::first-line{
            color:red;
        }/*第一行::first-line*/
    </style>
</head>
<body>
    <div>技术为王世界,欲问青天山顶景色是否独好技术为王世界,
    欲问青天山顶景色是否独好技术为王世界,欲问青天山顶景色是否独好技术为王世界,
    欲问青天山顶景色是否独好技术为王世界,欲问青天山顶景色是否独好技术为王世界,
    欲问青天山顶景色是否独好技术为王世界,
        欲问青天山顶景色是否独好技术为王世界,欲问青天山顶景色是否独好 </div>
    <p>Technology is king world, I want to ask if the scenery on 
    the top of Qingtian Mountain is the king of technology, 
        I want to ask whether the scenery of Qingtian Peak is 
        the king of technology. If the technology is the king of the world, 
        I would like to ask whether the scenery on the top of 
        Qingtian Mountain is the king of the world. Is the scenery good?</p>
</body>
</html>

Copier après la connexion

À propos du style Question d'héritage/*Les styles liés au texte seront hérités*/Le code est affiché ci-dessous :

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        p{
            font-size: 20px;
            font-family: 微软雅黑;    
            color:#f00;
            font-weight:bold;
            font-style:italic;
            word-spacing:15px;
        }

    </style>
</head>
<body>
    <div>
        <p><span>linux php linux</span></p>
        <p><span>linux linux php linux</span></p>
        <p><span>linux linux php linux</span></p>
        <p><span>linux linux php linux</span></p>
    </div>    
</body>
</html>

Copier après la connexion

Pour plus de connaissances liées à la programmation, veuillez visiter : Tutoriel de programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!