HTML和CSS的基础知识点一

CSS

CSS引用

1、使用外部样式表

css代码在一个独立的文件中，HTML通过Link元素引入页面

Link是head的子元素，也是一个空元素

特点：

• 实现了内容结构和表现形式代码分离，方便复用和维护

• 使HTML代码更加纯净，有利于程序员和搜索引擎阅读

• 是开发页面的常见做法

2、使用内部样式表

CSS代码写到HTML文档的style元素内容中，style是head的子元素

特点：

• 没有样式表文件，在某些时候可以提升效率

• 多个页面难以共享样式，不利于代码复用

• HTML和CSS代码混杂，不利于程序员和搜索引擎阅读

• 在某些对效率要求苛刻或测试的场景下使用

3、使用行内样式表

• CSS代码写在某个元素开始标记的Style属性中，行内样式不写选择器

特点：

• 没有了样式表文件，在某些时候可以提升效率
• 多个元素难以共享样式，不利于代码复用
• HTNL和CSS代码混杂，不利于程序员和搜索引擎阅读
• JavaScript操作是行内样式
• 在测试的场景下使用

CSS术语

CSS注释

• 书写格式：/注释内容/
• CSS注释主要用于描述代码功能
• 浏览器解析CSS代码时会忽略注释内容

CSS规则

CSS代码由一个一个的规则组成

每个规则指定了：对那些元素应用什么样式

h1{color:red;text-align:center;}

CSS选择器：决定了样式规则适用于哪些元素

1、元素选择器

书写格式：标记名{声明块}

所有与该标记名匹配的元素都将应用声明块中规则

2、类选择器（解决相同的标签应用不同的样式）

书写格式：.类名{声明块}

所有class属性为指定类名的元素，都将应用声明块中的规则

3、ID选择器

书写格式：#id值{声明块}

属性id为指定值的元素将应用声明块中的规则

在同一个HTML文档中元素的id值必须唯一

ID 选择器只会选中一个元素 （给JS用的 权重最高）

div元素

在HTML5出现之前，一直使用div来划分页面区域

但div无法明确表示该区域的内容的含义

HTML5中新增了一系列带有语义的结构元素

他们和div没有本质的区别，只不过他们有语义

< header>用于表示页面或某个区域的头部

< nav >用于表示导航栏

< aside>用于表示跟周围主题相关的附加信息

< section>用于表示一个整体的一部分主题

< main>主要，只能有一个（在一个页面）

< footer>页脚