【CSS 基础教程】

最新推荐文章于 2021-08-04 05:28:33 发布
最新推荐文章于 2021-08-04 05:28:33 发布
阅读量462 收藏 4
点赞数 1
分类专栏： 【CSS】 文章标签： CSS CSS基础知识 css入门知识 css工作原理 css介绍
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/VickyTsai/article/details/102902988
版权

CSS 基础教程

1.CSS 简介

1.1 CSS 概述

  • CSS
    • 层叠样式表
    • (Cascading Style Sheets)
    • 样式表 语言: 和 HTML 类似，CSS 也不是真正的 编程语言，甚至不是 标记语言。它是一门 样式表语言，这也就是说, 人们可以用它来 选择性地为 HTML 元素添加样式.
  • 样式的 作用:
    • 定义 如何显示 HTML 元素,html 是一栋房子的话, css 就是对房子的装修.
    • ① 文档的呈现: 层叠样式表 (缩写为 CSS），是一种 样式表 语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。
    • ② 如何 被渲染: CSS 描述了 在屏幕、纸质、音频等 其它媒体上的元素 应该如何被渲染的问题。
    • ③ 添加样式: 层叠样式表(CSS)是一种 向 Web 文档 添加样式 (例如 字体、颜色、间距)的简单机制。
  • 样式的 存储位置
    • 样式表中,即 一般在 .css文件中
    • 也有在.html 页面内部写 样式信息的,不过比较少.
  • 内容和表现的 分离: 把样式添加到 HTML 4.0 中，是为了
    • 解决 内容与表现 分离的问题
  • 外部样式表的 好处
    • 可以极大 提高工作效率
    • 外部样式表 通常存储在 后缀名为.css的 css 文件 中.
  • 可层叠: 多个样式定义,可以 层叠为一个.

1.2 CSS 产生的背景

  • html的 作用:

    • 定义 文档内容: HTML 标签 原本被设计为, 用于 定义文档内容。
    • 表达 内容含义:
      • 通过使用 <h1>、<p>、<table>这样的标签, 表达“这是标题”、“这是段落”、“这是表格”之类的信息。(而不是 用于设计内容的样式,着重点 是 内容.)

  • 内容和表现 分离的问题:

    • 问题的产生: 由于两种主要的浏览器（Netscape 和 IE）, 添加了新的 标签和属性
    • 造成的问题：内容和表现无法分离
      • Netscape 和 IE 不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中
        • 创建 文档内容 ,清晰地独立于 文档表现层 的站点,就变得越来越困难。
    • 问题的解决:
      • 万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命
        • 并在 HTML 4.0 之外创造出样式 CSS。

  • css 的浏览器支持:

    • 所有的主流浏览器 均支持层叠样式表。

1.3 CSS 样式 存在的意义 和 基本介绍

  • 样式表的好处
    • ① 提高了 工作效率
    • ② 一个文件 控制多个页面: 改变一个 css 文件, 能够 同时 控制多个页面的 样式和布局(只要把这个 css 文件,链接 引用到 各个页面即可)
  • 样式的存放位置
    • ① 内联 样式: 单个的 元素中 (用标签的 style 属性)
    • ② 内部 样式: 页面的头元素中 (<head>的 <style>标签中)
    • ③ 外部 样式: 外部的 CSS 文件 ( 用 <link>标签 引入.css文件)
      • 多个: 在同一个页面内部, 引用多个 外部样式表
  • 样式 层叠: 多重样式 将层叠为一个.
  • 层叠次序
    • 当同一个 元素，被多种样式 定义时，样式的选择
      • 一般而言，所有的样式，会根据下面的规则 层叠于一个新的虚拟样式表中
    • 内联样式 最优先: 内联样式拥有 最高的优先权。
      • ① 浏览器 缺省设置
      • ② 外部样式表
      • ③ 内部样式表（位于 <style>标签内部）
      • ④ 内联样式（在 HTML 元素内部）
  • 样式 优先级
    • 内联 >内部 >外部 >浏览器

1.4 CSS 规范

  • 规范: 所有的 标准 Web技术(HTML, CSS, JavaScript等) 都被定义在一个 巨大的文档中，称作 规 范 specifications (或者简称为 “specs”)
  • 规范化 组织: 它是由 (像是 W3C, WHATWG, ECMA 或 Khronos) 这些 规范化组织 所发布的，其中还定义了 各种技术是如何工作的。
  • css 规范:
    • CSS 也不例外 — 它是由 W3C(万维网联盟)中的一个名叫 CSS Working Group 团体 发展起来的。
    • 这个团体是由 浏览器厂商和其他公司中 对 CSS 感兴趣的人 作为代表组成的。
      • 也有其他的人员，比如 受邀专家(invited experts)，他们作为不从属于任何组织的独立声音 加入团体。

2. CSS 基础语法

⑴ CSS 规则构成

  • CSS规则: 选择器 { 属性名:属性值; }
    • 选择器
      • 最常见是 需要改变样式的 元素名。
    • 声明: 属性名：属性值;
      • 数量: 一条 或 多条.
      • 包围声明: 使用 花括号 .
        在这里插入图片描述
selector {
	declaration1; 
	declaration2; 
	... 
	declarationN 
}
  • 属性和属性值: 冒号 分隔
selector {property: value}
  • 示例1: 将 h1 元素内的文字颜色 定义为红色
    • 同时，将字体大小设置为 14 像素。
    • 选择器: h1
    • 属性名: color 和 font-size
    • 属性值: red 和 14px
  • css
		h1{
			/*文字颜色 color*/
			color: red;

			/*文字大小 font-size*/
			font-size: 14px;
		}
  • html
<h1>花儿为什么那样红?</h1>

在这里插入图片描述

  • 语法总结
    • 每个规则（除了选择器的部分）都应该包含在 成对的 大括号里（{}）。
    • 在每个声明里 要用冒号（:）将 属性 与 属性值 分隔开。
    • 在每个规则里 要用分号（;）将 各个 声明 分隔 开。

⑵ 值的 不同写法 和 单位

  • Ⅰ. 颜色值的分类
    • ① 颜色名称
    • ② 十六进制 颜色值
    • ③ rgb 颜色值
  • 示例1: 十六进制 颜色值, 除了英文单词 red，还可以使用 十六进制的颜色值 #ff0000：
p { color: #ff0000; }
  • 示例2: 十六进制的 缩写法,使用 CSS 的缩写形式,可以 节约字节 ：
  • 缩写法: #ff0000 = #f00
p { color: #f00; }
  • 示例3: 使用 RGB 值
    • 两种方法: 数字 和 百分比
p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }
  • 百分比 不可省略: 当使用 RGB 百分比时，即使当值为 0 时
    • 也要写 百分比符号。
  • 0 像素,单位可以省略: 比如说，当尺寸为 0 像素时，0 之后 不需要使用 px 单位
    • 因为 0 就是 0，无论单位是什么。
  • Ⅱ. 加引号的 属性值
    • 属性值中 有空格: 值为几个单词, 单词之间 还有空格,则要给值加引号
p {font-family: "sans serif";}
  • Ⅲ. 多重声明
    • 定义多个声明，则需要
      • 用 分号 将每个声明 分开。
    • 属性值后面 都加上分号;:
      • 原则上, 最后一条规则 是不需要加分号的
        • 因为分号在英语中是一个 分隔符号，不是结束符号。
      • 但是, 最好在每条声明的末尾 都加上分号，这么做的好处是
        • 当你 增减声明时，会尽可能地 减少出错的可能性。
p {
	text-align:center; 
	color:red;
}
  • 一行 一个属性:
    • 提升 可读性: 应该在每行 只描述一个属性，这样可以 提升样式代码的 可读性.
  • 示例4: 一个宽度300px的 居中段落。
		p{
			width: 300px;
			
			/*文字水平对齐 text-align*/
			text-align: center;
		}
  • html
	<p>《花儿为什么这样红》是电影《冰山上的来客》中的一首著名插曲，是塔吉克民歌改编而来。影片从真假古兰丹姆 与战士阿米尔的爱情悬念出发，讲述了边疆战士和杨排长 一起与特务假古兰丹姆斗智斗勇，最终胜利的阿米尔和真古兰丹姆 也得以重逢的故事。该片描绘了 边疆地区军民惊险的反特斗争生活。</p>

在这里插入图片描述

  • Ⅳ. 空格 和 大小写
    • ① css 空格 不影响:
      • 空格 一般 不会影响 CSS 在浏览器的工作效果
      • 不能 用空格的 位置
        • 在 属性值 与 单位 之间不要 留有空格.margin: 15px;
        • 这会让一些 浏览器 造成识别问题.
    • ② css 大小写 不敏感:
      • 与 XHTML 不同，CSS 对大小写不敏感。
      • 两个 大小写敏感的 选择器: class 和 id 名称 对大小写是敏感的,因为这两个是 html 中定义的名称.
body {
  color: #000;
  background: #fff;
  margin: 0;
  padding: 0;
  font-family: Georgia, Palatino, serif;
  }

⑶ CSS 注释

  • css 注释 /*和 */之间的内容 都是 CSS 注释
  • 不解析: 在渲染代码时,它会被 浏览器忽略。
  /* px 表示 “像素（pixels）”: 基础字号为 10 像素 */
  font-size: 10px;

3. CSS 高级语法

  • 主要内容
    • 选择器的分组
    • 继承及其问题
    • 解决 Netscape 4 继承问题
    • 不继承父元素的规则

⑴ 选择器的分组

  • 选择器 分组
    • 有 相同的声明 的 选择器,可以划分为一组。
      • 即，这些元素 有相同的样式,所以可以使用相同的规则.
  • 一组 选择器之间的 分隔符号:
    • 用 逗号 分隔
  • 示例1: 标题 划分成一组
    • 所有的标题元素 都是绿色的。
h1,h2,h3,h4,h5,h6 {
  color: green;
  }

⑵ 继承 及其 相关问题

  • 父业子乘:
    • 根据 CSS，子元素 有时候,可以 从父元素 继承属性。
  • 示例1: 站点的 body 元素将使用 Verdana 字体
    • （假如访问者的系统中 存在该字体的话）。
body {
     font-family: Verdana, sans-serif;
     }
  • 继承属性:
    • 子元素 诸如 p, td, ul, ol, ul, li, dl, dt,和 dd等 ,将继承最高级元素 — 本例中是 body元素 所拥有的属性.
  • 继承 body 元素的字体
    • 所有 body 的子元素，子元素的子元素, 都应该显示 Verdana 字体
    • 在大部分的现代浏览器中，都是这样。
  • 不继承的 解决办法
    • 使用组选择器，重新写一遍样式
      • 书写多余的代码, 来处理旧式浏览器 (如,Netscape 4) 无法理解继承的问题。
body  {
     font-family: Verdana, sans-serif;
     }

p, td, ul, ol, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }
  • 不继承 父元素的规则
    • 针对 特别元素，重新 写规则
      • 如果不希望 字体被所有的子元素继承
        • 比方说，你希望段落的字体是 Times。没问题。
        • 创建一个针对 p 的特殊规则，这样它就会 摆脱父元素的规则：
body  {
     font-family: Verdana, sans-serif;
     }

td, ul, ol, ul, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }

