快速学习Web前端：CSS入门

阅读：评论：0

快速学习Web前端：CSS入门

由David发表在天码营

在Web早期样式和内容是不区分的，比如可以通过<bold>标签来显示加粗字体。随着页面内容的丰富，浏览器性能的提高，内容和样式的耦合使得HTML文件难以理解和维护。CSS的出现正是为了将样式分离到独立的文件中。

层叠样式表（Cascading Style Sheets，CSS），又称串样式列表、层次结构式样式表文件，一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。

CSS 的历史

最初主流浏览器为了显示更丰富的web文档，不断地将新的标签和属性添加到HTML标签中。这最终使得文档内容与文档样式偶合在一起，难以创建内容清晰的文档。为了解决这个问题，万维网联盟在 HTML 4.0 之外提出层叠样式表（CSS），使用CSS完成样式与内容的分离。

样式与内容分离是计算机软件开发中的一条重要原则。不仅可以更清晰地分别表达样式或者内容，更重要的是这一分离使得二者不再耦合，样式变得可复用、组件化。

引入 CSS

我们知道HTML文件中根节点是<html>标签，它包含<head>和<body>。我们在<head>中可以引入外部的样式文件，文件中的样式将被应用到当前HTML。例如在上一章中的hello.html中引入我们写好的hello.css：

<link rel="stylesheet" href="./hello.css">

引入前后的变化如下图：

其他引入方式

除了在<head>中引入外部CSS文件，还有两种方式可以引入样式：

设置标签的style属性，例如：
```
 <a style="color: red">Strawberry</a>
```
在<html>的任何地方，添加<style>标签，语法同外部CSS文件。例如：
```
 <style>a{color: red;}</style>
```

在实际项目中，一般在<head>引入外部样式文件。相比于上述两种方式，样式文件的分离：

利于协同工作。样式往往由设计师负责，而内容往往由前端工程师负责。这样的分离有利于他们的分工。
样式可复用。引入样式时，可以对不同的样式文件进行组合，便于网站风格的建立和管理。

一个 CSS 文件

这是一个简单的 CSS 文件，先不必在意其细节，大致观察一下CSS的语法。

div p{padding-left: 20px;
}body img, body div{float: left;
}.avatar{width: 100px;height: 100px;
}

可以观察到上述文件分为3部分内容，每一内容都包含一行逗号分隔的字符串、紧接着的一组大括号、以及大括号内的内容。

每一部分称为一个规则（rule），CSS是由多组“规则”组成的；
大括号前的字符串称为选择器（selector），它用来指定该规则用于怎样的元素；
大括号内是“特性”列表，每个特性都用分号结束。

“特性”由“属性”（property）和“值”（value）组成，以冒号分隔：

属性（property）：某一种特性的名称；
值（value）：该特性的设置值。

类型选择器

类型选择器是最常用的CSS选择器，用于选择指定类型的HTML标签。请看：

body{margin: 50px;
}div p{padding-left: 20px;
}body img, body div{float: left;
}

设置body：外边距为50像素；
设置body下的p：左侧内边距为20像素；
设置body下的img和body下的div：向左浮动。

现在页面便有了边距，并且图片和下面的文字排成了一行：

类选择器

类选择器用于选择指定class的HTML标签，在CSS库中很常见。首先需要给HTML标签设置class：

<img src="./catty.jpeg" class="avatar">

然后在CSS中用.来选择对应的类：

.avatar{width: 100px;height: 100px;border-radius: 50px;
}

我们设置<img>的长和高使之变成矩形，再把边框圆角设为半边长，此时图片就变成了圆形：

ID选择器

ID选择器用于选择指定id（这是任何HTML标签都可以有的属性，其定义方式见下面的代码）的HTML标签，常用于自定义样式。同样地，先给HTML标签设置id：

<h2 id="subtitle">i am a little, </h2>

在CSS中使用ID选择器：

#subtitle{font-style: italic;color: grey;
}

这样便可以改变h2的字体和颜色了：

伪类选择器

顾名思义，伪类选择器用于选择伪类。伪类（如:hover,:focus）是浏览器生成的，不出现在HTML文件中，主要用于标识用户操作造成的元素状态改变。

例如鼠标悬停时，鼠标所在的元素便会拥有:focus伪类。继续给.avatar类添加一个伪类：

.avatar:hover{filter: blur(20px);-webkit-filter: blur(5px);cursor: pointer;
}

在鼠标悬停在图片上时：

图片会应用一个滤光器：以5像素的尺度进行模糊；
-webkit-是一种CSS前缀，用来支持webkit核心的浏览器；
鼠标指针会变成手形。

请使用 Chrome 内核的浏览器！鉴于优秀的兼容性和对HTML5、CSS3的支持，请您在整个课程的学习过程中都使用Chrome浏览器。

说起CSS前缀，一般CSS属性名都是以字母起始的，它们由W3C标准化。浏览器厂商为了支持一些新的尚未标准化的特性，会提供一些额外的CSS属性。这些属性都会添加该厂商定义的前缀。有四种常见的CSS前缀：

-moz-：支持Firefox
-webkit-：支持Safari、Chrome
-o-：支持Opera
-ms-：支持Internet Explorer

其他选择器

事实上CSS共有5种基本选择器和2种伪类选择器。

基本选择器

类型选择器（h1,p等）：用于选择指定类型的HTML标签；
类选择器（.classname）：用于选择指定class的HTML标签；
ID选择器（#idname）：用于选择指定id的HTML标签；
通配符选择器（*）：用于选择所有类型的HTML标签；
属性选择器（[foo='bar']）：用于选择某属性为指定值的HTML标签；

属性选择器用来选择特定属性值的元素，例如div[class=avatar]可以选择class属性为avatar的<div>元素，当然HTML元素的属性很多，属性选择器可以匹配任何属性。

属性选择器还支持更复杂的匹配，例如 [name^="sz_"] 表示属性 name 的值具有前缀：sz_。

伪选择器

伪类选择器：用于选择特定状态的元素。
伪元素选择器：如:before,:first-letter，用于向某些选择器设置特殊效果，以实现复杂的样式。

组合选择符可描述元素之间的层级关系，例如：A > B 将会选择 A 下一层的元素 B。如果以空格间隔，则会匹配任何一级的子元素。

更多CSS选择器的信息可参考：W3C School: CSS 选择器。

更多文章请访问天码营网站

本文发布于:2024-02-01 04:30:11，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/170673300933864.html

上一篇：新建一个连接plcle与oracle,Linux

下一篇：uniapp

标签：入门快速 Web CSS

留言与评论（共有 0 条评论）