• CS选择器笔记(未整理)


    CSS页面引入方法

      外链式(在head标签里面)

      <link rel= “style href =“.1.css””>

      1.css文件如下

      div{

        width:200px:

        height:200px:

        backgr-color:red

      }

      嵌入式,通过style标签,写在head里面(在style标签里面写入外联式一样的)

      <style type="text/css">  

      div{

        width:200px:

        height:200px:

        backgr-color:red

      }

      </style>

      内联式(在body里面)分号很重要

      <div style = "200ps:height:200ps:backgroud-color:red"><div>

    推荐使用外联和嵌入~~~~

        优先级别:离元素越近,越高

    CSS的选择器

    标签选择器,通过标签设置元素

    id选择器,通过在标签里面添加id,id不能重复!

    类选择器,应用最多

    注释:/*这里写注释*/

      

    标签选择器,通过div标签,影响所有div的标签

      <style>  

      div{

        width:200px:

        height:200px:

        backgr-color:red

      }

      </style>

    类选择器 通过class类名来设置样式

    首先在body的div标签添加类名

      <div class=“iteam”></div>

    然后在head的写入嵌入式###引用类的时候,一定在前面有个点,一个类可以应用多个元素

      <style  

      .tieam{

        width:200px:

        height:200px:

        backgr-color:red

      }

      </style>

    一个元素可以使用多个类名

    <div class=“iteam iteam3”></div>

    id选择器,通过id设置样式

    首先在body的div标签添加id名

    <div id=“iteam2”></div>

    然后再head的写入嵌入式###引id的时候,一定在前面有个#,id唯一

      <style>  

      #iteam1{

        width:200px:

        height:200px:

        backgr-color:red

      }

      </style>

    优先级:影响范围越大,优先级越小:id>class>标签

    层级选择器,选择父类下的子类设置属性,通过类、id、元素混合一级一级寻找要设置的元素

    (下面是在类选择器下的标签选择)

    首先在body

    <div class:“wrap”></div>

      <div></div>

    然后在head标签下的嵌入式

      <style  

      .wrap div{

        width:200px:

        height:200px:

        backgr-color:red

      }

      </style>

    (下面是在类选择器下的类选择器)

    <div class:“wrap”></div>

      <div class:“wrap2”></div>

    ----------------------------------------------

      <style  

      .wrap .warp2{

        width:200px:

        height:200px:

        backgr-color:red

      }

      </style>

    同理类选择器下的id选择器,

    并列选择器,給多个元素设置相同样式,引用类元素中间是逗号隔开

    <div class:“hhh”></div>

    <div class:“ggg”></div>

    <div class:“vvv”></div>

    把他们的宽度、高度设置200

      <style  

      .hhh,ggg,vvv{

        width:200px:

        height:200px:

      }

      </style>

    伪类选择器

    设置鼠标悬停元素状态

    <div class:“qqq”></div>

    ----------------------------------------

      <style>                        (平时的状态) 

      .qqq;hover{

        width:200px:

        height:200px:

      }

      </style>

      <style  

      .qqq;hover{      (鼠标悬停状态,变小了)

        width:111px:

        height:111px:

      }

      </style>

  • 相关阅读:
    Android开源项目收藏
    ubuntu修改ip获取方式(静态,动态)
    linux内核调用用户空间程序
    linux 改变目录下所有文件及其子文件夹下的权限
    jquery remove() empty()
    jquery之attr()和removeAttr() prop的使用场所
    jquery 获取对象的八种总结
    html子标签浮动父标签无法扩充
    静态代码块
    java static介绍
  • 原文地址:https://www.cnblogs.com/simplecat/p/11353816.html
Copyright © 2020-2023  润新知