p  {
     font-family: Times, "Times New Roman", serif;
     }

4. CSS 选择器

4.1 派生选择器

  • 派生 选择器 = 上下文 选择器

    • 根据 元素位置
      • 通过依据 元素 在其位置的 上下文关系,来确定某个标签的样式。
    • 可以使标记 更加简洁。

  • 示例1: 列表中的 strong 元素变为 斜体字，而不是通常的 粗体字，可以这样定义一个派生选择器：

li strong {
    font-style: italic;
    font-weight: normal;
  }
  • html
<p>
   <strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong>
</p>

<ol>
	<li>
	   <strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong>
	</li>
	<li>我是正常的字体。</li>
</ol>
  • 只有 li 元素中的 strong 元素的样式为斜体字
    • 无需为 strong 元素 定义特别的 class 或 id，代码更加简洁。

4.2 CSS id 选择器

  • 主要内容
    • id 选择器
    • id 选择器和派生选择器
    • 兼容老版本浏览器
  • ⑴ id 选择器
  • 根据 标签的 id 指定样式
    • 为标有特定id 的 HTML 元素，指定 特定的样式。
  • id 选择器的 定义
    • 以 “#” 来定义: #id属性值
  • 两个 id 选择器
    • 第一个可以定义 元素的颜色为红色
    • 第二个定义 元素的颜色为绿色：
