CSS学习笔记1

原创
2017/10/10 23:24
阅读数 717

选择器

基本规则

h1 { color: red; background: yellow; }

1. h1为选择器, color/background为属性, red/yellow为值.

分组:

h2, p { color: gray; }

1. 使用逗号","进行分组, 而分组的元素具有相同的css样式.

2. 可使用通配选择器"*", 下例代码的含义为: 文档中的每一个元素都设为红色:

* { color: red; }

类选择器:

.warning { font-weight: bold; }
p.warning { font-weight: bold; }
.warning.urgent { font-weight: silver; }

1. 点号"."代表类选择器: ".warning"代表所有具有warning类的元素.

2. "p.warning"代表所有具有warning类的p元素.

3. ".warning.urgent"代表同时具有warning类和urgent类的元素.

ID选择器:

#lead-para { font-weight: bold; }

1. 井号"#"代表ID选择器.

属性选择器:

h1[class] { color: silver; }
a[href][title] { font-weight: bold; }

1. "h1[class]"代表具有class属性的h1元素. "a[href][title]"代表同时具有href和title属性的h1元素.

span[moons='1'] { font-weight: bold; }

<span moons='0' class="barren rocky">Mercury</span>
<span moons='1' class="cloudy barren">Venus</span>
<span moons='2' class="lift-bearing cloudy">Earth</span>

1. 根据具体属性值进行匹配, 而且值必须完全匹配.

span[class~='barren'] { font-weight: bold; }

<span moons='0' class="barren rocky">Mercury</span>
<span moons='1' class="cloudy barren">Venus</span>
<span moons='2' class="lift-bearing cloudy">Earth</span>

1. 如果想选择class属性中包含barren的元素, 可以使用"~="来达到效果.

类型 描述
[foo^="bar"] 选择foo属性值以"bar"开头的所有元素
[foo$="bar"] 选择foo属性值以"bar"结尾的所有元素
[foo*="bar"] 选择foo属性值中包含子串"bar"的所有元素

 

使用文档结构

html代码如下:

<html>
    <head>
        <base href="http://www.meerkat.web/">
        <title>Meerkat Central</title>
    </head>
    <body>
        <h1>Meerkat <em>Central</em></h1>
        <p>
            Welcome to Meerkat <em>Central</em>, the <strong>best meerkat web site
                on <a href="inet.html">the <em>entire</em> Internet</a>
            </strong>!
        </p>
        <ul>
            <li>We offer:
                <ul>
                    <li><strong>Detailed information</strong> on how to adopt a meerkat</li>
                    <li>Tips for living with a meerkat</li>
                    <li><em>Fun</em> things to do with a meerkat, including:
                        <ol>
                            <li>Playing fetch</li>
                            <li>Digging for food</li>
                            <li>Hide and seek</li>
                        </ol>
                    </li>
                </ul>
            </li>
            <li>...and so much more!</li>
        </ul>
        <p>
            Questions? <a href="mailto:suricate@meerkat.web">Contact us!</a>
        </p>
    </body>
</html>

效果图如下:

后代选择器:

h1 em { color: gray; }

1. h1后代中所有的em元素均设置为灰色.

p > a { color: red; }

1. 代码中有两处p后面有a, 但第一处中a并不属于p的子元素, 关系为: p > strong > a. 第二处中p > a, 所以渲染的页面为:

相邻兄弟元素:

h1 + p { color: green; }

1. h1和p必须相邻, 使用加号"+"来表示.

伪类选择器:

伪类名 描述
:link 指示作为超链接(即有一个href属性)并指向一个未访问地址的所有锚.
:visited 指示作为已访问地址超链接的所有锚
:focus 指示当前拥有输入焦点的元素
:hover 指示鼠标指针停留在哪个元素上
:active 指示被用户激活的元素.

1. 伪类的顺序为: link-visited-focus-hover-active.

a:link { color: blue; }
a:visited { color: red; }
input:focus { background: silver; }
a:hover { color: green; }
a:active { color: yellow; }

2. 选择第一个子元素, 可使用first-child:

<html>
    <head>
        <title>Meerkat Central</title>
<style type="text/css">
p:first-child { font-weight: bold; }
li:first-child { text-transform: uppercase; }
</style>
    </head>
    <body>
        <div>
            <p>These are the necessary steps:</p>
            <ul>
                <li>Insert key</li>
                <li>Turn key <strong>clockwise</strong></li>
                <li>Push accelerator</li>
            </ul>
            <p>Do <em>not</em> push the brake at the same time as the accelerator.</p>
        </div>
    </body>
