Web | CSS学习笔记

CSS（Cascading Style Sheets，层叠样式表），主要通过为HTML元素增添样式的方式修饰静态页面，实现了页面内容与样式分离。目前主流网页布局均采用 div+CSS 方式实现。

1. CSS基础

1.1 CSS三大特性

1. 层叠性：权重高的样式会覆盖权重低的样式；
2. 继承性：子元素继承父元素的样式；
3. 优先级：作用域越小，优先级越大；

• 不同级别：行内样式>id选择器>类选择器>标签选择器>通配符>继承；
• 同一级别：后写的会覆盖先写的样式；

1.2 CSS语法规则

CSS注释：/* CSS注释内容 */

/* CSS注释内容 */
选择器{ 
	样式属性1:值1;
	样式属性2:值2;
}

1.3 引入CSS样式表

1.行内样式表（内联表）：

<标签 style="属性1:值1;属性2:值2;"></标签>

2.内部样式表（内嵌表）

  <style>
      选择器{ 
        样式属性1:值1;
        样式属性2:值2;
      }
  </style>

3.外部样式表（外联表）：外部.css文件

4.引入外部样式表：

<link rel="stylesheet" type="text/css" href="url" />

5.三种样式表总结

样式表	优点	缺点	使用情况	控制范围
行内样式表	权重高	样式与结构未分离	较少	单个标签
内部样式表	样式与结构部分分离	未彻底分离	较多	整个页面
外部样式表	样式与结构完全分离	需引入	多，推荐	整个站点

2. CSS样式

2.1 CSS字体-font★

1.字体系列：

font-family : "宋体","微软雅黑";

font-family是一个字体族的优先表，如果浏览器不支持第一个字体，则会尝试下一个。

2.字体风格：

font-style : normal/italic/oblique;
/*
- normal：标准
- italic：斜体
- oblique：倾斜
*/

3.字体粗细：

font-weight : 400;
/* 加粗度：100,200,300,400,500,600,700,800,900 */
/* normal=400 | blod=700 */
/* bolder：更粗 | lighter：更细*/

4.字体大小：

font-size : px/em/%

5.font综合设置：

font : font-style font-weight font-size/line-height font-family

注意：
- ！英文字体名一般不需要加引号，设置英文字体名必须位于中文字体名之前；
- ！加粗度没有单位，而且`x00`只有9个值，不存在`123`这种值；
- ！网页普遍是`14px`；尽量设偶数px，奇数px在IE6存在bug；

2.2 CSS文本-text★

1.文本缩进：

text-indent : em/px/%;

2.水平对齐：

text-align : left/center/right;

3.单词间隔（只适用于英文）:

word-spacing : em/px;

4.字符间隔：

letter-spacin : em/px;

5.文本装饰：

text-decoration : none/underline/overline/line-through/blink;
/* 
- none：无
- underline：下划线
- overline：上划线
- line-through：穿过一条线
- blink：闪
*/

6.行高：

line-height : px/em/%;  
/* 一般文本行高比字号大7-8像素即可 */

7.文本阴影：

text-shadow : 水平位置 垂直位置 模糊偏移 阴影颜色;

8.【CSS3】颜色透明度：

rgba(0~255, 0~255, 0~255, 0~1);
/* 模糊度：0~1 */

2.3 CSS背景-background★

1.背景色：

background-color：rgb();

2.背景图：

background-image : url();

3.背景平铺：

background-repeat : repeat/no-repeat;
/*
- repeat：平铺
- no-repeat：不平铺
- repeat-x：横向平铺
- repeat-y：纵向平铺
*/

3.背景定位：

background-position : X坐标/位置 Y坐标/位置;
/* 坐标：px/em/% */
/* 位置：top，bottom，center，left，right； 
   若只设了一个值，那么第二个值将是center； */

4.背景关联：

backgrount-attchment : fixed/scroll;
/*
- scroll：默认值。背景图像会随着页面其余部分的滚动而移动；
- fixed：图像固定；当页面的其余部分滚动时，背景图像不会移动；
*/

5.背景综合设置：

background: bg-color bg-image bg-repeat bg-attchment bg-position(x,y);

6.【CSS3】背景尺寸：

background-size : contain/cover;
/*
- contain：保证背景图片完整性；
- cover：保证背景图片完全覆盖整个区域；
- width&height：设置背景的宽&高；（一般设置1个参数，设置2个参数会导致图片变形）
*/

