css样式表

HTML:内容 ? css:呈现(样式) ? JS:交互 ? 实现:内容与样式与交互的分离

CSS的基本语法

选择器{ ? key:value; ? k:v; ? k:v; } ? 学法:多观察，多做。 ? 必须记住这些样式表的属性和它对应的值

CSS代码能写在3个地方，或者说3种用法

(1)行内样式:坚决杜绝 ? (2) 内联样式:学习阶段使用 ? (3)外链样式:把样式表代码移出到一个单独.css文件中。 内容与呈现的物理分离

选择器

(1)标签名做选择器

只写标签名就行了，不要加"" ? 标签名做选择器会把当前页面上的所有这个类型的标签都选中。

(2)id做选择器

每一个页面标签都可以添加id属性 ? 标签的id值必须遵循以下的规范: 1.只能由字母、下划线、数字组成 ? 2.必须是字母开头 ? 3.不能与标签名同名。 ? 4.尽量使用有意义的单词缩写。比如: nav ? 注意: 1. 任何一个页面上不能出现同名的id。 ? 如果出现同名的id,浏览器会把同名id的元素都使用相同的样式修饰。但是并不代 ? 表你可以这么做。id是表示唯一性的: getElementById() ? 2.页面上任何一个元素，都可以同时被多个选择器同时选中，并且这多个选择器能 同时作用于这个标签。也就是多个选择器选中同一个标签，他们的样式能叠加下来。这是 CSS为啥叫“层叠”的一个原因 ? 3.如果多个选择器选中同一个元素后，他们之间的样式有冲突，那么这时候就存在 一个选择器优先级的问题

(3)类名做选择器

1.用类名做选择器，必须在类名前打. ? 2.所有的标签都可以有class属性

3.class属性的名字与id命名规范一样 ? 4.一个标签的id名和class名甚至可以相同。但是千万不要这么做。 ? 5.不同类型的标签可以从属于同一个class。 ? 6.一个标签可以从属于多个不同的class ? (1)不同的类名之间必须用“空格”隔开class=“yi er san” 三个类名 ? (2)不允许在标签里出现2个class属性。任何1个htm1标签内部都不能出现相同名字的属 性

7.尽量使用原子化的类，少使用大而全的类

8.样式表中倾向使用class，尽量不用id做选择器：class上样式，id上行为

class为样式表准备，id是为JS准备的

class表示同一类元素，但是样式表中即使一类中只有一个标签，也用class，而不用id

(4)后代选择器

注意:后代选择器不是儿子选择器。 ? 后代选择器的意图是:表达出:把在页面上的某一部分(区域)之 内的所有什么什么元素，样式 设置为。

(5)交集选择器

语法:标记名.类名.类名

(6)并集选择器(组选择器)

语法:多个选择器之间用逗号隔开，表示被选中的这些元素，采用相同的样式

(7 )通配符*

*表示选中页面上的所有元素。这么做不好，效率太低。

继承性

(1)只能把自己的样式继承给后代节点，但是不能影响自己的父节点和兄弟节点 ? (2)什么属性能继承下来?修饰文本样式的属性能被继承下来。color、 text-、 font-、 1ine- ? 不是修饰文本的属性不能被后代节点继承下来。比如:有关盒子模型的属性、定位的属性、背 景属性

层叠性

(1)层叠性指的是当css的样式产生冲突时的处理机制。 ? (2)层叠性的优先级:算权重的算法，谁权重大，就听谁的，权重小的就会被覆盖掉。 ? (3)计算权重的描述方式(id的个数，class的个数，标签名的个数) ? (4)id的优先级最高，class的优先级次之，标签名的优先级最低。并且3者之间不存在进位。 ? 实际 上也是存在进位的，255个进一位，所以根本没有意义。 ? (5)如果都选中了同一个元素，并且权重计算都一样，谁写到最后听谁的。 ? (6)如果是继承过来的样式，权重是0 (如果没有直接选中标签,属性权重是0 ? (7)如果大家都没直接选中，权重都是0，这个时候有一个“就近原则叫

判断哪个样式起作用:

(1) 先看有没有直接选中 ? (2)如果选中了，就计算权重 ? (3)如果权重都一样，谁写在最后谁起作用 ? (4)如果都没选中，采用就近原则

注意:内联样式无论权重多大，都干不过行内样式。但是，如果使用行内样式，就违背了 我们内容与呈现与交互相分离的初衷。所以无论如何也不要使用行内样式。

! important属性

! important属性是个修饰符，它的语法是K:V !important; 错误写法: (1)K:V; !important ; (2) . box1 ! important{;} !important属性，只能提升一条语句的优先级，不能提升一个选择器的优先级。 !important把被修饰的语句的优先级提升到无穷大。 如果被层叠的样式都使用!important修饰。那么按照语句所在选择器的权重来起作用。 如果是继承过来的样式，它的权重是0，!important属性无法提升权重为0的样式。|

(1)边框border属性

• border属性是由3个子属性构成，缺一不可。缺少任何一个子属性，都不能正常显示出边框
• border的3个子属性: style、 width、 color 3.各个浏览器，对于border- sty1e的值，渲染出来的样子不是100%相同的。能100%相 同的有: solid, double, dashed 如果说有特殊样式的边框，还要求必须所有的浏览器100%的呈现效果一致，就只能使用图片。 4.在同一个盒子里，后出现的边框样式会覆盖先出现的边框样式。我们往往都先写一个合写的总的样式，然后再单 独写某个方向上的边框样式，来达到某个方向上特殊的边框样式 5.边框的各个子属性可以给1个值，表示4个方向上的样式都一样。 给2个值，分别代表的是(上下、左右) 给3个值，代表的是(上、左右、下) 给4个值，代表的是(上、右、下、左) 简单的说就是从上方向开始，顺时针转。

(2)padding属性

padding也分着上、右、下、左4个方向 ? 如果给盒子添加背景色，这个背景色会作用于整个盒子，包括padding部分和border部分。 ? padding只有width这1个属性，没有style,也没有color

(3)盒子的实际占用空间的大小是由3个属性决定的: border、 padding、 width

盒子的实际大小=borderWidth* 2+padding* 2+width

标准文档流

标准文档流概念:它不是一个东西，也不是一个物件。它其实是浏览器渲染页面的一个规则:所有的页面元素，都要按 照它下htm1文档中出现的先后次序，依次在浏览器中，从左上角开始，从上到下，从左到右的顺序依次显示。

标准文档流的几个性质

(1)空白折叠 (2) 高低不齐，低端对齐 标准文档流把页面上的元素分成了2大类:

(1)块级元素

1.单独的占一行 2.可以设置宽、高 3.如果不设置宽度，那么它将默认的占满父盒子的宽度

(2)行内元素

1.与其他元素自动并排在一行上 ? 2.不能设置它的宽和高。它宽和高就是自己内容的宽和高

(3)哪些是块级元素，哪些是行内元素? p标签

块级元素都是容器级标签，文本级元素都是行内标签。p标签是个特例，它是文本级的标 签，但是它是个块级元素