zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    [人物存档]AI【捏脸数据】【捏人数据】【人物卡精选】少女3DCG设计参考萌萌的耳朵
    [人物存档]AI【捏脸数据】【捏人数据】【人物卡精选】少女3DCG设计参考
    碧蓝航线-cosplay-吾妻猉 绘画CG设计参考
    Pixiv日榜2020-4-5精选动漫插画壁纸 设计参考
    Marvelous Designer 旗袍设计参考素材免费分享及服装3D模型导入MD教程
    [人物存档]AI【捏脸数据】【捏人数据】【人物卡精选】少女设计参考
    P站日榜【2020-3-22】pixiv动漫美图热门插画壁纸
    Pixiv腿部渔网袜绘画设计参考特辑,在我眼里你就是一个弟弟(姐弟特辑)绘画参考
    Daz3D studio 快速上手进阶免费教程,持续更新
    Airflow 1.10安装
  • 原文地址:https://www.cnblogs.com/simplecat/p/11353816.html
Copyright © 2011-2022 走看看