css代码汇总 – galgalgal

前言

给自己看看，有几个长的不常用的蛮容易忘的，突然要用就想不起来/(ㄒoㄒ)/~~

选择器

/* 标签选择器 */
p {
  color: red;
}

/* 类选择器 */
.intro {
  font-size: 25px;
}

/* ID 选择器 */
#main {
  border: 1px solid black;
}

/* 后代选择器 */
.container p {
  margin: 10px;
}

/* 子元素选择器 */
ul > li {
  list-style: none;
}

/* 伪类选择器 */
a:hover {
  color: blue;
}

定位

相对定位 (Relative Positioning)
position: relative;

相对定位是以元素原本所在位置为基础，进行上下左右移动，不会影响到其他元素的布局。使用 top, bottom, left, right 属性来设置相对定位的偏移量。

div {
  position: relative;
  top: 20px;
  left: 30px;
}
绝对定位 (Absolute Positioning)
position: absolute;

绝对定位是相对于距离其最近的已定位父元素进行定位，如果没有已定位的父元素，则相对于文档（即 <body> 元素）进行定位。同样可以使用 top, bottom, left, right 属性来设置绝对定位的偏移量。

div {
  position: absolute;
  top: 50px;
  left: 100px;
}
固定定位 (Fixed Positioning)
position: fixed;

固定定位是相对于浏览器窗口进行定位，元素的位置不会随着页面滚动而改变。同样可以使用 top, bottom, left, right 属性来设置固定定位的偏移量。

div {
  position: fixed;
  top: 0;
  left: 0;
}
粘性定位 (Sticky Positioning)
position: sticky;

粘性定位是相对于其父元素进行定位，但会在滚动到特定位置时变为固定定位。可以使用 top, bottom, left, right 属性来设置粘性定位的偏移量，还可以使用 z-index 属性来指定元素的堆叠顺序。

div {
  position: sticky;
  top: 50px;
  z-index: 1;
}

伪类选择器

链接伪类：
/* 未访问的链接 */
a:link {
  color: blue;
}

/* 已访问的链接 */
a:visited {
  color: purple;
}

/* 鼠标悬停在链接上 */
a:hover {
  color: red;
}

/* 激活的链接（鼠标点击时） */
a:active {
  color: green;
}
文本伪类：
/* 第一个字母 */
p::first-letter {
  font-size: 24px;
  font-weight: bold;
}

/* 第一行 */
p::first-line {
  color: red;
}

/* 选中的文本 */
::selection {
  background-color: yellow;
}
表单伪类：
/* 获得焦点的输入框 */
input:focus {
  border: 2px solid blue;
}

/* 选中的复选框或单选按钮 */
input:checked {
  background-color: yellow;
}

/* 启用状态的输入框 */
input:enabled {
  opacity: 1;
}

/* 禁用状态的输入框 */
input:disabled {
  opacity: 0.5;
}
目标伪类：
/* 当前页面的目标元素 */
:target {
  background-color: yellow;
}
布局伪类：
/* 第一个子元素 */
div:first-child {
  color: red;
}

/* 最后一个子元素 */
div:last-child {
  color: blue;
}

/* 奇数位置的子元素 */
div:nth-child(odd) {
  color: green;
}

/* 偶数位置的子元素 */
div:nth-child(even) {
  color: orange;
}

/* 鼠标悬停在父元素上的子元素 */
div:hover > p {
  color: red;
}

div和块级元素转换

display 属性
display 属性可以将元素的展示方式转换为不同的类型。常用的值有：

block：将元素显示为块级元素，会独占一行，可以设置宽度和高度。
inline：将元素显示为行内元素，会在一行内显示，宽度和高度由内容决定。
inline-block：将元素显示为行内块元素，会在一行内显示，但可以设置宽度和高度，以及垂直外边距和内边距。
none：将元素隐藏，不占据空间。
/* 将 div 元素显示为行内元素 */
div {
  display: inline;
}

/* 将 span 元素显示为块级元素 */
span {
  display: block;
}

/* 将 a 元素显示为行内块元素 */
a {
  display: inline-block;
}
float 属性
float 属性可以使元素浮动到左侧或右侧，同时让其后面的元素环绕显示。常用的值有：

left：将元素向左浮动。
right：将元素向右浮动。
/* 将 div 元素向左浮动 */
div {
  float: left;
}
clear 属性
clear 属性可以解除浮动对后续元素布局的影响。常用的值有：

left：清除左侧浮动。
right：清除右侧浮动。
both：清除两侧浮动。
/* 清除 div 元素左侧浮动 */
div {
  clear: left;
}
vertical-align 属性
vertical-align 属性可以设置行内元素、行内块元素与周围内容的垂直对齐方式。常用的值有：

