~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
注意看红色开发工具与关键技术： Dw
作者：陈立彬
撰写时间：2021/9/15
1.为文档添加样式(程序)
在CSS中为文档添加样式的4个方式：
内联样式
内部样式
链接样式|外部样式（link标签引入外部样式）
@import指令导入外部样式文件
2.使用内联样式：直接将样式定义到HTML元素中(写在标签里)。这种作用范围有限，只影响它所在的标签，而且总是覆盖嵌入样式和链接样式。
1.<div style="width:200px;height:200px;"></div>
3. 使用内部样式：写在<style>标签中。作用范围仅限于当前页面，内部样式覆盖链接样式，但也会被内联样式覆盖。
1.<style type="text/css">
2.div{
3. width:200px;/*宽度：200像素*/
4. height:200px;
5.}
6.</style>
4.链接样式：写在单独的CSS样式表中。链接样式的作用范围可以是整个网站。只要使用<link>标签把样式表链接到页面，相应页面就可以使用样式。
1.<link href="链接表地址" rel="stylesheet" type="text/css"/>
5. @import指令导入外部样式文件：和链接样式类似。引用@import指令在某些浏览器(IE)可能会出现“屏闪”。所以我们应该尽量的避免使用@import指令。而是尽量使用链接外部样式表。
1.<style type="text/css">@import url(地址);</style>
2.@import url(.../../地址)
完整的代码结构：
1.<!doctype html>
2.<html>
3.<head>
4.<meta charset="utf-8">
5.<title>CSS样式表的基本使用方法</title>
6.<!--第三种：链接样式导入-->
7.<link href="./css/indexstyle.css" rel="stylesheet" type="text/css"/>
8.<!--rel是relationship的英文缩写
9.stylesheet中style是样式的意思,sheet是表格之意,总起来是样式表的意思rel="stylesheet" 描述了当前页面与href所指定文档的关系.即说明的是,href连接的文档是一个新式表-->
10.<!--第四种：@import 指令导入外部样式-->
11.<style type="text/css">
12. @import url(css/indexstyle.css);
13.</style>
14.<!--第二种：内部样式-->
15.<style type="text/css">
16.h1 {
17. color:red;
18.}
19.</style>
20.</head>
21.<body>
22.<!--第一种：内联样式，写在标签里面-->
23.<h1 style="color:green">this is a head</h1>
24.<h1></h1>
25.</body>
26.</html>
6.用户代理样式表(浏览器)
User agent stylesheet用户代理样式表;浏览器默认的样式表
在写HTML+CSS的页面的CSS样式表时，需要进行标签重置，原因在于浏览器都拥有一套自己的默认CSS样式表，不重置的话，会降低页面浏览器的兼容性，导致页面在不同的浏览器内显示的效果不同。
【问】那浏览器为什么还要存在一套默认的CSS样式表？不存在的话多好，也不用重置，还会增强页面的兼容性，为什么不这么做？
【答】每个浏览器之所以要存在一套自己的默认CSS样式表，目的在于保证没有样式表的页面能够正常显示。浏览器在加载一个页面的时候会判断这个页面是不是存在对应的CSS样式表，如果没有，就加载浏览器默认的CSS样式表，以保证页面信息能够被正常读取。
7.浏览器用户自定义样式(浏览器)
8.用户代理样式（浏览器默认样式）
9.浏览器用户自定义样式
10.开发人员样式
910
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
