您的位置：MYSQL中文网 > 备忘录html CSS3 备忘录

备忘录html CSS3 备忘录

2023-07-16 09:30 CSS3教程

备忘录html CSS3 备忘录

备忘录html

HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言。它使用标记来描述网页的内容，以及如何显示在浏览器中。备忘录HTML是一种特殊的HTML文档，它可以帮助用户快速找到重要信息。

备忘录HTML文档通常包含一个或多个表格，其中包含有关特定主题的信息。表格中的信息可以是文本、图像、链接或其他内容。例如，一个备忘录HTML文档可能会包含一个表格，其中包含有关特定国家的信息，例如人口、语言、首都等。

<table> <tr> <th>Country</th> <th>Population</th> <th>Language</th> <th>Capital City</th> </tr> <tr> <td>"China"<

CSS3 备忘录

这是 CSS 优点的快速参考速查表，列出了选择器语法、属性、单位和其他有用的信息位。

开始

介绍

CSS 具有丰富的功能，不仅仅是简单的页面布局。

外部 CSS

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

内联 CSS

<h2 style="text-align: center;">Centered text</h2>

<p style="color: blue; font-size: 18px;">Blue, 18-point text</p>

内部 CSS

<style>
body {
    background-color: linen;
}
</style>

添加类

<div class="classname"></div>
<div class="class1 ... classn"></div>

在一个元素上支持多个类。

!important

.post-title {
    color: blue !important;
}

覆盖所有以前的样式规则。

选择器

h1 { } 
#job-title { }
div.hero { }
div > p { }

请参阅：选择器

文字颜色

color: #2a2aff;
color: green;
color: rgb(34, 12, 64, 0.6);
color: hsla(30 100% 50% / 0.6);

请参阅：颜色

背景

#背景

background-color: blue;
background-image: url("nyan-cat.gif");
background-image: url("../image.png");

请参阅：背景

字体

.page-title {
    font-weight: bold;
    font-size: 30px;
    font-family: "Courier New";
}

请参阅：字体

位置

.box {
    position: relative;
    top: 20px;
    left: 20px;
}

另见：位置

动画


animation: 300ms linear 0s infinite;

animation: bounce 300ms linear infinite;

参见：动画

注释

弹性布局

div {
    display: flex;
    justify-content: center;
}
div {
    display: flex;
    justify-content: flex-start;
}

请参阅：弹性盒| 灵活技巧

网格布局

#container {
  display: grid;
  grid: repeat(2, 60px) / auto-flow 80px;
}

#container > div {
  background-color: #8ca0ff;
  width: 50px;
  height: 50px;
}

请参阅：网格布局

变量和计数器

counter-set: subsection;
counter-increment: subsection;
counter-reset: subsection 0;

:root {
  --bg-color: brown;
}
element {
  background-color: var(--bg-color);
}

请参阅：动态内容

CSS 选择器

例子

组选择器

h1, h2 {
    color: red;
}

链接选择器

h3.section-heading {
    color: blue;
}

属性选择器

div[attribute="SomeValue"] {
    background-color: red;
}

第一个子选择器

p:first-child {
    font-weight: bold;
}

没有孩子选择器

.box:empty {
  background: lime;
  height: 80px;
  width: 80px;
}

基本选择器

`*`	所有元素
`div`	所有 div 标签
`.classname`	具有类的所有元素
`#idname`	带 ID 的元素
`div,p`	所有 div 和段落
`#idname *`	#idname 中的所有元素

另请参阅：类型 /类 / ID /通用选择器

组合器

`div.classname`	具有特定类名的 Div
`div#idname`	具有特定 ID 的 Div
`div p`	div里面的段落
`div > p`	所有 p 标记在 div 深一层
`div + p`	P 标签紧跟在 div 之后
`div ~ p`	以 div 开头的 P 标签

另请参阅：相邻 /兄弟 /子选择器

属性选择器

`a[target]`	用一个 target 属性
`a[target="_blank"]`	在新标签页中打开
`a[href^="/index"]`	以 /index 开始
`[class\|="chair"]`	以 char 开始
`[class*="chair"]`	包含 char
`[title~="chair"]`	包含 char 这个词
`a[href$=".doc"]`	以 .doc 结束
`[type="button"]`	指定类型

另请参阅：属性选择器

用户操作伪类

