T-CSS基础-day01-CSS语法规范、CSS基础选择器

一.CSS概述

• CSS：Cascading Style Sheets 层叠样式表，级联样式表，简称样式表

1. 作用
   修饰html元素的样式（亚洲4大邪术）
2. HTML和CSS的关系
   html负责页面的结构的搭建，数据的承载
   css负责让html元素变得好看
   以html为基准，一层层的编写样式
3. html的属性和css的样式我们选择谁
   W3C建议我们尽量使用css的方式来取代html的属性
   css样式，可以让代码进行重用(重用效果有限),提供了可维护性

二.CSS的语法规范

1. 使用css样式
   1. 内联样式(行内样式)
      任意元素都有style属性，在style中定义的样式，叫内联样式(项目中一般少用)
      
      如果style中，有多个样式，使用;来分割
      <div style="color:red;background-color:pink;font-size:50px;">
      特点：1.不能重用；2.内联样式优先级最高
      目前需要掌握的3个css样式属性
      color:合法的颜色值；设置字体颜色
      background-color:合法的颜色值; 设置背景颜色
      font-size: **px； 设置字号大小
   2. 内部样式
      在head标签中，定义style标签
      在style标签中，定义样式
      格式：选择器{样式声明;样式声明;....}
      特点：1.代码可以重用；2.重用只能在当前页面重用
      项目中用的较少，在学习和测试的时候，使用较多（淘宝仍在用内部样式，原因：框架是欧洲的）
   3. 外部样式
      单独创建一个css文件编写样式
      在html中的head标签中，调用这个样式
      <link rel="stylesheet" href="my.css"/>

      ---

      练习：css3种使用方式
      01_ex
      <h1>lorem内联，背景pink，字体yellow
      <h2>lorem内部，背景yellow，字体red
      <h3>lorem外部，背景red，字体pink

      ---