baseline：默认值，元素的基线对齐。
top：元素的顶部对齐。
middle：元素的中心线与父元素的基线对齐。
bottom：元素的底部对齐。
/* 将行内元素垂直居中对齐 */
span {
  display: inline-block;
  vertical-align: middle;
}

盒子模型与内外边距

/* 设置元素的宽度和高度 */
div {
  width: 200px;
  height: 100px;
}
内边距（Padding）：
/* 设置元素的内边距 */
div {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}

/* 设置所有方向的内边距 */
div {
  padding: 10px; /* 上右下左都是 10px */
}

/* 设置上下的内边距和左右的内边距不同 */
div {
  padding: 10px 20px; /* 上下 10px，左右 20px */
}

/* 设置上、右、下、左的内边距 */
div {
  padding: 10px 20px 30px 40px; /* 上 10px，右 20px，下 30px，左 40px */
}
边框（Border）：
/* 设置元素的边框样式、宽度和颜色 */
div {
  border-style: solid;
  border-width: 2px;
  border-color: red;
}

/* 设置上、右、下、左的边框样式、宽度和颜色 */
div {
  border-style: solid;
  border-width: 2px 4px 6px 8px; /* 上 2px，右 4px，下 6px，左 8px */
  border-color: red green blue yellow;
}

/* 设置元素的圆角边框 */
div {
  border-radius: 10px;
}
外边距（Margin）：
/* 设置元素的外边距 */
div {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 10px;
  margin-left: 20px;
}

/* 设置所有方向的外边距 */
div {
  margin: 10px; /* 上右下左都是 10px */
}

/* 设置上下的外边距和左右的外边距不同 */
div {
  margin: 10px 20px; /* 上下 10px，左右 20px */
}

/* 设置上、右、下、左的外边距 */
div {
  margin: 10px 20px 30px 40px; /* 上 10px，右 20px，下 30px，左 40px */
}

字体属性

大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD
样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常)
行高 {line-height: normal;}(正常) 单位：PX、PD、EM
粗细 {font-weight: bold;}(粗体) lighter;(细体) normal;(正常)
变体 {font-variant: small-caps;}(小型大写字母) normal;(正常)
大小写 {text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)
修饰 {text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)

常用字体： (font-family)
“Courier New”, Courier, monospace, “Times New Roman”, Times, serif, Arial, Helvetica, sans-serif, Verdana

文字属性

color : #999999; /*文字颜色*/
font-family : 宋体,sans-serif; /*文字字体*/ 
font-size : 9pt; /*文字大小*/ 
font-style:itelic; /*文字斜体*/ 
font-variant:small-caps; /*小字体*/ 
letter-spacing : 1pt; /*字间距离*/ 
line-height : 200%; /*设置行高*/ 
font-weight:bold; /*文字粗体*/ 
vertical-align:sub; /*下标字*/ 
vertical-align:super; /*上标字*/ 
text-decoration:line-through; /*加删除线*/ 
text-decoration: overline; /*加顶线*/ 
text-decoration:underline; /*加下划线*/ 
text-decoration:none; /*删除链接下划线*/ 
text-transform : capitalize; /*首字大写*/ 
text-transform : uppercase; /*英文大写*/ 
text-transform : lowercase; /*英文小写*/ 
text-align:right; /*文字右对齐*/ 
text-align:left; /*文字左对齐*/ 
text-align:center; /*文字居中对齐*/ 
text-align:justify; /*文字分散对齐*/ 
vertical-align属性
vertical-align:top; /*垂直向上对齐*/ 
vertical-align:bottom; /*垂直向下对齐*/ 
vertical-align:middle; /*垂直居中对齐*/ 
vertical-align:text-top; /*文字垂直向上对齐*/ 
vertical-align:text-bottom; /*文字垂直向下对齐*/

背景属性

