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:11也是属性值。

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,诸如此类。