web前端培训—css源码笔记（二）【爱创课堂】

复习：

1. css介绍：cascading style sheet 层叠样式表
   引入css目的：

引入css好处：

css组成：选择符 和 声明，声明包括 样式 和样式值

2. css引入方式
   css文件本身不能在浏览器中运行，只能借助html来进行表现。那么，css写入到html中的方式有以下四种：

1.1 行内式：在开始标签内使用style标准属性引入

1.2 内嵌式：在头部使用style标签，直接写入css文本

1.3 链接式：在头部使用link，引入外部独立的css文件（建议使用）

1.4 导入式：在头部style标签内，使用@import url(‘./css/default.css’)导入外部独立的css文件(不建议使用)

面试题：链接式与导入式的区别

css引入方式的优先级：就近原则

3. css选择器
   基本语法结构：

选择器{

样式:样式值;

}

1.5 基本选择器

标签选择器:直接使用标签去匹配对应的元素

标签选择器经常被用来清除一些默认的效果

1.6 类选择器

在标签中使用class属性可以给标签定义类名，定义的类名可以有多个，多个类名之间使用空格隔开

在css中使用时，用 .类名{样式:样式值;}

相对于标签选择器给所有元素添加样式，类选择器可以给指定类名的标签元素添加单独的效果

原子类（公共类）：可以给不同的标签设置相同的类名,类名可以被重复使用

1.7 id选择器

一个标签中只能声明一个唯一的id值:id具有唯一性

在css中使用时，用 #id名{样式:样式值;}

相对于标签选择器给所有元素添加样式，id选择器可以给指定id名的标签元素添加单独的效果

id选择器不可以被重复使用

3.4 全局选择器(通配符)

*{

margin:0;

padding:0;

}

2. 高级选择器

2.1 交集选择器：匹配同时符合所有条件的元素 例如：p.p2 同时符合是p元素，类名又必须是p2

可以对类名连续交集；但是id不行 例如：h3.p2.h3 正确 p#p3正确 p#p3#p2错误

p#p2.p2.ital正确的

2.2 并集选择器：s使用逗号隔开，匹配多个元素

selector1,selector2,…,selectorn｛｝

2.3 后代选择器：具有嵌套关系的标签，才会具有后代一说；后代选择器使用空格隔开

父选择器 后代选择器｛｝

后代选择器建议最多三层

2.4 子代选择器 只能匹配到下一级选择器；子代选择器使用 > 隔开

父选择器>子代选择器｛｝

2.5 动态伪类选择器 顺序 l-v-h-a

:link 初始状态：第一次访问

:visited 访问后状态

:hover 鼠标悬停状态；鼠标滑过状态

:active 激活状态

4. 继承性和层叠性
   4.1 继承性

首先存在嵌套关系

css文本和排版属性可以被继承，如：font-系列 text-系列 line-系列等

盒子属性不能被继承，如：border-系列 background-系列等

4.2 层叠性

体现一:css中有四种引入方式，这四种引入方式当给同一个元素使用同样的选择器设置相同的属性样式时，有一个 就近原则。

体现二:给同一个元素使用不同的选择器设置不同的样式

体现三:给同一个元素是使用不同的选择器设置相同的属性（这个元素被选中）

权值越大，优先级越高。权值如下：

标签选择器 1

类选择器 10

id选择器 100

行内式 1000

!important 无限大

重要性 !important

格式 选择器{样式:样式值!important;}

只要有!important 存在，优先级就是最高的

注：1. 当选中元素时，权值一致，就近原则；否则权值越大优先级越高

2. 当没有选中元素时，看最后一个元素的远近；如果距离一样，再看权值

3. 如果不是同一个元素，那么就考虑就近原则

一、测量工具
1.1ps
工具：

打开标尺：视图/标尺 （ctrl + r）

更改单位与标尺：编辑/首选项

快捷键：

ctrl + c 复制

