前端基础——CSS（一）
CSS
-
css 层叠样式表（cascading style sheets），作用是静态的修饰网页，并且可以配合各种脚本语言动态的对网页各元素进行格式化
-
发展过程
版本： 时间： css1 1995年12月 css2 1997年初 css3 1999年开始制订 -
前端三层技术
- html ----> 结构层 ------- 从语义的角度搭建网页结构
- css ----> 样式层 ------- 从美观的角度描述页面样式
- JavaScript--->行为层 ------- 从交互的角度描述页面行为
- css实现了页面的结构和样式分离，拯救了混乱的HTML
-
css组成
层叠层 样式 (css中贯穿始终的加载特性) (定义如何显示HTML元素) 层叠性 文字文本 继承性 背景 盒模型 浮动 定位 其他
css 书写位置
- 内联式 ： 也称行内式，在HTML标签上的style属性中书写css样式
<div style="width:100px;height:100px;background>
内联式缺点：必须写在标签上，使标签结构繁重，增加代码量- 内嵌式 ：
缺点：结构和样式没有完全分离，代码依旧书写在HTML文件的<style>标签内部；css样式只能给一个HTML文件使用，若css代码太多，会造成头重脚轻。- 外联式 ：在HTML的
<head>标签内部使用<link>标签引入
属性名 属性值 说明
rel "stylesheet" 表示引入的外部文件与html之间的关系
href css 文件路径 超文本引用
type "text/css" 表示加载时代码按照纯文本形式的css代码加载
外联式的优点：1.实现了HTML和css完全分离；2.多个HTML文件可以公用一个css文件，减少代码量，便于提取公共的css；3.实现一个css变化，多个页面同时变化；4.一个HTML文件可以引入多个css文件，可以实现同一个页面中的css代码分层
- 导入式 ：(不建议使用直接在html中使用）
导入样式和链接样式比较相似，采用@import样式导入CSS样式表，在HTML初始化时，会被导入到HTML或者CSS文件中，成为文件的一部分，类似第二种内嵌样式。会在加载html文档后在加载样式所以有时会出现没有样式的情况(很短暂)，然后就有样式了
@import在html中使用，如下：
<style type="text/css">
@import url(style.css);
</style>
CSS规则
css规则由两个主要部分构成：选择器，以及一条或多条声明
多条样式属性
p{ width : 400px; font-size : 14px;}
| | |
选 属 属
择 性 性
器 名 值
样式规则
1.内嵌式中所有代码必须写在<head>标签内的<style>标签内
2.给每个选择器添加的样式属性都必须写在一对大括号{}之内
3每条属性后面的分号必须写，若不写，会导致后面的代码加载错误
4.上传服务器时，常常使用紧凑格式的css样式格式，减少不必要的空白字符，压缩文件大小，便于传输
(有专门的网站可以进行css代码压缩/解压缩格式化)
CSS常用样式
颜色color：给文字设置颜色的
字体font-family：元素内文字的字体，字体属于font综合属性的一个单一属性。属性值可以有多个，值之间用逗号分隔。
浏览器中加载的字体是用户机器中自带的，如果电脑没有设置的字体则加载失败，需要查找下一个，所有往往在最后设置一个所有机器都具备的通用字体作为后路。
盒子模型实体化——三属性
- width、height、background-color
CSS 高级选择器
- 选择器：选择要添加样式的HTML标签的一种方法、模式
- css2.1版本有7中选择器：
基础选择器：标签选择器、id选择器、类选择器、通配符选择器
高级选择器：后代选择器、交集选择器、并集选择器
- 标签选择器：通过标签名选择标签元素。选中的是HTML文件中所有的同名标签。（不受嵌套关系影响，依旧能选中）
- id选择器： 通过标签上的id属性去选择标签。
如果希望多个标签设置相同的样式，使用id选择器的话，必须给这多个标签去不同的id名，分别选中设置。【书写：#id属性值】- 类选择器：通过标签上的class属性去选择标签。
选择的是页面中所有class属性值相同的标签。【书写：.class属性值】- 通配符选择器：通过一个特殊符号选择页面内所有的标签，选择的是
<html>标签在内的所有标签。【书写：* 】
缺点：选择效率低，会让不需要的标签也加载一次样式，导致浏览器多做无用的工作。- 后代选择器：包含选择器，通过标签之间存的嵌套关系去选择元素，相当于基础选择器。【书写：空格表示后代，空格前面的选择器选中的标签是后面选择器选中的祖先级】
代码示例：
<style>
.b1 ul li p{
color:red;
}
</style>
......
<div class="b1">
<ul>
<li><p>b1 标签 里的 li标签 内的段落p </p></li>
<li><p>b1 标签 里的 li标签 内的段落p </p></li>
<li><p>b1 标签 里的 li标签 内的段落p </p></li>
<li><p>b1 标签 里的 li标签 内的段落p </p></li>
</ul>
</div>
- 交集选择器：通过一个标签上满足所有基础选择器稍微需求去选择标签。如果一个条件不满足都不能被选中，常见的是标签与类的交集。
【书写：基础选择器进行连续书写，如果有标签选择器参与交集，必须书写在开头。
还可以进行类名的连续交集。交集选择器可以作为其他高级选择器的组成部分。（IE6不支持类名连续交集写法）
】
代码示例：
<style>
p.demo{
color:red;
}//颜色为红色
.d1 p.demo{
color:red;
}//这个覆盖了上面的直接为绿色
</style>
....
<div class="d1">
<ul>
<li><p>b1 标签 里的 li标签 内的段落p </p></li>
<li><p class="demo p1">b1 标签 里的 li标签 内的段落p </p></li>
<li><p>b1 标签 里的 li标签 内的段落p </p></li>
<li><p>b1 标签 里的 li标签 内的段落p </p></li>
<li><p>b1 标签 里的 li标签 内的段落p </p></li>
</ul>
</div>
- 并集选择器：可以将前面的6种选择器中间用逗号进行分隔，最后一个不写逗号。选中的是所有的单独选择器选中的标签的并集集合。
代码示例：
<style>
div,.demo{
color:red;
}
</style>
.....
<div class="d1">
<ul>
<li><p>b1 标签 里的 li标签 内的段落p </p></li>
<li><p class="demo p1">b1 标签 里的 li标签 内的段落p </p></li>
<li><p>b1 标签 里的 li标签 内的段落p </p></li>
<li><p>b1 标签 里的 li标签 内的段落p </p></li>
<li><p>b1 标签 里的 li标签 内的段落p </p></li>
</ul>
</div>
如果多个标签具有公共样式，但是不能用一个选择器选中，可以使用并集写法，也可以用该方法，进行默认样式清除，替换通配符的功能。
body,h2,div,ul,li,p {
margin:0;
pading:0;
}
- 行内式样式 与 内嵌式 或 外链式样式比较权重时，行内式权重最高。
- 但是，与!important关键字相比权重要低的~
CSS 层叠式
- 继承性：样式可以从祖先级继承而来
- 层叠性：多个选择器在进行对比的过程中，最终只有一个属性会加载成功，它会层叠、覆盖掉其他的属性。
