从零开始学 Web 之 CSS（一）选择器

时间 2019-11-17

标签开始 web css 选择器栏目 HTML 繁體版

原文原文链接

你们好，这里是「 Daotin的梦呓」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」公众号，欢迎你们订阅关注。在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。如今就让咱们一块儿进入 Web 前端学习的冒险之旅吧！css

1、CSS概念

一、什么是 CSS？

CSS 全称为 Cascading Style Sheets，中文翻译为“层叠样式表”，简称 CSS 样式表，因此称之为层叠样式表（Cascading Stylesheet）简称 CSS。在网页制做时采用 CSS 技术，能够有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码作一些简单的修改，就能够改变同一页面的不一样部分，或者页数不一样的网页的外观和格式。html

二、CSS 的做用

简单地来说，CSS 能对你制做的网页进行布局、颜色、背景、宽度、高度、字体进行控制，让网页按您的美工设计布局的更加美观漂亮。样式是用来控制页面外观、设置元素对象属性的工具，使用样式可以使页面产生各类特殊的效果。前端

三、样式表书写位置

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        /* 样式表内容 */
    </style>
</head>

2、选择器

选择器是一个选择谁（标签）的过程。浏览器

选择器{属性:值; 属性:值; ......}

解释	属性：值
宽	width: 20px;
高	height: 20px;
背景颜色	background-color: red;
文字大小	font-size: 24px;
内容的水平对齐方式	text-align: left center right
首行缩进(1em = 一个汉字的长度16px)	text-indent: 2em;
文字颜色	color: red;

一、基础选择器

a. 标签选择器

标签{属性：值;}

特色：标签选择器定义以后，会将页面全部的元素都执行这个标签样式。服务器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div{
            font-size: 50px;
            color: red
        }
    </style>
</head>
<body>
    <div>等你下课</div>
</body>
</html>

颜色的显示方式工具

直接写颜色的名称（好比：red，green等）
十六进制显示颜色

（#000000; 前2为表明红色，中间2位表明绿色，后边2位表明蓝色。 PS： #EEE == #EEEEEE； #333 == #333333）布局

rgb(120, 120, 120)
A表明alpha 不透明度，值 0~1（好比：rgb(120,120,120. 0.5)）PS：不透明度也可使用：opacity:0.2; 来设置。

b. 类选择器（重点）

.自定义类名{属性:值;  属性:值; }

一、谁调用，谁生效。post

二、一个标签能够调用多个类选择器。多个标签能够调用同一个类选择器。学习

类选择器命名规则字体

不能用纯数字或者数字开头来定义类名；
不能使用特殊符号或者特殊符号开头（_ 除外）来定义类名；
不建议使用汉字来定义类名；
不推荐使用属性或者属性的值来定义类名。

类选择器经常使用的命名

c. ID选择器

#自定义名称{属性:值;}

特色：
一、一个 ID 选择器在一个页面只能使用一次。若是使用2次或者2次以上，不符合 w3c 规范，JS 调用会出问题。
二、一个标签只能使用一个 ID 选择器。
3.一个标签能够同时使用类选择器和 ID 选择器。

d. 通配符选择器

*{属性:值;}

特色：给全部的标签都使用相同的样式。
PS：★不推荐使用，增长浏览器和服务器负担。

二、复合选择器

两个或者两个以上的基础选择器经过不一样的方式链接在一块儿。

a. 交集选择器

标签+类（ID）选择器{属性：值；}

特色：即要知足使用了某个标签，还要知足使用了类选择器或者ID选择器。

b. 后代选择器（重点）

选择器+空格+选择器{属性：值;}

后代选择器首选要知足包含（嵌套）关系。

父集元素在前边，子集元素在后边。

特色：无限制隔代。（下面都会生效）

只要能表明标签，标签、类选择器、ID选择器自由组合。

c. 子代选择器

选择器>选择器{属性:值;}

选中直接下一代元素，下下一代就选不中了。

d. 并集选择器

选择器+，+选择器+，选择器{属性:值;}