基本语法

1
2
3
选择器 {
    属性名:属性值;
}
  • 选择器：要修饰的对象
  • 属性名：修饰对象使用某一个属性
  • 属性值：属性的取值

使用方式

css 有三种使用方式，分别是：内部样式、内联引用样式、外部样式

内部样式

1
2
3
4
5
6
7
<head>
    <style>
        p {
            font-size: 8px;
        }
    </style>
</head>

嵌入在 head 标签中，且使用 style 标签包裹

内联引用

1
2
3
<body>
    <p style="font-size: 8px;">This is an example of using inline css style</p>
</body>

外部引用

1
<link rel="stylesheet" type="text/css" href="style.css">

使用 link 标签在 head 标签之间引用

选择器

元素选择器

通过 tag 来选择 html 元素，比如选择所有的 p 元素

1
2
3
p {
    color: red;
}

类选择器

通过 class 属性值来选择相应的 html 元素，例如：

1
2
3
.example {
    color: green;
}

1
<p class="example">hhhh</p>

id 选择器

通过 id 属性值来选择相应的 html 元素，例如：

1
2
3
#example {
    color: blue;
}

1
<p id="example">hhhh</p>

属性选择器

通过元素的属性值来选择 html 元素，可以指定属性的值去特化一下

1
2
3
4
5
6
7
[value] {
    font-size: 8px;
}

[value=gt] {
    font-size: 15px;
}

1
2
<p value="">aaa</p>
<p value="gt">hhhh</p>

后代选择器

通过选择器的嵌套关系来选择 html 元素，例如选择所有 div 元素内的 p 元素

1
2
3
div p {
    font-size: 15px;
}

1
2
3
4
<div>
  <p>This is a text with 15px size.</p>
</div>
<p>hhhh</p>

子选择器

通过直接的父子元素关系来选择 html 元素，例如选择 div 元素下的直接子元素 p 元素。

1
2
3
div > p {
  font-style: italic;
}

1
2
3
<div>
  <p>This text is italicized.</p>
</div>

和后代选择器的区别在于：后代选择器会应用于任意深度的子元素，而子选择器只会选择子元素，而不会应用更深的后代元素

相邻兄弟选择器

相邻兄弟选择器：通过选择器之间的相邻兄弟元素关系来选择 html 元素，例如选择 div 元素后面的相邻兄弟元素 p 元素

1
2
3
div + p {
    font-size: 18px;
}

1
2
<div>This is some text</div>
<p>This text is larger than the text above</p>

通用选择器

其选择所有的 html 元素

1
2
3
4
* {
    margin: 0;
    padding: 0;
}

伪类选择器

通过元素的状态来选择 html 元素，例如选择鼠标悬停在链接上的 a 元素

1
2
3
a:hover {
    color: red;
}

伪类选择器通常有四种状态：

  • :link 未访问的链接
  • :visited 已访问的链接
  • :hover 鼠标悬浮到连接上，即移动在连接上
  • :active 选定的链接，被激活

伪元素选择器

通过元素的特定部分来选择 html 元素，例如选择段落开头的第一行或第一个字母

1
2
3
4
5
6
7
8
p::first-line {
    font-weight: bold;
}

p::first-letter {
    font-size: 24px;
    color: blue;
}

伪元素选择器也通常有四种状态：

  • :first-letter 为第一个字符的样式
  • :first-line 为第一行添加样式
  • :before 在元素内容的最前面添加的内容，需要配合 content 属性使用
  • :after 在元素内容的最后面添加的内容，需要配合 content 属性使用

结构性伪类选择器

结构性伪类选择器：通过元素在文档树中的位置关系来选择 html 元素，例如选择第一个子元素或者最后一个子元素

1
2
3
4
5
6
7
li:first-child {
    color: red;
}

li:last-child {
    color: blue;
}

否定伪类选择器

否定伪类选择器：通过排除某些元素来选择 html 元素，例如选择除了 class 属性值为 example 的所有 p 元素。

1
2
3
p:not(.example) {
    font-size: 16px;
}

属性值匹配选择器

属性值匹配选择器：通过元素的属性值来选择 html 元素，例如选择 href 属性值以 https:// 开头的所有 a 元素。

1
2
3
a[href^="https://"] {
  color: green;
}

选择器优先级

行内样式 > ID选择器 > 类选择器 > 标签选择器

后加载会覆盖先加载的同名样式

常用 css 属性

color

设置文本颜色

1
2
3
p {
    color: red;
}

font-size

设置字体大小

1
2
3
h1 {
    font-size: 36px;
}

属性值取值：

  • inherited 继承，默认从父标签继承字体大小。并且所有 css 属性的默认值都是 inherited
  • px 像素 pixel
  • % 相对于父标签字体大小的百分比
  • em 相对于父标签字体大小的倍数

注意: html 根目录元素的字体大小默认为 16px

font-family

设置字体样式

1
2
3
body {
    font-family: Arial, sans-serif;
}

字体可以写三种，分别是：首选，其次，备选

font-weight

设置字体粗细

1
2
3
strong {
    font-weight: bold;
}

  • normal 普通
  • bold 粗体

text-align

设置文本对齐方式

1
2
3
4
5
6
7
8
9
10
11
p {
  text-align: center;  /* 居中对齐 */
}

h1 {
  text-align: right;   /* 右对齐 */
}

div {
  text-align: justify; /* 两端对齐 */
}

属性可选值有：

  • left 左对齐
  • center 居中对齐
  • right 右对齐
  • justify 两端对齐

background-color

设置背景颜色，可选值和 color 一样

1
2
3
body {
    background-color: blue;
}

以下是和盒子模型相关的属性

盒子模型

盒子模型是网页布局的基础，将页面中所有元素都看作是一个盒子，通常盒子都包含以下几个属性：

  • border 边框
  • margin 外边距
  • padding 内边距
  • width 宽度
  • height 高度

border

设置边框样式，可选值包括 边框线宽 、 边框线样式 、 边框线颜色 ，也可以使用简写形式

1
2
3
4
5
6
7
8
9
p {
    border-width: 2px;      /* 边框线宽 */
    border-style: solid;   /* 边框线样式 */
    border-color: black;      /* 边框线颜色 */
}
/* 简写模式 */
div {
    border: 2px solid black;
}

margin

设置外边距，可选值包括 像素值 、 百分比值 、 auto （自动计算外边距）、 负值 等。

1
2
3
4
5
6
p {
    margin-top: 10px;     /* 上外边距 */
    margin-bottom: 20px;  /* 下外边距 */
    margin-left: auto;    /* 左外边距自动计算 */
    margin-right: 5%;     /* 右外边距百分比值 */
}

padding

设置内边距，可选值同 margin

1
2
3
4
p {
    padding-left: 10%;   /* 左内边距百分比值 */
    padding-right: 10px; /* 右内边距像素值 */
}

position

设置元素的定位方式，可选值包括：

  • static 静态定位
  • relative 相对定位
  • absolute 绝对定位
  • fixed 固定定位
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
div {
    position: absolute;                 /* 绝对定位 */
    top: 50%;                           /* 距离父元素顶部距离 */
    left: 50%;                          /* 距离父元素左侧距离 */
    transform: translate(-50%, -50%);   /* 居中定位 */
}

p {
    position: relative;     /* 相对定位 */
    top: 10px;              /* 相对位移距离 */
    left: 20px;             /* 相对位移距离 */
}

span {
    position: fixed; /* 固定定位 */
    top: 0;          /* 距离视口顶部距离 */
    right: 0;        /* 距离视口右侧距离 */
}

width

设置元素宽度，可选值包括 像素值 、 百分比值 、 auto（自动计算宽度）等

1
2
3
4
5
6
7
8
9
10
11
img {
    width: 100%;  /* 宽度百分比值 */
}

div {
    width: 300px; /* 宽度像素值 */
}

span {
    width: auto;  /* 自动计算宽度 */
}

height

设置元素高度，可选值同 width

1
2
3
4
5
6
7
8
9
10
11
video {
    height: 400px; /* 高度像素值 */
}

div {
    height: 50%;   /* 高度百分比值 */
}

p {
    height: auto;  /* 自动计算高度 */
}