CSS笔记
2016-05-18 15:07
148 查看
优先级:
一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。
浏览器缺省设置
外部样式表
内部样式表(位于 <head> 标签内部)
内联样式(在 HTML 元素内部)
CSS框模型
可以按照上、右、下、左(顺时针)的顺序分别设置各边的内边距,各边均可以使用不同的单位或百分比值:
CSS换行
强制不换行
p { white-space:nowrap; }
自动换行
p { word-wrap:break-word; word-break:normal; }
强制英文单词断行
p { word-break:break-all; }
*注意:设置强制将英文单词断行,需要将行内元素设置为块级元素。
span { display:block; }
一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。
浏览器缺省设置
外部样式表
内部样式表(位于 <head> 标签内部)
内联样式(在 HTML 元素内部)
CSS框模型
可以按照上、右、下、左(顺时针)的顺序分别设置各边的内边距,各边均可以使用不同的单位或百分比值:
h1 {padding: 10px 0.25em 2ex 20%;}
类选择器还是 ID 选择器?
在类选择器这一章中我们曾讲解过,可以为任意多个元素指定类。前一章中类名 important 被应用到 p 和 h1 元素,而且它还可以应用到更多元素。区别 1:只能在文档中使用一次
与类不同,在一个 HTML 文档中,ID 选择器会使用一次,而且仅一次。区别 2:不能使用 ID 词列表
不同于类选择器,ID 选择器不能结合使用,因为 ID 属性不允许有以空格分隔的词列表。区别 3:ID 能包含更多含义
类似于类,可以独立于元素来选择 ID。有些情况下,您知道文档中会出现某个特定 ID 值,但是并不知道它会出现在哪个元素上,所以您想声明独立的 ID 选择器。CSS换行
强制不换行
p { white-space:nowrap; }
自动换行
p { word-wrap:break-word; word-break:normal; }
强制英文单词断行
p { word-break:break-all; }
*注意:设置强制将英文单词断行,需要将行内元素设置为块级元素。
span { display:block; }
CSS 选择器参考手册
选择器 | 描述 |
---|---|
[attribute] | 用于选取带有指定属性的元素。 |
[attribute=value] | 用于选取带有指定属性和值的元素。 |
[attribute~=value] | 用于选取属性值中包含指定词汇的元素。 |
[attribute|=value] | 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。 |
[attribute^=value] | 匹配属性值以指定值开头的每个元素。 |
[attribute$=value] | 匹配属性值以指定值结尾的每个元素。 |
[attribute*=value] | 匹配属性值中包含指定值的每个元素。 |
相关文章推荐
- css中font的简写方法font-weight,font-size,line-height,font-family的区别
- CSS3实现半像素边框
- css优先级
- Qt自定义样式/无边框窗口/子窗口模态/非模态问题
- 自己写的一个分页的代码(有添加样式参考)
- 气泡样式提示框
- CSS样式网页导航条
- table-css
- CSS样式投影效果
- css-tricks
- css 鼠标移入边框填充效果
- css 鼠标移入边框填充效果
- 其他格式转json样式
- css水平居中(一)
- 条件判断IE版本加载不同CSS
- <a>超链接样式
- CSS3轻松实现清新 Loading 效果
- CSS实践总结——选择器详解与字体样式
- web技术学习阶段性总结
- 学习BFC心得