css知识点

一、CSS简介

1、什么是CSS。

css是层叠样式表（Cascading Style Sheets）的简称，也称css样式表或级联样式表。
css同html一样是一种标记语言。css主要用来设置html页面中文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
css作用：使结构和样式相分离。

2、css语法规范。

css规则由两个主要部分构成：选择器及一条或多条声明。
空格规范：属性值前面，冒号后面保留一个空格；选择器和大括号中间保留空格。

3、html引用css方式。

二、CSS选择器

选择器分为基础选择器和复合选择器两大类。
基础选择器是由单个选择器组成。
基础选择器包括标签选择器、类选择器、id选择器、通配符选择器。

1、标签选择器
是指用html标签名称作为选择器。
作用：可以把某一类标签全部选出来，比如所有的div和span标签。
优点：快速为页面中同类型的标签统一设置样式。
缺点：不能设计差异化样式，只能选择全部的当前标签。

2、类选择器
差异化选择不同标签，单选一个或几个标签。
长名称或词组可以用横线为选择器命名。
不要使用纯数字、中文命名，尽量使用英文字母表示。
命名要有意义。


类选择器多类名使用：class=“red font35”
3、id选择器
为标有特定id的html元素指定特定样式。
id属性只在每个html中出现一次，即只能调用一次。

4、通配符选择器
用*定义，表示选取页面中所有标签。
不需要调用，自动给所有元素使用样式。

三、CSS字体属性

1、font-size: 定义字体大小
2、font-family: 字体类型
3、font-weight: 字体的粗细（normal正常、bold粗体、bolder特粗体、lighter细体、number数字）
*400等同于normal,700等同于bold,数字后面不跟单位。
4、font-style: 文本风格（normal、italic斜体）
多用于给斜体标签（em,i）改为不倾斜字体
5、复合属性

p {
				/* 复合属性，简化代码 */
				/* font: font-style font-weight font-size/line-height font-family */
				font: italic 700 16px "楷体";
	}

注意：顺序不能变；不需要的可省略，但必须保留font-size和font-family属性，否则font不起作用。

四、CSS文本属性

text(文本)属性定义文本的外观，如文本颜色、对齐文本、装饰文本、文本缩进、行间距等。
1、color
2、text-align设置水平对齐方式。（left right center）
3、text-decoration添加文本修饰。

4、text-indent设置段落的首行缩进。
单位：px和em（相对单位，1em=一个文字大小）
5、text-height设置行间距。

五、element语法

提高html/css的编写速度
1、快速生成html结构语法

1）生成标签，直接输入标签名后按tab键即可。如div后tab生成
<div></div>
2)生成多个相同标签，加上即可。如div3快速生成3个div
3)父子级别关系的标签，用>即可。如ul>li
4)兄弟关系标签，用+。如div+p
5)生成类名或者id名字的，直接写.demo或#two tab即可。
<div id="two"></div>
6）生成div类名有顺序，用自增符号$
7)生成标签内部写内容，用{}。

<!-- .demo$*5 -->
		<div class="demo1"></div>
		<div class="demo2"></div>
		<div class="demo3"></div>
		<div class="demo4"></div>
		<div class="demo5"></div>
<!-- div{$}*3 -->
		<div>1</div>
		<div>2</div>
		<div>3</div>

2、快速生成css样式语法
css基本采取简写形式。
w100 按tab生成 width: 100px;
lh20 按tab生成line-height: 20px;

3、快速格式化代码shift+alt+f

五、复合选择器

CSS中，根据选择器类型把选择器分为基础选择器和复合选择器，复合选择器建立在基础选择器之上，对基本选择器进行组合形成的。

复合选择器由两个或多个基础选择器通过不同方式组合而成。

常用复合选择器：后代选择器、子选择器、并集选择器、伪类选择器等。

5.1、后代选择器
可选择父元素里面的子元素。写法：外层标签写在外面，内层标签写在后面。

ul li {样式声明} //选择ul里面所有li元素

5.2、子选择器
只能作为某元素最近一级子元素。
语法：元素1>元素2{样式声明}

如：
div>p {样式声明} //选择div 里面所有最近一级p标签元素

5.3、并集选择器
可以选择多组标签，同时为他们定义相同的样式。
任何形式的选择器都可以作为并集选择器的一部分。

语法：
元素1，元素2 {样式声明}

例子：
ul，div { 样式声明} //选择ul和div 标签元素

5.4、伪类选择器
向某些伪类选择器添加特殊效果,比如给链接添加特殊效果。
用冒号表示

5.4.1链接伪类

a:link //选择所有未被访问的链接
a:visited //已被访问的链接
a:hover //选择鼠标指针位于其上的链接
a:active //选择活动链接（鼠标按下未弹起的链接）
注意事项：
1）按照LVHA顺序声明:link、:visited、 :hover、:active
\2)a链接在浏览器中具有默认样式，所有在工作中要给链接单独指定样式。

5.4.2 :focus伪类选择器

选取获得焦点（光标）的表单元素，一般是类表单元素才能获取，这个选择器主要针对表单元素。

input:focus {
			background-color:red;
}

六、元素显示模式

元素（标签）以什么方式进行显示，比如div自己占一行，一行可放多个span.
HTML元素分为块元素和行内元素两类。
6.1块元素
常见的有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等。
块元素特点：

1）自己独占一行
2）高度、宽度、外边距以及内边距都可以控制。
3）宽度默认是容器（父级宽度）100%。
4）是一个容器及盒子，里面可以放行内或块级元素。

注意：
文字类的元素内不能使用块级元素。
p标签主要用于存放文字,p里面不能放块级元素。
6.2行内元素
常用的：<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>
特点：

1）一行可显示多个
2）宽、高直接设置时无效的。
3）默认宽度是他本身内容的宽度。
4）行内元素只能容纳文本或其他行内元素。

注意：
链接里面不能再放链接
特殊情况<a>里可以放块级元素，但是给a转换一下块级模式最安全。
6.3行内块元素
在行内元素中几个特殊标签<img />、<input />、<td>,他们同时具有行内元素和块内元素的特点。

一行可放多个行元素、可设置宽度高度，默认内容长度。
行内元素转块级元素：display: block;
块级元素转换为行内元素：display: inline;
转为行内块元素：display:inline-block;

七、CSS背景

背景颜色background-color:颜色值，默认transparent(透明)
背景图片background-image:none或url()
背景平铺background-repeat: repeat(纵向和横向)|no-repeat|repeat-x|repeat-y
背景位置background-position: x y;，精确定位：第一个是x坐标，第二个是y坐标，若指定一个数值，一定是坐标，另一个默认垂直居中。方位定位：两个值前后顺序无关，如left top和top left效果一致。