一、CSS解释：层叠样式表 （Cascading Style Sheets）

优点：

• 使HTML专注于网页的内容，CSS专注于网页的表现
• 提供了丰富的格式化功能
• 可以针对各种可视化浏览器（主要有显示器、打印机、PDA等）来设置不同的样式

注意：

（1）CSS与浏览器 并不是所有的CSS的样式都被浏览器支持

（2）不同的浏览器对CSS的实现有细微的不同，需要特别注意

注释方式

html：使用 <!-- 注释内容--> 表示（快捷键为crtl+？）

<!-- 这是一条注释 -->

css：使用/*注释内容*/表示

/* 这是一条注释 */

二、引入CSS样式

行内样式	<div style="color:red">内容</div>
内嵌样式	<style> div{        color:red; } </style> 注意：<style>标记要指定type属性为text/css
链接样式(外链式)	例：<link type="text/css" rel="stylesheet" href=“sy.css" />
使用导入样式	@import url(“sheet1.css”); @import “sheet1.css”;

注意：样式间的大小顺序

多种方式引入CSS时，作用的优先级

基本原则：“最晚，优先级最高”

一般优先顺序是：行内，内嵌，链接

三、CSS选择器

标签选择器	权重（1）	标签名{     样式属性名：属性值 ；  }
类选择器	权重（10）	.类名{     样式属性名：属性值 ；  }
id选择器	权重（100）	#id值{     样式属性名：属性值 ；  }
包含选择器	权重（权重相加）	选择器E  选择器F{     样式属性名：属性值；   }

四、字体相关样式

1、font-size  字体大小

2、font-family 字体系列多个字体间用逗号隔开，英文字体名称中间有空格，用引号引起来

3、font-style 字体风格

normal	正常
italic	斜体
oblique	倾斜

4、font-weight 字体粗细

normal	正常
bold	粗体
bolder	加粗
lighter	细体

注意：字体粗细分为：100-900  9个层次

5、line-height 行高：单位px  若无单位，表示倍数

6、颜色表达

（1）直接表示

直接使用颜色的英文单词，如red  tips：很多浏览器不支持颜色的单词表示

（2）三色值表示

• 使用三色的数值，如rgb(120,222,100)

          tips：数值在0~255之间

• 使用三色的百分比，如rgb(10%,20%,100%)

• 使用三色数值的十六进制，如#0000ff

         tips：推荐使用这种方式，十六进制值前加#

五、简答题

1、link和@import导入外部样式的区别

（1）link属于XHTML标签，link标签除了可以加载css外，还可以定义RSS、定义rel连接属性等； @import完全是CSS提供的一种方式；

（2）输入方式不同；

（3）加载顺序不同；link优先加载CSS文件到页面，@import先加载HTML结构，再加载CSS文件；

2、href和src的区别

• href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。

例如：<link href="reset.css" rel=”stylesheet“/>

• 浏览器会识别该文档为css文档，并行下载该文档，并且不会停止对当前文档的处理。这也是建议使用link，而不采用@import加载css的原因。

•  src是source的缩写，src的内容是页面必不可少的一部分，是引入。src指向的内容会嵌入到文档中当前标签所在的位置。常用的有：img、script、iframe。

例如<script src="script.js"></script>

• 当浏览器解析到该元素时，会暂停浏览器的渲染，知道该资源加载完毕。这也是将js脚本放在底部而不是头部得原因。 

简而言之，src用于替换当前元素；href用于在当前文档和引用资源之间建立联系。
简而言之：href(hypertext, 超文本引用),建立元素和外部文档的链接。
src(source 资源引入), 是页面内容的一部分

标签：浏览器,第一,样式,基础,文档,css,选择器,CSS
来源： https://blog.csdn.net/Fiki515/article/details/123239937