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

2022-02-03 10:58:01 阅读：155 来源： 互联网

标签：style color text 元素手册 background 速查 border CSS

CSS

文章目录

简介

在这里插入图片描述

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

标签：style,color,text,元素,手册,background,速查,border,CSS
来源： https://blog.csdn.net/weixin_45813276/article/details/122774315

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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

CSS

文章目录

简介

id选择器

class选择器

CSS创建

外部样式表

内部样式表

内联样式

多重样式优先级

背景

文本

字体

链接

列表

表格

元素显示模式

块元素

行内元素

行内块元素

显示模式的转换

盒子模型

边框

轮廓

外边距

填充

分组与嵌套

显示

浮动

定位

Overflow

对齐

组合选择符

伪类

伪元素

导航栏

下拉菜单

提示框

图片

属性选择器

表单

媒体类型

网页布局