CSS

1 CSS的定义

css就是层叠样式表(Cascading Style Sheets)

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

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力

简单地说就是给HTML标签添加样式，让它变的更加的好看

2 CSS的注释

# 注释
/*单行注释*/
/*
多行注释1
多行注释2
多行注释3
*/

通常我们在写css样式的时候也会用注释来划定样式区域(因为HTML代码多所以对应的css代码也会很多)
/*这是博客园首页的css样式文件*/
/*顶部导航条样式*/
...
/*左侧菜单栏样式*/
...
/*右侧菜单栏样式*/
...

3 CSS的语法结构

# css的语法结构
选择器 {
  属性1:值1;
  属性2:值2;
  属性3:值3;
  属性4:值4;
}

4 CSS的三种引入方式

# css的三种引入方式

1.style标签内部直接书写
  <style>
        h1  {
            color: burlywood;
        }
  </style>
    
    
2.link标签引入外部css文件(最正规的方式 解耦合)
  <link rel="stylesheet" href="mycss.css">
    
    
3.行内式(一般不用)
  <h1 style="color: green">老板好 要上课吗?</h1>

5 CSS选择器

5.1 基本选择器

5.1.1 id选择器

/*id选择器*/

/*找到id是d1的标签 将文本颜色变成绿黄色*/

#d1 {color: greenyellow;}

5.1.2 类选择器

/*类选择器*/

/*找到class值里面包含c1的标签*/

.c1 {color: red;}

5.1.3 元素(标签)选择器

/*元素(标签)选择器*/

/*找到所有的span标签*/

span {color: red;}

5.1.4 通用选择器

/*通用选择器*/

/*将html页面上所有的标签全部找到*/

* {color: green;}

5.2 组合选择器

"""
在前端 我们将标签的嵌套用亲戚关系来表述层级
	<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的父亲
  ...
"""

5.2.1 后代选择器

/*后代选择器*/
div span {color: red;}

5.2.2 儿子选择器

/*儿子选择器*/
div>span {color: red;}

5.2.3 毗邻选择器

/*毗邻选择器*/

/*同级别紧挨着的下面的第一个*/

div+span {color: aqua;}

5.2.4 弟弟选择器

/*弟弟选择器*/

/*同级别下面所有的span*/

div~span {color: red;}

5.3 属性选择器

"""
1 含有某个属性
2 含有某个属性并且有某个值
3 含有某个属性并且有某个值的某个标签
"""
# 属性选择器是以[]作为标志的

/*将所有 含有属性名username 的标签 背景色改为红色*/
[username] {background-color: red;}



/*找到所有 含有属性名username 并且 属性值是jason 的标签*/
[username=‘jason‘] { background-color: orange;}



/*找到所有 含有属性名username 并且属性值是jason的input标签*/
/*注意: input后不能加空格*/
input[username=‘jason‘] {background-color: wheat;}