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

本文介绍了HTML中的内联样式和内部样式的概念与应用。内联样式是将样式直接写在HTML元素中,而内部样式则是通过在<head>标签内定义<style>来设置CSS类。文章通过示例展示了两种样式的使用,并强调了class命名规范和CSS选择器的重要性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

内联样式

<!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>

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值