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.如果都没有选中，那么谁离目标元素近就听谁的

总结：

1. 先看有没有选中目标元素，如果选中，比权重，谁大听谁的。如果权重一样，谁写在后面听谁的
2. 如果没有选中，权重为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则不起作用。但是不推荐使用此方法来改变权重，会引起权重计算失效和不方便维护。

---

行内元素和块级元素

• 块级元素的特性：

1. 自己霸占一行 ，不能与其他元素并列显示
2. 可以设置宽度和高度
3. 如果不设置宽度，块级元素会默认沾满整个父元素的宽

• 行内元素的特性：

1. 能够与其他的行内元素并排显示
2. 不能够设置宽度和高度，宽度是内容的宽度，高度是内容的高度。

TIPS:可以通过CSS-display来改变行内元素和块级元素，属性值如下：

• display:inline; 将元素 变为行内元素
• display:block ; 将元素变为块级元素是
• display:inline-block;将元素变为行内块元素