css基础

什么是css？

　　层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

层叠样式表 --- 核心关键词

样式表：负责美化

层叠 ： 样式不会被干掉而只会被覆盖

2. CSS 的使用方式

style属性  ---> <h1 style="css属性"></h1>

style标签  ----> head标签里面 

link  ---> <link rel="stylesheet" href="style.css">

选择器

　　要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。
HTML页面中的元素就是通过CSS选择器进行控制的。

* ：  通用元素选择器，匹配任何元素
HTML标签选择器：
           通过HTML标签名来选择元素
         ① 所有的HTML标签都可以当做选择器
         ② 无论标签藏多深都会被选中
         ③ 选择的是所有的标签而不是具体某个标签。所以说我们通过HTML标签选择器来设置的都是一些共性问题。

ID选择器： 
① 任何的标签都可以有ID属性和属性值(因为ID是一个全局属性)。ID命名不能随意的命名。
大小写敏感 ，ID的名字中可以有数字字母下划线，但是要以字母开头。
	驼峰命名法 小驼峰命名  大驼峰命名 
		TESTHEADER 小驼峰  TESTHEADER 大驼峰 
		TEST-HEADER TEST_HEADER 
② 但是ID名不能够重复 

CLASS选择器  
① 任何的标签都可以使用CLASS属性(CLASS属性也是一个全局属性) 
② CLASS属性名可以重复使用 
③ 一个CLASS属性中，可以有多个CLASS属性值。

	 	     
举例：
    *{
        /*页面所有元素都使用*/
        border:0;
    }

    #test
    {
        /*id=test 的元素*/
        background-color:#0e0;
    }

    .staus
    {
        /*含有类status的元素*/
        border:0;
    }

    div
    {
        /*页面所有div*/
         background-color:#0e0;
    }

=======================

二、综合选择器

1. 后代选择器 div p
2. 交集选择器 div.d1
3. 并集选择器 div,p
4. 子元素选择器 div>p
5. 序列选择器 ul li:first-child ul:li:last-child
6. 相邻兄弟选择器 div + p
7. 普通兄弟选择器 div ~ p
   　
   
   即
   E F：后代选择器，该选择器定位元素E的后代中所有元素F：

E > F：子选择器，该选择器定位元素E的直接子元素中的所有元素F，它将忽略任何进一步的嵌套：

E + F：相邻兄弟选择器，该选择器定位与元素E具有相同父元素且在标记中紧邻E的元素F：

E ~ F：一般兄弟选择器，该选择器定位与元素E具有相同父元素且在标记中位于E之后的所有元素F：

h1 ~ p {color:#f00;} //定位具有相同父元素的，h1标签之后的所有p标签

三、继承和层叠

1.继承：

父元素的某些css属性会被子元素无条件的继承过去。
关于文字的css属性都可以进行继承：
color text- line- font-

2. 层叠

层叠解决的是css冲突的问题。

比较权重来解决层叠问题。

!important 能够把"单独属性"的权重变为无限大。 尽量少用。

四、块级元素和行内元素

div 块级元素

span 行内元素

块级元素和行内元素的区别：
###块级（block）元素的特点：

①总是在新行上开始；

②高度，行高以及外边距和内边距都可控制；

③宽度缺省是它的容器的100%，除非设定一个宽度；

④它可以容纳内联元素和其他块元素。

内联（inline）元素的特点：

①和其他元素都在一行上；

②高，行高及外边距和内边距不可改变；

③宽度就是它的文字或图片的宽度，不可改变；

④内联元素只能容纳文本或者其他内联元素。