打码日常2day--html5+css3（css）

css3

css3编写的位置

1.内联样式（行内样式）

• 在标签内通过style属性来设置元素的样式

• 问题：
  只能对一个标签生效，如果要影响到多个元素，每一个都要复制一遍
  修改时要一个一个修改，不方便
  注意：开发时绝对不能用内联样式

<p style="color: cadetblue; font-size: 60px;">你好呀！</p>
<p style="color: cadetblue; font-size: 60px;">我很好！</p>

2.内部样式表

• 将样式编写在head的style标签中

• 通过css的选择器来选中元素并为其设置样式

• 可以同时为多个标签设置样式，并且只用修改一个即可全部应用

<style>
     p{
        background: chocolate;
     }
</style>

3.外部样式表

• 可以将css样式编写到一个外部的css文件中

• 然后通过link标签来引入外部的css文件

• 只要使用这个样式的网页都可以引用，可在不同网页复用

<link rel="stylesheet" href="./08_css语法.css">

css选择器

1.常用选择器

1.元素选择器

• 作用：根据标签名来选中指定的元素

• 语法：标签名{}

• 例子：p{} h1{} div{}

  h1{
  	 background: chocolate;
  	}
  

2.id选择器

• 作用：根据元素的id属性值选中一个元素

• 语法：#id{}

• 例子：#box{} #red{}

  #red{
  	  color: red;
  	  }
  

3.类选择器

• 作用：根据元素的class属性选中一组元素

• 语法：class属性值

• class是一个标签的属性，它可以重复使用

• 可以通过她给元素分组，也可以一个元素设置多个class

  .abc{
  	   height: 100px;
  	 }
  

2.复用选择器

1.交集选择器

• 作用：选中同时复用多个条件的元素

• 语法：选择器1.选择器2{}

• 注意：交集选择器中有元素选择器，必须使用元素选择器开头

  div.red{
  	     color: red;
  	    }   
  

2.选择器分组（并集选择器）

• 作用：同时选择多个选择器对应的元素

• 语法：选择器1，选择器2{}

  h2,span{
  	      color: rosybrown;
  	     }
  

3.关系选择器

1.子元素选择器

• 作用：父元素>子元素{}

  div>span{
          color: royalblue;
        }
  

2.后代元素选择器

• 作用：选中指定元素内的指定后代元素

• 语法：祖先 后代

div span{
      color: springgreen;
    }

3.选择下一个兄弟

• 语法：前一个 + 下一个

  p + span{
       color: teal;
     }
  

4.伪类选择器

• 伪类用来描述元素的特殊状态（第一个，被点击，鼠标移入）

  ​ 伪类一般情况下都是使用：开头

  ​ :first-child 第一个元素

  ​ :last-child 最后一个元素

  ​ :nth-child() 选择第n个元素

  ​ 特殊值：

  ​ n n的范围0到正无穷

  ​ 2n 表示选中偶数的位置

  ​ 2n+1 表示选中奇数的位置

  • 以上这些元素是根据所有元素进行排序

    ul>li:first-child{
          color: tomato;
        }
    ul>li:nth-child(2n){
          color: turquoise;
        }
    

• :first-of-type

  :last-of-type

  :nth-of-type()

  • 这几个伪类的功能和上述的类似，不同点是它们在同类元素中进行排序

    ul>li:first-of-type{
          font-size: 50px;
        }
    

• :not() 否伪元素

  • 将符合条件的伪元素从选择器中去除

    ul>li:not(:nth-child(3)){
          font-weight: 900;
        }
    

5.选择器练习

选择器餐厅练习

超链接的伪类

• :link 用来表示没访问过的链接（正常的链接）

  a:link{
        color: tomato;
        font-size: 20px;
      }
  

• :visited 用来表示访问过的元素

  • 由于隐私原因，visited这个伪类只能修改链接的颜色

    a:visited{
          color: yellow;
        }
    

• :hover 表示鼠标移入的状态

  a:hover{
        color: crimson;
       }
  

• :active 表示鼠标点击

 a:active{
        font-size: 50px;
      }

伪元素

• 伪元素表示页面中一些特殊的并不存在的元素（特殊的位置）

  • 伪元素使用::开头

  • ::first-letter 表示第一个字母

  • ::first-line 表示第一行

  • ::selection 表示选中的内容

  • ::before 元素的开始

  • ::after 元素的结束

  ​ before和after必须接后content属性来使用

  p::first-letter{
        font-size: 50px;
      }
  p::first-line{
        color: crimson;
      }
  p::selection{
        background-color: cyan;
      }
  
  p::after{
        content: 'I am OK！';
        color: darkturquoise;
      }
  

样式的继承

• 我们为一个元素设置样式的同时也会应用到它的后代元素上
• 注意：并不是所有的样式都会被继承（背景相关的，布局相关的这些样式都不会被继承）

选择器的权重

• 我们通过不同的选择器，选中相同的元素为它设置样式时，此时会发生冲突

• 发生冲突时，应用那个样式又选择器的权重（优先级）决定

选择器的权重：
        内联选择器     1000
        id选择器       100
        类和伪类选择器   10
        元素选择器       1
        通配选择器       0
        继承的样式    没有优先级

• 比较优先级的时候需要将所有优先级相加，最后优先级高先显示（分组优先级时单独计算的）

• 选择器的累加不会超过最大数量级

• 如果优先级计算相同时，使用靠下的样式

• 可以在某个样式的后边添加！important，则此时有最高优先级，甚至高于内联样式

  ​ 注意：在开发中慎用

单位

• 像素：

  • 屏幕实际又一个一个小点组成
  • 不同屏幕的显示大小不一样，像素越小效果越清晰
  • 同样200px在不同设备下显示效果也不一样

• 百分比：

  • 可以将属性设置为相对其父元素属性的百分比
  • 设置百分比可以使子元素随父元素的改变而改变

• em：

  • em是相当于父元素来计算的
  • 1em=1font-size
  • em会根据字体大小而改变

• rem：

  • rem是相对于根元素的字体大小来计算