2.4 *CSS列表-list-style

1.列表项标志：

list-style-type : none/disc/circle/square/decimal...;
/* 
none：无
disc：实心圆
circle：空心圆
square：实心方块
decimal：数字
*/

2.列表项图像：

list-style-image : url();

3.列表标志位置：

list-style-position : inside/outside;
/*
outside：默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐。
*/

4.列表综合设置：

list-style : image type position;

2.5 *CSS表格

1.折叠边框

border-collapse : collapse;

2.水平对齐

text-align : left/center/right;

3.垂直对齐

vertical-align : top/center/bottom;

4.空单元格显示/隐藏

empty-cells : show/hide;

5.表格标题在上/在下

caption-side : top/bottom;

2.6 *CSS轮廓-outline

1.轮廓颜色：

outline-color : rgb()

2.轮廓样式：

outline-style : solid/dotted/dashed/double...;
/*
- soild：实线
- dotted：点线
- dashed：虚线
- double：双实线
*/

3.轮廓宽度：

outline-width : thick/medium/thin/px;
/*
- thick：粗
- medium：中
- thin：细
*/

4.轮廓综合设置：

outline : color style width;

2.7 标签显示模式★

display	描述
none	不显示
block	块级元素
inline	行内元素
inline-block	行内块元素

2.8 内容溢出盒子★

overflow	描述
visible	默认值。内容溢出部分显示在盒子外；
hidden	隐藏内容溢出部分
scroll	如果内容溢出会被修剪，则浏览器会显示滚动条以便查看其余的内容；
auto	如果内容溢出被修剪，则浏览器会显示滚动条以便查看其余的内容；

3. CSS选择器

3.1 元素选择器

标签{ 
	属性:值;
}

3.2 类选择器

.类名{
	属性:值;
}

单类名调用：class="类名"；
多类名调用：class="类名1 类名2 ..."；

3.3 id选择器

#id{
	属性:值;
}

3.4 通配符选择器

*{                
	属性:值;
}

作用域：整个HTML页面

3.5 交集选择器

选择器1选择器2{
    属性:值;
}

3.6 并集选择器

选择器1,选择器2{
    属性:值;
}

3.7 后代选择器★

先代选择器 后代选择器{
    属性:值;
}

作用于先代元素内的[所有的后代元素]；

3.8 子元素选择器★

父选择器 > 子选择器{
    属性:值;
}

只作用于父元素内的[直接子元素]；

3.9 相邻兄弟选择器

伯选择器 + 仲选择器{
    属性:值;
}

作用于紧接在伯元素后的[仲元素]；

3.10 属性选择器

[属性]{
    属性:值;
}

标签[属性=值]{
    属性:值;
}

3.11 伪类选择器

选择器:伪类{
	属性:值;
}

1.<a>链接伪类：

• a:link：未访问的链接；
• a:visited：已访问的链接；
• a:hover：鼠标移动到链接；
• a:active：鼠标点击时的连接；

2.位置结构伪类：

• first-child：第一个子元素；
• last-child：最后一个子元素；
• nth-child(n)：第n个元素（n=1,2,3...）；
• nth-last-child(n)：倒数第n个元素（n=1,2,3...）;
  [n=odd：奇数 | n=even：偶数]

注意：
- ！不是第一个HTML标签，而是第一个HTML元素
	html元素：文本，图像，链接；

3.【CSS3】目标伪类：

/*:target 选择器用于选取当前活动的目标元素*/
:target{
    属性:值;
}

3.12 伪元素选择器

标签::伪元素{
    属性:值;
}

伪元素：

• first-line：第一行；

• first-letter：第一个字符；

• before：在标签之前添加content:新内容；

标签::before{
	content:新内容;
}

• after：在标签之后添加content:新内容；

标签::after{
	content:新内容;
}

• selection：选中区域；

4. CSS框模型（Box Model）★

4.1 边框-border

1.边框宽度：

border-width : px;

2.边框样式：

border-style : solid/dashed/dotted/double;
/*
- solid：实线
- dashed：虚线
- dotted：点线
- double：双实线
*/

3.边框颜色：

border-color : rgb();

4.边框综合设置：

border : width style color;

5.单边边框：

border-top/right/bottom/left-属性:值;
/* 单独设置某一边，设置方式与border同理 */

