CSS3基础知识个人总结

CSS

一.CSS又称层叠样式表

《1》结构：

​ 选择器{声明;声明} 声明=属性+属性值

p {
   
   color: pink;
}

总结：

• 选择器写在 { } 前面，声明写在 { } 内，声明和声明之间用；隔开
• 声明是由属性和属性值组成，属性和属性值之间用：连接

《2》CSS样式

color	字体颜色
background-color	背景颜色
height	元素高度
width	元素宽度

《3》CSS三种样式表的使用

三种书写格式有：外部样式，内部样式，行内样式

1，外部样式表：

写在html文件外，创建一个 CSS 文件，通过在head里面创建link标签引入生效

可以实现代码复用(推荐外部写法)

<link rel="stylesheet" href="css/index.css">

2，内部样式表：

写在html文件内，通过在head里面创建style标签，在style标签内写CSS样式

  <style>
    p {
     
      color: pink;
      background-color: green;
    }
  </style>  

3，行内样式表：

写在元素开始标签style属性中(是使用最少的方式)

<p style="color:red;background-color: pink;">啦啦啦啦啦</p>

二.CSS权重：

《1》权重相同：

如果属性不冲突都生效，如果属性冲突后者生效

《2》权重不同时：

如果属性不冲突都生效，如果属性冲突权重大的生效

选择器	权重
通配符	0-1
标签选择器	0001
class选择器	0010
id选择器	0100
群组选择器	自己算自己的
包含选择器	所有选择器权重之和
! important	权重最高

 <style>
  p {
   
  color: pink !important;}
 </style>

! important 尽量少用或者不用

三.优雅降级，渐进增强

《1》渐进增强 progressive enhancement：

针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

《2》优雅降级 graceful degradation：

一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

《3》区别：

优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

四.CSS选择器

《1》标签选择器/类型选择器：

​ 直接用标签名作为选择器

 p {
   
      color: red;
    }

​ 作用：统一某一类标签的样式

《2》id选择器

#p1 {
      color: pink;
    }
<p id="p1">零零零零</p>

​ 注意：id 名不能重复，一个 id 名在页面中只能出现一次

​ 作用：让某个标签具有唯一性

《3》class选择器/类选择器

.p2 {
      color: red;
    }
<p class="p2">零零零零</p>
<p class="p2">零零零零</p>
<p class="p2">零零零零</p>

​ 特点：和 id 比较像，不具有 id 的唯一性，可以使用多次

​ 作用：将不同的标签，划为一类，统一管理

《4》群组选择器

   p,
    h3 {
      background-color: pink;
    }
  <p>我是p</p>
  <h3>我是h3</h3>

作用：给不同标签添某种样式(每个选择器直接用，隔开)

《5》通配符选择器 *

* {
      margin: 0;
      padding: 0;
    }

选中页面中所有元素

主要功能：清除默认间距，是写SCC的起手式

《6》包含选择器/后代选择器

p b 选中p后面所有的b元素

 p b {
      color: red;
    }
  <p>
    <b>asdasdas</b>
    asdasdasd
    <b>asdasdas</b>
  </p>

《7》亲儿子选择器

div>p 选中div下一级的所有p元素

div>p {
      color: red;
    }
<div>
    <p>asdsa</p>
    <header>
      <p>asdas</p>
    </header>
  </div>

《8》相邻兄弟选择器

di’v+p div的第一个兄弟元素，如果时p则被选中,如果不是或者不在第一个则不被选中

 div+p {
      color: red;
    }
 <div></div>
  <p>p</p>  文字颜色为红色
  <p>p</p> 文字颜色为默认颜色

《9》同级兄弟选择器

div~p 选中与div同级的所有p元素

div~p {
      color: red;
    }
 <div></div>
  &