CSS常用 （笔记）

CSS 指层叠样式表 (Cascading Style Sheets)，用于控制网页的样式和布局。

1. 引入方式

• 内联样式（行间）：元素的style属性中定义
• 嵌入样式（内部）：style标签中定义
• 外链样式（外部）：link标签的href属性引入单独的css文件

2. 基础样式

• 背景

  background-color: 背景颜色;
  background-image: url('..'); /* 背景图片 */
  background-repeat: repeat-x/repeat-y/no-repeat; /* 是否平铺 */
  background-position: 值; /* 背景图片的位置 */
  background-size: cover/contain/percentage/length; /* 背景图片的大小 */
  background: <background-color> <background-image> <background-repeat> <background-position>;
  p {
	background: #FFFFFF url('demo.jpg') no-repeat 0 0;
  }

• 文本

  text-indent: 值; /* 文本缩进 */
  text-align: left/right/center; /* 文本对齐方式 */
  word-spacing: 值; /* 文字间隔 */
  letter-spacing: 值; /* 字母间隔 */
  text-transform:  uppercase/lowercase/capitalize; /* 文本转换 */
  text-decoration:  none/underline/overline/line-through; /* 文本装饰 */

• 链接

/* 四种状态 */
a:link 未被访问的状态
a:visited 已访问的状态
a:hover 鼠标悬浮的状态
a:active 被点击的时刻

• 列表、表格、轮廓

list-style: none; 列表样式
border-collapse: collapse/separate; /* collapse 边框折叠为单一边框；separate 分开 */
outline: none;

3. 盒模型

• 边框

border: <border-width> <border-style> <border-color>; /* 设置边框大小、样式、颜色 */
padding: 值; /* 内边距用来定义元素边框与元素内容之间的空白区域 */
margin: 值;
/*
外边距合并
垂直外边距相遇时，会形成一个外边距，最终保留两个外边距中较大的一个。
空元素有外边距无边框或填充时也会发生合并的现象。
*/

4. 定位、浮动

position: static/relative/absoulte/fixed;
/*
relative: 相对定位，保留文档流
absolute: 绝对定位，脱离文档流（可以通过z-index设置其堆放的次序）
fixed: 固定定位（相对于当前的窗口）
float:left/right/none;
要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。
*/

5. 选择器

/*
元素选择器 （标签）
类选择器 （.classname）
ID选择器 (#id)
属性 ([属性])
后代选择器 (div下有个p, div p {})
子元素选择器 （ div下有个p, div>p {} ）
相邻兄弟选择器 (div p 同级 div + p {})
伪类选择器
伪元素选择器 （:before,:after,:first-child,:last-child,:nth-of-type(n) ...）
优先级：
内联>ID>伪类>属性>类>元素>通配符
*/