CSS入门基础，个人整理 全文较长。

CSS入门基础 基础语法规则

CSS 规则由两个主要的部分构成：

1.选择器:通常是需要改变样式的 HTML 元素
2.一条或多条声明：由一个属性和一个值组成。
每个属性有一个值。属性和值被冒号分开。

选择器：

分组：用逗号可以将需要分组的选择器分开。
继承：从父元素继承属性，如head继承body   

<br />
引用：

<!-- 引用外部资源 MyCss.css -->
<link rel="stylesheet" href="MyCss.css" type="text/css">

注释

CSS注释与HTML中不同 可以用 /*..*/的方式来注释.
<br />

CSS选择器

ID选择器和类选择器区别：

1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。

<br />
子元素选择器和后代选择器的区别：

子元素选择器'>'作用于元素的第一代后代，后代选择器（空格）作用于元素的所有后代。

1、派生选择器

通过依据元素在其位置的上下文关系来定义样式，可以使标记更加简洁。
li strong{ color: red; } 这个样式便只对<li>后的strong类型样式进行改变

2、id选择器

为标有 id 的 HTML 元素指定特定的样式, id 选择器以“#”来定义，而id选择器经常与id选择器配合使用
注意：id 属性值只能在每个 HTML 文档中出现一次。

CSS：#div a{ color:red; }
HTML:<p id="div">what a <a href="">fuck</a></p>
//只有fuck显示red效果

3.类选择器

.divclass { color: red; } 在某个元素中含有class=divclass则意味着要遵守前面这个代码的规则，即含有divclss类。
注：第一个字符不能用数字。
经常与id选择器配合使用

CSS：.divclass a{ color:green; }
HTML:<p class=divclass>brain fuck<a href="">er</a></p>
//只有er显示green效果

多类选择器:

class="p1 p2"   //HTML
.p1.p2{ font-style: italic }
 //这样P3既有了p1\p2的属性 还有属于自己的字体属性

4.属性选择器

1、[title]{}这是为带有title属性的元素设置样式
2、[title=te]{}这是为title=te的元素设置样式

5、元素选择器

像h1{}、a{}等，这些文档的元素就是最基本的选择器。

6、选择器分组

就是对多个元素进行分组同时进行样式设置，如h1,h2,h3{}
还有一个通配符*的使用,用通配符的时候就是设置整个页面的内边距和外边距,若想要某个例外，则对该元素单独进行设置、覆盖即可。
类与标签的分组使用，例.first,#second span{}

7、后代选择器

后代选择其可以选择作为某元素后代的元素。比如对p中的strong的子标签进行设置，p strong{}

8、子元素选择器

与后代选择器相比,子元素选择器只能选择作为某子元素的元素，例h1>strong{}

9、相邻兄弟选择器

相邻兄弟选择器可以选择紧接在另一个元素后的元素,且二者有相同的父级元素,例h1+p{}
兄弟选择器多用于列表,具有相同的父级元素 ul li+li{}

10、伪类选择器

兼容性最好的也最常用的一个列子：a:hover{}即表示鼠标划过时显示的样式

<br /><br />

CSS基本样式

CSS 背景

属性	描述
background-attachment	背景图像是否固定或者随着页面的其余部分滚动
background-color	设置元素的背景颜色
background-image	把图片设置为背景
background-position	设置背景图片的起始位置
background-repeat	设置背景图片是否及如何重复

设置背景图片的时候默认是重复的，所以此时可以用background-repeat属性来设置图片是否重复：background-repeat:no-repeat

no-repeat 表示不能重复，repeat 可重复，repeat-x 表示 x 轴重复，repeat-y 表示 y 轴重复

为 background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center。还可以使用长度值和百分数值。

背景关联如果网页比较长，那么当网页向下滚动时，背景图像也会随之滚动。当网页滚动到超过图像的位置时，图像就会消失。 我们可以通过background-attachment属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的fixed，因此不会受到滚动的影响.

<br />

CSS3背景

属性	描述
background-size	规定背景图片的尺寸
background-origin	规定背景图片的定位区域
background-clip	规定背景的绘制区域

