CSS学习记录

问题:

在XML中使用CSS?

 

 

类选择符  以。标记 如:

.sdf { color:red; }

类选择符可以和HTML元素选择符联合使用 如:

span.sdf{ color:red; }  用于SPAN元素里的sdf类选择符

类选择符可以相互联合使用

.sdf.ffg{color:yellow;} 目前感觉其实和一个类选择符没什么2样 .hhg{color:yellow;}

 

id选择符

#加HTML元素id组合而成 如:

#pp  <span id="pp">sds</span>

 

类型选择符

去掉<>的HTML标记为名字 如:

body{color:red; }

通用选择符

*为标记 意即为 代表所有的元素  *{color:red; } 等同于  element{color:red; }

 

如果 多个标记具有同样的规则 可以 集中列出选择符 用逗号隔开 联合规则 如:

h1,h2,h3,.ssd,#pk {color:red; }

但如果 情况发生变化 h1 规则变化其他不变就要独立出h1了

 

子选择符 是作用到所有子代而不只是直接子代

组合选择符(包括类型,类,ID选择符,伪类选择符) 用空格隔开

 

伪类选择符 是基于一组预定义性质的选择符 标识虚拟元素 即元素不存在 但浏览器可以推理应用样式的元素

他们同样可以使用组合选择符

伪类的联合 中间不留空格 直接写在一起   如 a:link{}

a.ff{} 是指具有类选择符的a类型选择符 中间没空格是&的意思 有空格才是子代关系

 类和伪类的顺序不重要

 

HTML显示为CSS显示盒子的真正方法是“可视格式化方式”

标记元素分为2个 块元素(block) 和 内联元素(inline)

块元素是作为内容的独特块而显示的元素,他以新行开始和结束

内联元素没有开始和结束行他包含于文本流之内

所有元素都产生了特定的盒子类型,显示这些盒子的方法叫做盒子模型

块包含盒可以装其他块盒子和内联盒子 内联盒子只能装内联盒子

 

盒子的边缘由边距(margin)边框(border)填充(padding)定义

选择符{border:大小 样式 颜色;}

填充总是和内容的颜色相同

 

级联的优先规则

2个CSS文件冲突起来决定用哪一个的规则如下

作者规则

用户规则

浏览器默认规则

1:有内联样式属性的最优先   内联样式是指直接写在style里面的那种

2:id选择符 当第一规则无用时 具有ID选择符最多的优先

3:类或伪类的数量最多优先

4:元素(类型选择符)数量最多优先

5:最近的优先

6:如果要把自己写的样式定义为最高优先级 可以这样做: .ppt{color:red  !important;}

 

 

引入样式表规则

@import “abc.css”

所有被引入的样式表被认为在原始样式表之前

根据就近原则就是说被引入的样式表是优先权较低的

 

继承的关键字inherit 的使用

p.div {border:red;}

p.div em{cplor:inherit;}

 

属性选择符

元素[属性]

 h1[align] 有align属性的h1元素

*[align] 或 [align] 有align属性的所有元素

元素[属性=“值”] 属性等于值的元素

元素[属性~=“值”]  属性值等于被匹配值的其中1个的元素 例如 <div class="foo hkk loo"> div[class~="foo"]

元素[属性|=“值”] 只要等于该值或在-前的部分等于即可 例如:<div lang="en-uk"> div[class|="en"]

 

子选择符 >  这个选择的是直系子代

父>子{声明;}

div>p {color:red;}

近亲选择符

同胞 + 同胞 {声明;}

后面的样式只应用到第二个同胞上

 

float 浮动元素

.ppl{float:left;} 盒子移动刀左边 文本围绕右边流动

要停止后面元素流动 可以在 第一个 不想围绕流动的 元素上 使用 clear属性

.p2{clear:left};

 

height和width 设置的是盒子的内容宽度和高度

min-宽度 和MAX-宽度 是设置宽度和高度的范围

 

overflow 处理文本溢出设置滚动栏的情况

 

position属性用于相对定位

其4个属性値

absolute 相对于包含盒子(设置了position属性的包含盒子不一定是直接父代 如果都没设定 默认为BODY)给盒子定位 (绝对定位)

flex 相对于包含盒子给盒子定位而且就算页面滚动也不 移动 (固定定位)

relative相对于他通常的位置给盒子定位 (相对定位)

 

圆角的使用CLIP属性

只在盒子(本身的 这个盒子)的OVERFLOW値不是visible(溢出显示)并且POSITION值是ABSOLUTE(绝对定位)的时候

可以使用CLIP值

#ss{overflow:hidden;position:absolute;clip:rect(16px;0px;16px;16px;)}

 

Z-INDEX属性 分层 较低的数字在底部

 

 

 

 

 

你可能感兴趣的:(CSS学习记录)