这两天看了前端css的部分内容，真心让我难受，太多的属性记不住，唉！！所以才想着把笔记记录一下，方便以后用到查看。
创新互联主营正镶白网站建设的网络公司,主营网站建设方案,重庆APP开发公司 ,正镶白h5小程序开发搭建,正镶白网站营销推广欢迎正镶白等地区企业咨询
CSS 指的是层叠样式表，定义了如何显示html属性，样式通常存储到样式表中。
css的基础语法：
css规则是由两个主要部分组成：选择器，以及一条或多条声明。
属性值除了英文表示外，还可以使用16进制表示
**如果值为若干个单词，需要加引号：
**多重声明：就是有几个声明，如下所示：
p{
css 高级语法：
选择器的分组：对选择器进行分组，使被分组的选择器分享相同的声明，用逗号分开选择器。例如：
h2,h3,h4,h5,h6,h7{
color:green;
}**css派生选择器是通过根据元素在其位置的上下文关系来定义样式的。
**id选择器
id选择器和派生选择器的关系：
#sidebar h3{
font-size:1em;
font-weight:normal;
font-style:italic;
margin:0;
line-height:1.5;
text-align:right;
}
此时，sidebar中的p和h3有别与其他地方的此标签元素。该位置的标签元素做了特殊处理。2.id选择器单独使用：
**类选择器
类选择器也可以用作派生选择器：
**属性选择器
3.属性和值选择器 ----多个值 title 中只要包含hello字符就设置样式
[title ~=hello] {color :red;}
[lang | =en] {color:red;}***设置表单的样式，属性选择器在不带class和id的表单设置样式很有用
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
font-family:Verdana,Arial;
}css样式的创建：插入css样式的方法有三种：
2.内部样式表：
3.内联样式：（慎用）
4.多重样式：
如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来
外部样式表：
内部样式表：
color: red;
ext-align: right;
font-size: 20pt;***当外部和内部样式表都有共同的属性时，颜色属性被继承于外部样式表，而文字排列和字体尺寸会被内部样式表中的规则取代
css的背景：
可以应用纯色作为背景，也可以使用背景图像创建相当复杂的效果
使用background-color 属性数字背景色，可以接收任何合法的颜色值
p {
background-color 不能被继承，默认值是transparent 透明的意思
背景图像：
**如果需要设置一个背景图像，必须为这个属性设置一个url值：
背景重复：
默认背景图像从一个元素的左上角开始：
背景定位：
关键字：top、bottom、left、right和center以及使用长度值，如100px、5cm关键字通常会成对出现，如果只出现一个关键字，则另一个是center
背景关联：
background-attachment 属性的默认值是scroll 。默认情况下，背景随着文档滚动
**css的背景属性：
background 背景属性设置在一个声明中background-attachment 背景图像是否固定或者随着页面的其余部分滚动 css文本
css的文本属性是对文本的外观进行操作，如改变颜色、大小、字符的缩进等
缩进文本：
使用负值： 可以实现“悬挂缩进”，即第一行悬挂在元素中余下部分的左边
使用百分比值：
继承：text-index可以被继承
div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}
some text. some text. some text.
this is a paragragh.
***水平对齐：
text-align属性
不仅影响文本，还会把整个元素居中，text-align 不会控制元素的对齐，只会影响内部内容***字（单词）间隔
p.spread {word-spacing: 30px;}
letter-spacing 属性是字母间隔，是数字和字母之间的间隔
This is header 1 This is header 4 ***字符转换：
***文本装饰：
可以结合多种装饰使用；例如：
a:link a:visited {text-decoration: underline overline;} --超链接既有下划线，又有上划线***处理空白符：
This paragraph has many
p {white-space: normal;}***当 white-space 属性设置为 normal 时，会合并所有的空白符，并忽略换行符
属性值：
***文本方向：
css文本属性：
color 设置文本颜色
direction 设置文本方向。
line-height 设置行高。
letter-spacing 设置字符间距。
text-align 对齐元素中的文本。
text-decoration 向文本添加修饰。
text-indent 缩进元素中文本的首行。
text-shadow 设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。
text-transform 控制元素中的字母。
unicode-bidi 设置文本方向。
white-space 设置元素中空白的处理方式。
word-spacing 设置字间距。css字体
body {font-family: sans-serif;}font-style 属性 ---设置斜体文本
字体变形：
p {font-variant:small-caps;}字体加粗：
p.normal {font-weight:normal;}
字体大小：
***如果您没有规定字体大小，普通文本（比如段落）的默认大小是 16 像素 (16px=1em)
css字体属性：
css链接：
规则：a:hover 必须位于 a:link 和 a:visited 之后
text-decoration 属性大多用于去掉链接中的下划线
background-color 属性规定链接的背景色
css列表：
css列表属性允许放置、改变列表项的标志，或者将图像作为列表项标志
列表类型：影响列表的样式，最简单的方法是改变其标志类型
修改列表项的标志类型：list-style-type属性
ul {list-style-type : square}列表项图像：
ul li {list-style-image : url(xxx.gif)}列表标志位置：list-style-position属性
简化列表样式：
list-style属性
list-style 的值可以按任何顺序列出，而且这些值都可以忽略。只要提供了一个值，其它的就会填入其默认值
css的列表属性（list）： css表格
表格边框：
折叠边框：
table,th, td
表格的宽度和高度：
width和height ---宽度和高度
table
th
表格的文本对齐：
text-align 是水平对齐
表格的内边距：
td
表格的颜色：
table, td, th
th
css Table属性：
border-collapse 设置是否把表格边框合并为单一的边框。
css轮廓:
css 边框属性：
css框模型
border 边框margin 外边距
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，不会遮挡其后的任何元素。
背景是由内容和内边距以及边框组成的区域；内边距、边框和外边距是可选的，默认是零。可以通过设置内外边距为零来覆盖浏览器样式
* {
margin: 0;
padding: 0;
} 在css中，width和height是指元素内容的宽度和高度，增加内外边距和边框不会影响内容的尺寸，但是会增加元素框的总尺寸
内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边
外边距可以是负值，而且在很多情况下都要使用负值的外边距
边框内的空白是内边距，边框外的空白是外边距1.css 内边距
内边距是边框内的空白部分，即元素内容到边框之间的空白部分，使用padding属性，可以接受长度值和百分比值，但是不能是负值
h2 {padding: 10px;} ---为h2所有边设置10px的内边距
也可以按照上、右、下、左的顺序分别设置内边距
h2 {padding: 10px 0.25em 2ex 20%;} ----简写规则单边内边距的属性：
h2 {
内边距可以设置百分比值，并且这个百分比值是根据其父元素的width计算的。同时改变
****上下内边距与左右内边距一致；即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度
css边框
border-style属性定义了10个不同的非inherit 样式；包括none
定义一个图片：
为一个边框定义多种样式：
定义单边样式：
p {border-style: solid solid solid none;} 《=====》 p {border-style: solid; border-left-style: none;}
边框的宽度：
p {border-style: solid; border-width: 5px;}
或
定义单边宽度：
可以通过下面属性设置边框各边宽度：
边框宽度设置值：
边框的颜色：
边框颜色默认是元素本身的前景色，如果没有为边框声明颜色，将与元素的文本颜色相同。如果元素没有任何文本，
定义单边颜色：--和定义宽度属性一样
透明边框：
css外边距
margin 可以设置auto，更常见的是为外边距设置长度值
h2 {margin : 0.25in;}
内边距属性值设置百分比值也是相对应父元素的width计算的。
使用值赋值的规则：
如果缺少左外边距的值，则使用右外边距的值。
单边外边距属性：
css 外边距合并
css定位：
css定位属性允许你对元素进行定位
使用display 属性改变生成框的类型。display=block 可以让行内元素表现的像块级元素一样。
当把一些文本添加到一个块级元素的开头，即使没有把文本定义为段落，也会当作段落来对待
some text ------------------无名块框
Some more text.
ss 定位机制：普通流、浮动、绝对定位
所有框都在普通流中定位。
css position 属性：
relative 元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留 ---相对定位
absolute 元素框从文档流完全删除，并相对于其包含块定位；包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，
fixed 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身 ---固定定位
css定位属性：
position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
css 相对定位：
设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
*****在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框
css 绝对定位：
css绝对定位使元素与文档流无关，因此不占据空间
***相对定位是相对于元素在文档中的初始位置，而绝对定位是相对于最近的已定位祖先元素，如果不存在祖先元素，那么相对于最初的包含块
css 浮动：
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样
float 属性
行框和清理
要想阻止行框围绕浮动框，需要对该框应用 clear 属性
http://cdkjz.cn/article/jiccig.html
