CSS Basics语法 and 选择器

1. CSS Introduction

CSS (Cascading Style Sheets, 层叠样式表) is a用于describesHTML or XMLdocumentation out 观 and 格式样式表language. CSS and HTML结合using, 可以将documentation structure and 表现分离, 使网页design更加flexible and 易于maintenance.

提示

CSS 主要作用 is 控制网页视觉表现, including布局, 颜色, 字体, 间距, 动画etc.. throughCSS, 我们可以creation美观, 一致 and response式网页design.

1.1 CSS 发展history

CSS经历了 many 个version 发展, 主要including:

CSS1: 1996年release, package含basic 选择器 and 样式property
CSS2: 1998年release, 增加了定位, 浮动, 媒体queryetc.features
CSS3: 2011年开始分批release, 增加了圆角, 阴影, 渐变, 动画, Flexbox, Gridetc.现代features
CSS4: 正 in 发展in, package含一些实验性 new features

2. CSS Basics语法

CSS basic语法由选择器 (Selector) , 声明块 (Declaration Block) 组成, 声明块package含一个 or many 个声明 (Declaration) , 每个声明由property (Property) and 值 (Value) 组成.

/* 选择器 { property: 值; property: 值; } */
选择器 {
    property1: 值1;
    property2: 值2;
    /* comment */
}

2.1 选择器

选择器用于指定要application样式 HTML元素. 例such as, 要选择所 has 段落元素, 可以using p 选择器.

2.2 声明块

声明块由一 for big 括号 {} package裹, package含一个 or many 个声明. 每个声明以分号 ; 结尾.

2.3 声明

声明由property and 值组成, in间用冒号 : 分隔. 例such as, color: red; 表示将文本颜色设置 for 红色.

2.4 CSS comment

CSScomment以 /* 开头, 以 */ 结尾, 用于解释CSScode, 不会被浏览器解析.

3. CSS 引入方式

CSS可以through以 under 三种方式引入 to HTMLdocumentationin:

3.1 in 联样式 (Inline Style)

in 联样式直接写 in HTML元素 style propertyin, 只 for 当 before 元素生效.

<p style="color: red; font-size: 16px;">这 is a 红色 段落</p>

warning

in 联样式会将样式 and structure紧密耦合, 不利于maintenance and 复用, 一般只 in 特殊circumstances under using.

3.2 in 部样式表 (Internal Style Sheet)

in 部样式表写 in HTMLdocumentation <head> tag in <style> tagin, 只 for 当 before documentation生效.

<head>
    <style>
        p {
            color: red;
            font-size: 16px;
        }
    </style>
</head>

3.3 out 部样式表 (External Style Sheet)

out 部样式表 is a 独立 .css file, through <link> tag引入 to HTMLdocumentationin, 可以被 many 个documentation共享.

<head>
    <link rel="stylesheet" href="styles.css">
</head>

/* styles.css */
p {
    color: red;
    font-size: 16px;
}

best practices

建议using out 部样式表, 这样可以将样式 and structure完全分离, 便于maintenance and 复用, 同时可以利用浏览器cacheimprovingperformance.

4. CSS 选择器

CSS选择器用于选择要application样式 HTML元素. CSSproviding了 many 种class型选择器, includingBasics选择器, 组合选择器, 伪class选择器 and 伪元素选择器etc..

4.1 Basics选择器

4.1.1 元素选择器 (Type Selector)

元素选择器根据HTML元素名称选择元素.

/* 选择所 has 段落元素 */
p {
    color: blue;
}

4.1.2 class选择器 (Class Selector)

class选择器根据元素 class property选择元素, 以点号 . 开头.

<p class="highlight">这 is a highlight段落</p>
<div class="highlight">这 is a highlightdiv</div>

/* 选择所 has class for highlight 元素 */
.highlight {
    background-color: yellow;
}

4.1.3 ID选择器 (ID Selector)

ID选择器根据元素 id property选择元素, 以井号 # 开头. 每个ID in documentationin应该 is 唯一 .

<div id="header">这 is 页头</div>

/* 选择id for header 元素 */
#header {
    background-color: #333;
    color: white;
}

4.1.4 common选择器 (Universal Selector)

common选择器选择documentationin 所 has 元素, 以星号 * 表示.