色彩 {background-color: #FFFFFF;}
图片 {background-image: url();}
重复 {background-repeat: no-repeat;}
滚动 {background-attachment: fixed;}(固定) scroll;(滚动)
位置 {background-position: left;}(水平) top(垂直);
简写方法 {background:#000 url(..) repeat fixed left top;} /*简写·这个在阅读代码中经常出现，要认真的研究*/

背景样式

background-color:#F5E2EC; /*背景颜色*/
background:transparent; /*透视背景*/
background-image : url(/image/bg.gif); /*背景图片*/
background-attachment : fixed; /*浮水印固定背景*/
background-repeat : repeat; /*重复排列-网页默认*/
background-repeat : no-repeat; /*不重复排列*/
background-repeat : repeat-x; /*在x轴重复排列*/
background-repeat : repeat-y; /*在y轴重复排列*/
指定背景位置
background-position : 90% 90%; /*背景图片x与y轴的位置*/
background-position : top; /*向上对齐*/
background-position : buttom; /*向下对齐*/
background-position : left; /*向左对齐*/
background-position : right; /*向右对齐*/

background-position : center; /*居中对齐*/

区块属性，就间距对齐啥的

(Block) /*这个属性第一次认识，要多多研究*/
字间距 {letter-spacing: normal;} 数值 /*这个属性似乎有用，多实践下*/
对齐 {text-align: justify;}(两端对齐) left;(左对齐) right;(右对齐) center;(居中)
缩进 {text-indent: 数值px;}
垂直对齐 {vertical-align: baseline;}(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom;
词间距word-spacing: normal; 数值
空格white-space: pre;(保留) nowrap;(不换行)

显示 {display:block;}(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题) /*display 属性的了解很模糊*/

边框空白

padding-top:10px; /*上边框留空白*/ 
padding-right:10px; /*右边框留空白*/ 
padding-bottom:10px; /*下边框留空白*/ 
padding-left:10px; /*左边框留空白

框线

border-top : 1px solid #6699cc; /*上框线*/ 
border-bottom : 1px solid #6699cc; /*下框线*/ 
border-left : 1px solid #6699cc; /*左框线*/ 
border-right : 1px solid #6699cc; /*右框线*/ 
以上是建议书写方式,但也可以使用常规的方式 如下:
border-top-color : #369 /*设置上框线top颜色*/ 
border-top-width :1px /*设置上框线top宽度*/ 
border-top-style : solid/*设置上框线top样式*/ 
其他框线样式
solid /*实线框*/ 
dotted /*虚线框*/ 
double /*双线框*/ 
groove /*立体内凸框*/ 
ridge /*立体浮雕框*/ 
inset /*凹框*/ 
outset /*凸框*/

符号属性

list-style-type:none; /*不编号*/ 
list-style-type:decimal; /*阿拉伯数字*/ 
list-style-type:lower-roman; /*小写罗马数字*/ 
list-style-type:upper-roman; /*大写罗马数字*/ 
list-style-type:lower-alpha; /*小写英文字母*/ 
list-style-type:upper-alpha; /*大写英文字母*/ 
list-style-type:disc; /*实心圆形符号*/ 
list-style-type:circle; /*空心圆形符号*/ 
list-style-type:square; /*实心方形符号*/ 
list-style-image:url(/dot.gif); /*图片式符号*/ 
list-style-position: outside; /*凸排*/ 
list-style-position:inside; /*缩进*/

链接属性

a /*所有超链接*/ 
a:link /*超链接文字格式*/ 
a:visited /*浏览过的链接文字格式*/ 
a:active /*按下链接的格式*/ 
a:hover /*鼠标转到链接*/ 
鼠标光标样式：
链接手指 CURSOR: hand 
十字体 cursor:crosshair 
箭头朝下 cursor:s-resize 
十字箭头 cursor:move 
箭头朝右 cursor:move 
加一问号 cursor:help 
箭头朝左 cursor:w-resize 
箭头朝上 cursor:n-resize 
箭头朝右上 cursor:ne-resize 
箭头朝左上 cursor:nw-resize 
文字I型 cursor:text 
箭头斜右下 cursor:se-resize 
箭头斜左下 cursor:sw-resize 
漏斗 cursor:wait 
光标图案(IE6) p {cursor:url("光标文件名.cur"),text;}

框架样式

1 边界留白 {margin:margin-top margin-right margin-bottom margin-left} 
2 补　　白 {padding:padding-top padding-right padding-bottom padding-left} 
3 边框宽度 {border-width:border-top-width border-right-width border-bottom-width border-left-width}　　
宽度值： thin|medium|thick|数值 
4 边框颜色 {border-color:数值 数值 数值 数值}　　数值：分别代表top、right、bottom、left颜色值 
5 边框风格 {border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove} 
6 边　　框 {border:border-width border-style color} 
上 边 框 {border-top:border-top-width border-style color} 
右 边 框 {border-right:border-right-width border-style color} 
下 边 框 {border-bottom:border-bottom-width border-style color} 
左 边 框 {border-left:border-left-width border-style color} 
7 宽　　度 {width:长度|百分比| auto} 
8 高　　度 {height:数值|auto} 
9 漂　　浮 {float:left|right|none} 
10 清　　除 {clear:none|left|right|both}

前言

选择器

定位