`a:link`	正常状态下的链接
`a:active`	处于点击状态的链接
`a:hover`	用鼠标链接
`a:visited`	访问过的链接

伪类

`p::after`	在 p 后添加内容
`p::before`	在 p 前添加内容
`p::first-letter`	p 中的第一个字母
`p::first-line`	p 中的第一行
`::selection`	由用户选择
`::placeholder`	占位符属性
`:root`	文档根元素
`:target`	突出显示活动锚点
`div:empty`	没有孩子的元素
`p:lang(en)`	P 带有 en 语言属性
`:not(span)`	不是跨度的元素

输入伪类

`input:checked`	检查输入
`input:disabled`	禁用输入
`input:enabled`	启用输入
`input:focus`	输入有焦点
`input:in-range`	范围内的值
`input:out-of-range`	输入值超出范围
`input:valid`	输入有效值
`input:invalid`	输入值无效
`input:optional`	没有必需的属性
`input:required`	具有必需属性的输入
`input:read-only`	带有只读属性
`input:read-write`	没有只读属性
`input:indeterminate`	具有不确定状态

结构化伪类

`p:first-child`	第一个孩子
`p:last-child`	最后一个孩子
`p:first-of-type`	首先是某种类型
`p:last-of-type`	某种类型的最后
`p:nth-child(2)`	其父母的第二个孩子
`p:nth-child(3n42)`	Nth-child (an + b) 公式
`p:nth-last-child(2)`	后面的第二个孩子
`p:nth-of-type(2)`	其父级的第二个 p
`p:nth-last-of-type(2)`	...从后面
`p:only-of-type`	其父级的唯一性
`p:only-child`	其父母的唯一孩子

CSS 字体

特性

`font-family:`	<字体>
`font-size:`	<尺寸>
`letter-spacing:`	<尺寸>
`line-height:`	<编号>
`font-weight:`	<数字> / 粗体 / 正常
`font-style:`	斜体/正常
`text-decoration:`	下划线/无
`text-align:`	左/右居中/对齐
`text-transform:`	大写/大写/小写

另见：字体

速记

	风格	权重	尺寸（必填）		行高	类型（必填）
`font:`	`italic`	`400`	`14px`	`/`	`1.5`	`sans-serif`

例子

font-family: Arial, sans-serif;
font-size: 12pt;
letter-spacing: 0.02em;

例子


text-transform: capitalize;


text-transform: uppercase;


text-transform: lowercase;

@font-face

@font-face {
    font-family: "Glegoo";
    src: url("../Glegoo.woff");
}

CSS 颜色

命名颜色

color: red;
color: orange;
color: tan;
color: rebeccapurple;

十六进制颜色

color: #090;
color: #009900;
color: #090a;
color: #009900aa;

rgb() 颜色

color: rgb(34, 12, 64, 0.6);
color: rgba(34, 12, 64, 0.6);
color: rgb(34 12 64 / 0.6);
color: rgba(34 12 64 / 0.3);
color: rgb(34.0 12 64 / 60%);
color: rgba(34.6 12 64 / 30%);

HSL 颜色

color: hsl(30, 100%, 50%, 0.6);
color: hsla(30, 100%, 50%, 0.6);
color: hsl(30 100% 50% / 0.6);
color: hsla(30 100% 50% / 0.6);
color: hsl(30.0 100% 50% / 60%);
color: hsla(30.2 100% 50% / 60%);

其他

color: inherit;
color: initial;
color: unset;
color: transparent;

color: currentcolor;

CSS 背景

特性

财产	描述
`background:`	（速记）
`background-color:`	请参阅：颜色
`background-image:`	网址（...）
`background-position:`	左/中/右上 /中/下
`background-size:`	盖XY
`background-clip:`	边框框填充框内容框
`background-repeat:`	不重复重复-x 重复-y
`background-attachment:`	滚动/固定/本地

速记

	颜色	图片	位置X	位置Y		尺寸	重复	附加
`background:`	`#ff0`	`url(a.jpg)`	`left`	`top`	`/`	`100px` `auto`	`no-repeat`	`fixed;`
`background:`	`#abc`	`url(b.png)`	`center`	`center`	`/`	`cover`	`repeat-x`	`local;`

例子

background: url(img_man.jpg) no-repeat center;

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

background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(13,232,230,1) 35%, rgba(0,212,255,1) 100%);

CSS 盒子模型

最大值/最小值

