Web前端-HTML&CSS笔记之06

Posted 王阿铁

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Web前端-HTML&CSS笔记之06相关的知识,希望对你有一定的参考价值。

Web前端-html&CSS笔记之06

0906

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

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

继承

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

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

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

    • 利用继承我们可以将一些通用样式设置到共同的祖先元素上,这样只需设置一次即可让所有的元素具有该样式
  • 注意,并不是所有的样式都会被继承

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

选择器的权重

  • 样式的冲突

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

    • 内联样式 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%)

用的不多

以上是关于Web前端-HTML&CSS笔记之06的主要内容,如果未能解决你的问题,请参考以下文章

Web前端新人笔记之jquery选择符

详解CSS三大特性之层叠性继承性和重要性——Web前端系列学习笔记

详解CSS三大特性之层叠性继承性和重要性——Web前端系列学习笔记

Web前端HTML5&CSS302-前端开发准备

Web前端HTML5&CSS304-CSS语法与选择器

Web前端HTML5&CSS312-字体