css-html-01-内联样式-内部样式-外部样式

84 阅读 0 评论 56 点赞

我是靠谱客的博主高挑雨，最近开发中收集的这篇文章主要介绍css-html-01-内联样式-内部样式-外部样式，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

内联样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"><!--声明文档格式--><!--head与body 同级，html与body父子关系-->
   
    <title>Document</title>
</head>
<body>
    <!--内联样式或者叫行内样式，把样式直接写到元素的开始标签里，这种写法叫内联样式-->
    <div style="width:100px;height:100px;background:red;"></div>
    <div style="width:500px;height: 500px;background-color: blue;">
        <div style="width: 300px;height:300px;background-color: yellow;"> <!--蓝色是黄色的父级，黄色块在蓝色块的里面-->
        </div>
    
    
    </div><!--这两个div 同级关系-->
</body>
</html>
<!--<>是标签-->
<!--我包着你，我就是你的父级-->
<!--子集与父级之间相差一个tab键，同级之间应对齐-->
<!--style 属性名--,注意， style，charset 是属性， div是标签>
<!--注释可以做标记-->

在这里插入图片描述
内部样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width:200px;height:200px;background-color: red;}
        .blue{width:100px;height:100px;background-color: blue;}
            /*
            内部样式
            class命名规范：不能用中文，不能用特殊符号，(除了下划线和横线)都是特殊符号-_,不要用大写字母
            html 无法区分大写字母与小写字母，不能用纯数字，但是box1可以，不能以数字打头， 如 5box不行，
            要见名知义

        /*在样式中的注释格式
            选择器(物种选择器，人类，你过来)div
            这种叫内部样式，写在顶部head标签里面      
        */
        /*样式中都是并排写的*/
        /*.是class,#是id*/
        #title{width:200px;height:200px;background-color: yellow;}

    </style>
</head>
<body>
    <!---->
    <div class="box">
        <div class="blue"></div>
    </div><!--内联样式-->
    
    <div class="box" id="title"></div>
    <!--class名字可以重复，id名字不能重复，id在js中用的比较多-->
</body>
</html>