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>

  • 相关阅读:
    pip不是内部或外部命令也不是可运行的程序或批处理文件的问题
    动态规划 leetcode 343,279,91 & 639. Decode Ways,62,63,198
    动态规划 70.climbing Stairs ,120,64
    (双指针+链表) leetcode 19. Remove Nth Node from End of List,61. Rotate List,143. Reorder List,234. Palindrome Linked List
    建立链表的虚拟头结点 203 Remove Linked List Element,82,147,148,237
    链表 206 Reverse Linked List, 92,86, 328, 2, 445
    (数组,哈希表) 219.Contains Duplicate(2),217 Contain Duplicate, 220(3)
    重装系统
    java常用IO
    端口
  • 原文地址:https://www.cnblogs.com/simplecat/p/11353816.html
Copyright © 2011-2022 走看看