文章标题

来源:互联网 发布:小米note手机网络制式 编辑:程序博客网 时间:2024/05/16 07:04

css总结

什么是css

通俗的来讲,比如你要盖一栋大楼,需要主题结构,装修,和各种通讯等而html,css,javascript在开发中的作用也具有类似的作用,总的来说css其实就是美工的作用。

css的使用方式

css写在html外面和里面都是可以的,但是常用的也是html规定的是将css写在里用来写。

css的基础选择器

css的基础选择器有三个,分别是id选选择器,html选择器,class选择器,

css的综合选择器

css的综合选择器有:div p选择器(后代选择器),div.a(交集选择器),div,a(并集选择器),div>p(直系后代选择器),ul li:last-child;ul li:first-child(序列选择器),div+p(相邻兄弟选择器)div~p(兄弟选择器)。

css尺寸标签

css的尺寸标签有width,height,line-height,max-width,max-height,min-width,min-height。

css的重叠结构

每个合法的文档都会生成一个文档树,从而能根据元素的祖先,属性,兄弟元素等创建选择器来选择元素。有了这个结构树,选择器才能起作用,这也是CSS继承的核心。继承是从一个元素向其后代元素传递属性值所采用的机制。确定应当向一个元素应用哪些值时,用户代理不仅要考虑继承,还要考虑声明的特殊性,另外需要考虑声明本身的来源,这个过程称为层叠。
1.特殊性 每个选择器都有特殊性,对于每个规则,用户代理会计算选择器的特殊性,并将这个特殊性附加到规则中的各个声明。若一个元素有两个或多个冲突的属性声明,那么有最高特殊性的声明将胜出。
特殊性顺序 “important > 内联 > ID > 类| 伪类 | 属性选择 > 标签| 伪对象 > 通配符” > 继承
Selectors 选择符
Syntax Samples 语法
ensample 示例
Specificity 特性
通配选择符(Universal Selector)
*.div { width:560px;}
0,0,0,0
类型选择符(Type Selectors)
E1
td { font-size:12px;}
0,0,0,1
伪类选择符(Pseudo-classes Selectors)
E1:link
a:link { font-size:12px;}
0,0,1,0
属性选择符(Attribute Selectors)
E1[attr]
h[title] {color:blue;}
0,0,1,0
ID选择符(ID Selectors)

sID

sj{ font-size:12px;}

0,1,0,0
类选择符(Class Selectors)
E1.className
.sjweb{color:blue;}
0,0,1,0
子对象选择符(Child Selectors)
E1 > E2
body > p {color:blue;}
E1+E2
相邻选择符(Adjacent Sibling Selectors)
E1 + E2
div + p {color:blue;}
E1+E2
选择符分组(Grouping)
E1,E2,E3
td1,a,body {color:blue;}
E1 E2 E3
包含选择符(Descendant Selectors)
E1 E2
table td {color:blue;}
E1+E2
2.重要性 有时某个声明可能很重要,超过了所有其他声明,CSS2.1称之为重要声明,并允许在这些声明的结束分号之前插入!important来标志。 标志为!important的声明并没有特殊的特殊性值,不过要与非重要声明分开考虑。实际上,所有!important声明会分组在一起,重要声明的特殊性冲突会在重要声明内部解决,而不会与非重要声明相混。类似地,我们认为所有非重要声明也归为一组,使用特殊性来解决冲突。若一个重要声明和一个非重要声明冲突,胜出的总是重要声明。 3.继承 基于继承机制,样式不仅应用到指定的元素,还会应用到它的后代元素。继承是CSS中最基本的内容,除非有必须,否则一般不会特别考虑。不过需要注意以下几点: 1)注意有些属性不能被继承,这往往归因于一个简单的常识。一般地,大多数框模型属性(包括外边距,内边距,背景和边框)都不能被继承。 2)继承的值根本没有特殊性,甚至连0特殊性都没有。

原创粉丝点击