前端开发-css

css:

是给html标签装饰的，变得更好看。

注释：
	单行注释：/*注释内容*/
	多行注释：/*
			注释内容
			注释内容
			注释内容
			*/
通常我们在写css代码时也会用注释来划分区域（html代码多，同样css代码也会很多）
比如：
	/*顶部导航条样式*/
	/*左侧菜单栏样式*/
	/*右侧菜单栏样式*/
css语法结构：
	选择器 ｛
	属性1：值1；
	属性2：值2；
	属性3：值3；
	属性4：值4；
	｝
css的三种引入方式：
	1.style标签内部直接书写
		    <style>
                h1 {
                    color: chartreuse;
                	}
            </style>
	2.link标签引入外部css文件（最正规的方式 解耦合）
			<link rel="stylesheet" href="my_css_file">
	3.行内式
		<h1 style="color: green">老大好，欠抽吗</h1>
css的学习流程：
	1.先学如何查找标签
		因为后面所有的框架封装的查找语句都是基于css的
	2.在学如何添加样式
css选择器(基本选择器、组合选择器、属性选择器)
基本选择器：
	1.id选择器
		#d1 {
        color: greenyellow;
        } 				/*找到id是d1的标签 将文本颜色变成绿黄色*/
	2.类选择器
		.c1 {
        color: red;
        }				/*找到class值里面包含c1的标签*/
	3.元素/标签选择器
              span {
        color: red;
        }				  /*找到所有的span标签*/
	4.通用选择器
		* {
        color: green;
        }				  /*将html页面上所有的标签全部找到*/
组合选择器：
	在前端，我们将标签的嵌套用亲戚关系来表述层级
	    <div>div
 	        <p>div p</p>
            <p>div p
                <span>div p span</span>
            </p>
        	<span>span</span>
        	<span>span</span>
        </div>
          div里面的p span都是div的后代
          p是div的儿子
          p里面的span是p的儿子 是div的孙子
          div是p的父亲
    1.后代选择器
    	div span {
            color: red;
        }
    2.儿子选择器
    	div>span {
            color: red;
        }
    3.毗邻选择器
    	div+span {
            color: aqua;
        }						/*同级别紧挨着的下面的第一个*/
    4.弟弟选择器
    	div~span {
            color: red;
            }  					/*同级别下面所有的span*/

属性选择器
	属性选择器是以[]作为标志的
	1.含有某个属性
	      [username] {
            background-color: red;
            }
            /*将所有含有属性名是username的标签背景色改为红色*/
	2.含有某个属性并且有某个值
    	      [username='jason'] {
            background-color: orange;
            }
        	/*找到所有属性名是username并且属性值是jason的标签*/
	3.含有某个属性并且有某个值的某个标签
              input[username='jason'] {
            background-color: wheat;
            }
            /*找到所有属性名是username并且属性值是jason的input标签*/