CSS选择器.文字样式和文本样式_"<strong style=\" } .spread

本文链接：https://blog.csdn.net/weixin_52019215/article/details/114381982
<!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>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <!-- 二进制
    8bit = 1byte(字节)
    1024byte = 1kb(千字节)
    1024kb = 1mb（兆字节）
    1024mb = 1gb(吉字节)
    1024gb = 1tb（特字节）
    1024tb = 1pb    -->


    <!-- 打开电脑计算器快捷键 windows + r 然后输入calc 可以转换2进制与16进制 -->


    <!-- 基础先择期 
              -- 标签选择器
              -- 类选择器
              -- id选择器
              -- 通配符选择器*  -->


    <!-- 如果在 HTML 中给多个元素设置相同的 id 值，id 选择器是可以同时修改这些元素的样式的，但是作为前端工程师，在开发中一定不要这么做！ -->
    <style>
        #demo {
            font-weight: 700;
        }
    </style>
    <!-- 可以同事引用2个id但是不建议这样做 -->
    <p id="demo">see you temorrow</p>
    <p id="demo">see you temorrow</p>





    <!-- 当简写font:16px "宋体";时候   font-style 和font-weight 都是默认normal -->
    <!-- 由于strong标签是加粗,但是样式标签用font简写形式,里面没有提到font-style和font-weight,故字体样式和字体粗细都是normal,故下面字体不加粗 -->
    <strong style="font: 16px 'Microsoft YaHei';">be strong???????????</strong>
    <br>
    <!-- 上面代码的全写 -->
    <strong style="font: normal normal 16px 'Microsoft YaHei','宋体';">be strong???????????</strong>
    <br>
    <strong>be strong???????????</strong>
    <br>


    <!-- 如果在style里面对同一标签设置了css特性,然后在改标签中也设置了相同的行内样式,那么最准解析后者 -->
    <!-- 以下代码经过实测,最终执行颜色是blue ????? -->
    <style>
        .boxText {
            width: 200px;
            height: 200px;
            background-color: red;
            background-color: green;
            background-color: blue;
        }
    </style>
    <div class="boxText"></div>



    <!-- 水平文字居中 text-align="center" -->
    <!-- 块级元素里面的文字与边框有间隔,而且块级宽度不指定的时候,宽度默认是和浏览器一样的,故一般水平文字居中用于块元素 -->
    <div style="text-align: center;">have a good day </div>
    <!-- 行内元素不可以设置text-align="center",因为行内元素的宽度是由其内容撑开的,除非将行内元素转换成块级元素-->
    <span style="text-align: center;">goood vary good</span>



    <!-- text-indent 首行缩进 -->
    <!-- text-indent对行内元素不起作用,对块元素可以 -->
    <div style="text-indent: 2em;">are you kdding me</div>
    <p style="text-indent: 2em;">have a good day</p>
    <!-- text-indent对行内元素不起作用, -->
    <span style="text-indent: 2em;">have a goood day</span>
    <br>
    <a href="javascript:;" class="text-indent">this is a link</a>


    <!-- font-family一般设置给body 一次设置凡是baody里面的文本都可以使用-->
    <!-- windows系统推荐使用font-family="Micorsoft YaHei" -->
    <!-- macOS推荐使用苹方字体 -->
    <!-- 提示:凡是字体名字有中文和空格要加引号 -->


    <!-- 不同浏览器默认的字体不同 其中谷歌浏览器默认字体是16px 如果在设置字体如果恰好也是16px,最好还是专门设置一下字体大小font-size=16px; 避免不同浏览器的默认字体不同,他们都按照一个字体大小显示 -->
    <!-- ：给 body 设置字体大小不会影响标题标签的字体大小，标题标签的字体大小需要单独设置（在调试时,标签h1-h6的大小是相对大小em故永远比正文字体大2em    ）。 -->

    <!-- 字体简写顺序 -->
    <!-- 
        font:italic 700 16px/16px "Microsoft","宋体";
     -->

    <!-- img对齐 -->
    <!-- 可以将img放到p标签中然后对p标签设置text-align="center"即可 -->

    <!-- text-decoration文本修饰
               属性值有三个none(去掉文本修饰线条)     underline(下划线)   line-thrigh(删除线)  overline(上划线) -->

    <!-- 类命名规则 -->
    <!-- 
        header                  
        content
        footer
        nav             导航
        sidebar         侧栏
        column           栏目
        wrapper          页面外围控制整体宽度
        left   
        right
        center
        loginbar          登录条
        logo             
        banner          广告
        main            页面主体
        hot              热点
        news             
        download
        subnav             子导航
        menu             菜单
        submenu           子菜单
        search      
        friendlink        友情链接
        footer            
        copyright         版权
        scroll            滑动
        content          内容
        tab             标签页
        list                文章列表
        msg             提示信息
        tips                  小技巧
        title               文章标题
        joinus           加入
        guild                     指南
        service            服务
        regsiter                    注册
        status                状态
        vote                         投票
        partner                   合作伙伴-->
</body>

</html>