博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
html零基础学习-三种样式表
阅读量:4551 次
发布时间:2019-06-08

本文共 1261 字,大约阅读时间需要 4 分钟。

行间样式表:

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>

 


 

转载于:https://www.cnblogs.com/yyyangel/p/9797053.html

你可能感兴趣的文章
SSM框架---详细整合教程
查看>>
hdu 1907 尼姆博弈
查看>>
hdu 2177 威佐夫博弈变形
查看>>
面试问题联想
查看>>
IOS数据持久化之归档NSKeyedArchiver
查看>>
你应该首先保护哪些应用程序?这个问题本身问错了!
查看>>
C++之检测文件结尾
查看>>
【Delphi】注册快捷键
查看>>
字符串、文件操作,英文词频统计预处理
查看>>
[TJOI2014]Alice and Bob[拓扑排序+贪心]
查看>>
[SDOI2017]天才黑客[最短路、前缀优化建图]
查看>>
Asp.Net中的三种分页方式
查看>>
在线文件格式转换
查看>>
如何在eclipse中使用XYLayout布局?在此介绍如何把XYLayout导入到eclipse .
查看>>
sql之left join、right join、inner join的区别(转)
查看>>
C#调用ArcGIS REST服务
查看>>
JDBC 使用详解
查看>>
【TensorFlow篇】--DNN初始和应用
查看>>
潇洒鸿图
查看>>
SerializableMaplist传递数据
查看>>