css基础学习之文字属性

最新推荐文章于 2017-03-13 12:04:21 发布

小鱼的池塘

最新推荐文章于 2017-03-13 12:04:21 发布

阅读量295

点赞数

分类专栏：前端基础语言从学习文章标签： css

本文链接：https://blog.csdn.net/haha_hello/article/details/54949626

版权

前端基础语言从学习专栏收录该内容

27 篇文章 1 订阅

订阅专栏

一，css的固定格式

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02-css的固定格式.html</title>

    <!--
        1,css格式:
        <style type="text/css">
            标签名称{
                属性名称:属性对应的值;
                ...
            }
        </style>
        2,注意点:
        (1),style标签必须写在<head></head>标签之间,和title标签是同级关系
        (2),style标签中的type属性可以不用写,默认就是 type="text/css"
        (3),设置样式时必须按照固定样式来书写,key:value;
    -->
    <style type="text/css">
        h1{
            text-align: center;
        }
        p{
            text-align: center;
            color: red;
            font-size: 25px;
        }
    </style>

</head>
<body>

<h1>成功法则</h1>
<p>迟到毁一生</p>
<p>早退穷三代</p>
<p>按时上下班</p>

</body>
</html>

二，css文字属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-css文字属性.html</title>

    <!--
    1,规定文字样式的属性
    格式:font-style: italic;
    取值:
    italic:倾斜
    normal:正常
    快捷键:
    fs 按下tab就会补齐,font-style:;
    fsi 按下tab就会补齐,font-style: italic;
    fsn 按下tab就会补齐,font-style: normal;

    2,对顶文字粗细的属性
    格式:font-weight: bold;
    取值:
    bold:加粗
    bolder:更粗
    lighter:细线

    3,规定文字大小的属性
    格式:font-size: 50px;
    单位:px(像素 pixel)
    注意点:利用font-size规定的大小必须带单位
    快捷键:fz30 tab  font-size: 30px;

    4,对顶文字字体的属性
    格式:font-family:微软雅黑;
    注意点:
    (1),取值如果是中文,最好用""引上
    (2),设置的字体必须是电脑上安装了字体
-->
    <style>
        p{
            font-style: italic;
            font-weight: lighter;
            font-size: 50px;
            font-family:"微软雅黑";
        }
    </style>

<!--
        字体设置简写格式:
        font:style weight size family;
        注意点:
        (1),在简写格式中style和weight可以省略
        (2),在简写格式中style和weight可以交换
        (3),在简写格式中size和family不可以省略
        (4),size和family是不能交换的,并且size和family必须写在所有属性的后边
    -->
    <style>
        p{
            /*font-style: italic;*/
            /*font-weight: lighter;*/
            /*font-size: 50px;*/
            /*font-family:"微软雅黑";*/

            font: italic lighter 50px "微软雅黑";
        }
    </style>

</head>
<body>
<p>我是文字</p>
</body>
</html>

三，文字字体属性特殊要求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04-css文字字体属性特殊要求.html</title>

    <!--
        1,如果设置的字体不存在,就用默认的字体显示
        2,如果设置的字体不存在,而我们又不想用默认的字体显示
        可以给字体设置备选方案,如下
        font-family:"乱七八糟","微软雅黑";

        3,如果想给中文和英文分别设置字体怎么办
        但凡是中文字体,里面都包含了英文
        但凡是英文字体,里面都没有包含中文
        也就是说中文字体可以处理英文,但是英文字体不能处理中文
        其实也是利用了给字体设置备选方案
        注意点:如果想给界面中的英文单独设置字体,英文字体设置必须写在中文前面

        补充:
        (1),常用字体
        中文:宋体、黑体、微软雅黑
        英文:Times New Roman、Arial
        (2),要知道,不是所有的英文名称都是英文字体,有的中文字体也有自己的英文名称的,所以是不是中文字体就看能不能处理中文
        宋体:SimSun
        黑体:SimHei
        微软雅黑:Microsoft YaHei
    -->
    <style>
        p{
            /*font-family:"乱七八糟","微软雅黑";*/
            /*font-family:"Times New Roman","微软雅黑";*/
            font-family:"Microsoft YaHei";
        }
    </style>
</head>
<body>

<p>abc我是段落</p>
</body>
</html>