html 容器以及 CSS 概述

关注

发布于: 2021 年 01 月 23 日

1.DIV

HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。

DIV 当做容器使用，本身没有实际效果，可以独占一行；

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body>	<div>举个例子</div>	<div>举个例子</div>	<div>举个例子</div></body></html>

复制代码

运行效果：

但是可以当做容器对里面的元素进行统一封装修饰功能；

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body>	<!-- 将容器里面的内容全部设置为红色，就可以用到div -->	<div style="color:#f40">		<strong>举个例子</strong><br/>		<em>举个例子</em><br/>		<del>举个例子</del>	</div>	</body></html>

复制代码

运行效果：

2.SPAN

HTML <span> 元素是内联元素，可用作文本的容器。

span 标签起到也是容器的作用，和 div 一样，本身没有实际效果，不能独占一行；

1.CSS 简介

CSS 是指层叠样式表（Cascading Style Sheets）；

在前面我们讲过 HTML，比方说 html 是骨架的话，那么 css 就是肉体了；

具体介绍请看百度百科；

2.CSS 简单引用

比方说在一个 html 文件中，想要将多个段落的文件统一设置格式，那么就可以在 head 标签中添加相应的 css 样式；

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css">	p{		font-size:20px;		color:yellow;	}</style></head><body>	<p>例子1</p>	<p>例子2</p>	<p>例子3</p>	<p>例子4</p></body></html>

复制代码

运行结果：

我是【程序员的时光】，热爱技术分享，信仰终身学习，爱健身，会点厨艺的热血青年，我们下期再见！

发布于: 2021 年 01 月 23 日阅读数: 15

原文链接:【http://xie.infoq.cn/article/4780df2f1db3c33d35cf4b591】。文章转载请联系作者。

程序员的时光

关注

程序员的路，会越来越精彩！ 2020.04.30 加入

公众号：程序员的时光记录学习编程的一路时光，从小白到现在也能稳操胜券；主要从事Java后台开发，数据结构与算法，设计模式等等；欢迎一起交流，分享经验，学习进步！

发布

暂无评论

创作场景

html 容器以及 CSS 概述

1.DIV

2.SPAN

1.CSS 简介

2.CSS 简单引用

程序员的时光

评论