Front end foundation course 3（css1）

CSS基础

什么是CSS

CSS 即层叠样式表，主要作用就是指定 HTML 中各元素的样式，从而使整个页面达到很好的展示效果。

CSS引入方式

• 外部文件
• 内部样式表
• 内联样式

CSS语法

基础语法

selector 表示选择器，花括号中即为对其修饰的属性和值的键值对。

selector {
    roperty: value
}

分组

通过逗号分隔可以将选择器分组，这一组的选择器将同时被该样式修饰。

selector1,
selector2,
selector3 {
    property: value
}

派生

通过空格分隔表示选择器的派生，即在上一级选择器的基础上进行下一级选择器的选择。

selector1 selector2 {
    property: value
}

联合

直接连接两个选择器，表示选择同时符合这两个选择器的元素。

selector1selector2 {
    property: value
}

CSS选择器

通用选择器

即选择所有元素，用法为 *，如：

<style>
* {
    font-size:4em;
}
</style>
<p>This is a id selector demo.</p>

id

id 选择符，用来选择该 id 的元素，用法为 #id，如：

<style>
#box {
    font-size:4em;
}
</style>
<p id=”box”>This is a id selector demo.</p>

class

类选择符，来选择包含该 class 的元素，用法为 .class，如：

<style>
.box {
    font-size:4em;
}
</style>
<p class=”box”>This is a class selector demo.</p>

tag

标签选择符，用来选择所有是该标签的元素，用法为 tag，如：

<style>
p {
    font-size:4em;
}
</style>
<p class=”box”>This is a tag selector demo.</p>

property

属性选择符，用来选择包含该属性且属性值符合指定要求的元素，用法如下：

[attribute]         用于选取带有指定属性的元素。
[attribute=value]   用于选取带有指定属性和值的元素。
[attribute~=value]  用于选取属性值中包含指定词汇的元素。
[attribute|=value]  用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]  匹配属性值以指定值开头的每个元素。
[attribute$=value]  匹配属性值以指定值结尾的每个元素。
[attribute*=value]  匹配属性值中包含指定值的每个元素。

例子：

<style>
[href] {
    font-size:4em;
}
</style>
<a href=”http://www.baidu.com”>This is a property selector demo.</a>

child

子元素选择符，用来选择某元素的子元素（但不包括子元素的后代），用法为 selector1 > selector2，如：

<style>
.wrapper > p {
    font-size:4em;
}
</style>
<div class=”wrapper”>
    <p>
        <a href=”http://www.baidu.com”>This is a child selector demo.</a>
    </p>
</div>

sibling

相邻兄弟选择符，用来选择紧接在另一元素后的元素，且二者有相同父元素。用法为 selector1 + selector2，如：

<style>
p + p {
    font-size:4em;
}
</style>
<div class=”wrapper”>
    <p>This is first paragraph</p>
    <p>This is second paragraph</p>
</div>

pseudo-class

伪类选择符，用来添加一些特殊的样式，用法为 :pseudo-class，如：

<style>
a:hover {
    color:#f00;
}
</style>
<a href=”https://www.baidu.com”>This is a demo for pseudo selector.</a>

常见伪类：

:active         向被激活的元素添加样式。
:focus          向拥有键盘输入焦点的元素添加样式。
:hover          当鼠标悬浮在元素上方时，向元素添加样式。
:link           向未被访问的链接添加样式。
:visited        向已被访问的链接添加样式。
:first-child    向元素的第一个子元素添加样式。
:lang           向带有指定 lang 属性的元素添加样式。

pseudo-element

伪元素选择符，用来添加一些特殊的样式，用法为 :pseudo-element，如：

<style>
.cf {
zoom:1;
}
.cf:after {
content: ‘’;
display: block;
clear: both;
height: 0;
overflow: hidden;
visibility: hidden;
}
</style>
<div class=”cf”>
<!--
some float stuff
-->
</div>

常见伪元素：

:first-letter   向文本的第一个字母添加特殊样式。
:first-line     向文本的首行添加特殊样式。
:before         在元素之前添加内容。
:after          在元素之后添加内容。

CSS优先级

相同的属性，权重高的选择器会覆盖权重低的。如果权重相同，则使用最后的。

如何计算选择器权重

4个权重等级：

• 内联
• id
• class, pseudo-class, property
• tag, pseudo-element

通用选择器（*），子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以他们的权值都为0。

CSS样式

• 文本
• text-indent
• text-decoration
• text-align
• color
• line-height
• 字体
• font-size
• font-weight
• font-family
• font-style
• 背景
• background-color
• background-image
• background-repeat
• background-position
• 列表
• list-style-type
• list-style-image
• list-style-position
• 展示
• display