/* 选择所 has 元素 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

4.1.5 property选择器 (Attribute Selector)

property选择器根据元素 property or property值选择元素.

/* 选择所 has 带 has hrefproperty 元素 */
[href] {
    color: blue;
}

/* 选择hrefproperty值 for "https://example.com" 元素 */
[href="https://example.com"] {
    color: green;
}

/* 选择hrefproperty值以"https"开头 元素 */
[href^="https"] {
    color: purple;
}

/* 选择hrefproperty值以".com"结尾 元素 */
[href$=".com"] {
    color: orange;
}

/* 选择hrefproperty值package含"example" 元素 */
[href*="example"] {
    color: red;
}

4.2 组合选择器

4.2.1 after 代选择器 (Descendant Selector)

after 代选择器选择某个元素所 has after 代元素, using空格分隔.

/* 选择div元素 in  所 has p元素 */
div p {
    color: red;
}

4.2.2 子选择器 (Child Selector)

子选择器选择某个元素直接子元素, using big 于号 > 分隔.

/* 选择div元素 直接子p元素 */
div > p {
    color: blue;
}

4.2.3 相邻兄弟选择器 (Adjacent Sibling Selector)

相邻兄弟选择器选择某个元素 under 一个直接兄弟元素, using加号 + 分隔.

/* 选择p元素 after 面紧跟 第一个div元素 */
p + div {
    margin-top: 20px;
}

4.2.4 common兄弟选择器 (General Sibling Selector)

common兄弟选择器选择某个元素 after 面所 has 兄弟元素, using波浪号 ~ 分隔.

/* 选择p元素 after 面 所 has div元素 */
p ~ div {
    color: green;
}

4.3 伪class选择器 (Pseudo-class Selector)

伪class选择器用于选择元素 specificstatus or 位置, 以冒号 : 开头.

4.3.1 链接伪class

/* 未访问 链接 */
a:link {
    color: blue;
}

/* 已访问 链接 */
a:visited {
    color: purple;
}

/* 鼠标悬停时 链接 */
a:hover {
    color: red;
}

/* 激活status 链接 (鼠标点击时)  */
a:active {
    color: green;
}

4.3.2 动态伪class

/* 获得焦点 元素 */
input:focus {
    border: 2px solid blue;
    outline: none;
}

/* 被选in 元素 */
::selection {
    background-color: yellow;
}

4.3.3 structure伪class

/* 选择第一个子元素 */
ul > li:first-child {
    font-weight: bold;
}

/* 选择最 after 一个子元素 */
ul > li:last-child {
    color: red;
}

/* 选择第n个子元素 */
ul > li:nth-child(2) {
    background-color: yellow;
}

/* 选择偶数位置 子元素 */
ul > li:nth-child(even) {
    background-color: lightgray;
}

/* 选择奇数位置 子元素 */
ul > li:nth-child(odd) {
    background-color: white;
}

4.4 伪元素选择器 (Pseudo-element Selector)

伪元素选择器用于选择元素 specific部分, 以双冒号 :: 开头 (CSS3标准, CSS2inusing单冒号) .

4.4.1 ::before and ::after

in 元素 in 容 before 面 or after 面插入 in 容.

/*  in 段落 before 面插入 in 容 */
p::before {
    content: "→ ";
    color: red;
}

/*  in 段落 after 面插入 in 容 */
p::after {
    content: " ←";
    color: blue;
}

4.4.2 ::first-line and ::first-letter

选择文本第一行 or 第一个字母.

/* 选择段落 第一行 */
p::first-line {
    font-weight: bold;
    color: red;
}

/* 选择段落 第一个字母 */
p::first-letter {
    font-size: 2em;
    float: left;
    margin-right: 5px;
}

5. CSS priority

当 many 个CSS规则application于同一个元素时, 浏览器需要确定哪个规则具 has 更 high priority. CSSpriority is 由选择器 class型 and 组合方式决定 .

5.1 priority计算规则

CSSpriority from high to low 依次 for :

!important 声明: priority最 high , 应谨慎using
in 联样式: 写 in 元素 stylepropertyin 样式
ID选择器: #id
class选择器, property选择器, 伪class选择器: .class, [attribute], :hoveretc.
元素选择器, 伪元素选择器: p, ::beforeetc.
common选择器: *

