CSS：定义方式、选择器、颜色

1.行内定义方式

1.1行内样式表(Inline style sheet):直接定义在style标签中

作用范围：仅对当前标签产生影响

例如：

<img src="/images/1.jpg" alt="" style="width: 300px; height: 200px;">

1.2 内部样式表（internal style sheet）

定义在 style 标签中，通过选择器影响对应的标签。

作用范围：可以对同一个页面中的多个元素产生影响。

例如：

<style>
        img {
            width: 100px;
            height: 100px;
        }
    </style>

1.3 外部样式表（external style sheet）

定义在 css 样式文件中，通过选择器影响对应的标签。可以用 link 标签引入某些页面。

作用范围：可以对多个页面产生影响

1.4注释

2.选择器

2.1标签选择器

选择所有的<p>标签：

p 
{
    width: 100px;
    height: 100px;
}

2.2ID选择器

选择id为myp的标签

#myp{
   width:100px;
   height:100px;
}

2.3类选择器

选择所有blue-p类的标签：

.blue-p{
    width:100px;
    height:100px;
}

2.4伪类选择器(伪类用于定义元素的特殊状态)

2.4.1链接伪类选择器

• ：link：链接访问前的样式
• ：visited:链接访问后的样式
• ：hover：鼠标悬停时的样式
• ：focus：聚焦后的样式

2.4.2. 位置伪类选择器

ㅤ●ㅤ:nth-child(n)：选择是其父标签第 n 个子元素的所有元素。

p:nth-child(1) {

    background-color: lightblue;
}

p:nth-child(2) {
    background-color: #ADD8E6;
}

2.4.3.目标伪类选择器

• target:当url指向该元素时生效

2.5 复合选择器

由两个及以上基础选择器组合而成的选择器。

ㅤㅤ●ㅤelement1, element2：同时选择元素 element1 和元素 element2。

ㅤㅤ●ㅤelement.class：选则包含某类的 element 元素。

ㅤㅤ●ㅤelement1 + element2：选择紧跟 element1 的 element2 元素。

ㅤㅤ●ㅤelement1 element2：选择 element1 内的所有 element2 元素。

ㅤㅤ●ㅤelement1 > element2：选择父标签是 element1 的所有 element2 元素。

2.6 通配符选择器

ㅤㅤ●ㅤ*：选择所有标签

ㅤㅤ●ㅤ[attribute]：选择具有某个属性的所有标签

ㅤㅤ●ㅤ[attribute=value]：选择 attribute 值为 value 的所有标签

2.7. 伪元素选择器

将特定内容当做一个元素，选择这些元素的选择器被称为伪元素选择器。

ㅤㅤ●ㅤ::first-letter：选择第一个字母

ㅤㅤ●ㅤ::first-line：选择第一行

ㅤㅤ●ㅤ::selection：选择已被选中的内容

ㅤㅤ●ㅤ::after：可以在元素后插入内容

ㅤㅤ●ㅤ::before：可以在元素前插入内容

2.8样式渲染优先级
ㅤㅤ

       ●ㅤ权重大小，越具体的选择器权重越大：

ㅤㅤ●ㅤ!important > 行内样式 > ID选择器 > 类与伪类选择器 > 标签选择器 > 通用选择器

ㅤㅤ●ㅤ权重相同时，后面的样式会覆盖前面的样式

ㅤㅤ●ㅤ继承自父元素的权重最低

3.颜色

3.1 预定义的颜色值
black、white、red、green、blue、lightblue等等。

3.2 16进制表示法：使用 6 位 16 进制数表示颜色，例如：#ADD8E6。

其中第 1-2 位表示红色，第 3-4 位表示绿色，第 5-6 位表示蓝色。

简写方式：#ABC，等价于#AABBCC。

3.3 RGB表示法：rgb(173, 216, 230)。

其中第一个数表示红色，第二个数表示绿色，第三个数表示蓝色。

3.4 RGBA表示法：rgba(173, 216, 230, 0.5)。

前三个数同上，第四个数表示透明度。

3.5 取色方式
ㅤㅤ●ㅤ网页里的颜色，可以在 chrome 的调试模式下获取

ㅤㅤ●ㅤ其他颜色可以使用 QQ 的截图软件：

ㅤㅤ●ㅤ我更推荐 Snipaste 微软商店就可以下载

ㅤㅤ●ㅤ直接按 c 键，可以复制 rgb 颜色值

ㅤㅤ●ㅤ按住 ctrl 再按 c 键，可以复制16进制颜色值