CSS知识全面汇总——速查手册

2023-12-04 16:30:35

CSS

文章目录

CSS
- 简介
- - id选择器
  - class选择器
- CSS创建
- - 外部样式表
  - 内部样式表
  - 内联样式
  - 多重样式优先级
- 背景
- 文本
- 字体
- 链接
- 列表
- 表格
- 元素显示模式
- - 块元素
  - 行内元素
  - 行内块元素
  - 显示模式的转换
- 盒子模型
- 边框
- 轮廓
- 外边距
- 填充
- 分组与嵌套
- 显示
- 浮动
- 定位
- Overflow
- 对齐
- 组合选择符
- 伪类
- 伪元素
- 导航栏
- 下拉菜单
- 提示框
- 图片
- 属性选择器
- 表单
- 媒体类型
- 网页布局

简介

p
{
    color:red;
    text-align:center;
}

不要在属性值与单位之间留有空格

CSS注释以 /* 开始, 以 / 结束

id选择器

#para1
{
    text-align:center;
    color:red;
}

id和class不要以数字开头

class选择器

.center {text-align:center;}

指定特定的HTML元素使用class。

p.center {text-align:center;}

CSS创建

插入样式表的方法有三种:

外部样式表(External style sheet)
内部样式表(Internal style sheet)
内联样式(Inline style)

外部样式表

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

内部样式表

单个文档需要特殊的样式时，就应该使用内部样式表。

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

内联样式

在相关的标签内使用样式（style）属性。

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

多重样式优先级

（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

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

背景

背景颜色

body {background-color:#b0c4de;}

背景图像

body {background-image:url('paper.gif');}

不同的图片设置多个不同的属性

#example1 {
    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

平铺与定位

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

背景大小

div
{
    background:url(img_flwr.gif);
    background-size:80px 60px;
    background-repeat:no-repeat;
}

div
{
    background:url(img_flwr.gif);
    background-size:100% 100%;
    background-repeat:no-repeat;
}

指定背景图像的定位区域。

div
{
    background:url(img_flwr.gif);
    background-repeat:no-repeat;
    background-size:100% 100%;
    background-origin:content-box;
}

背景剪裁属性是从指定位置开始绘制。

#example1 { 
    border: 10px dotted black; 
    padding: 35px; 
    background: yellow; 
    background-clip: content-box; 
}

线性渐变

#grad {
  height: 200px;
  background-image: linear-gradient(to right, red , yellow);
}

#grad {
  height: 200px;
  background-image: linear-gradient(to bottom right, red, yellow);
}

#grad {
  /* 多颜色 */
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}

/*带有指定的角度的线性渐变*/
#grad {
  background-image: linear-gradient(-90deg, red, yellow);
}

/*使用透明度*/
#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

#grad {
  /* 重复的线性渐变 */
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

径向渐变

#grad {
  background-image: radial-gradient(red, yellow, green);
}
/*不均匀渐变*/
#grad {
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}
/*特定形状*/
#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}
/*不同尺寸大小关键字*/
#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}

合并属性

body {background:#ffffff url('img_tree.png') no-repeat right top;}

当使用简写属性时，属性值的顺序为：:

background-color
background-image
background-repeat
background-attachment
background-position

文本

文本颜色

body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

对齐方式

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;}

a {text-decoration:none;}

文本转换

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

文本缩进

p {text-indent:50px;}

字体

字体系列

p{font-family:"Times New Roman", Times, serif;}

如果浏览器不支持第一种字体，他将尝试下一种字体。

字体样式

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}  /*倾斜*/

字体大小

h1 {font-size:40px;}

为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。

1 {font-size:2.5em;} /* 40px/16=2.5em */

1em的默认大小是16px。

百分比

body {font-size:100%;}

链接

不同链接状态样式

a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */

a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面

列表

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;}

list-style-type:none 属性可以用于移除小标记。

指定列表项标记的图像

ul
{
    list-style-image: url('sqpurple.gif');
}

简写属性