#red {color:red;}
#green {color:green;}

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

在这里插入图片描述

  • ⑵ 用 id 选择器 建立 派生选择器

  • 在现代布局中，id 选择器 常常用于 建立派生选择器。

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}
  • 样式只会应用于
    • 出现在 id="sidebar" 的元素内的段落。
  • ⑶ 一个选择器，多次使用
    • 即使id="sidebar" 的元素，只能在文档中 出现一次
  • 次数不限:
    • id 选择器 作为 派生选择器也可以 被使用很多次
#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}

#sidebar h2 {
	font-size: 1em;
	font-weight: normal;
	font-style: italic;
	margin: 0;
	line-height: 1.5;
	text-align: right;
	}
  • ⑷ 兼容 老版本浏览器
  • id 选择器 即使不被用来 创建派生选择器，它也可以
    • 独立发挥作用：
#sidebar {
	border: 1px dotted #000;
	padding: 10px;
	}

  • 根据这条规则

    • id ="sidebar"的元素将拥有
      • 一个像素宽的黑色点状边框
      • 其周围会有 10 个像素宽的内边距
      • （padding，元素边框和内容 之间的空白）。

  • 兼容 老版本浏览器

    • 指明选择器 所属的元素
    • 老版本的 Windows/IE 浏览器
      • 可能会忽略这条规则, 除非你特别地定义，这个 选择器所属的元素：

  • id ="sidebar"的 div元素

    • 指明所属标签: 标签名#id属性值
