html 和div同一等级,HTML基础-div与css概述

什么是div

特点独自占一行

独自不能实现复杂效果, 必须结合CSS样式进行渲染行级元素行内元素

div中的数据

div之外的数据

span中的数据 span外的数据

CSS介绍CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称.有时我们也会称之为 CSS 样式表或级联样式表。 CSS 是也是一种标记语言CSS 主要用于设置 HTML 页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。 CSS 让我们的网页更加丰富多彩，布局更加灵活自如。

简单理解：

CSS 可以美化 HTML , 让 HTML 更漂亮， 让页面布局更简单。样式: 给HTML标签添加需要显示的效果

层叠: 使用不同的添加方式, 给同一个HTML标签添加样式. 最后所有的样式都叠加到一起, 共同作用于该标签

CSS样式规则

选择器: 用于指定CSS样式的HTML标签 花括号内是对该对象设轩的具体样式

属性: 对指定的对象设置的样式属性. 如字体大小,文本颜色等

属性和属性值以"键值对"的形式出现

属性和属性值用英文冒号" : "分开

多个"键值对"之间用英文分号" ; "进行区分

h2 {

color: red;

font-size: 100px;

}

注意事项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属性来设置元素的样式

我是应用行内CSS样式的三级标题

内部样式内部样式又称为内嵌式, 是将CSS代码集中写在HTML文档的

头部标签体中, 使用

我是二级标题,我要用CSS啦

内嵌式CSS样式只对其所在的HTML页面有效, 可以对多处标签统一设置样式.因此, 仅设计一个页面时, 使用内嵌式是个不错的选择.

但如果是一个网站, 不建议使用这种方式, 因为它不能充分发挥CSS代码的重用优势

外部样式外部样式又称为链入式, 是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中, 通过link标签将样式链接到HTML文档中

链入式最大的好处是,同一个CSS样式表可以被不同的HTML页面链接使用, 同一个HTML页面也可以通过多个标记链接多个CSS样式表

三种方式的优先级

行内样式 > 内部样式|外部样式 (谁写在后面就使用谁, 后面的会覆盖前面的)