问题:
在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属性 分层 较低的数字在底部