div#sidebar {
	border: 1px dotted #000;
	padding: 10px;
	}

4.3 CSS 类选择器

  • ⑴ 类选择器
  • 类选择器的表示
    • 以一个点号显示：.class属性值
  • 示例1: 所有拥有 class="center"的 元素 都居中。
.center {text-align: center}
  • html

    <h1 class="center">
        居中显示的标题
    </h1>

    <p class="center">
        居中对齐的 段落
    </p>

在这里插入图片描述

  • 类名的 第一个字符
    • 不能使用 数字！
    • 因为, 无法在 Mozilla 或 Firefox 中起作用。
  • ⑵ 用 类选择器 创建 派生选择器
    • 空格 分隔
      • 类名为 fancy class="fancy" 的元素 的内部的 表格单元.
        • 都以灰色背景 显示橙色文字。
    .fancy td{
    	color: #f50;
    	background: #666;
    }
  • html
    <table class="fancy">
    	<tr>
    		<td>苹果</td>
    		<td>香蕉</td>
    	</tr>
    	<tr>
    		<td>葡萄</td>
    		<td>青枣</td>
    	</tr>
    </table>

在这里插入图片描述

  • ⑶ 限定 标签和类名
    • 同时限定 标签名 和 类名
      • 限定于指定的标签和类
      • 元素名在前，类在后，中间没间隔
      • 元素名.class属性值
    • 类名为 fancy 的表格单元
      • 将带有灰色背景的橙色。
td.fancy {
	color: #f60;
	background: #666;
	}
  • html
<td class="fancy">

4.4 CSS 属性选择器

  • ⑴ 对 带有 指定属性的元素 设置样式
    • 属性选择器
      • 可以为 带有指定属性的 元素 设置样式
        • 而不仅限于 class 和 id 属性。
    • 属性选择器 表示符号
      • 方括号[]，
      • [属性名]
  • ⑵ IE 对属性选择器的支持
  • IE7 和 IE8: 只有在规定了 文档类型 !DOCTYPE 时
    • IE7 和 IE8 才支持属性选择器。
    • (这个不用担心,文档基本结构,都会指明文档类型的)
  • 在 IE6 及更低的版本中
    • 不支持 属性选择器。
  • ⑶ CSS 属性选择器
  • 元素带有 指定属性
  • 为带有 title 属性的所有元素设置样式：
[title] {
color:red;
}
  • ⑷ 属性 和 值选择器
    • 元素带有 指定属性和属性值
      • [属性名=属性值]
      • 为 title="W3School" 的 所有元素设置样式
[title=W3School]
{
    border:5px solid blue;
}
  • html
    <p><a title="w3school" href="https://www.w3school.com.cn/css/index.asp">W3school css 教程</a></p>

在这里插入图片描述

  • ⑸ 设置 表单的样式
    • 属性选择器 在为不带有 class 或 id的表单 设置样式时 特别有用：
    input[type=text] {
    	width: 150px;
    	background-color: yellow;
    }

    input[type=button] {
    	width: 120px;
    
    }
  • html

    <!-- 属性 选择器 -->
    姓名:
    <input type="text" />
    <br />
    <br />
    提交:
    <input type="button" value="提交信息" />

