1-css简介

一、css简介

1.css概述

a.css是指层叠样式表（cascading style sheets）

b.样式定义如何显示html元素

c.样式通常存储在样式表中

d.把样式添加到html4.0中，是为了内容与表现分离的问题

e.外部样式表可以极大的提高工作效率

f.外部样式表通常存储在css文件中

g.多个样式定义可层叠为一

 

多重样式将层叠为一个

样式表允许以多种方式规定样式信息。样式可以规定在单个html元素中，在html头元素中，或在一个外部css文件中。甚至可以在同一个html文档内部引用多个外部样式表。

层叠次序

当同一个html元素不止被一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字4拥有最高的优先权。

a.浏览器缺省（默认）设置

b.外部样式表

c.内部样式表

d.内联样式

 

二、css基础语法

1.css语法

selector {
  property1: value1;
  property2: value2;
  ...
}

提示：用花括号来包围声明。

2.值的不同写法和单位。

p {
  color: red;
}

p {
  color: #ffffff;
}

p {
  color: #fff;
}

p {
  color: rgb(255,0,0);
}

p {
  color: rgb(100%,0%,0%);
}

请注意，当使用RGB百分比时，即使值为0也要写百分比符号。当尺寸为0像素时，就不需要px单位。

3.记得写引号

提示：如果值为若干单词，则要给值加引号。

4.多重声明

多个声明要用分号隔开。分号在英语中是一个分隔符，不是结束符。在每一条声明后加一个分号。

5.空格和大小写

是否包含空格不会影响css在浏览器的工作效果。css对大小写不敏感，如果涉及到与html文档一起工作的话，class和id名称对大小写是敏感的。

三、css高级语法

1.选择器分组

你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。

2.继承及其问题

font-family

3.友善地对待Netscape 4

利用选择器分组

四、派生选择器

派生选择器：通过依据元素在其位置的上下文关系来定义样式。

五、id选择器

id选择器：可以为标有特定id的html元素指定特定的样式。id选择器以“#”来定义。

id属性只能在每个html文档中出现一次

不可以在内联元素嵌入块级元素

可被用作派生选择器

六、类选择器

类选择器：以点号显示

类名的第一个字符不能使用数字，它无法再mozilla和firefox起作用。

可被用作派生选择器

七、属性选择器

属性选择器：对带有指定属性的html元素设置样式。

属性选择器

属性和值选择器

属性和值选择器-多个值

[attribute]用于选取带有指定属性的元素

[attribute=value]用于选取带有指定元素和值的元素

[attribute~=value]用于选取属性值中包含指定词汇的元素

[attribute|=value]用于选取带有以指定值开头的属性值的元素，该值必须是整个单词

[attribute^=value]匹配属性值以指定值开头的每个元素

[attributr$=value]匹配属性值以指定值结尾的每个元素

[attribute*=value]匹配属性值中包含指定值的每个元素

八、css创建

1.如何插入样式表：

当读到一个样式表时，浏览器会根据它来格式化html文档。插入样式表的方法有三种：

外部样式表

内部样式表

内联样式表

2.多重样式