简介

CSS（Cascading Style Sheets，层叠样式表）

描述了 HTML 元素在屏幕、纸张或其他媒体上的显示方式

vscode：安装live Server插件

语法

1
2
3
4
p {
  color: red;
  text-align: center;
}

导入

存在多个样式，就近原则（覆盖原则）

外部

创建 .css 文件

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

内部

<head> 内创建 <style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
}
</style>
</head>
    
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

内联

不推荐

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>

选择器

基本选择器

优先级：id > class > 标签

元素选择器

1
2
3
4
p {
  text-align: center;
  color: red;
}

id 选择器

1
2
3
4
#para1 {
  text-align: center;
  color: red;
}

类选择器

1
2
3
4
.center {
  text-align: center;
  color: red;
}

通用选择器

选择页面上的所有 HTML 元素

1
2
3
4
* {
  text-align: center;
  color: blue;
}

层次选择器

后代选择器

指定元素内部的所有符合条件的后代元素

1
2
3
div p {
  background-color: yellow;
}

子选择器

  • 选择指定元素的直接子元素
  • 注意：
    1. 对html文件内所有指定元素生效
    2. 子元素：指定元素的直接下一级，不可跳一级或多级，如果没有则不选中
1
2
3
li > p {
  color: red;
}

相邻兄弟选择器

  • 选择与指定元素在同一层级且紧接在它后面的元素
  • 注意：
    1. 同一层级
    2. 紧接在后面的1个兄弟元素，如果没有则不选中
1
2
3
h2 + p {
  color: green;
}

选择同一层级、紧跟在<h2>后面的一个<p>元素

通用兄弟选择器

  • 选择与指定元素在同一层级的所有后续兄弟元素
  • 注意：
    1. 同一层级
    2. 后面的所有兄弟元素，如果没有则补不选中
1
2
3
h2 ~ p {
  color: black;
}

选择同一层级、在<h2>后面的所有兄弟元素

属性选择器

1
2
3
a[target="_blank"] {
  background-color: yellow;
}
  • =：等于
  • *=：子串（不必是一个完整的单词）
  • ^=：以…开头（不必是一个完整的单词）
  • $=：以…结尾（不必是一个完整的单词）
  • ~=：包含（需要包含一个完整单词，单词之间由空格分隔）
  • |=：指定值（必须是一个完整的单词，要么单独，要么后跟 - ）

伪类选择器

伪类用于定义元素的特殊状态：

  • 当用户将鼠标移到元素上
  • 已访问和未访问的链接
  • 当元素获得焦点时

动态伪类

  • :hover：鼠标停留在元素上的状态
  • :active：鼠标按住未释放的状态（元素激活的状态）
  • :link：超链接未访问的状态
  • :visited：超链接访问过的状态

结构伪类

  • :first-child 选择父元素的第一个子元素
  • :last-child选择父元素的最后一个子元素
  • :nth-child(n)选择父元素的第n个子元素
  • :nth-of-type(n)选择父元素下相同类型元素的第n个子元素

美化

颜色

color

rgb：rgb(red,green,blue)

rgba：rgb(red,green,blue,alpha)

十六进制：#000000（黑）

名称：red

字体

颜色：color

字体系列：font-family （设置多个，浏览器不支持可用后一种字体）

字体样式：font-style

  1. normal：正常
  2. italic：斜体

字体大小：font-size 默认大小为 16px （16px=1em）

  1. px：像素
  2. em：1em=16px

文本

颜色：color

背景颜色：background-color

对齐方式：text-align

  1. centre：居中
  2. right/left：向右/左对齐
  3. justify：左、右外边距对齐（每行宽度相等）

修饰：text-decoration

  1. none：主要用于删除链接的下划线
  2. overline：上划线
  3. line-through：中划线
  4. underline：下划线（不建议强调指出不是链接的文本，因为这常常混淆用户）

缩进：text-indent

  1. px
  2. em：常用（2em）

行高：line-height

行高和块高一致，可以让文字上下居中（line-height=height）

文本阴影：text-shadow: h-shadow v-shadow blur color;

  1. h-shadow：水平阴影（必选）
  2. v-shadow：垂直阴影（必选）
  3. blur：阴影距离（可选）
  4. color：阴影颜色（可选）

列表

列表类型：list-style

  1. none：去掉圆点
  2. circle：空心圆
  3. decimal：数字
  4. square：正方形

背景

背景颜色：background-color （可设置渐变色）

背景图片：background-image 默认：平铺重复显示，以覆盖整个元素实体

背景重复：background-repeat

  1. no-repeat：不平铺
  2. repeat-x：水平方向平铺
  3. repeat-y：竖直方向平铺
1
2
3
4
div {
    background-image: url(../img/LofiSu1.jpg);
    background-repeat: no-repeat;
}

不透明度

opacity:（0.0~1.0）

  • 完全不透明：opacity: 1;
  • 半透明：opacity: 0.5;
  • 完全透明：opacity: 0;

渐变

直接调用现成css：grabient

盒子模型

所有HTML元素可以看作盒子，在CSS中，”box model”这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒子模型

  • margin：外边距-清除边框外的区域，外边距是透明的

    （body总有一个默认的外边距，可设置为0）

  • border：边框-围绕在内边距和内容外的边框

  • padding：内边距- 清除内容周围的区域，内边距是透明的

  • content：内容-盒子的内容，显示文本和图像

宽度 高度

当你指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度

完整大小的元素，你还必须添加内边距，边框和外边距

margin+border+padding+content

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

边框

边框样式：border-style

  1. none：不显示边框
  2. solid：实线
  3. dashed：短的方形虚线

边框宽度：border-width

  • thin、medium 或 thick；px、em

边框颜色：border-color

单条边：border-top、border-right、border-bottom、border-left

  • （上，右，下，左）、（上，左右，下）、（上下，左右）

圆角边框：border-radius

  • 顺序：左上，右上，右下，左下
  • 圆圈：圆角 = 半径

阴影：box-shadow: h-shadow v-shadow blur color

  • h-shadow：水平阴影
  • v-shadow：竖直阴影
  • blur：阴影距离
  • color：颜色

布局

blog：(图文详细)最通俗易懂的CSS 浮动float属性详解

标准文档流

文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。

文档流

块级元素：

  • 独占一行，不能与其他任何元素并列
  • 能接受宽、高
  • 如果不设置宽度，那么宽度将默认变为父亲的100%，即和父亲一样宽

内联元素：

  • 与其他元素并排
  • 不能设置宽、高。默认的宽度就是文字的宽度

显示

diplay:

  • none：不显示
  • block：块元素（此元素前后带有换行符）
  • inline：行内元素
  • inline-block：行内块元素

浮动

将元素从其正常文档流中移出，并使其向左或向右浮动的布局方式。

浮动：float

  • left：向左浮动，周围内容环绕其右侧
  • right：向右浮动，周围内容环绕其左侧
  • inherit：继承父元素的 float 属性值

清除浮动：clear:

  • left：元素左侧不允许有浮动元素
  • right：元素右侧不允许有浮动元素
  • both：元素两侧不允许有浮动元素

父级边框塌陷

父容器无法包含浮动子元素，导致高度塌陷

border_collapse

1.增加父级元素高度：（不推荐）高度需要多次尝试，不能从本质上解决问题

1
2
3
4
#father {
    border: 2px solid black;
    height: 1000px;  
}

add_height

**2.增加一个空的div标签，清除浮动：**有效，但造成代码冗余

1
<div class="clear"></div>
1
2
3
4
5
.clear {
    clear: both;
    margin: 0;
    padding: 0;
}

add_empty_element

**3.overflow：**在有下拉菜单的场景，下拉菜单会显示不出来，而且很丑。

  • scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
  • hidden：内容会被修剪，并且其余内容不可见
  • auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
1
2
3
4
5
#content {
    width: 200px;
    height: 150px;
    overflow: hidden;
}

overflow

3.父类增加伪类 after：（推荐）没有任何副作用

1
2
3
4
5
#father::after {
    content: '';
    display: block;
    clear: both;
}

after

定位

相对定位：position: relative;

  • 相对原来位置，进行偏移（top:、right:、bottom:、left:）
  • 仍在标准文档流中，原来的位置保留

绝对定位： position: absolute;

  • 相对最近的存在定位的父级元素偏移（top:、right:、bottom:、left:）
  • 如果没有，则相对浏览器窗口偏移
  • 不在标准文档流中，原来位置不会被保留

固定定位：position: fixed;

  • 相对浏览器窗口定位（top:、right:、bottom:、left:）
  • 屏幕滚动时元素不改变位置
  • 不在标准文档流中，原来位置不会被保留

静态定位：position: static;（默认）

z-index：z-index 设置元素的堆叠顺序，拥有更高顺序的元素会处于上层