什么是div
<div></div>是html一个普通标签, 进行区域划分
特点
- 独自占一行
- 独自不能实现复杂效果, 必须结合CSS样式进行渲染
| 行级元素 | 行内元素 |
|---|---|
<div> | <span> |
<!--
div标签: 块标签, 行级元素, 会占html一行
-->
<div> div中的数据 </div> div之外的数据 <br/>
<!--
span标签: 块标签, 行内元素, 不会占一行
-->
<span> span中的数据 </span> span外的数据CSS介绍
CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称.有时我们也会称之为 CSS 样式表或级联样式表。 CSS 是也是一种标记语言CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。 CSS 让我们的网页更加丰富多彩，布局更加灵活自如。
简单理解：
CSS 可以美化 HTML , 让 HTML 更漂亮， 让页面布局更简单。
- 样式: 给HTML标签添加需要显示的效果
- 层叠: 使用不同的添加方式, 给同一个HTML标签添加样式. 最后所有的样式都叠加到一起, 共同作用于该标签
CSS样式规则
- 选择器: 用于指定CSS样式的HTML标签 花括号内是对该对象设轩的具体样式
- 属性: 对指定的对象设置的样式属性. 如字体大小,文本颜色等
- 属性和属性值以"键值对"的形式出现
- 属性和属性值用英文冒号" : "分开
- 多个"键值对"之间用英文分号" ; "进行区分
<style>
h2 {
color: red;
font-size: 100px;
}
</style>注意事项
- CSS样式"选择器"严格区分大小写. 属性和属性值不区分大小写
- 多个属性之间必须用英文状态下的分号隔开,最后一个属性后的分号可以省略.但是,为了便于增加新样式, 最好保留
- 如果属性的值由多个单词组成且中间包含空格,则必须为这个属性值加上英文状态下的引号
p{ font-family:"Times New Roman";} - 在编写CSS代码时,为了提高代码的可读性,通常会加上CSS注释
/* 这是CSS注释文本, 不会显示在浏览器窗口中 */ - 属性的值和单位之间是不允许出现空格的, 否则浏览器解析时会出错.
h1 {font-size:20 px} /* 20和单位px之间有空格 */
引入CSS样式
CSS使用非常灵活. 既可以嵌入在HTML文档中, 也可以是一个单独的文件.
如果是单独的文件, 则必须以.css为扩展名
CSS和HTML的结合有以下3种常用方式
行内样式
行内样式, 是通过标签的style属性来设置元素的样式
<!-- 方式1: 行内样式
color: 表示字体颜色
font-size: 表示字体大小
-->
<h3 style="color:gold;font-size:30px">我是应用行内CSS样式的三级标题</h3>
内部样式
内部样式又称为内嵌式, 是将CSS代码集中写在HTML文档的<head>头部标签体中, 使用<style>标签定义- 给当前html文件中的多个标签设置样式
- 在html的head标签中使用
<style>标签来定义CSS
<style>
h2 {
/* 修饰h2标签 */
width: 400px;
height: 200px;
background-color:bisque;
}
</style>
<body>
<h2>我是二级标题,我要用CSS啦</h2>
</body>
内嵌式CSS样式只对其所在的HTML页面有效, 可以对多处标签统一设置样式.因此, 仅设计一个页面时, 使用内嵌式是个不错的选择.
但如果是一个网站, 不建议使用这种方式, 因为它不能充分发挥CSS代码的重用优势
外部样式
外部样式又称为链入式, 是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中, 通过link标签将样式链接到HTML文档中
<!-- 方式3: 外部样式
rel="stylesheet" 固定值,当前文件和引入文件的关系.rel是relationship的缩写, stylesheet是样式表
type="text/css" 固定值,表示浏览器解析方式
href 表示css文件位置
-->
<link rel="stylesheet" type="text/css" href="css/mycss01.css">链入式最大的好处是,同一个CSS样式表可以被不同的HTML页面链接使用, 同一个HTML页面也可以通过多个<link>标记链接多个CSS样式表
三种方式的优先级
行内样式 > 内部样式|外部样式 (谁写在后面就使用谁, 后面的会覆盖前面的)
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。