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

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不会显示,运行如下;

相关推荐
夕水18 分钟前
ew-vue-component:Vue 3 动态组件渲染解决方案的使用介绍
前端·vue.js
我麻烦大了21 分钟前
实现一个简单的Vue响应式
前端·vue.js
独立开阀者_FwtCoder28 分钟前
你用 Cursor 写公司的代码安全吗?
前端·javascript·github
Cacciatore->39 分钟前
React 基本介绍与项目创建
前端·react.js·arcgis
摸鱼仙人~40 分钟前
React Ref 指南:原理、实现与实践
前端·javascript·react.js
teeeeeeemo42 分钟前
回调函数 vs Promise vs async/await区别
开发语言·前端·javascript·笔记
贵沫末1 小时前
React——基础
前端·react.js·前端框架
aklry1 小时前
uniapp三步完成一维码的生成
前端·vue.js
Rubin931 小时前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子1 小时前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js