分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

html零基础学习-三种样式表

发布时间:2023-09-06 02:18责任编辑:郭大石关键词:暂无标签

行间样式表:

head中不需要写内容,在body中列出每一个样式,<div style=" "></div>  样式如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<div style="width:100px;height:100px;background-color:red"></div>
<div style="width:100px;height:100px;background-color:red"></div>
<div style="width:100px;height:100px;background-color:red"></div>
<div style="width:100px;height:100px;background-color:red"></div>
<div style="width:100px;height:100px;background-color:red"></div>
<div style="width:100px;height:100px;background-color:red"></div>
</body> ?
</html>

内部样式表:

只针对当前html文件有效  head中需要写样式,div{     } 在body中写<div></div> 样式如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div{
width:100px;
height:100px;
background-color:aqua
}
</style>
</head>

<body>
<div></div>
<div></div>
<div></div>
</body>
</html>

外部样式表:

<link rel ="stylesheet" href="4.css"/> head中写连接,body中写<div>样式如下:

1.先新建css写好样式

@charset "utf-8";
/* CSS Document */

div{
width:100px;height:100px;background-color:aqua
}

2.再写html,连接css

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" href="4.css"/>
</head>

<body>
<div></div>
<div></div>
<div></div>
</body>
</html>


html零基础学习-三种样式表

原文地址:https://www.cnblogs.com/yyyangel/p/9797053.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved