目录

CSS 规则集

ℹ️note
  • 除了选择器部分，每个规则集都应该包含在成对的大括号里（{}）。
  • 在每个声明里要用冒号（:）将属性与属性值分隔开。
  • 在每个规则集里要用分号（;）将各个声明分隔开。

选择器：详细的选择器指南

样式

<head>
  <style type="text/css">
    hr {color:sienna;}
    p {margin-left:20px;}
    body {background-image:url("images/back40.gif");}
  </style>
</head>
ℹ️note

如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式

<head>
    <!-- 设置：h3{color:blue;} -->
    <style type="text/css">
      /* 内部样式 */
      h3{color:green;}
    </style>
    <!-- 外部样式 style.css -->
    <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
    <h3>显示蓝色，是外部样式</h3>
</body>

CSS 背景：定义HTML元素的背景。

CSS 文本格式

h1 {text-align:center;} 居中对齐
p.date {text-align:right;}  右对齐
p.main {text-align:justify;}  两端对齐

h1 {text-decoration:overline;}  上划线
h2 {text-decoration:line-through;} 删除线
h3 {text-decoration:underline;} 下划线

p.uppercase {text-transform:uppercase;} 大写
p.lowercase {text-transform:lowercase;} 小写
p.capitalize {text-transform:capitalize;} 单词开首字母大写

CSS 字体: 定义字体，加粗，大小，文字样式。

serif 和 sans-serif 字体之间的区别: 有衬线和无衬线，Monospace：等宽字体

ℹ️note

如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"。

多个字体系列是用一个逗号分隔指明：p{font-family:"Times New Roman", Times, serif;}

常用字体组合

filter 属性用为元素添加可视效果，使用空格分隔多个滤镜。

CSS 链接

/* 只有鼠标在连接上才有下划线 */
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
/* 指定链接背景色 */
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

CSS 列表

ul.a {list-style-type: circle;} 圆圈
ul.b {list-style-type: square;} 方块
ol.c {list-style-type: upper-roman;} 大写罗马数字
ol.d {list-style-type: lower-alpha;} 小写字母
ℹ️note

list-style-type:none 属性可以用于移除小标记。默认情况下列表 ul 或 ol 还设置了内边距和外边距，可使用 margin:0 和 padding:0 来移除:

CSS 表格

table, th, td {
    border: 1px solid black;
    text-align:right;
}
/* 例子中的表格有双边框。这是因为表和th/td元素有独立的边界
为了显示一个表的单个边框，使用 border-collapse (折叠边框)属性。 */
table {
    border-collapse:collapse;
    width:100%;
    height:50px;
}

盒子模型

ℹ️note
  • 当指定一个 CSS 元素的宽度和高度属性时，只是设置内容区域的宽度和高度
  • 完整大小的元素，还必须包括内边距，边框和外边距。
  • 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
  • 总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
  • 尝试将内边距或外边距添加到元素的父元素和子元素

盒子模型

CSS 边框

CSS 轮廓（outline）

CSS margin(外边距)

CSS padding（填充）

CSS 尺寸 (Dimension) 控制元素的高度和宽度

CSS Display(显示) 与 Visibility（可见性）

ℹ️note
  • visibility:hidden 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
  • display:none 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

CSS Position(定位)

CSS 布局 - Overflow 控制内容溢出元素框时显示的方式。

CSS Float(浮动)

CSS 布局 - 水平 & 垂直对齐

🔥warning
  • 如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，这时候你可以使用 "clearfix(清除浮动)" 来解决该问题。
  • 我们可以在父元素上添加 overflow: auto; 来解决子元素溢出的问题
<div style="overflow: auto; border: 3px solid #4CAF50; padding: 5px;">
  <img style="float: right;" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
  菜鸟教程 - 学的不仅是技术，更是梦想！！！
</div>

CSS 弹性盒子

ℹ️note
  • 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
  • 弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行，即所有弹性子元素在一行内展示
  • 设置 direction 属性为 rtl (right-to-left), 弹性子元素的排列方式也会改变
ℹ️note
  • main-start: 弹性项在主轴方向上的开始位置，通常对应于弹性容器内容区域的起点。
  • main-end: 弹性项在主轴方向上的结束位置，通常对应于弹性容器内容区域的终点。
  • flex-direction 定义的方向就是从 main-start 到 main-end 的方向
  • flex-direction 定义的方向是主轴，与主轴垂直的是侧轴