CSS心得

<pre>
最近对CSS的使用有一些小心得，在此写下来给大家分享分享 。最后附上选择器的实例代码。
------DanlV
</pre>

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;
        }
    s
        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

计算权重的步骤：

1.先比较id次数的大小，相同比较class次数的大小，若相同则比较html次数的大小
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. 不能够设置宽度和高度，宽度是内容的宽度，高度是内容的高度。