css 层叠样式表(cascading style sheets),作用是静态的修饰网页,并且可以配合各种脚本语言动态的对网页各元素进行格式化
发展过程
版本: 时间:
css1 1995年12月
css2 1997年初
css3 1999年开始制订
前端三层技术
- html ----> 结构层 ------- 从语义的角度搭建网页结构
- css ----> 样式层 ------- 从美观的角度描述页面样式
- JavaScript--->行为层 ------- 从交互的角度描述页面行为
- css实现了页面的结构和样式分离,拯救了混乱的HTML
css组成
层叠层 样式
(css中贯穿始终的加载特性) (定义如何显示HTML元素)
层叠性 文字文本
继承性 背景
盒模型
浮动
定位
其他
- 内联式 : 也称行内式,在HTML标签上的style属性中书写css样式
外联式的优点:1.实现了HTML和css完全分离;2.多个HTML文件可以公用一个css文件,减少代码量,便于提取公共的css;3.实现一个css变化,多个页面同时变化;4.一个HTML文件可以引入多个css文件,可以实现同一个页面中的css代码分层
- 导入式 :(不建议使用直接在html中使用)
导入样式和链接样式比较相似,采用@import样式导入CSS样式表,在HTML初始化时,会被导入到HTML或者CSS文件中,成为文件的一部分,类似第二种内嵌样式。会在加载html文档后在加载样式所以有时会出现没有样式的情况(很短暂),然后就有样式了
@import在html中使用,如下:
@import url(style.css);
CSS规则
css规则由两个主要部分构成:选择器,以及一条或多条声明
多条样式属性
p{ width : 400px; font-size : 14px;}
| | |
选 属 属
择 性 性
器 名 值样式规则
1.内嵌式中所有代码必须写在标签内的
标签内
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属性值】- 通配符选择器:通过一个特殊符号选择页面内所有的标签,选择的是
标签在内的所有标签。【书写:* 】
缺点:选择效率低,会让不需要的标签也加载一次样式,导致浏览器多做无用的工作。- 后代选择器:包含选择器,通过标签之间存的嵌套关系去选择元素,相当于基础选择器。【书写:空格表示后代,空格前面的选择器选中的标签是后面选择器选中的祖先级】
代码示例: ......
b1 标签 里的 li标签 内的段落p
b1 标签 里的 li标签 内的段落p
b1 标签 里的 li标签 内的段落p
b1 标签 里的 li标签 内的段落p
- 交集选择器:通过一个标签上满足所有基础选择器稍微需求去选择标签。如果一个条件不满足都不能被选中,常见的是标签与类的交集。
【书写:基础选择器进行连续书写,如果有标签选择器参与交集,必须书写在开头。
还可以进行类名的连续交集。交集选择器可以作为其他高级选择器的组成部分。(IE6不支持类名连续交集写法)
】代码示例: ....
b1 标签 里的 li标签 内的段落p
b1 标签 里的 li标签 内的段落p
b1 标签 里的 li标签 内的段落p
b1 标签 里的 li标签 内的段落p
b1 标签 里的 li标签 内的段落p
- 并集选择器:可以将前面的6种选择器中间用逗号进行分隔,最后一个不写逗号。选中的是所有的单独选择器选中的标签的并集集合。
代码示例: .....
b1 标签 里的 li标签 内的段落p
b1 标签 里的 li标签 内的段落p
b1 标签 里的 li标签 内的段落p
b1 标签 里的 li标签 内的段落p
b1 标签 里的 li标签 内的段落p
如果多个标签具有公共样式,但是不能用一个选择器选中,可以使用并集写法,也可以用该方法,进行默认样式清除,替换通配符的功能。
body,h2,div,ul,li,p { margin:0; pading:0; }
- 行内式样式 与 内嵌式 或 外链式样式比较权重时,行内式权重最高。
- 但是,与!important关键字相比权重要低的~
CSS 层叠式
- 继承性:样式可以从祖先级继承而来
- 层叠性:多个选择器在进行对比的过程中,最终只有一个属性会加载成功,它会层叠、覆盖掉其他的属性。
参与评论
手机查看
返回顶部