ctrl + n 新建

ctrl + v 粘贴

m 测量

f8 + (fn) 调出信息面板 尺寸 (像素)

ctrl + r 标尺（视图 –> 标尺）

i 吸管 （前景色背景色查看吸取的颜色）

ctrl + + 放大

ctrl + - 缩小

空格 + 鼠标 拖动图片

c 切片工具 –> 切片工具

保存为web所用图片： 文件 à 存储为web所用格式 à 修改相关信息 à 存储 à 选择存储路径 à选择所有用户切片à完成即可，指定位置会生成一个images包

1.2fw

打开/关闭标尺 ctrl + alt + r

测量：选中指针工具 + shift

二、文字样式
文本样式、排版样式、修饰样式

1 /设置文本字体为楷体、颜色为红色、大小为20个像素/

2 /*font-family: “楷体”;

3 color: red;

4 font-size: 20px;*/

5 color: red;

6

7 /设置文字风格/

8 /font-style: italic;/

9

10 /设置文字粗细 属性值 bold bolder lighter normal 100-900之间的整百数/

11 /font-weight: 900;/

12

13 /设置行高/

14 /line-height: 2;/

15

16 /一个简写的方式/

17 font:italic 900 20px/2 “楷体”;

2.1 文字相关属性

font-family:“arial”,”microsoft yahei”,”楷体” 设置本文的字体

font-size 设置文字字体大小

color 设置字体颜色

2.2 字体风格

font-style:italic(斜体字) || normal(默认)

2.3 字体加粗

font-weight:bold || bolder || normal || lighter || 100-900之间的整百数;

2.4 文本修饰

text-decoration:underline(下划线) || overline(上划线) || line-through(删除线) || none(清除文本修饰)

2.5 排版相关

text-indent 设置首行缩进

text-align 设置文本的水平对齐方式 属性值 left center right justify(分散对齐)

line-height 设置行高

属性值可以是单位 px em ，可以是百分比，也可以是倍数

三、盒子相关属性介绍
盒子模型包括四个部分：

margin外边距 border边框 padding内填充 content内容

不同部分的说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的。

Border(边框) - 围绕在内边距和内容外的边框。

Padding(内边距) - 清除内容周围的区域，内边距是透明的。

Content(内容) - 盒子的内容，显示文本和图像。

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

盒子模型有两种：标准的w3c盒子模型 和 怪异IE盒模型

上面所说的叫做标准的w3c盒子模型，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。

那么在IE5和IE6中会呈现出怪异盒子模型（IE盒子模型），IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。怪异盒模型下元素的总宽高：

总元素的宽度=宽度+左边距+右边距

总元素的高度=高度+上边距+下边距

1 div.box{

2 /设置盒子为怪异盒模型/

3 box-sizing:border-box;

4 /内容的高度/

5 height: 200px;

6 /内容宽度/

7 width: 200px;

8 /设置外边距 外边距透明/

9 margin: 50px;

10 /设置盒子的内填充/

11 padding: 50px;

12 /设置盒子的边框/

13 border:solid 50px red;

14 /设置背景色/

15 background-color: orange;

16 }

四、杂项

4.1 颜色的表示方法

英文单词表示法 如：红色 red 绿色 green 蓝色blue

十六进制表示法：# + 6个十六进制符号组成,每两位代表代表一种颜色

十六进制组成：0，1，2，3…8,9,a,b,c,d,e,f

例如：红色 #ff0000(#f00) 绿色 #00ff00 蓝色#0000ff

rgb表示法：

0-255表示：rgb(250,118,46) 红色rgb(255,0,0) 绿色rgb(0,255,0) 蓝色rgb(0,0, 255)

百分比表示：rgb(100%,50%,10%)

rgba:

r – red

g – green

b – blue

a – alpha(透明度，值0-1之间，从完全透明到完全不透明)

例如：rgba(255,0,0,0.5)