~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
注意看红色开发工具与关键技术: 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.开发人员样式