使用内部样式和内联样式为div定义样式

bcbobo21cn2023-11-14 12:53

html 复制代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />

    <style>
        #div1 {
            width:750px;
            height:200px;
            background-color:springgreen;
        }

    </style>

</head>
<body>

    <div id="div1"> 
    </div>

    <div id="div2" style="width:200px;height:200px;border:2px solid red;color:#0000FF">
        返回数据
    </div>
</body>
</html>

代码定义了2个div，id分别为div1、div2；

内部样式，就是写在本代码文件<style></style>之间的；#div1 {....} 定义了div1的样式，宽度、高度、背景色；属性名和属性值之间用冒号隔开；

内联样式，就是用 style="..." 写在元素上；div2的样式定义为，

宽度：200像素；

高度：200像素；

边框：2像素宽，实线，边框线颜色为红色；

color是指div内文字颜色，值为0000FF；颜色用RGB表示，前2位对应R、中间2位对应G、后2位对应B; 现在最后2位为FF，就是蓝色，blue；

内联样式，每个属性名:属性值之间用分号隔开；

运行如下；

假设写错了，写成；

<style>

#div11 {

width:750px;

height:200px;

background-color:springgreen;

}

</style>

那么第一个div没有定义任何样式，它里面也没有任何内容；第一个div不会显示，运行如下；