CSS

CSS概念

• 层叠样式层Cascading style sheets
• 让网页元素的样式更加丰富
• 拆分网页内容与样式
• html只负责页面内容和结构，样式全部交给css

css语法

• 选择器{属性:值;属性:值;属性:值;}
• 选择器：将样式和页面元素关联起来的名称
• 属性:值,类似python中的键值对
• 注意分号分隔

div{width: 200px;height: 200px;background-color: green;}

css使用

• 1.外链式:通过link标签，将外部css引入到当前页面中(常用)
• 2嵌入式:通过style标签，在网页上创建嵌入的样式表
• 3.内联式:通过标签的style属性，直接在标签上写样式(不推荐)
• 4.css的优先级问题:
  三种样式使用方式，离元素越近的，优先级越高
  优先级：外链式<嵌入式<内联式

    <!--1.外链式，通过link标签导入外部css文件，写在head标签中-->
    <link rel="stylesheet" href="css/1.css">

    <!--2.嵌入式，通过style标签写css，也是要在head标签中-->
    <style>div{width: 200px;height: 200px;background-color: yellow;}</style>

<!--3.内联式 在标签内使用style属性来设置css样式-->
<div style="width: 200px;height: 200px;background-color: blue;"></div>

css选择器

• 1.标签选择器
  - 通过标签设置元素的样式，影响范围大
• id选择器
  - 通过id名称选择元素，元素id不能重复(重复了也会生效，但是影响js的调用)
• 类选择器
  - 通过类名来选择元素，影响范围相对较小，可控
  - 一个类可以应用多个元素
  - 一个元素上也可以使用多个类，灵活，可服用
  - 是css中使用最多的选择器
• 层级选择器
  - 选择父元素下的子元素或子元素下的子元素
  - 与标签结合使用
  - 通过层级选择器减少命名，防止名称冲突
• 组选择器/并列选择器
  - 存在同样样式的多个选择器时，使用组选择器
  - 同时给多个元素设置相同的样式
• 伪类及伪元素选择器
  - hover,表示鼠标悬浮在元素上时的状态
  - before 通过样式在元素前插入内容
  - after 通过样式在元素后插入内容
• 选择器优先级问题：
  - 影响范围越大的选择器优先级最低
  - id选择器>类选择器>标签选择器

/* 标签选择器 通过标签来设置元素的样式 影响范围最大*/
div{width: 200px;height: 200px;background-color: green;}

/* #id选择器 通过id属性的值来设置元素的样式 影响范围最小*/
/*  注意id在html当中具有唯一性,不能重名 */
#box1{width:300px;height:300px;background-color:blue;}
#box2{width:100px;height:100px; /*设置边框*/border:1px solid red;}
#box3{width:100px;height:100px;background-color:blue;}

/* .类选择器 通过class类名来设置元素的样式 影响范围可控制相对较小*/
.item1{width:200px;height:200px;background-color:red;}
.item2{width:100px;height:100px; /*设置边框 */border:1px solid red;}
.bg{background-color:pink;}

/*层级选择器*/
.wrap{width: 500px;height: 500px;border: 1px solid red;}
.wrap div{width: 300px;height: 300px;background-color: red;}
.wrap .in{width: 200px;height: 200px;background-color: green;}

/*组选择器 可以同这给多个元素设置相同的样式*/
.box1,.box2,.box3{width: 200px;height: 200px;}

.box1{ /*width:200px;*/ /*height:200px;*/background-color:red;}
.box2{ /*width:200px;*/ /*height:200px;*/background-color:green;}
.box3{ /*width:200px;*/ /*height:200px;*/background-color:blue;}

/* hover 设置鼠标悬停在元素上时的状态 */
.box{width: 200px;height: 200px;background: green;}
.box:hover{ /* 鼠标悬停上之后的样式 */background: red;}
/* after在元素里面的尾部插入内容 */
.box:after{content: 'You';}
/* before在元素里面的尾部插入内容 */
.box:before{content: 'I';}