2. css特性
   1. 继承性
      多数样式是可以被子元素继承（但有些元素是不能继承的，例：尺寸，边框，内外边距…）
      
      特殊的：a标签不能继承父级的字体颜色
   2. 层叠性
      可以为一个元素定义多个样式规则
      如果这些样式样式规则不冲突，那么都可以应用到元素上
   3. 优先级
      当为一个元素设置很多样式
      其中样式发生了冲突，要按照样式的优先级来应用样式
      默认优先级规则：
      1. 最高----内联样式
      2. 内部样式和外部样式：就近原则（谁距离目标元素近，使用谁）
      3. 最低----浏览器默认样式
   4. 使用关键字调整样式的优先级
      !important 提升优先级
      h4{color:#069 !important;}
      注意：1.!important比内联优先级还高；2.内联中,语义要求，不允许添加!important;

      ---

      练习 03_ex.html中
      一个p标签，内容假文
      内部，文本blue,字号24px；
      外部，文本red，字号40px
      将外部引入，f12观察效果
      内联，文本yellow。f12观察效果
      改变外部文件引入位置，f12观察
      给外部添加！important.观察效果

      ---

三.基础选择器(重点★)

1. 选择器的作用
   官方：规范了页面中哪些元素能够使用定义好的样式
   理解：选择器就是一个条件，符合这个条件的元素，都可以使用定义好的样式
2. 选择器的详解

   1. 通用选择器
      *{样式声明}：所有元素都要匹配这个样式：
      所有语言都要求大家尽量少用*，因为效率非常低
      *{margin:0;padding:0}：所有元素的内边距和外边距清空。这个行为叫做css reset 样式重置。由于不同浏览器对同一篇代码的解析有可能不同。所以写代码的时候，需要把一些样式进行统一，或者清除。

   2. 标签选择器，元素选择器
      一般用于定义某种元素的公用样式
      元素名称{样式声明}
      页面中所有对应元素，都要应用这个样式

   3. id选择器
      只对当前页面中，一个标签生效(id不会重复)
      一般项目中id选择器，单独使用比较少。
      项目中#id选择器通常用于后代和子代选择器的第一部分
      学习和测试单独使用比较多
      body中：<p id="p1">，可以用p#p1+tab键快捷输入
      head中：#p1{样式声明}

      ---

      练习，03_ex.html
      h2标签，内容是假文，id是text1
      使用id选择器设置文本颜色purple，背景为黄色，字体为斜体font-style:italic.
      再使用元素选择器，设置文本为红色，背景为pink。
      写完后会对就近原则产生疑问，不理解

      ---

   4. 类选择器
      定义页面上的一个样式片段，哪个元素想用，就使用class调用，可以不停的被重用
      .类名{样式声明} 声明类名有点
      <元素名 class="类名"> 调用类名没有点
      注意，类名的定义规则
      1.定义类选择的时候，点不能省略
      2.类名不能以数字开头
      3.只能包含-或_
      4.见名知意
      类选择器的特殊使用方式

      1. 多类选择器，一个class中，引用多个类名
         <h4 class="text-red bg-yellow">类选择器</h4>
      2. 分类选择器
         1. 标签选择器.类选择器{样式声明}
            调用这个类名的这个标签，应用这个样式，提升权值
         2. 类选择器.类选择器{样式声明}
            同时引用了这两个类选择器的标签，应用这个样式

      ---

      练习，在03_ex.html中
      添加div和p标签，内容随意（假文）
      用类选择器为所有元素设置字体颜色为红色
      用分类选择器专门为p标签设置背景颜色为黑色black

      ---

   5. 群组选择器-同时为多个选择器定义一种样式
      选择器1，选择器2，选择器3.......{样式声明}

   6. 后代选择器
      元素的后代关系，匹配元素
      后代关系，一级或者多于一级的嵌套
      选择器1 选择器2 选择器3....{样式声明}

   7. 子代选择器
      通过元素的子代关系，匹配元素
      子代关系,一级的嵌套
      选择器1>选择器2>选择器3…{样式声明}
      注意，后代选择器和子代可以混写，例：
      #d1 p>span{}
#d1 >p span{}

   8. 伪类选择器
      匹配元素不同状态下的样式

      1. 链接未被访问时的状态
         元素:link{样式声明}
      2. 链接已访问的状态
         元素:visited{样式声明}
      3. 鼠标悬停时的状态（常用）
         元素:hover{样式声明}
      4. 元素被激活时的状态（按住该元素不放手时）
         元素:active{样式声明}
      5. 元素获取焦点时的状态
         元素:focus{样式声明}

         ---

         练习04_ex.html
         一个a标签，内容随意，跳转一个未访问过的页面
         1.访问后，文本颜色orange
         2.被激活时，文本颜色绿色
         3.鼠标悬停时，文本颜色红色
         4.未被访问时，文本颜色pink

         ---

         当4种状态作用到同一个元素上，会发生冲突，必须按照一定顺序编写：爱恨原则 love & hate：link/visited/hover/active

   9. 选择器权值问题
      !important >1000
      内联样式 1000
      id选择器 100
      类选择器 10
      伪类选择器 10
      元素选择器 1
      通用选择器* 0
      继承的样式 无
      权值:表示当前选择器的重要程度，权值越大优先级越高，特点：

      1. 当一个选择器中含有多个选择器时，需要将所有选择器的权值进行相加，结果越大优先级越高
      2. 权值相同，使用就近原则
      3. 群组选择器权值不能相加，单独计算
      4. 样式后面添加了!important直接获得最高权值，内联样式不能添加!important
      5. 权值计算结果不能超这个权值的最大数量级(1万个元素选择器加一起，也比10小，最大权值为9)

四.尺寸和边框

1. 尺寸
   设置元素在页面中的宽高
   width:
height:
   取值：以px为单位的数字
   附加知识点----单位
   尺寸的单位：
   1. 绝对单位（项目中用的少）：
      1. px 像素
      2. in 英寸 1in=2.54cm
      3. pt 磅值，多用于定义字号大小。1pt=1/72in
      4. cm
      5. mm
   2. 相对单位：
      1. em:以父元素设置的值为一个基本单位，1.5em。就是1.5个基本单位
      2. rem:以html标签设置的值为一个基本单位
         如果html没有设置值，1rem默认为16px
      3. % 多数是父元素设置值的百分比