初学css(01)

样式表层叠次序

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

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

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 属性。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值