在这里插入图片描述

5. 创建 CSS

  • 浏览器解析
    • 当读到一个样式表时，浏览器会
      • 根据样式表 来格式化 文档。
  • 插入样式表的 3 种方法
    • ① 外部样式表
    • ② 内部样式表
    • ③ 内联样式
    • 多重 样式: 上面三种 混合使用的.

⑴ 外部样式表 ( link 标签,多个页面)

  • 样式 应用于 很多页面
    • 当样式需要 应用于很多页面时，外部样式表 最好的选择。
  • 改变 整个站点(多个页面)的 外观
    • 在使用外部样式表的情况下，你可以通过改变一个文件 来改变整个站点(多个页面)的外观。
  • 链接到 外部样式表
    • 每个页面使用 <link> 标签 链接到 外部样式表。
  • <link> 标签位置
    • 在（文档的）头部head 标签中：
<head>
   <link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

  • 浏览器 和 样式表

    • 浏览器会从 css 文件 mystyle.css 中 读到样式声明，并根据它来 格式文档。
    • css 主要是 服务于浏览器的,浏览器也能认识 css .

  • 不能含 标签:

    • 样式表文件 不能包含 任何的 html 标签。
    • html 和 css 是两个 不同的语法格式,不要混淆.

  • 样式表的 扩展名

    • 以 .css扩展名进行保存。

  • 一个样式表文件的例子：

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
  • 不能 用空格的 位置
    • 在 属性值 与 单位 之间不要 留有空格.
    • 这会让一些 浏览器 造成识别问题.

⑵ 内部样式表 (style 标签,单个页面/文档)

  • 单个文档 需要特殊的样式
    • 当单个文档 需要特殊的样式时，就应该使用 内部样式表。
  • 定义 内部样式表
    • 你可以使用 <style> 标签在文档头部 定义内部样式表，就像这样:
<head>
	<style type="text/css">
	  hr {color: sienna;}
	  p {margin-left: 20px;}
	  body {background-image: url("images/back40.gif");}
	</style>
</head>

⑶ 内联样式 (style 属性,单个元素)

  • 样式仅需要在 一个元素上 应用一次时
    • 使用 内联样式
    • 由于要将表现和内容混杂在一起，内联样式会损失掉 样式表的许多优势。
  • 使用内联样式
    • 在相关的标签内 使用样式（style）属性。
    • style 属性可以包含
      • 任何 CSS 属性。
  • 示例1: 改变 段落的颜色 和左外边距：
<p style="color: sienna; margin-left: 20px">
 这是一个段落
</p>

在这里插入图片描述

⑷ 多重样式

  • 如果属性 在不同的样式表中，被同样的选择器定义
    • 那么属性值将
      • 从 更具体的 样式表中 被继承过来。
  • 例如，外部样式表 拥有针对 h3 选择器的三个属性：
h3 {
  color: red;
  text-align: left;
  font-size: 8pt;
  }
  • 而内部样式表 拥有针对 h3选择器的两个属性：
h3 {
  text-align: right; 
  font-size: 20pt;
  }
  • 假如这个页面 拥有内部样式表，同时与外部样式表链接，那么 h3 得到的样式是：
color: red; 
text-align: right; 
font-size: 20pt;
  • 样式 覆盖: 内部样式表，覆盖 外部样式表的样式
    • 即颜色属性 继承于 外部样式表
    • 而文字排列（text-alignment）和字体尺寸（font-size）会 被内部样式表中的 规则取代。

6. CSS 工作原理