ul
{
    list-style: square url("sqpurple.gif");
}

list-style-type
list-style-position
list-style-image

表格

边框

table
{
    border-collapse:collapse;
}
table,th, td
{
    border: 1px solid black;
}

宽度、高度

table 
{
    width:100%;
}
th
{
    height:50px;
}

文字对齐

td
{
    text-align:right;
}

td
{
    height:50px;
    vertical-align:bottom;
}

表格填充

控制边框和表格内容之间的间距

td
{
    padding:15px;
}

表格颜色

table, td, th
{
    border:1px solid green;
}
th
{
    background-color:green;
    color:white;
}

元素显示模式

元素显示模式，即元素（标签）以什么方式显示，自己占一行或者一行有多个。

块元素

比如 <h1>~<h6>、<p>、<ul>、<ol>、<li>、<div>等。

特点：

独占一行
高度、宽度、内外边距都可控制
宽度默认为容器的100%
是一个容器或盒子，里面可以放行内或块级元素（文字类标签内不能放块级元素）。

行内元素

比如 <a> <strong> <del> <span>等

特点：

一行多个
高、宽度设置无效
默认宽度为内容宽度
只能容纳文本或其他行内元素（链接内可以放块级元素，但最好转换）

行内块元素

比如<img/> <input /> <td>

特点：

一行多个但之间有空隙
默认宽度为内容宽度
高度、宽度、内外边距都可控制

显示模式的转换

display:block;   /*转换为块元素*/
display:inline;  /*转换为行内元素*/
display:inline;  /*转换为行内块元素*/

盒子模型

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

边框

border-style

边框宽度

可以指定长度值，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值）和 thin。

单独设置各边

p
{
    border-top-style:dotted;
    border-right-style:solid;
    border-bottom-style:dotted;
    border-left-style:solid;
}

简写属性

border:5px solid red;

border-width
border-style (required)
border-color

CSS3

圆角边框：

div
{
border:2px solid;
border-radius:25px;
}

盒阴影

div
{
box-shadow: 10px 10px 5px #888888;
}

边界图片

div
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}

轮廓

外边距

填充

分组与嵌套

每个选择器用逗号分隔。

h1,h2,p
{
    color:green;
}

嵌套

p
{
    color:blue;
    text-align:center;
}
.marked
{
    background-color:red;
}
.marked p
{
    color:white;
}
p.marked{
    text-decoration:underline;
}

显示

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。

visibility:hidden可以隐藏某个元素，但占用与未隐藏之前一样的空间。

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。

浮动

让多个块级盒子一行无缝排列，经常用于横向排列。

如果图像是右浮动，下面的文本流将环绕在它左边：

img
{
    float:right;
}

特点：

脱离标准流（脱标），浮在上方
不在保留原先位置
与其他浮动的盒子一行内显示并且顶端对齐排列，父级宽度不够则另起一行
有行内块元素特征

一般策略：用标准流的父元素排列上下位置，内部子元素采取浮动排列左右位置。

理论上一个盒子浮动，则兄弟盒子也应浮动。

浮动影响后方的标准流，前面的不影响。

清除浮动：

清除浮动后，父级就有了高度，不会影响下方标准流。

1、额外标签法：

新增一个块级元素，并使用：

div
{
    clear:both;
}

2、父级添加overflow属性，设置为hidden、auto或scroll

定位

让盒子*移动位置或者固定到屏幕中的某个位置，且能压住其他盒子。

定位=定位模式+边偏移

static 定位（静态定位）

即没有定位，遵循正常的文档流对象。

静态定位的元素不会受到 top, bottom, left, right影响（即没有边偏移）。

relative 定位（相对定位）

相对其正常位置。

还保留原来位置，不脱标。

h2.pos_left
{
    position:relative;
    left:-20px;
}
h2.pos_right
{
    position:relative;
    left:20px;
}

absolute 定位（绝对定位）

绝对定位的元素的位置相对于最近的已定位父元素

如果元素没有已定位的父元素，那么它的位置相对于:

absolute 定位使元素的位置与文档流无关，因此不占据空间。

绝对定位的盒子不能通过margin:0 auto 水平居中

居中方式

left: 50%
margin-left: -100       左移自身宽度的一半

子绝父相：子级是绝对定位的话，父级要用相对定位。

子级绝对定位，不占位置，可放到父盒子的任意位置。
父盒子需要加定位来限制子盒子，且需要占有位置，因此为相对定位。

fixed 定位（固定定位）

元素的位置相对于浏览器窗口是固定位置，与父元素无关。

即使窗口是滚动的它也不会移动

Fixed定位使元素的位置与文档流无关，因此不占据空间。

可以看作特殊的绝对定位。

sticky 定位

在 position:relative 与 position:fixed 定位之间切换。

以浏览器可视窗口为参照（固定定位），占有原来位置（相对定位）。

在跨越特定阈值前为相对定位，之后为固定定位。

指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

div.sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    background-color: green;
    border: 2px solid #4CAF50;
}

元素的堆叠

img
{
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;        /*z轴控制盒子的前后次序*/
}

具有更高堆叠顺序的元素总是在前面。

行内元素添加绝对定位后，可以设置高度、宽度

块级元素添加绝对定位后，默认为内容大小

绝对定位会压住下面标准流的所有内容，但浮动不会压住盒子中的文字、图片。

Overflow

控制内容溢出元素框时显示的方式。

对齐

元素居中对齐

.center {
    margin: auto;
    width: 50%;
    border: 3px solid green;
    padding: 10px;
}

将两边的空外边距平均分配。

如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。

文本居中对齐

.center {
    text-align: center;
    border: 3px solid green;
}

图片居中对齐

使用 margin: auto; 并将它放到块元素中

左右对齐：position

body {
    margin: 0;
    padding: 0;
}
 
.container {
    position: relative;
    width: 100%;
}
 
.right {
    position: absolute;
    right: 0px;
    width: 300px;
    background-color: #b0e0e6;
}

当使用 position 来对齐元素时, 通常元素会设置 margin 和 padding 。这样可以避免在不同的浏览器中出现可见的差异。

当使用 position 属性时，请始终设置 !DOCTYPE 声明

左右对齐：float

.right {
    float: right;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}

如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，这时候你可以使用 “clearfix(清除浮动)” 来解决该问题。

可以在父元素上添加 overflow: auto; 来解决子元素溢出的问题:

.clearfix {
    overflow: auto;
}

当使用 float 属性时，请始终设置 !DOCTYPE 声明

垂直居中：padding

.center {
    padding: 70px 0;
    border: 3px solid green;
}

垂直居中：line-height

.center {
    line-height: 200px;
    height: 200px;
    border: 3px solid green;
    text-align: center;
}
 
/* 如果文本有多行，添加以下代码: */
.center p {
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
}

垂直居中：position和transform

.center { 
    height: 200px;
    position: relative;
    border: 3px solid green; 
}
 
.center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

组合选择符

后代选择器：选取某元素的后代元素。

div p
{
  background-color:yellow;
}

子元素选择器：只能选择作为某元素直接/一级子元素的元素。

div>p
{
  background-color:yellow;
}

相邻兄弟选择器：选择紧接在另一元素后的元素，且二者有相同父元素。

div+p
{
  background-color:yellow;
}

后续兄弟选择器：选取所有指定元素之后的相邻兄弟元素。

div~p
{
  background-color:yellow;
}

伪类

伪类的语法：

selector:pseudo-class {property:value;}

CSS类也可以使用伪类：

selector.class:pseudo-class {property:value;}

