基础

HTML与CSS核心基础

  • 使用多个类别选择器的时候中间用空格隔开。
  • 对同一元素不能使用两个ID选择器。
  • 一个ID选择器不能用于两个元素，和JS有关。
  • 复合选择器
    • “交集”选择器：div.special{ };div#special{ } 属性同时满足两者元素才生效
    • “并集”选择器：div,h1.first,p.special{ } 属性对任意一个元素都生效
    • 后代选择器：div h1.first span.firstletter 后者必须在前者元素标记之内
  • CSS的继承特性
    • 行内样式>ID样式>类别样式>标记样式。

盒子模型

  • 属性值的简写形式
    • 如果给出2个属性值（空格），前者表示上下边框，后者表示左右边框的属性；
    • 如果给出3个属性值，前者表示上边框，中间表示左右边框，后者表示下边框的属性；
    • 如果给出4个属性值，依次表示上右下左的属性；
  • span行内元素水平间距的叠加的，div块级元素竖直间距的取较大值。
  • 盒子的浮动(float)与定位(position)
    • 使用clear清除浮动的影响
    • 盒子的定位，static：默认，relative：相对定位，absolute：绝对定位，fixed：固定定位。
    • 盒子的display属性

CSS变量

在编写css公共样式的时候，我们都会声明很多通用的颜色、字号等。现在我们可以通过声明CSS变量来实现了

变量的声明

CSS变量声明是字母前加两个横线（--）如：

body{
　　--Colors:#dfdfdf;
　　--fS16px:16px;
}

上述代码中，body选择器中声明了Colors和fS16px两个变量。而使用‘--’是因为$被Sass占用了，@被Less占用了，所以是为了区分它们。

同时，你也可以用--root{}来存放所有变量，在下边使用的时候直接调用即可。如：

--root{
　　--Colors:#dfdfdf;
　　--fS16px:16px;
}

变量的声明对大小写敏感。如：colors和Colors表示两个不同的变量

var()函数

var函数用来读取变量

a{
  color:var(--Colors)      
}

var()函数还可以使用第二个参数，表示变量的默认值。如果该变量不存在，就会使用这个默认值。
color: var(--Colors, #e5e5e5);
第二个参数不处理内部的逗号或空格，都视作参数的一部分。

var(--fontF, "Roboto", "Helvetica");
var(--Margins, 15px 20px 25px);

var()函数还可以用在变量声明中

--root{
      --bgcolors:red;
      --fColor:var(--bgcolors)        
}

注意：变量只能作为属性值，不能作为属性名

变量值的类型

如果变量值是字符串，则可以与其他字符串拼接

--far:'hello';
--foo:var(--far)',world';

如果是数值，则不可以拼接

--far:20;
--foo:var(--far)'px'; //无效

但可以通过calc()函数，将他们拼接起来

--far:20;
--foo:calc(var(--far)*1px);

如果变量值带单位，则不能写成字符串形式

--far:'20px';
margin-top:var(--far); //无效

--far:20px;
margin-top:var(--far); //有效

作用域

<style>
  :root { --color: blue; }
  div { --color: green; }
  #alert { --color: red; }
  * { color: var(--color); }
</style>

<p>蓝色</p>
<div>绿色</div>
<div id="alert">红色</div>

上面代码中，三个选择器都声明了--color变量。不同元素读取这个变量的时候，会采用优先级最高的规则，因此三段文字的颜色是不一样的。
这就是说，变量的作用域就是它所在的选择器的有效范围。
所以一些通用的变量值，最好声明在--root{}内

Last Updated:
Contributors: huangyanfu