⑴ 浏览器处理文件的 标准流程

  • 浏览器处理文件的 标准流程
    • 需要知道的是，下面的步骤 是浏览加载网页的简化版本
      • 而且不同的浏览器 在处理文件的时候 会有不同的方式，但是下面的步骤 基本都会出现。
    • ① 下载文档: 浏览器载入HTML文件（比如 从网络上获取）。
    • ② 文档转化成 DOM: 将HTML文件 转化成一个DOM（Document Object Model）
      • DOM: 文件 在计算机内存中 的表现形式
    • ③ 拉取 相关资源( 下载 css):
      • 接下来，浏览器会拉取 该 HTML 相关的大部分资源，比如 嵌入到页面的图片、视频和 CSS样式。
        • JavaScript 则会稍后进行处理，简单起见，同时此节主讲CSS，所以这里对 如何加载JavaScript 不会展开叙述。
    • ④ 解析 css: 浏览器 拉取到 CSS 之后 会进行解析
      • 根据 选择器的不同类型（比如element、class、id等）把他们分到 不同的“桶”中。
      • 给节点 添加样式 (渲染树):浏览器基于 它找到的 不同的选择器，将不同的规则（基于选择器的规则，如元素选择器、类选择器、id选择器等）应用在 对应的 DOM的节点 中， 并添加 节点依赖的样式（这个中间步骤 称为 渲染树）。
    • ⑤ 结构布局: 上述的规则 应用于渲染树之后，渲染树 会依照 应该出现的结构 进行布局。
    • ⑥ 展示(呈现/着色): 网页展示在屏幕上（这一步被称为着色）。
  • 过程图
    • 当浏览器 展示一个文件时，必须兼顾 文件的内容 和 文件的样式信息
    • ① 下载文档 → 解析文档 →创建 DOM树 → 展示给用户
      • ② 解析文档 → 下载 css 文件 → 解析 css → 添加样式 到 DOM 节点 → 展示给用户

在这里插入图片描述

⑵ DOM

  • DOM
    • Document Object Model 的缩写，文档对象 模型
    • ① DOM 是 文件 (在 计算机 内存中的) 表现形式
    • ② CSS 样式 和 文件内容的 结合:
      • 对于DOM的理解 会很大程度上帮助你 设计、调试和维护你的 CSS，因为DOM 是你的CSS 样式和 文件内容的结合。
      • 当你使用浏览器 F12 调试的时, 需要操作 DOM 以查看使用了哪些规则。
  • DOM 的 节点:
    • ① 结构树: 一个DOM 有一个 树形结构，标记语言中的 每一个 元素、属性 以及 每一段 文字 都对应着 结构树中的 一个节点（DOM node ）。
    • ② 节点: 由 节点本身 和 其他 DOM 节点的关系 定义
      • 有些节点 有父节点，有些节点 有兄弟节点（同级节点）。

  • HTML 怎么转化成 DOM

    • 在这个DOM中
    • ① <p>元素 对应了 父节点
      • ② p 的子节点: 是一个 text 节点 和三个对应了<span>元素的 节点
        • ③ span节点的子节点: 他们中的 text节点。
    • 注意: 每个标签中的文本,也是 一个单独的 节点, text节点.

  • DOM 树
    在这里插入图片描述

<p>
  Let's use:
  <span>Cascading</span>
  <span>Style</span>
  <span>Sheets</span>
</p>
  • 添加 css 代码
    • 浏览器会解析HTML, 并创造一个 DOM，然后 解析CSS。
    • 现在 唯一的选择器就是 span 元素选择器，浏览器处理规则 会非常快！
    • 把同样的规则 直接使用在 三个<span>标签上，然后渲染出图像 到屏幕。
span {
  border: 1px solid black;
  background-color: lime;
}

在这里插入图片描述

  • 会被 直接忽略的 css:

    • 无法理解的 属性或者属性值，它会忽略 这些并继续解析 下面的CSS。
    • 书写了错误的 CSS代码（比如 错误拼写）
    • 还没有支持的 CSS代码的时候,
      • 都会 直接忽略。
    • 代表着 使用最新的 CSS优化 的过程中, 浏览器遇到 无法解析的规则 也不会报错。

  • 后面的 覆盖前面的: 位置在后面的 (后设置的) css 优先级 更高.

    • 当你为一个元素 指定多个CSS样式的时候，浏览器会加载 样式表中的 最后的CSS代码 进行渲染.
    • 想使用一个很新的CSS特性但是不是所有浏览器都支持的时候（浏览器兼容）非常有用
  • 示例1: 同时 设置两个宽度 (新属性的 浏览器兼容)
    • 一些老的浏览器不接受 calc()(CSS3 新增属性)作为一个值,则会直接忽略这个声明, 直接识别第一个 作为宽度值.
    • 新式的浏览器, 支持 第二个新属性,则会解析 并覆盖 第一行指定的宽度.
.box {
  width: 500px;
  width: calc(100% - 50px);
}

