05 CSS 基础

鱼仔布丁 5/12/2021 html

使用CSS可以让结构(HTML)与表现(CSS)分离，方便维护

CSS（层叠样式表） | MDN (opens new window) CSS 选择器 - CSS（层叠样式表） | MDN (opens new window)

# 基本语法

selector { 
    property: value 
}

# CSS的四种引用方式

行嵌样式：应用内嵌样式到各个网页元素

<p style="color: red; margin-left: 20px">这是P标签</p>

内部样式表：在网页上创建嵌入的样式表。

<style type="text/css">
    body {
        background-color: red
    }
</style>

链入外部样式表：将网页链接到外部样式表

<link rel="stylesheet" type="text/css" href="mystyle.css">

导入外部样式表

css通过 @import 引入其它的css文件。

<style type="text/css">
    @import url("a.css");
    @import url("b.css");
</style>

外部样式分为link引入和import引入两种方式。这两种方式区别：

1）link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
2）link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
3）link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
4）link支持使用Javascript控制DOM去改变样式；而@import不支持。

# CSS 选择器

# 基础选择器

通配符选择器

通配符选择器匹配html中所以元素，几乎不使用

* { color: red; }

标签选择器

标签选择器为HTML元素指定特定的样式

p { color: red; }

类选择器

类选择器可以为标有特定class的HTML元素指定特定的样式。类选择器以 . 来定义

.red { color: red; }

id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式。id选择器以 # 来定义

#red { color: red; }

# 派生选择器

派生选择器允许你根据文档的上下文关系来确定某个标签的样式

/* 指定p标签下的 所有 span标签颜色为红色 */
p span { color: red; }

/* 指定p标签下的 直接子元素 span标签颜色为红色 */
p>span { color: red; }

# 选择器分组

对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用 逗号 将需要分组的选择器分开

h1, h2, h3, h4, h5, h6 { font-size: 12px; }

# 选择器继承

CSS继承是指被包在内部的标签拥有外部标签的样式性质。CSS的一个主要特征就是继承，它依赖于祖先-后代关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以用于它的后代。

# 优先级

多重样式：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况。一般情况下，优先级如下：（外部样式）<（内部样式）<（内联样式）

优先权值：我们把特殊性分为4个等级，每个等级代表一类选择器，每个等级的值为其所代表的选择器的个数乘以这一等级的权值，最后把所有等级的值相加得出选择器的特殊值。

!important(10000) > 内联样式(1000) > id选择器(100) > 类、伪类和伪元素选择器(10) > 标签选择器(1)

!important，加在样式属性值后，权重值为 10000
内联样式，如：style=””，权重值为1000
ID选择器，如：#content，权重值为100
类、伪类，如：.content、:hover 权重值为10
标签选择器，如：div、p 权重值为1

CSS 优先级法则：

选择器都有一个权值，权值越大越优先。
当权值相等时，后出现的样式表设置要优于先出现的样式表设置。
创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式。
继承的CSS 样式不如后来指定的CSS 样式。
在同一组属性设置中标有 !important 规则的优先级最大。

案例

<style type="text/css">
    div{
        color:red !important;
    }
</style>

<div style="color:blue">这是一个div元素</div>

<!--
两条样式同时作用一个div，上面的样式权重值为10000+1，下面的行间样式的权重值为1000，所以文字的最终颜色为red
-->

04 表单/iframe 06 CSS 文本