6.圆角边框：

border-radius : 左上角半径px 右上角半径px 右下角半径px 左下角半径px;

4.2 内边距-padding

1.内边距：

padding : top-px right-px bottom-px left-px

2.单边内边距：

padding-top/right/bottom/left : px

4.3 外边距-margin

1.外边距：

margin:top-px right-px bottom-px left-px;

2.单边外边距：

margin-top/right/bottom/left : px;

border/padding/margin综合设置提示：
- 可设置四个参数，分别对应top-right-bottom-left，顺时针遍历设置；
- 若只设置了1个value，则top=right=bottom=left=value；
- 若只设置了2个value，则top=val_1,right=val_2,bottom=val_1,left=val_2；顺时针遍历赋值；
- 若只设置了3个value，则top=val_1,right=val_2,bottom=val_3,left=val_1；顺时针遍历赋值；
- border-radius半径设置顺序：左上-右上-右下-坐下；顺时针遍历；

4.4 垂直外边距合并现象★

1.相邻盒子垂直外边距合并，margin合并取最大值；

   解决方案：只设置一个margin；

2.嵌套盒子垂直外边距合并。

   解决方案①：overflow:hidden；

   解决方案②：使用border，padding；

4.5 CSS3盒子&IE6盒子

• IE6框模型：box-sizing:content-box

IE6框的大小：【width+左右padding+左右border+左右margin】
		×【height+上下padding+上下border+上下margin】

• CSS3框模型：box-sizing:border-box

CSS3框的大小：【width+左右margin】×【height+上下margin】
		- CSS3盒的[width&height]包含[padding+border]

5. 浮动

5.1 浮动-float（难点）

浮动：浮动块不在文档流中，不占文档流位置；但占浮动位置。

float:left/right;

（未完待详细解释）

5.2 清除浮动-clear★

clear 属性规定元素的哪一侧不允许其他浮动元素。

clear:left/right/both

清除浮动的方式：

1.【W3C推荐】在盒子末尾再添加一个如下的空盒子：

<div style="clear:both;"></div> 

2.在盒子样式中添加溢出隐藏样式：

overflow:hidden

3.为盒子添加如下样式，在每次结束后都清除浮动：

.clearfix:after{clear:both}  /* 只适用于IE6、IE7。 */

6. 定位

6.1 定位简介（难点）

position	是否占文档流	定位策略
static：静态定位	占文档流
fixed：固定定位	不占文档流	相对于视窗进行定位
relative：相对定位	占文档流原位置	相对于原位置进行边偏移
absolute：绝对定位	不占文档流	相对于其已定位的包含块定位

6.2 边偏移

1. 前提：float || position || 不占文档流；
2. 边偏移：top，bottom，left，right；

6.3 相对定位★

position:relative

1.相对于在文档流中的原位置进行边偏移；

2.仍占据文档流中的原位置；

6.4 绝对定位★

position:absolute

1.相对于[其已定位的包含块]进行边偏移；

2.已从文档流中完全删除，就好像该元素原来不存在一样；

3.元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框；

4.绝对定位与文档流无关，所以可以覆盖在页面其他元素上；

5.可通过z-index控制堆叠次序；z-index 仅能在定位元素上奏效；

6.一般采取[子绝父相]策略；

7. 页面日常开发习惯

页面布局：div+CSS；

使用外部样式表，引入外部.css文件；

例行设置：

1.清除盒子内外边距：*{padding:0;margin:0;}；
2.链接取消下划线：a{text-decoration:none}；
3.列表取消列表项标志：ul{list-style:none}；

功能型样式：

-外边距实现盒子水平居中：margin:0 auto；
-垂直居中：line-height:盒高；
-清除浮动：<div style="clear:both;"></div>；

附：

CSS长度

相对长度单位	描述
px	像素值
em	相对于当前字符的尺寸（自适应）
%	百分比

绝对长度单位	描述
cm	厘米
mm	毫米
in	英寸
pt	磅（1pt=1/72英寸）

CSS颜色

单位	描述
color_name	颜色名称（如red）
rgb(0~255,0~255,0~255)	RGB值（如rgb(0,0,0)）
rgb(x%,x%,x%)	RGB百分比值（如rgb(100%,0%,0%)）
#rrggbb	十六进制数（如#c3c3c3）