CSS链接

链接的四种状态：

a:link --普通的、未被访问的链接
a:visited --用户已访问的链接 
a:hover --鼠标指针位于链接的上方 
a:active --链接被点击的时刻

四个属性设置要遵循的顺序问题： a:hover 必须位于 a:link 和 a:visited 之后 a:active 必须位于 a:hover 之后
修改都对应属性的background-color即可改变链接背景颜色
下划线：在text-decoration里面将传址改为none即可

CSS列表

list-style-type属性可以控制列表前面的标记类型，其值有circle\square\upper-roman\lower-alpha
<br />
列表项图片,用list-style-image，下载的图标放入工程文件夹：

<ul class="img1"></ul>
ul.img1{list-style-image:url("4.ico")}

简写列表样式，即把所有列表属性设置放在一个声明中：
如li {list-style : url(example.gif) square}

CSS表格

border-collapse ---设置是否把表格边框合并为单一的边框。

border-spacing ---设置分隔单元格边框的距离。

caption-side --- 设置表格标题的位置。

empty-cells ---设置是否显示表格中的空单元格。

table-layout ---设置显示单元、行和列的算法。

CSS轮廓

outline,也有color,width,style等属性

<br /><br />

CSS 样式代码插入

从的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种。
1、内联式：样式在开始标签中，并且要写在style=“"双引号中，多条样式代码用分号隔开。<p style="color:red; font-size:20px">
2、嵌入式：写在当前的文件中,把CSS代码写在<style type="text/css">之中 span{...}
3、外部式：单独把css内容写在另外的文件内。

就近原则（离被设置元素越近优先级别越高），由此他们的优先级：内联式 > 嵌入式 > 外部式

CSS尺寸

涉及属性：

height --  设置元素的高度。
line-height --设置行高,normal,百分比
max-height-- 设置元素的最大高度。 
max-width --设置元素的最大宽度。 
min-height --设置元素的最小高度。 
min-width --设置元素的最小宽度。 
width --设置元素的宽度。

CSS导航栏

导航栏分为：垂直导航栏和水平导航栏。
我们要用CSS实现导航栏前面的圆点消失，颜色改变，下划线去掉。

ul{ list-style:none };
a:link,a:visited{ text-decoration:none }
//还可以设置背景颜色和展示(block)
a:active,a:hover{ background-color: }
//给导航栏加个鼠标移动到上面时,改变背景颜色:

水平显示：在li标签中改变显示方式 li{ display:inline}
这样它们会在一行显示，生成水平导航栏。

CSS图片

透明度opacity: 范围0-1，而1表示完全透明;

继承属性

如我为p标签设置样式，则p标签下的子标签都会继承p的属性。

如果我们为同一个元素设置不同的css样式时就需要判断优先级—— 即权值来确定先启用哪个标签。
权值规则：继承：0.1 ；标签：1 ；类选择符：10 ；ID选择符最高为：100；例：

