CSS基础（一）

1、什么是CSS？

CSS (Cascading Style Sheets)层叠样式表，是一个用于修饰文档（可以是标记语言HTML，也可以是XML）的语言，可以将文档以更优雅的形式呈现给用户

2、CSS声明

CSS规则主要由两个部分组成：选择器、一条或者多条声明（每个声明由属性与值构成，属性和值通过冒号隔开）

div{
    font-size:10px;
}

3、CSS声明块

将多个声明写在{}内，每个声明通过‘；’隔开，这样就构成了一个声明块

div{
    font-size:10px;
    background-color:red;
}

4、CSS注释

使用/**/

5、CSS引入规则

css可以通过三种方式作用于html

外部导入
        使用link标签导入后缀为.css的文件
         <link rel="stylesheet" href="./1-out.css">
         
内部样式
        在style标签中，自定义样式
        <style>
			/* @import'./1-out.css'; */
			div {
   			 color: aqua;
			}
		</style>
		
属性
        在想要先添加样式的标签中，使用style属性，并添加值，即想要的样式
        <div style="font-size: 30px;">CSS第一天</div>

6、@import和link的异同

相同：
    都可以导入外部css样式表
不同：
    （1）所属范围
        @import是css语法，只能导入样式
        link是html文件中标签
    （2）加载顺序
        link导入的css是在解析html文件的同时解析
        @import导入的css只有在html文件解析完毕之后才加载
    （3）兼容性
        link不存在兼容性
        @import是css语法，所以会存在兼容性问题【低版本的浏览器可以测试】

7、选择器

（1）基本选择器
        通配选择器 *
        id选择器  #
        类名选择器 .     
        逗号选择器 ,
        标签选择器 <tag>   
        组合选择器 div.one
（2）层次选择器
        子代选择器 .one > .two
        后代选择器 .one .two
（3）属性选择器【表单元素】
	    [key]选中所有具有key属性的元素
	    [key=val]选中所有具有key属性并且值是val的元素
（4）伪类选择器
	    :link a标签未点击时
	    :hover a标签光标悬浮
	    :active a标签点击时
	    :visited a标签访问时
	
	    :first-child
	    :last-child
	    :nth-child(n)
	        :nth-child(1)====>:first-child
	        :nth-child(2)
	        :nth-child(3)====>:last-child
  （5）伪元素选择器
	    ::before 在当前选中的元素前面创建出一个伪元素
	    ::after  在当前选中的元素后面创建出一个伪元素

8、继承

样式从父元素继承到子元素的过程
    （1）可以继承的样式
        font-size   字体大小
        color       字体颜色
        cursor      鼠标形状
    （2）不可继承的样式
        height          高度
        width           宽度
        margin          外边距
        padding         内边距
        backgroud-color 背景色

6、单位

（1）颜色
    十六进制颜色 
        #cccccc ===> #ccc
        #c3c3c3
    关键字   red yellow blue......
    rgb【0~255】
        red 
        green 
        blue
    rgba
        red     【0~255】
        green   【0~255】
        blue    【0~255】
        模糊程度 【0~1】
（2）长度/尺寸
    绝对单位：px    像素
    相对单位：
            em     参考父元素的字体大小
            rem    参考根元素（html）的字体大小
            %