Mki's Blog

CSS学习(一):属性、选择器、语句

基本构造

选择器 + 声明块

h1是选择器,{}内的是声明块,xxx: xx是声明。

h1 {
    color: blue;
    background: yellow;
}

选择器

选择器可以通过各种规则匹配多元元素

类型/元素选择器

直接设置了所有这一类型元素的属性,如下,所有p标签包含的文本会变成红色。

p {
    color: red;
}

类选择器

设置某一class的属性

<div class="nav">it's a nav</div>
.nav {
    background-color: red
}

ID选择器

设置某一id的属性

<p id="message">it's a message</p>
#message {
    color: green;   
}

通用选择器

选中所有元素

* {
    color: red;
}

存在和值属性选择器

通过属性的值来选择

<p data="example">这会变成红色</p>
<p data="green">这是绿色</p>
<p data="green secret">这是黄色</p>
[data] {   /*对于任何有data属性的元素*/
    color: red;
}
[data="green"] {  /*对于data只为green的元素*/
    color: green;
}
[data~="secret"] { /*对于data有secret的元素*/
    color: yellow;
}

注:子串值属性选择器就是存在和值属性选择器的正则表达形式

伪类

伪类是以冒号开头,添加在选择器末尾的关键字。作用是设置特定情况下的元素样式

a:visited {  /*这是一个伪类,设置了a被访问之后的颜色*/
    color: blue;
}

伪元素

伪元素是以两个冒号开头的关键字,同样也是添加在选择器末尾。作用是去选择某个元素的某个部分。

<a id="secret"></a>
[id=secret]::after {
    content: '+'
} /*在每个id为message的元素后面添加一个加号*/

组合器和选择器组

选择器组

A,B 逗号分隔,匹配满足A或者B的任意元素

table td, table th {
    font: 1em;
}

后代选择器

A B 空格分割,匹配A元素结点中的B元素。

table thead th { /*匹配table节点中的thead节点里的th节点*/
    border: 1px; 
}

子选择器

A>B 大于号分割,匹配A元素的直接子节点B元素

table > thead {
    border: 1px; 
}

相邻兄弟选择器

A+B 匹配B元素,前提是B是A的下一个兄弟节点。

通用兄弟选择器

A~B 匹配B元素,前提是B和A有相同的父节点。

数值与单位

单位

  • px 像素 绝对单位
  • em 相对单位,继承父元素字体大小
  • rem 相对单位,等于默认基础字体大小。
  • 百分比 相对单位

颜色

  • 颜色关键字 red
  • RGB rgb(255.0.0)
  • 十六进制 #ff0000
  • HSL 色调,饱和度,明度 hsl(0,100%,50%)
  • RGBA HSLA 在rgb和hsl的基础上增加了透明度
  • 不透明度 opacity

css语句

@规则

  1. @charset 定义字符集
  2. @import 包含外部css样式表
  3. 等等

注释

/* 这是一句注释 */

! important

这是一句力量很强的魔法咒语,使某条规则最优先。