.column {
    max-width: 200px;
    width: 500px;
}

另见：max-width /min-width / max-hight /min-hight

外边距 margin / 内边距 padding

.block-one {
    margin: 20px;
    padding: 10px;
}

另请参阅：margin /padding

盒子尺寸

.container {
    box-sizing: border-box;}

另请参阅：box-sizing

可见性

.invisible-elements {
    visibility: hidden;
}

另见：visibility

自适应外边距

div {
    margin: auto;
}

另见：margin

溢出

.small-block {
    overflow: scroll;
}

另见：overflow

CSS 动画

速记

	名称	执行时间	定时功能	延迟	播放次数	方向	填充模式	执行状态
`animation:`	`bounce`	`300ms`	`linear`	`100ms`	`infinite`	`alternate-reverse`	`both`	`reverse`

特性

`animation:`	（速记）
`animation-name:`	<名称>
`animation-duration:`	<时间>毫秒
`animation-timing-function:`	缓/线性/缓入/缓出/缓入
`animation-delay:`	<时间>毫秒
`animation-iteration-count:`	无限 / <数量>
`animation-direction:`	正常/反向/交替/交替反向
`animation-fill-mode:`	无/向前/向后/两者/初始/继承
`animation-play-state:`	正常/反向/交替/交替反向

另见：Animation

例子


animation: 3s ease-in 1s 2 reverse both paused slidein;


animation: 3s linear 1s slidein;


animation: 3s slidein;

animation: 4s linear 0s infinite alternate move_eye;
animation: bounce 300ms linear 0s infinite normal;
animation: bounce 300ms linear infinite;
animation: bounce 300ms linear infinite alternate-reverse;
animation: bounce 300ms linear 2s infinite alternate-reverse forwards normal;

Javascript 事件

.one("webkitAnimationEnd oanimationend msAnimationEnd animationend")

CSS 弹性盒

简单的例子

.container {
  display: flex;
}

容器 Container

.container > div {
  flex: 1 1 auto;
}

.container{
  display: flex;
  display: inline-flex;
  flex-direction: row;            
  flex-direction: row-reverse;    
  flex-direction: column;         
  flex-direction: column-reverse; 
  flex-wrap: nowrap; 
  flex-wrap: wrap;   
  align-items: flex-start; 
  align-items: flex-end;   
  align-items: center;     
  align-items: stretch;    
  justify-content: flex-start;    
  justify-content: center;        
  justify-content: flex-end;      
  justify-content: space-between; 
  justify-content: space-around;  
  justify-content: space-evenly;  
}

子类选择器 Child

.container > div {
  
  flex: 1 0 auto;

  
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
  order: 1;
  align-self: flex-start;  
  margin-left: auto;       
}

CSS Flexbox 技巧

垂直居中

.container {
  display: flex;
}

.container > div {
  width: 100px;
  height: 100px;
  margin: auto;
}

垂直居中 (2)

.container {
  display: flex;

  
  align-items: center; 

  
  justify-content: center;
}

重新排序

.container > .top {
 order: 1;
}

.container > .bottom {
 order: 2;
}

移动布局

.container {
  display: flex;
  flex-direction: column;
}

.container > .top {
  flex: 0 0 100px;
}

.container > .content {
  flex: 1 0 auto;
}

一个固定高度的顶部栏和一个动态高度的内容区域。

像表格一样

.container {
  display: flex;
}



.container > .checkbox { flex: 1 0 20px; }
.container > .subject  { flex: 1 0 400px; }
.container > .date     { flex: 1 0 120px; }

这会创建具有不同宽度的列，但会根据情况相应地调整大小。

垂直

.container {
  align-items: center;
}

垂直居中所有项目。

左和右

.menu > .left  { align-self: flex-start; }
.menu > .right { align-self: flex-end; }

CSS 网格布局

网格模板列

#grid-container {
    display: grid;
    width: 100px;
    grid-template-columns: 20px 20% 60%;
}

fr 相对单位

.grid {
    display: grid;
    width: 100px;
    grid-template-columns: 1fr 60px 1fr;
}

网格间隙



#grid-container {
    display: grid;
    grid-gap: 20px 10px;
}

CSS 块级网格

#grid-container {
    display: block;
}

CSS 网格行

CSS 语法：

网格行：网格行开始/网格行结束；

例子

.item {
    grid-row: 1 / span 2;
}

