初学css（01）

最新推荐文章于 2024-09-08 10:28:36 发布

威武大将军朱厚照

最新推荐文章于 2024-09-08 10:28:36 发布

阅读量96

点赞数

分类专栏： css

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

样式表层叠次序

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

浏览器缺省（默认）设置
外部样式表
内部样式表（位于 <head> 标签内部）
内联样式（在 HTML 元素内部）

css继承

CSS 继承深度解析
并不是所有浏览器都支持继承

选择器

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling
selector）。
例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

h1 + p {margin-top:50px;}
老版本的 Windows/IE 浏览器可能会忽略这条规则（#sidebar），除非你特别地定义这个选择器所属的元素：div#sidebar
元素可以基于类被选择（td.fancy）
对带有指定属性的 HTML 元素设置样式

背景图像

***所有背景属性都不能继承。***但可以设置继承(background-color: inherit;)
body {background-image: url(/i/eg_bg_04.gif);}
background-repeat 属性设置是否及如何重复背景图像。

在这里插入图片描述
background-position 属性设置背景图像的起始位置。

提示：您需要把 background-attachment 属性设置为 “fixed”，才能保证该属性在 Firefox 和 Opera 中正常工作。

如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。
您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的.默认值是 scroll

CSS 文本

通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。

注意：一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。

text-align 是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。

使用text-align:justify，让内容两端对齐，兼容IE及主流浏览器的方法
word-spacing 属性可以改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。(“字” 定义为由空白符包围的一个字符串。)
letter-spacing 属性与 word-spacing 的区别在于，字母间隔修改的是字符或字母之间的间隔。
text-transform 属性处理文本的大小写。这个属性有 4 个值：
none uppercase lowercase capitalize
默认值 none对文本不做任何改动，将使用源文档中的原有大小写。顾名思义，uppercase 和 lowercase 将文本转换为全大写和全小写字符。最后，capitalize 只对每个单词的首字母大写。
text-decoration 有 5 个值：
none underline overline line-through blink 不出所料，underline 会对元素加下划线，就像 HTML 中的 U 元素一样。overline 的作用恰好相反，会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线，等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁，类似于 Netscape支持的颇招非议的 blink 标记。
**
white-space 属性会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。
direction 属性有两个值：ltr 和 rtl。大多数情况下，默认值是 ltr，显示从左到右的文本。如果显示从右到左的文本，应使用值 rtl。
注释：对于行内元素，只有当 unicode-bidi 属性设置为 embed 或 bidi-override 时才会应用 direction 属性。