CSS使用心得小结
CSS心得
最近对CSS的使用有一些小心得，在此写下来给大家分享分享 。最后附上选择器的实例代码。 ------DanlV
CSS是什么
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
百度百科
CSS三种使用方式
1.style属性 如： <div style="width:300px">
2.style标签 如：
#id .class html {
color: red;
}
3.link标签引入外部单独的css文件
TIPS：在实际的开发中，推荐使用第三种方式，能够很好的实现结构与样式分离。
CSS选择器
css分为基础选择器和综合选择器
基础选择器
- html 标签选择器 如
p { .....}
1.通过标签名当做选择器来使用
2.无论标签藏的多深，都可以被选中
3.选择的是所有的标签，而不是具体某个标签，通常情况下，通过标签选择器设置的是共性的问题 - id选择器 #id名 如
#div1 {....}
1.id的名字是唯一的
2.任何的标签都可以具有id属性(id是全局属性)。大小写敏感(#test 和 #TEST 是两个完全不同的id) - class选择器 .class名 如
.class {...}
1.class属性名可以重复使用
2.任何的标签都可以具有class属性(class也是全局属性)
3.class的值可以有多个<h1 class="test logo h1"></h1> - 通配符 * 如
*{....}选择所有标签，能少用就少用，会拖慢网页的速度
命名法：给元素设置id(设置class也可以使用)的时候，可以采用驼峰命名法 :
1.小驼峰命名法,首单词不大写，后面的单词首字母都大写 如 testHeaderLogImage
2.大驼峰命名法，所有单词首字母都大写
综合选择器
- 后代选择器 div p 选中的是div 里面的p标签，如
div p {...} - 交集选择器 div.d1
- 子元素选择器 div>p ,这是css3新出现的。
- 并集选择器 div，p使用‘，’隔离
- 序列选择器：first-child :last-child
- 相邻兄弟选择器 div + p,选取紧挨着的后面的兄弟节点
- 普通兄弟选择器 div ` p(使用反引号),选取div元素后面出现的所有p兄弟节点
继承和层叠
继承和层叠是css极为重要的内容。
继承
父元素拥有了某个css属性，子元素在不需要任何条件的情况下都会拥有父元素的属性。
子元素并不能够全部继承父元素的css，可以继承的css属性具有以下特点：
color text- line- font- 都是跟文字属性相关 这些关于文字样式的，都能够继承； 所有关于盒子的、定位的、布局的属性都不能继承。
层叠
层叠是CSS处理冲突的一种解决方案。需要通过计算权重来解决层叠的问题。
解决层叠问题通过权重由选择器中id class html 的出现次数来判断权重,如：
#b1 .h2 p {
color:red;
}
div div #b3 p {
color: blue;
}
div.h1 div.h2 dov.h3 p {
color: yellow;
}
一号：第一个选择器id class html出现的次数分别为1 1 1
二号：第一个选择器id class html出现的次数分别为1 0 3
三号：第一个选择器id class html出现的次数分别为0 3 4
三号id选择器个数为0，被淘汰；一号和二号选择器个数都为1，则比较class选择器个数，一号为1大于二号为0，则一号生效。
计算权重的步骤：
1.先比较id次数的大小，相同比较class次数的大小，若相同则比较html次数的大小 ss
2.如果权重一样，name后出现的会覆盖先前出现的
3.看看一下是否直接选中目标元素，如果没有直接选中目标元素，name他的权重为0
4.如果都没有选中，那么谁离目标元素近就听谁的
总结：
- 先看有没有选中目标元素，如果选中，比权重，谁大听谁的。如果权重一样，谁写在后面听谁的
- 如果没有选中，权重为0.如果所有的选择器权重都为0，就近原则
TIPS:!important 能够把权重变为无限大。但是存在缺点：只能够作用在单个属性上。尽量少用。
p {
color: red !important;
font-size: 100px;
}
.lv {
color: green;
font-size: 10px;
}
.lan {
color: blue;
font-size: 20px;
}
只能作用在单个属性，p{...}中只有color属性能起作用，而font-size则不起作用。但是不推荐使用此方法来改变权重，会引起权重计算失效和不方便维护。
行内元素和块级元素
- 块级元素的特性：
- 自己霸占一行 ，不能与其他元素并列显示
- 可以设置宽度和高度
- 如果不设置宽度，块级元素会默认沾满整个父元素的宽
- 行内元素的特性：
- 能够与其他的行内元素并排显示
- 不能够设置宽度和高度，宽度是内容的宽度，高度是内容的高度。
TIPS:可以通过CSS-display来改变行内元素和块级元素，属性值如下：
- display:inline; 将元素 变为行内元素
- display:block ; 将元素变为块级元素是
- display:inline-block;将元素变为行内块元素