</html>

页面如下:

这里, 将第一个p和li设置为对应的样式, 而非p/li元素的第一个子元素.

 

结构和层叠

特殊性

    考虑一种情况:

p em { color: purple; }
em.dark { color: maroon; }

如果一个em元素都匹配上述两条规则, 那么元素是purple还是maroon? 这里得引入选择器的特殊性:

  1. 对于选择器中给定的各个ID属性值, 加0,1,0,0
  2. 对于选择器中给定的各个类属性值,属性选择或伪类, 加0,0,1,0
  3. 对于选择器中给定的各个元素和伪元素, 加0,0,0,1.
  4. 结合符和通配选择器对特殊性没有任何贡献.
h1 { color: red; }  /* 0,0,0,1 */
p em { color: purple; } /* 0,0,0,2 */
.grape { color: purple; }   /* 0,0,1,0 */
*.bright { color: yellow; } /* 0,0,1,0 */
p.bright em.dark { color: maroon; }  /* 0,0,2,2 */
#id216 { color: blue; } /* 0,1,0,0 */
div#sidebar *[href] { color: silver; }  /* 0,1,1,1 */

如果我们将id作为属性选择器, 则它的特殊性为0,0,1,0:

#meadow { color: green; } /* 0,1,0,0 */
*[li="meadow"] { color: red; } /* 0,0,1,0 */

但什么样式为"1,0,0,0", 答案是内联:

<h1 style="color: green;">The Meadow Party</h1>

如果某个声明非常重要, 超过了所有其他声明, 则可使用"!important"字段:

p.dark { color: #333 !important; background: white; }

 

继承

    基于继承机制, 样式不仅应用到指定的元素, 还会应用到它的后代元素. 但有两个例外:

  1. body元素的样式会应用到html元素.
  2. 边框(border)不可继承.

继承的值没有特殊性, 甚至连0特殊性都没有. 考虑以下代码:

* { color: gray; }
h1#page-title { color: black; }

<h1 id='page-title'>Meerkat <em>Central</em></h1>
<p>Welcome to the pest place.</p>

页面效果如下:

    因为通配选择器适用于所有元素, 而且有0特殊性, 其颜色声明指定的值gray要优先于继承值(black), 因为继承值根本没有特殊性. 所以em元素会显示灰色而不是黑色.

    更好的做法是避免使用通配选择器. 我们考虑一个例子: 工具条的文本都是黑底白字:

#toolbar { color: white; background: black; }

但如果工具条包含了一个超链接(a元素), 则超链接的样式会占上风(即可能显示蓝色, a:link {color: blue; }), 为了克服这种情况, 我们还需要如下编写代码:

#toolbar { color: white; background: black; }
#toolbar a:link { color: white; }

 

层叠

如果特殊性相等的两个规则同时应用到同一个元素, 则可根据以下规则进行排序:

按权重和来源排序

p { color: gray !important }

<p style="color: black;">Well, <em>hello</em> there!</p>

由于存在"!important", 则p的颜色会设置为gray.

按特殊性排序

p#bright { color: silver; }
p { color: black; }

这里, p#bright为(0,1,0,1), 而p为(0,0,0,1), 所以p#bright会胜出.

按顺序排序

h1 { color: red; }
h1 { color: blue; }

则h1的颜色设置为blue.

 

值和单位

颜色

    一般我们更倾向于使用十六进制方法来表示颜色:

h1 { color: #ff0000; }

长度单位

    绝对长度单位(in, cm, mm, pt, pc)基本不会被使用.

相对长度单位

em: 1个"em"定义为一种给定字体的font-size值. 如果一个元素的font-size为14像素, 那么对于该元素, 1em就等于14像素.

px: 像素单位, 更为常用.

 

字体

font-family: 用于指定通用字体. 如果字体包含空格,%,$等特殊字符, 需要使用引号包含起来.

h1 { font-family: Arial, sans-serif; }

    这里h1优先使用Arial字体, 如果没有则使用sans-serif字体.

font-weight: 用于加粗字体, 常用为: normal(正常), bold(粗体), bolder(比父元素更粗), lighter(比父元素更细), 100, 200,..., 800, 900.

font-size: 字体大小:

  1. 绝对大小: xx-samll, x-small, small, medium, large, x-large, xx-large.
  2. 相对大小: smaller, larger.
  3. 像素大小和百分比大小: 12px; 120%.
  4. 继承大小: inherit

font-style: 字体风格, 只推荐使用: normal(默认正常), italic(斜体).

 

文本属性

缩进和水平对齐

text-indent: 应用于块级元素, 可指定长度值, 为数字或百分数.

p {text-indent: 36px; }

text-align: 应用于块级元素, 用于文本水平对齐. left, center, right, justify.

p.left { text-align: left; }
p.center { text-align: center; }
p.right { text-align: right; }
p.justify { text-align: justify; }

<div style="width: 400px; margin-left: 100px;">
    <p class="left">left paragraph.</p>
    <p class="center">center paragraph.</p>
    <p class="right">right paragraph.</p>
    <p class="justify">justify paragraph.</p>
</div>

页面效果如下:

垂直对齐

line-height: 行高, 用于设定每行文本的高度.

body { font-size: 10px; }
div { line-height: 1em; }
p { font-size: 38px; }

<div style="width: 400px; margin-left: 100px;">
    <p>hello world,
        aaaaaaaa
        aaaaaaaa
        aaaaaaaa
        aaaaaaaa
        aaaaaaaa
        aaaaaaaa
    </p>
</div>

由于行高是可继承的, 所以上诉代码中, div的行高为1em == 10px; 导致了页面效果如下:

解决方案为: 指定一个数字, 设置为缩放因子:

body { font-size: 10px; }
div { line-height: 1; }
p { font-size: 38px; }

vertical-align: 垂直对齐文本.

  1. 基线对齐: baseline, 要求一个元素的基线与其父元素的基线对齐. 这是默认值.
  2. 上标(super), 下标(sub): 使子元素的基线上升和下降:
span.raise { vertical-align: super; }
span.lower { vertical-align: sub; }

<p>This paragraph contains <span class="raise">Superscripted</span> and <span class="lower">subscripted</span> text.</p>

页面显示效果如下:

    3. bottom: 将元素行内框的底端和行框的底端对齐.

    4. text-bottom: 行内文本的底端和行框的底端对齐.

    5. top/text-top: 和bottom/text-bottom相反.

    6. 长度对齐: 使用百分值或者具体的数值:

span.raise { vertical-align: 5px; }

字间隔和字母间隔

word-spacing: 接受一个正长度或负长度值, 这个长度会增加字之间的标准间隔.

p.spread { word-spacing: 0.5em; }
p.tight { word-spacing: -0.5em; }
p.base { word-spacing: normal; }
p.norm { word-spacing: 0; }

<p class="spread">this is a test</p>
<p class="tight">this is a test</p>
<p class="base">this is a test</p>
<p class="norm">this is a test</p>

页面效果如下:

letter-spacing: 接受一个正长度或负长度值, 这个长度会增加字母之间的标准间隔.

p { letter-spacing: 0; }
p.spacious { letter-spacing: 0.25em; }
p.tight { letter-spacing: -0.25em; }

<p>this is a test</p>
<p class="spacious">this is a test</p>
<p class="tight">this is a test</p>

页面效果如下:

文本转换

text-transform: 将文本设为大写(uppercase), 小写(lowercase), 单词首字母大写(capitalize), 不做修改(none).

h1 { text-transform: uppercase; }
h2 { text-transform: lowercase; }
h3 { text-transform: capitalize; }

<h1>this is a TEST</h1>
<h2>this is a TEST</h2>
<h3>this is a TEST</h3>

文本装饰

text-decoration: none(正常), underline(加下划线), overline(加上划线), line-through(加贯穿线), blink(文本闪烁, 有些浏览器不支持, 少用).

p.none { text-decoration: none; }
p.underline { text-decoration: underline; }
p.overline { text-decoration: overline; }
p.line-through { text-decoration: line-through; }

<p class="none">this is a test</p>
<p class="underline">this is a test</p>
<p class="overline">this is a test</p>
<p class="line-through">this is a test</p>

处理空白符

white-space: 用于处理空白字符, 浏览器的默认行为: 丢掉多余的空白字符.

空白符 换行符 自动换行
pre-line 合并 保留 允许
normal 合并 忽略 允许
nowrap 合并 忽略 不允许
pre 保留 保留 不允许
pre-wrap 保留 保留 允许

 

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部