HTML菜鸟入门6

最新推荐文章于 2022-09-29 19:25:32 发布

小笨要阳光

最新推荐文章于 2022-09-29 19:25:32 发布

阅读量283

点赞数

分类专栏： html 文章标签： html 默认标签重置 css-reset 修改标签样式默认标签

本文链接：https://blog.csdn.net/xiaobenyaoyangguang/article/details/77511667

版权

html 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

去除body样式默认边框

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>无标题文档</title>
<style>
body{margin:0;}//去除body样式中默认的8px外边框
body{border:1px solid red;}
</style>
</head>
<body>
<a href="#">a标签（链接，下载，锚点）</a>
<img src="1.png" alt="猫咪"/>
<a href="#"><img src="1.png" alt="猫咪"/></a>
<span>区分样式</span>
<strong>强调(粗体)</strong>
<em>强调(斜体)</em>
<p>段落</p>
<div>块</div>
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表2</li>
</ol>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表2</li>
</ul>
<dl>
<dt>
定义列表标题
</dt>
<dd>定义列表项1</dd>
<dd>定义列表项2</dd>
<dd>定义列表项3</dd>
</dl>
</body>
</html>

默认的body样式（注意外边框）：
这里写图片描述
去除外边框的body样式：

通过群组样式将边框去除

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>无标题文档</title>
<style>
body,p,h1,h2{margin:0;}//通过群组样式将标签默认边框去除
body{border:1px solid red;}
</style>
</head>
<body>
<a href="#">a标签（链接，下载，锚点）</a>
<img src="1.png" alt="猫咪"/>
<a href="#"><img src="1.png" alt="猫咪"/></a>
<span>区分样式</span>
<strong>强调(粗体)</strong>
<em>强调(斜体)</em>
<p>段落</p>
<div>块</div>
<h1>标题1</h1>
<h2>标题2</h2>
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表2</li>
</ol>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表2</li>
</ul>
<dl>
<dt>
定义列表标题
</dt>
<dd>定义列表项1</dd>
<dd>定义列表项2</dd>
<dd>定义列表项3</dd>
</dl>
</body>
</html>

清除ol、ul的默认样式

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>无标题文档</title>
<style>
body,p,h1,h2{margin:0;}
body{border:1px solid red;}
ol,ul{list-style:none;}//清除列表项
</style>
</head>
<body>
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表2</li>
</ol>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表2</li>
</ul>
<a href="#">a标签（链接，下载，锚点）</a>
<img src="1.png" alt="猫咪"/>
<a href="#"><img src="1.png" alt="猫咪"/></a>
<span>区分样式</span>
<strong>强调(粗体)</strong>
<em>强调(斜体)</em>
<p>段落</p>
<div>块</div>
<h1>标题1</h1>
<h2>标题2</h2>
<dl>
<dt>
定义列表标题
</dt>
<dd>定义列表项1</dd>
<dd>定义列表项2</dd>
<dd>定义列表项3</dd>
</dl>
</body>
</html>

清除样式后：
这里写图片描述

去除a标签默认的文本修饰

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>无标题文档</title>
<style>
body,p,h1,h2{margin:0;}
body{border:1px solid red;}
ol,ul{list-style:none;}//清除列表项
a{text-decoration:none;}//清除a标签默认的文本修饰
</style>
</head>
<body>
<a href="#">a标签（链接，下载，锚点）</a>
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表2</li>
</ol>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表2</li>
</ul>
<img src="1.png" alt="猫咪"/>
<a href="#"><img src="1.png" alt="猫咪"/></a>
<span>区分样式</span>
<strong>强调(粗体)</strong>
<em>强调(斜体)</em>
<p>段落</p>
<div>块</div>
<h1>标题1</h1>
<h2>标题2</h2>
<dl>
<dt>
定义列表标题
</dt>
<dd>定义列表项1</dd>
<dd>定义列表项2</dd>
<dd>定义列表项3</dd>
</dl>
</body>
</html>

效果：这里写图片描述

小笨要阳光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML菜鸟入门6

去除body样式默认边框<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><title>无标题文档</title><style>body{margin:0;}//去除body样式中默认的8px外边框body{border:1px solid red;}
复制链接

扫一扫

专栏目录