5.2 priority计算method

priority可以用一个四元组 (a, b, c, d) 来表示, 其in:

a: is 否package含 !important (1 or 0)
b: in 联样式数量
c: ID选择器数量
d: class选择器, property选择器, 伪class选择器数量
e: 元素选择器, 伪元素选择器数量

例such as:

p → (0, 0, 0, 0, 1)
.class → (0, 0, 0, 1, 0)
#id → (0, 0, 1, 0, 0)
div#id.class → (0, 0, 1, 1, 1)
style="color: red;" → (0, 1, 0, 0, 0)
color: red !important; → (1, 0, 0, 0, 0)

warning

尽量避免using !important, 因 for 它会破 bad CSS 层叠mechanism, 使样式难以maintenance. 只 has in 特殊circumstances under , such as覆盖第三方library 样式时, 才考虑using.

5.3 层叠顺序

当 many 个priority相同 CSS规则application于同一个元素时, after 面定义规则会覆盖 before 面定义规则 (层叠顺序) .

/*  before 面 规则 */
p {
    color: blue;
}

/*  after 面 规则, 会覆盖 before 面 规则 */
p {
    color: red;
}

6. CSS comment

CSScomment用于解释CSScode, 不会被浏览器解析. CSScomment以 /* 开头, 以 */ 结尾.

/* 这 is a 单行comment */

/*
这 is a 
 many 行comment
*/

p {
    color: red; /* 这 is a 行 in comment */
}

7. CSS 书写规范

良 good CSS书写规范可以improvingcode readable 性 and 可maintenance性. 以 under is 一些常用 CSS书写规范:

using四个空格 or 一个制表符forindent
每条声明占一行, 结尾加分号
选择器 and 声明块之间留一个空格
property名 and 值之间留一个空格
using small 写字母 and 连字符命名 (such as font-size 而不 is fontSize)
for 选择器group时, 每个选择器占一行
usingcomment说明 complex 样式规则

/* 良 good  CSS书写规范 */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    color: #333;
}

.container,
.header,
.footer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

8. 练习

练习 1: Basics选择器

creation一个HTMLfile, package含以 under 元素:
- 一个标题 (h1)
- 三个段落 (p) , 其in一个带 has class="highlight", 一个带 has id="important"
- 一个无序list (ul) , package含5个list项 (li)
creation一个CSSfile, 添加以 under 样式:
- 将所 has 段落文本颜色设置 for 蓝色
- 将class for highlight 元素背景色设置 for 黄色
- 将id for important 元素字体加粗
- 将无序list 第一个list项文本颜色设置 for 红色
- 将无序list 最 after 一个list项背景色设置 for 灰色
in HTMLfilein引入CSSfile, 查看效果

练习 2: 组合选择器

creation一个HTMLfile, package含以 under structure:

<div class="container">
    <p>这 is container in  第一个段落</p>
    <div class="box">
        <p>这 is box in  段落</p>
    </div>
    <p>这 is container in  第二个段落</p>
    <p>这 is container in  第三个段落</p>
</div>

creation一个CSSfile, 添加以 under 样式:
- using after 代选择器, 将container in 所 has 段落文本颜色设置 for 蓝色
- using子选择器, 将container 直接子段落背景色设置 for 黄色
- using相邻兄弟选择器, 将box after 面第一个段落字体 big small 设置 for 18px
- usingcommon兄弟选择器, 将box after 面所 has 段落添加 under 划线
in HTMLfilein引入CSSfile, 查看效果

练习 3: priority

creation一个HTMLfile, package含以 under 元素:

<p id="test" class="test-class" style="color: red;">这 is a test段落</p>

creation一个CSSfile, 添加以 under 样式:

/* 元素选择器 */
p {
    color: blue;
}

/* class选择器 */
.test-class {
    color: green;
}

/* ID选择器 */
#test {
    color: purple;
}

/*  in 联样式已经 in HTMLin定义: color: red; */

in HTMLfilein引入CSSfile, 查看段落最终颜色 is what, 并解释 for what
modifyCSSfile, in 元素选择器in添加 !important, 再次查看效果并解释

返回tutoriallist under 一节: CSS 文本样式 and 排版