CSS 基础篇

最新推荐文章于 2024-01-04 07:00:00 发布

原创最新推荐文章于 2024-01-04 07:00:00 发布 · 395 阅读

CC 4.0 BY-SA版权

1.CSS是什么？

css（层叠样式表）英文全称：Cascading Style Sheets，是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。

2.CSS语言特点

1.丰富的样式定义
CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力。
2.易于使用和修改
CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用，外部样式表可以极大提高工作效率。
3.层叠
简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。
3.1层叠次序问题
1.浏览器缺省设置 2.外部样式表 3.内部样式表（位于标签内部） 4.内联样式（在 HTML 元素内部）层叠次序优先权依次提高，其中4.内联样式拥有最高优先权。
4.页面压缩
将样式的声明单独放到CSS样式表中，可以大大的减小页面的体积，
CSS样式表的复用更大程度的缩减了页面的体积，减少下载的时间。

3.语言基础——属性和属性值

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

属性

属性的名字是一个合法的标识符，它们是CSS语法中的关键字。一种属性规定了格式修饰的一个方面。例如：color是文本的颜色属性。

属性值

属性值分为整数和实数、长度量、百分数量等

下面的示意图为您展示了上面这段代码的结构：
Alt
如果值为若干单词，则要给值加引号

p {font-family: "sans serif";}

4.CSS选择器

CSS选择器具体分为1.类型（上下文）选择器2.class选择器3.id选择器4.属性选择器，选择器可以用来选择被标记的某一模块，使其可以添加各种样式

4.1类型（上下文）选择器

CSS中的一种选择器是元素类型的名称。使用这种选择器，可以向这种元素类型的每个实例上应用声明
例：你希望列表中的 strong 元素变为斜体字

li strong {
    font-style: italic;            //css代码
    font-weight: normal;
  }

<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
//HTML代码

4.2id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
例：定义段落文字为红色

#red {color:red;} 					//css代码

<p id="red">这个段落是红色。</p> 				//html代码

4.3class选择器

CLASS属性允许向一组在CLASS属性上具有相同值的元素应用声明。BODY内的所有元素都有CLASS属性，从本质上讲，可以使用CLASS属性来分类元素
例：拥有 center 类的 HTML 元素均为居中。

.center {text-align: center}  		//css代码

<h1 class="center">
This heading will be center-aligned
</h1>                                 //html代码（h1 和 p 元素都有 center 类，这意味着两者都将遵守 ".center" 选择器中的规则）
<p class="center">
This paragraph will also be center-aligned.
</p>

4.4属性选择器

对带有指定属性的 HTML 元素设置样式。
例：带有 title 属性的所有元素设置样式。

[title]{color:red;}                         //css代码

 <h2 title="Hello world">Hello world</h2>            						//html代码
<a title="W3School" href="http://w3school.com.cn">W3School</a>

4.5CSS 中的后代选择器

后代选择器（descendant selector）又称为包含选择器，后代选择器可以选择作为某元素后代的元素。
例：对 h1 元素中的 em 元素应用样式。

h1 em {color:red;}          //css代码

注：有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。
如果写作 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深

4.6选择器分组（交集选择器）

假设希望 h2 元素和段落都有灰色。为达到这个目的，最容易的做法是使用以下声明

h2, p {color:gray;}          //css代码

4.7子元素选择器

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素
例：选择只作为 h1 元素子元素的 strong 元素

h1 > strong {color:red;}  				 //css代码

4.8CSS 相邻兄弟选择器

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

h1 + p {margin-top:50px;}          //css代码（选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素。）

4.9选择器间的权重（优先级）问题

第一优先级：无条件优先的属性只需要在属性后面使用！important。它会覆盖页面内任何位置定义的元素样式。ie6不支持该属性。
第二优先级：在html中给元素标签加style，即内联样式。该方法会造成css难以管理，所以不推荐使用。
第三优先级：由一个或多个id选择器来定义。例如，#id{margin:0;}会覆盖.classname{margin:3pxl}
第四优先级：由一个或多个类选择器、属性选择器、伪类选择器定义。如.classname{margin:3px}会覆盖div{margin:6px;}
第五优先级：由一个或多个类型选择器定义。如div{marigin:6px;}覆盖*{margin:10px；}
第六优先级：通配选择器，如*{marigin:6px;}
注：如果两个规则的特殊性相同，那么后定义的规则优先。
我们把特殊性分为4个等级，每一个等级代表一类选择器，每个等级的值相加得出选择器的权重。
4个等级的定义如下：
第一等级：代表内联样式，如style=""，权值为 1000
第二等级：代表id选择器，如#content，权值为100
第三等级：代表类，伪类和属性选择器，如.content，权值为10
第四等级：代表标签选择器和伪元素选择器，如div p，权值为1
通用选择器（*），子选择器（>），和相邻同胞选择器（+）并不在这个等级中，所以他们的权值为0

作者：Coder_Chang
来源：优快云
原文：https://blog.youkuaiyun.com/coder_chang/article/details/72777943
版权声明：本文为博主原创文章，转载请附上博文链接！

4.10锚伪类

在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */

1.注：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
2.注：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。