date: 2024-01-30
title: CSS-Introduction
author:
  - AllenYGY
status: DONE
tags:
  - NOTE
  - WEB
  - CSS
created: 2024-01-30T00:22
updated: 2024-05-31T01:18
publish: True

CSS-Introduction

CSS

Cascading Style Sheets 层叠样式表
CSS世界的诞生就是为图文信息展示服务的

Concept & Terms

Term 1

属性 height, weight,...

Term 2

值

整数值，如z-index:1中的1，属于<integer>，同时也属于<number>
数值，如line-height:1.5中的1.5，属于<number>
百分比值，如padding:50%中的50%，属于<percent>
长度值，如99px
颜色值，如#999

Term 3

关键字：transparent

泛关键字： inherit

Term 4

变量：CSS2中不多见>

Term 5

长度单位: px, em

百分号%不是长度单位
$长度单位$ 绝对长度单位：px，还有pt, cm, mm, pc, 几乎不用
相对长度单位

相对字体长度单位: em,ex 还有CSS3中的rem,ch；
相对视区长度单位：vh,vw,vmin,vmax；

Term 6

功能符：值以函数的形式指定（就是被括号括起来的那种）

主要用来表示颜色（rgba和hsla）
背景图片地址（url）
元素属性值、计算（calc）和过渡效果等
如rgba(0,0,0,.5)、url('css-world.png')、attr('href')和scale(-1)

Term 7

属性值：属性冒号后面的所有内容统一称为属性值。

例如，1px solid rgb(0,0,0)就可以称为属性值
它是由“值+关键字+功能符”构成的。属性值也可以由单一内容构成。
例如，z-index:1的1也是属性值。

Term 8

声明：属性名加上属性值就是声明

例如：

color: transparent;

Term 9

声明块：声明块是花括号（{}）包裹的一系列声明

例如：

{
　 height: 99px;
　 color: transparent;
}

Term 10

规则或规则集: 出现了选择器，而且后面还跟着声明块

例如：

.vocabulary {
　 height: 99px;
　 color: transparent;
}

Term 11

选择器：选择器是用来瞄准目标元素的东西

类选择器：指以“.”这个点号开头的选择器。

很多元素可以应用同一个类选择器。
“类”，天生就是被公用的命。

ID选择器：“#”打头，权重相当高。ID一般指向唯一元素。

但是，在CSS中，ID样式出现在多个不同的元素上并不会只渲染第一个，而是雨露均沾。但显然不推荐这么做。
属性选择器：指含有[]的选择器
伪类选择器：一般指前面有个英文冒号（:）的选择器

如:first-child 或:last-child等。
伪元素选择器：就是有连续两个冒号的选择器

如::first-line::first-letter、::before和::after。

Term 12

关系选择器：关系选择器是指根据与其他元素的关系选择元素的选择器

常见的符号有空格、>、~，还有+等，这些都是非常常用的选择器。

后代选择器：选择所有合乎规则的后代元素。空格连接。
相邻后代选择器：仅仅选择合乎规则的儿子元素，孙子、重孙元素忽略，因此又称“子选择器”。

>连接。适用于IE7以上版本。
兄弟选择器：选择当前元素后面的所有合乎规则的兄弟元素。

~连接。适用于IE7以上版本。
相邻兄弟选择器：仅仅选择当前元素相邻的那个合乎规则的兄弟元素。

+连接。适用于IE7以上版本。

Term 13

@规则: @规则指的是以@字符开始的一些规则

例如： @media、@font-face、@page或者@support，诸如此类。