前端CSS

前端CSS

选择器

优先级:行内样式>id选择器>类选择器>元素选择器>通配选择器

/* 基本选择器 */
* {}
<元素名> {}
.<类名> {}
#<id> {}

/* 属性选择器:存在,相同,开始,结束,包含 */
[<属性名>] {}
[<属性名>=""] {}
[<属性名>^=""] {}
[<属性名>$=""] {}
[<属性名>*=""] {}

/* 交集选择器 */
<选择器1><选择器2>... {}
/* 并集选择器 */
<选择器1>,<选择器2>,... {}
/* 后代选择器 */
<选择器1> <选择器2> ... {}
/* 子代选择器 */
<选择器1> > <选择器2> > ... {}
/* 兄弟选择器:相邻,之后所有 */
<选择器1>+<选择器2>+... {}
<选择器1>~<选择器2>~... {}

/* 伪类选择器:状态,结构 */
<选择器>:link {}
<选择器>:visited {}
<选择器>:hover {}
<选择器>:active {}
<选择器>:focus {}
<选择器>::first-child {}
<选择器>::last-child {}
<选择器>::<数值>th-child {}

/* 伪元素选择器 */
<选择器>::first-letter {}
<选择器>::first-line {}
<选择器>::selection {}
<选择器>::placeholder {}
<选择器>::before {content:'';}
<选择器>::after {content:'';}

文本属性

* {
  /* 字体样式 */
  font-size: 40px;
  font-family: 'Courier New', Courier, monospace;
  font-style: normal;
  font-weight: normal;
  color: red;
  /* 字母间距 */
  letter-spacing: normal;
  /* 单词间距 */
  word-spacing: normal;
  /* 长单词换行 */
  word-wrap: break-word;
  /* 单词换行拆分 */
  word-break: keep-all;
  /* 文本修饰 */
  text-decoration: underline;
  /* 文本缩进 */
  text-indent: 40px;
  /* 水平对齐 */
  text-align: center;
  /* 文本阴影 */
  text-shadow: 10px 10px 5px #888888;
  /* 文本大小写 */
  text-transform: capitalize;
  /* 文本溢出 */
  text-overflow: clip;
  /* 行高:最终取决于一行的最高元素高度 */
  line-height: 1.5;
  /* 行内元素垂直对齐 */
  vertical-align: middle;
}

列表属性

* {
  /* 列表符号 */
  list-style-type: none;
  /* 列表符号位置 */
  list-style-position: outside;
  /* 自定义列表符号 */
  list-style-image: url();
}

表格属性

* {
  /* 列宽 */
  table-layout: auto;
  /* 单元格间距 */
  border-spacing: 10px;
  /* 合并边框 */
  border-collapse: separate;
  /* 隐藏空单元格 */
  empty-cells: hide;
  /* 标题位置 */
  caption-side: top;
}

背景属性

* {
  /* 背景色 */
  background-color: black;
  /* 背景图 */
  background-image: url();
  /* 背景大小 */
  backgound-size: 100px 100px;
  /* 背景重复方式 */
  background-repeat: no-repeat;
  /* 背景位置 */
  background-position: center center;
  /* 背景区域 */
  background-origin: content-box;
  /* 背景修剪 */
  background-clip: content-box;
  /* 渐变 */
  background-image: linear-gradient(to bottom right, red, yellow);
}

边框属性

* {
  /* 边框颜色 */
  border-color: blue;
  /* 边框样式 */
  border-style: dashed;
  /* 边框宽度 */
  border-width: 5px;
  /* 边框圆角 */
  border-radius: 5px;
  /* 轮廓:不计入宽高 */
  outline-color: blue;
  outline-style: dashed;
  outline-width: 5px;
}

显示模式

* {
  /* 存在不显示 */
  visibility: hidden;
  /* 不存在不显示 */
  display: none;
  /* 块元素:独占一行,自定义宽高 */
  display: block;
  /* 内联元素:不独占一行,宽高由内容决定 */
  display: inline;
  /* 内联块元素:不独占一行,自定义宽高 */
  display: inline-block;
  /* 内联元素,内联块元素的换行会解析成空格,可给父元素设置font-size=0,再单独设置字体大小 */
}

盒子模型

* {
  /* 外边距:可以为负值,块元素上下合并 */
  margin: 10px;
  /* 边框 */
  border: 10px;
  /* 内边距 */
  padding: 10px;
  /* 溢出控制:auto可解决margin塌陷 */
  overflow: visible;
  overflow: scroll;
  overflow: auto;
  overflow: hidden;
  /* 阴影 */
  box-shadow: 10px 10px 5px #888888;
  /* 将padding和border算入宽高 */
  box-sizing: border-box;
  /* 可变大小 */
  resize: both;
  /* 不透明度 */
  opacity: 0.5;
}

浮动

* {
  /* 移出文档流向左右浮动,直至容器边框或其他浮动元素,不独占一行,自定义宽高,不会支撑父元素 */
  float: left;
  float: right;
  /* 清楚元素浮动对其产生的影响 */
  clear: both;
}

定位

* {
  /* 相对定位,相对原本位置,实际位置不变 */
  position: relative;
  /* 绝对定位,移出文档流,根据包含块定位 */
  position: absolute;
  /* 固定定位:移出文档流,根据窗口定位 */
  position: fixed;
  /* 粘性定位:根据最近的可滚动父元素定位并生效 */
  position: sticky;
  /* 显示优先级 */
  z-index: 1;
}

字体

@font-face {
  font-family: name;
  src: url();
}

转换

* {
  /* 平移 */
  transform: translate(100px,100px);
  /* 旋转 */
  transform: rotate(90deg);
  /* 缩放 */
  transform: scale(2,2);
  /* 倾斜 */
  transform: skew(90deg,90deg);
}

过渡

* {
  transition: property duration timing-function delay;
}

动画

@keyframes name
{
  0% {background: red;}
  25% {background: yellow;}
  50% {background: blue;}
  100% {background: green;}
}
* {
  animation: name duration timing-function delay iteration-count direction fill-mode play-state;
}

多列

* {
  /* 列数 */
  column-count: 1;
  /* 间隔 */
  column-gap: 10px;
  /* 列边框样式 */
  column-rule-style: dashed;
  /* 列边框宽度 */
  column-rule-width: 5px;
  /* 列边框颜色 */
  column-rule-color: blue;
  /* 跨越一列或所有列 */
  column-span: all;
}

弹性盒子

* {
  /* 弹性盒子:左右为主轴,上下为侧轴 */
  display: flex;
  /* 主轴方向 */
  flex-direction: row;
  /* 主轴换行方式:存在多行会进行上下均分 */
  flex-wrap: wrap;
  /* 主轴对齐方式 */
  justify-content: center;
  /* 单行侧轴对齐方式 */
  align-items: center;
  /* 多行侧轴对齐方式 */
  align-content: center;
  /* 拉伸比例 */
  flex-grow: 1;
  /* 收缩比例 */
  flex-shrink: 1;
}