css文本与字体

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <!-- 字体与文本格式:

      字体大小:

           属性名:font-size

           取值:数字+px

        注:谷歌浏览器默认是16px

      字体粗细:

           属性名:font-weight

           取值:

                  关键字:正常:noraml  加粗:bold

                  纯数字:正常:400  加粗:700

        注:实际开发中,正常,加粗两种取值使用最多。

      字体倾斜:

           属性名:font-style

           取值:  

                  关键字:正常:normal 倾斜:italic

      字体系列:

            属性名:font-family

            常见取值: 黑体, 宋体,楷体

       

        注:windows默认字体微软雅黑

            macOS默认字体苹方

      字体font相关属性连写:如果使用到多个以font开头的属性,可以写为

         取值:font:style weight size family;

         例: font:italic  700 66px  宋体;

    文本缩进:

         属性名:text-indent

         取值:  数字px

              em:一个字的大小的像素。

        p{

            text-indent:50px;

        }

    文本水平对齐方式:

         属性名:text-align(text-align:center 可以让文本,span标签,a标签,img标签,input标签,等水平居中)

           取值:  

                属性值   效果

                left     左对齐

                center   居中对齐

                right    右对齐

    文本修饰:

       属性名:text-decoration

         取值:

            属性值       效果

            underline   下划线(常用)

            line-through 删除线(不常用)

            overline    上划线(几乎不用)

            none        无装饰线(常用)(默认超链接都有下划线,使用text-decoration:none;来消除)

    行高:控制一行的上下行间距

       属性名:line-height

        取值: 数字px;(上间距+文本高度+下间距=行高,不是行与行之间的距离。)

              倍数;(字号像素的倍数)

Chrome调试工具:F12/右键检查

    Elements:元素/标签  打开之后左边的html,右边是css。可以对右边css进行编辑调试,但是刷新之后会恢复初始效果。

   

    标签水平居中:

    margin:0 auto

       可以让div,p,h(大盒子)水平居中

   

    -->

    <style>

        p{

            font-size: 30px;

        }

        h3{

            font-weight: 100;

        }

        #2{

            font-style: italic;

        }

        #1{

            font-family:黑体;

        }

    </style>


 

    <!--


 

       

    -->

</head>

<body>

   <h3>我是h3</h3>

   <p>段落文字</p>

   <div id="2">我是div</div>

   <div>我也是div</div>

   <div id="1">我是黑体字体</div>

</body>

</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值