Web前端-HTML&CSS笔记之06

0906

CSS选择器的练习网站：餐厅练习。

CSS Diner - Where we feast on CSS Selectors! (flukeout.github.io)

继承

  • 样式的的继承，我们为一个元素设置的样式同时也会应用它的后代元素上

  • 继承是发生在祖先后代之间的

  • 继承的设计是为了方便我们的开发。

    • 利用继承我们可以将一些通用样式设置到共同的祖先元素上，这样只需设置一次即可让所有的元素具有该样式

  • 注意，并不是所有的样式都会被继承

    • 比如 背景相关的，布局相关的等这些样式不会被继承。
    • 如何查找某个样式会不会继承呢？可以使用zeal文档
    • 例如搜索：再css文档内搜索background-color，出来后下拉找到图示可以查看样式信息

Web前端-HTML&CSS笔记之06_前端笔记

选择器的权重

  • 样式的冲突

    • 当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了冲突。
    • 发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定。

  • 选择器的权重

    • 内联样式 1，0，0，0
    • id选择器 0，1，0，0
    • 类和伪类选择器 0，0，1，0
    • 元素选择器 0，0，0，1
    • 通配选择器 0，0，0，0
    • 继承的样式 没有优先级

  • 比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示（分组选择器单独计算的）

  • 选择器的累加不会超过其最大的数量级，如类选择器再高也不会超过id选择器

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

  • 可以在某一个样式后边添加 !important ，则此时该样式的会获取到最高优先级，甚至会超过内联样式。but，注意：在开发中这个玩意一定要慎用！能不不用则不用！

思考题： a元素的四个伪类，在全用的时候，有没有先后顺序要求？？

不知对错
<sytle>
a:visited{color:yellow;}
a:active{color:orange}
a:hover{color:pink;}
a:link{color:red;}
</sytle>

单位

长度单位

  • 像素

    • 屏幕（显示器）实际上由一个个的小点构成

    • 不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰

    • 所以同样的200px在不同的设备显示的效果不一样

      .box1{
width:200px;
height:100px;
background-color:aqua;
}

  • 百分比

    • 也可以将属性值设置为相对于其父元素属性的百分比
    • 设置百分比可以使子元素跟随父元素的改变而改变
.box2{
width:50%;
height:50%;
background-color:pink;
}
  • em
    • em是相对于元素的字体大小来计算的
    • 1em = 1font-size =16px（默认）
    • em会根据字体的大小的改变而改变
.box3{
font-size:20px;
width:10em;
height:10em;
}

  • rem

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

    • 移动端的适配使用较多，后期遇到再说

      <html>
    font-size:30;
</html>
.box3{
font-size:20px;
width:10rem;
height:10rem;
}
//这样的话box的大小是300px而不是200px

颜色单位

  • 颜色单位
    • 在css中可以直接使用颜色名来设置各种颜色
      • 比如：red、orange、yellow、blue、pink......
      • 但是在css中直接使用颜色名是非常的不方便

那么“方便的”颜色使用方式是怎样的呢？

  • RGB值
    • RGB值通过三种颜色的不同浓度来调配出不同的颜色
    • R red ，G green， B blue
    • 每一种颜色的范围在0-255（0%-100%）之间
    • 语法：RGB(红色,绿色,蓝色)
background-color:rgb(255,0,0);  //红色
background-color:rgb(0,255,0);  //绿色

  • RGBA

    • 就是在RGB的基础上增加了一个a 表示不透明度

    • 四个值，前三个和rgb一样，第四个表示不透明度

      • 1表示：完全不透明

      • 0表示：完全透明

      • .5表示：半透明

        background-color:rgba(0,255,0,.2);

  • 十六进制的RGB值

    • 语法：#红色绿色蓝色
    • 颜色浓度通过00-ff表示
    • 如果颜色两位两位重复可以进行简写
      • 例：#aabbcc --> #abc
background-color:#ff0000;  //红色
background-color:#ffff00;  //黄色
background-color:#bfa;     //豆沙绿
  • HSL值
    • H ：色相（0-360） //想象成一个环
    • S：饱和度，颜色的浓度（0%-100%）
    • L：亮度，颜色的亮度（0%-100%）

用的不多