p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
`#footer .note p{color:yellow;} /*权值为100+10+1=111*/

当优先级想当时就涉及到一个“层叠”的规则，即后面的会覆盖前面的。
但是如果我需要某些在前面的内容突出显示，即凸显它的重要性 则需要在属性设置后，分号前加入!important

格式化排版

字体：font-family:"Microsoft Yahei"
字号：font-size
颜色:color

1、英文命令颜色，如`color:red`   
2、RGB颜色 `p{ color:rgb(133,45,200) }`或者改成百分比   
3、十六进制颜色（最普遍）：
将RGB的每一项0-255变成十六进制00-ff，ex: color:#00ffff

排版：font-weight,bold.font-style:italic 下划线\删除线：text-decoration:underline\line-through 缩进：text-indent:2em 行高：line-height:2em 文字间隔或字母间隔:letter-spacing:20px 单词间距:word-spacing：20px 段落对齐：text-align:center\left\right <br /> 属性	描述
color	文本颜色
direction	文本方向
text-decoration	向文本中添加修饰
text-indent	缩进文本中的首行
text-transform	元素中的
unicode-bidi	设置文本方向
white-space	元素中空白的处理方式

indent单位em，设置该样式缩进
长度值：
1、像素px
2、em,为相对之前的px单位,如font-size设置为14px则1em=14px.另外当font-size单位为em时计算标准以其父元素的font-size为基础

元素分类

html中的标签元素大体被分为三种不同的类型：
1、块状元素: <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
2、内联元素(又叫行内元素):<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
3、内联块状元素:<img>、<input>

<br />
块状元素：display:block
特点：1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

内联元素：display:inline
特点：1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

内联块状元素：display:inline-block
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。

CSS盒子模型

盒子的组成包括： margin(外边距);border(边框);padding(内边距);content(内容)。
正文框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
外边距可以是负值，且很多情况下需要这样使用
<br />
padding 属性定义元素边框与元素内容之间的空白区域，他不允许是负值。他还可以进行单边的内边距设置,如h1{ padding:10px; }，也可以按照上、右、下、左的顺序设置各边内边距。也可以通过padding-top\right\bottom\left 来设置单边边距。
<br />
border:顺序同上，可以用border-top-width这样的类型设置单边。
围绕着内容补白的线。边框三属性：粗细、样式和颜色。
border:2px solid red
border-style：常见样式有：虚线(dashed)\点线（dotted)\实线（solid)
border-color
border-width:thin|mediun|thick,常用的还是像素单位
<br />
margin默认值是0。还有一个值复制规则，是对称复制的，允许为外边距指定少于 4 个值：

如果缺少左外边距的值，则使用右外边距的值。
如果缺少下外边距的值，则使用上外边距的值。
如果缺少右外边距的值，则使用上外边距的值。

外边框会自动合并，这是一个叠加的概念。比如两个外边框都是距离100px的文本上下相邻时本应会变为200px，由于叠加作用会变为100px。

CSS 布局

流动（flow)模型是默认的网页布局，默认下块状元素宽度都是100%，内联元素则为从左到右水平分布显示。
浮动涉及属性：

left:元素向左浮动
right:元素向右浮动 
none:不浮动
inherit:从父级继承浮动的属性
clear:用于去掉向各方向的浮动属性(包括继承来的属性)    

<br />
层模型，CSS有三种基本定位机制：

1、普通流：元素按照其在 HTML 中的位置顺序决定排布的过程
2、浮动：浮动的框可以向左或向右移动，
直到它的外边缘碰到包含框或另一个浮动框的边框为止。
3、绝对定位：使元素位置与文档流无关，使其不占据空间

定位属性：

position:top,left,right,bottom 这四个属性使元素向对应的方向偏移
overflow：设置元素溢出其区域发生的事情
clip：设置元素的显示形状,多用于图片
vertical-align：设置元素的垂直对齐方式
z-index：设置元素的堆叠顺序

position属性:

relative:相对定位，相对偏移前的位置
absolute:绝对定位，可能会产生重叠
fixed：固定定位，相对的是网页窗口
static

当两块区域产生重叠时，就可以是用z-index设置重叠优先次序，次序大的排在上面

相对某个元素进行偏移：relative和absolute组合使用。
前提：1、参照定位的元素必须是相对定位的前辈元素且必须加入position:relative2、定位元素加入position:absolute后就可以实现偏移定位了

缩写

盒子模型：缩写易只，只写一个代表四个数据，写两个则为对称。
颜色缩写：如#336699，可以改为#369
字体缩写：缩写时font-size和line-height之间要加入斜杠"/"，例：
body{ font:12px/1.5em "宋体",sans-serif }

居中篇

当被设置元素为 块状元素 时，text-align:center就不起作用了。这
时还分为定宽块状元素与不定宽块状元素。
定宽块状元素:width为固定值，可以通过“左右margin值”为auto来实现居中。
不定宽块状元素：块状元素width不固定。它的居中方法有三：
1、加入table标签，它有长度自适应性。（还可以将有些文本设置为display:table)
2、设置display:inline，变为行内元素。再用text-align:center时间居中
3、position:relative,利用相对固定，再把left变为50%