♣ 结束语 和 友情链接

  • 捐助: 喜欢这篇文章吗? 持续更新中,捐助此文,向团团 表示鼓励和支持吧~❤
    在这里插入图片描述
  • 捐助二维码:
    在这里插入图片描述
  • 感谢：♥♥♥ 如果这篇文章 对您有帮助的话，可以点赞、评论、关注，鼓励下作者哦，感谢阅读 ~
  • 欢迎指正: 如果发现 有需要 更正的细节问题,欢迎指正,谢谢大家 ~╮(￣▽￣)╭
  • 转载 请注明出处 ,Thanks♪(･ω･)ﾉ
    • 作者：Hey_Coder
    • 来源：CSDN
    • 原文：https://blog.csdn.net/VickyTsai/article/details/102902988
    • 版权声明：本文为博主原创文章，转载请附上博文链接！

在这里插入图片描述

Hey_Coder
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 是如何工作的?
liuhao9999的博客
07-04 210
当页面有可用的 CSS 时，无论是内联样式表还是外部样式表，浏览器都会延迟渲染，直到 CSS 被解析。这是因为没有 CSS 的页面通常无法使用。如果浏览器向您显示一个没有 CSS 的杂乱页面，那么片刻之后就会进入一个样式化的页面，不断变化的内容和突然的视觉变化会造成混乱的用户体验。尽管浏览器在解析完 CSS 之前不会显示内容，但它会处理 HTML 的其余部分。但是，脚本会阻塞解析器，除非它们被标记为defer或async。脚本可能会操纵页面和其余代码，因此浏览器必须小心该脚本何时执行。 因为脚本会影响应用到
css如何工作
sanjiaowuhuan的博客
09-04 109
CSS是如何工作的？
weixin_41725862的博客
04-03 190
当浏览器显示文档时，它必须将文档的内容与其样式信息结合。它分两个阶段处理文档： 浏览器将 HTML 和 CSS 转化成 DOM （文档对象模型）。DOM在计算机内存中表示文档。它把文档内容和其样式结合在一起。 浏览器显示 DOM 的内容。 转自：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Introduction_to_CSS/How_C...
CSS 如何工作
小昕成长史
02-07 218
CSS 如何工作
CSS实际上如何工作？
Haiyoung
02-28 423
摘自：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works
css基础教程
06-16
CSS的基础语法包括选择器和声明。选择器指向需要改变样式的HTML元素，而声明则由属性和值组成，例如`selector { property: value; }`。属性定义要设置的样式属性，值则指定了属性的具体状态。例如，`h1 {color: red;...
CSS基础教程
04-27
【CSS基础教程】 CSS，全称为层叠样式表（Cascading Style Sheets），是一种用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。其核心理念是将内容与表现分离，使网页设计更加灵活且易于...
HTML XHTML CSS基础教程(第6版) .zip
05-21
《HTML XHTML CSS基础教程（第6版）》是由著名IT教育家Elizabeth Castro编著的一本经典教程，专门针对初学者设计。这本书详细介绍了网页开发的基础技术，包括HTML、XHTML和CSS，帮助读者掌握构建现代网页的核心技能...
CSS 实际上如何工作？
weixin_34378969的博客
11-11 86
css做什么工作,什么是CSS？它是如何工作的？
weixin_39638801的博客
08-04 442
CSS是网络技术的主要基石之一。在大多数网站中，CSS与HTML和JavaScript一起被用来创建网站和应用程序的用户界面。那么，什么是CSS？它是如何工作的？为什么它很重要？什么是CSS？它是如何工作的？CSS或层叠样式表是一种样式表语言，用于定义HTML文档的视觉外观和格式。CSS决定了视觉结构、布局和美学。HTML使人们可以对网页进行格式化和组织。尽管HTML非常有用，但要建立一个专业的、...
CSS是如何工作的
小婷子的博客
03-02 157
Level1：CSS属性的默认样式—— 给所有 CSS 属性创建默认值 eg:（默认属性） position:static; top:auto; left:auto; right:auto; bottom:auto 可查看CSS属性的初始值：https://developer.mozilla.org/zh-CN/docs/Web/CSS/position#specifications CSS属性的继承行为： 文本类型：font-family、font-size、color、text-align
CSS学习一：CSS如何工作
欲与将军会猎与吴
05-07 475
CSS学习一：CSS如何工作 1.什么是CSS 2. CSS如何影响HTML 一个CSS示例 3. CSS实际上如何工作 DOM DOM的表示 应用CSS到DOM 4.1 外部样式表 4.2 内部样式表 4.3 内联样式 CSS学习一：CSS如何工作 1.什么是CSS CSS是一种用于向用户指定文档如何呈现的语言 — 它们如何被指定样式、布局等。 文档...
day-3 css如何工作？
MsZhang的学习之路
05-31 184
什么是CSS？    css是一种用于向用户指定文档如何呈现的语言CSS 实际上如何工作？    浏览器显示文档是时，他将于文档内容与css样式结合之后展示出来    一共是分为两个步骤的    浏览器将html和css转化成dom（文档对象模型）。dom在计算机内存中表示文档。他把文档内容和css样式结合在一起浏览器显示dom的内容            (html浏览器解析的流程图) ...
CSS的工作过程
weixin_33737134的博客
03-26 150
在平时的工作中，可能都是再用一些框架或者是简单的CSS来修饰我们的HTML页面，那么仔细想想一个资深的前端从业者，是否需要知道他的工作原理和过程呢，技术这种东西，当然是我们了解的越多，才会使用的越得心应手。那么下面，我就为大家来介绍一下CSS的工作过程把。 有个经典的问题：从你输入 URL 到看到页面都发生了什么？这个问题回答可长可短，回答详细了扯上大几千字都不是问题。这里我从接收到 HTML，C...
第二章 CSS工作原理（剖析CSS规则）
Vivianluolita的专栏
06-22 3178
一 简述：CSS样式与HTML的关系   第 1 章我们了解了怎么通过 HTML 来创建文档结构。本章，我们来说一说 CSS 规则怎么为 HTML 添加样式，并解释层叠的工作机制——当元素的同一个样式属性有多 4 种样式值的时候，CSS 就要靠层叠机制来决定最终应用哪种样式。   每个 HTML 元素都有一组样式属性，可以通过 CSS 来设定。这些属性涉及元素在屏幕上显示时的不同方面，比
CSS设计指南---CSS工作原理
weixin_40794404的博客
06-23 784
CSS设计指南---CSS工作原理 教材: CSS设计指南
css分析指什么,深度解析CSS是如何工作的
weixin_42107165的博客
08-04 315
概述副标题(补充)：理解浏览器默认的样式行为在你为网站中的某个 DOM 元素编写 CSS 样式之前，浏览器会给这个 DOM 元素添加一个默认的样式。你有没有想过这些默认样式是由谁来决定的？在这篇文章中，我将教会你：浏览器中不同级别的 CSS每一级 CSS 是如何工作的我们该如何去控制在我刚开始学习 CSS 的时候，我还以为所有的 CSS 默认样式都来自于浏览器自身的 “User-Agent Sty...
浏览器工作原理个人理解 | | CSS 解析过程总结
SKT allsunday的博客
02-09 168
一、浏览器工作原理部分 HTML、CSS、JavaScript解析是三个需要处理的部分，为了加快页面的渲染，浏览器的渲染引擎部分，会有自己的渲染逻辑顺序。目的是为了快速的提升页面渲染速度。 浏览器接收到HTML文件后的动作： 1、HTML解析成DOM树 2、CSS解析成CSSOM树 3、若写了JavaScript代码块，且非async，则中断DOM构建，反过来执行JS，因为JS可能会修改DOM的结构内容 这是网页文件送达后，三个关键资源的首要阶段，也叫关键阶段。 之后的过程，会根据不同浏览器的内核而不同。大
css的工作原理及使用规则
weixin_34117211的博客
04-30 293
1. css定义 层叠样式表（英语：Cascading Style Sheets，简写CSS），又称串样式列表、级联样式表、串接样式表、层叠样式表、阶层式樣式表，一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。目前最新版本是CSS2.1，为W3C的推荐标准。CSS3现在已被大部分现代浏览器支持，而下一版的CSS4仍在开发中。 2. ...
CSS基础教程：从入门到精通
本篇CSS基础教程旨在为初学者提供全面且实用的指导，作者ningzhisheng通过一系列深入浅出的讲解，帮助读者逐步掌握CSS的基础知识和应用技巧。教程共分为17个部分，从最基础的div+CSS页面布局开始，逐步介绍CSS的选择...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值