CSS 内联关卡网格

#grid-container {
    display: inline-grid;
}

minmax() 函数

.grid {
    display: grid;
    grid-template-columns: 100px minmax(100px, 500px) 100px; 
}

网格行开始和网格行结束

CSS 语法：

网格行开始：自动|行行；
网格行端：自动|行行|跨度n；

例子

grid-row-start: 2;
grid-row-end: span 2;

CSS 网格行的长度值

grid-row-gap: length;

任何合法的长度值，如 px 或 %。0 是默认值

CSS 网格区域

.item1 {
    grid-area: 2 / 1 / span 2 / span 3;
}

对齐项目

#container {
    display: grid;
    justify-items: center;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
}

CSS 网格模板区域

.item {
    grid-area: nav;
}
.grid-container {
    display: grid;
    grid-template-areas:
    "nav nav . ."
    "nav nav . .";
}

Justify Self

#grid-container {
    display: grid;
    justify-items: start;
}

.grid-items {
    justify-self: end;
}

网格项位于行的右侧（末尾）。

CSS 动态内容

变量

定义 CSS 变量

:root {
  --first-color: #16f;
  --second-color: #ff7;
}

变量用法

#firstParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

另请参阅：CSS 变量

计数器


counter-set: my-counter;


counter-increment: my-counter;


counter-increment: my-counter -1;


counter-reset: my-counter;

另见：计数器集

使用计数器

body { counter-reset: section; }

h3::before {
  counter-increment: section; 
  content: "Section." counter(section);
}

ol {
  counter-reset: section;   
  list-style-type: none;
}

li::before {
  counter-increment: section;
  content: counters(section, ".") " "; 
}

CSS 3 技巧

滚动条平滑

html {
    scroll-behavior: smooth;
}

单击我，页面将平滑滚动到入门

另见

CSS 选择器备忘单 (frontend30.com)
MDN：使用 CSS flexbox
终极 flexbox 备忘单
GRID：一个简单的视觉备忘单
CSS 技巧：网格完整指南
浏览器支持

阅读全文

以上是MYSQL中文网为你收集整理的备忘录html CSS3 备忘录全部内容。

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。

全部标签 标签详情

css 轮廓 CSS 轮廓（outline）属性

CSS教程

CSS Outlines 轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。轮廓（outline）属性指定...
css像拼合技术有哪些 CSS 像拼合技术

CSS教程

CSS 图像拼合技术图像拼合图像拼合就是单个图像的集合。有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。使...
css加载失败的6个原因是什么 CSS加载失败的6个原因

CSS教程

有很多刚刚接触 CSS 的新手有时会遇到 CSS 加载失败这个问题，但测试时，网页上没有显示该样式的问题，这就说明 CSS 加载失败了...
html里button属性大全 HTML button formenctype 属性

HTML参考手册

HTML button 标签如果您在使用button标签时使用了 formenctype 属性，那么它的值将覆盖 form 标签的enctype属性值：实例带有两个...
htmlbutton按钮 HTML button formtarget 属性

HTML参考手册

HTML button 标签formtarget 属性可以规定提交的HTML表单在何处显示，下面的示例将详细使用该属性：实例两个提交按钮，第一个提...
html里button属性大全 HTML button autofocus 属性

HTML参考手册

HTML button 标签设置了 autofocus 属性的按钮，将在页面加载后自动获取焦点，请参考下述示例：实例按钮使用 autofocus 属性:but...
html的map HTML map name 属性

HTML参考手册

HTML map 标签map 标签的 name 属性的值是图像映射使用的名称，请参考下述示例：实例带有可点击区域的图像映射：img src="planet...
html5+css3网页设计基础教程 HTML5 <meta> 标签

HTML5教程

实例描述 HTML 文档的元数据：headmeta name="description" content="免费在线教程"meta name="keywords" content="HTML,CSS,XML...
html5+css3网页设计基础教程 HTML5 <p> 标签

HTML5教程

实例HTML5 p标签用于定义一个段落。请参考下述示例：以下代码标记了一个段落：p这是一个段落。/p(在页面下部，您可以找到更多实...
html5+css3网页设计基础教程 HTML5 <td> 标签

HTML5教程

实例HTML5 td标签用于表示一个表格中的单元格。请参考下述示例：一个简单的 HTML 表格，带有两个单元格：table border="1"trtdCe...