a.red:visited {color:#FF0000;}
 
<a class="red" href="css-syntax.html">CSS 语法</a>

伪元素

伪元素的语法：

selector:pseudo-element {property:value;}

CSS类也可以使用伪元素：

selector.class:pseudo-element {property:value;}

“first-line” 伪元素用于向文本的首行设置特殊样式。

p:first-line 
{
    color:#ff0000;
    font-variant:small-caps;
}

“first-letter” 伪元素用于向文本的首字母设置特殊样式：

p:first-letter 
{
    color:#ff0000;
    font-size:xx-large;
}

“:before” 伪元素可以在元素的内容前面插入新内容。

h1:before 
{
    content:url(smiley.gif);
}

“:after” 伪元素可以在元素的内容之后插入新内容。

h1:after
{
    content:url(smiley.gif);
}

导航栏

<ul>
  <li><a href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

/*移除浏览器的默认设置将边距和填充设置为0*/

垂直导航栏

a
{
    display:block;
    width:60px;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}
 
li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}
 
/* 鼠标移动到选项上修改背景颜色 */
li a:hover {
    background-color: #555;
    color: white;
}

全屏高度的固定导航条

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    height: 100%; /* 全屏高度 */
    position: fixed; 
    overflow: auto; /* 如果导航栏选项多，允许滚动 */
}

水平导航栏

内联列表项

li
{
    display:inline;
}

浮动列表项

li
{
    float:left;
}
a
{
    display:block;
    width:60px;
}

实例

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}
 
li {
    float: left;
}
 
li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
 
/*鼠标移动到选项上修改背景颜色 */
li a:hover {
    background-color: #111;
}

固定导航条

ul {
    position: fixed;
    top: 0;
    width: 100%;
}

下拉菜单

<div class="dropdown">
  <span>鼠标移动到我这！</span>
  <div class="dropdown-content">
    <p>菜鸟教程</p>
    <p>www.runoob.com</p>
  </div>
</div>

<style>
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
}
.dropdown:hover .dropdown-content {
  display: block;
}
</style>

提示框

<div class="tooltip">鼠标移动到这
  <span class="tooltiptext">提示文本</span>
</div>

/* Tooltip 容器 */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* 悬停元素上显示点线 */
}
 
/* Tooltip 文本 */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
 
    /* 定位 */
    position: absolute;
    z-index: 1;
}
 
/* 鼠标移动上去后显示提示框 */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

图片

透明度

img
{
  opacity:0.4;
  filter:alpha(opacity=40); /* IE8 及其更早版本 */
}

属性选择器

[title]
{
    color:blue;
}

属性和值选择器

[title=runoob]
{
    border:5px solid green;
}

属性和值的选择器 - 多值

[title~=hello] { color:blue; }

[lang|=en] { color:blue; }

表单

input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
 
input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
 
input[type=submit]:hover {
  background-color: #45a049;
}
 
div {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

媒体类型

@media规则：允许在相同样式表为不同媒体设置不同的样式。

浏览器屏幕上显示一个 14 像素的 Verdana 字体样式。但是如果页面打印，将是 10 个像素的 Times 字体。

@media screen
{
    p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print
{
    p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print
{
    p.test {font-weight:bold;}
}

网页布局

响应式网页布局

* {
  box-sizing: border-box;
}
 
body {
  font-family: Arial;
  padding: 10px;
  background: #f1f1f1;
}
 
/* 头部标题 */
.header {
  padding: 30px;
  text-align: center;
  background: white;
}
 
.header h1 {
  font-size: 50px;
}
 
/* 导航条 */
.topnav {
  overflow: hidden;
  background-color: #333;
}
 
/* 导航条链接 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
/* 链接颜色修改 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
 
/* 创建两列 */
/* Left column */
.leftcolumn {   
  float: left;
  width: 75%;
}
 
/* 右侧栏 */
.rightcolumn {
  float: left;
  width: 25%;
  background-color: #f1f1f1;
  padding-left: 20px;
}
 
/* 图像部分 */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}
 
/* 文章卡片效果 */
.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}
 
/* 列后面清除浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}
 
/* 底部 */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}
 
/* 响应式布局 - 屏幕尺寸小于 800px 时，两列布局改为上下布局 */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}
 
/* 响应式布局 -屏幕尺寸小于 400px 时，导航等布局改为上下布局 */
@media screen and (max-width: 400px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

码农公寓

CSS