• 第三十六天


     css组合选择器 <!DOCTYPE html> <html> <head>  <meta charset="UTF-8">  <title>组合选择器</title>  <style type="text/css">   /*组合选择器*/   /*特性:每个选择器位可以为任意基本选择器或选择器组合*/

      /*群组选择器: ,隔开*/   /*控制多个*/   div, .s, section {    color: red;   }   /*子代选择器: >连接*/   body > div {    color: orange;   }   /*div > a {    text-decoration: none;   }*/   /*后代选择器: 空格连接*/   /*包含子代选择器*/   body a {    text-decoration: none;   }   /*text-decoration 去除超链接下面的下划线*/   /*相邻选择器: +连接*/   span + section {    background-color: pink;   }   /*兄弟选择器: ~连接*/   /*包含相邻选择器*/   div ~ section {    background-color: brown;   }      /*交集选择器*/   /*即是选择器1又是选择器2*/   i.s {    color: yellow;   }      /*多类名选择器*/   .d1 {    color: blue;   }   .d1.d2 {    color: tan;   }   .d1.d2.d3 {    color: #780;   }  </style> </head> <body>  <!-- div{div}+span{span}+section{section} -->  <div>div</div>  <span class="s">span</span>  <section>section</section>  <div>   <a href="">a标签</a>  </div>  <i class="s">iiii</i>  <div class="d1 d2 d3">呵呵</div>

    </body> </html>

    组合选择器优先级 <!DOCTYPE html> <html> <head>  <meta charset="UTF-8">  <title>组合选择器优先级</title>  <style type="text/css">   同目录结构下   1.子代与后代优先级相同   body > div == body div   2.相邻与兄弟优先级相同   div + span == div ~ span   3.最终样式采用逻辑后的样式值

      不同目录结构下   1.根据选择器权值进行比较   2.权值为标签权重之和   3.权重: *:1 div:10 class:100 id:1000 !important:10000   4.权值比较时,关心的是值大小,不关心位置与具体选择器名   5.id永远比class大,class永远比标签大   注:控制的是同一目标,才具有可比性   div>div>div>div>...>div {} 11 < .div{}      /*10*/   div {    color: red;   }   /*20*/   div div {    color: yellow;   }   /*大于一切标签*/   .d2 {    color: blue;   }   /*.d2抵消,剩权重10*/   div .d2 {    color: orange;   }   /*等价于div .d2,权值相同,位置决定*/   .d1 div {    color: pink;   }   /*又多10*/   div .d1 div {    color: tan;   }   /*不具有可比性*/   div .d1 > div{    color: gree ;   }   /*高于一切class及标签*/   #dd1 div {    color: #000;   }  </style> </head> <body>  <!-- div>.d1>#dd1>div>.d2 -->  <div>   <div class="d1">    <div id="dd1">     <div>      <div class="d2">12345</div>     </div>    </div>    <!-- <div id="dd2">     <div>      <div class="d2">12345</div>     </div>    </div> -->   </div>  </div> </body> </html>

    属性选择器 <!DOCTYPE html> <html> <head>  <meta charset="UTF-8">  <title>属性选择器</title>  <style>   .d2 {    color: red;   }   /*属性选择器权重 == class选择器权重*/   /*有属性class的所有标签*/   [class] {    color: orange;   }

      /*有属性class且值为d2的所有标签(值不影响权重)*/   [class="d2"] {    color: pink;   }      /*是div且class='d2',增加了权重*/   div[class='d2'] {    color: blue;   }      属性以什么开头: ^=   属性以什么结尾: $=   属性模糊匹配: *=   [class ^= 'he'] {    color: yellow;   }   [class $= 'ld'] {    color: tan;   }   [class *= 'ow'] {    color: cyan;   }   [class][dd] {    color: brown;   }

     </style> </head> <body>  <!-- div.d1>.d2 -->  <div class="d1">00000   <div class="d2">12345</div>   <!-- dd与do为自定义属性 -->   <div class="helloworld" dd do="do something">helloworld</div>  </div> </body> </html>

    盒模型 <!DOCTYPE html> <html> <head>  <meta charset="UTF-8">  <title>盒模型</title>  <style type="text/css">   .box {    margin: 10px;    border: solid;    padding: 10px;     100px;    height: 100px;    /*background-color: orange;*/    /*覆盖*/    background: red;   }   /*组成:margin + border + padding + content*/   /*content = width * height*/   /*1.四个成员均具有自身独立显示区域,不相互影响(视觉上感觉会相互影响)*/   /*2.margin/padding外边距/内边距控制布局*/   /*3.border控制边框*/   /*4.content控制内容*/

      /*padding*/   /*与content共有背景颜色*/      /*content*/   /*内容显示区域*/   /*红色区域 120 * 120 */   /*content区域 100 * 100 => 内容显示区域*/

      /*值设置*/   .box {    /*控制四个方位*/    /*margin: 20px;    padding: 30px;*/        /*上下 左右*/    /*margin: 10px 20px;    padding: 30px 40px;*/        /*上 左右 下*/    /*margin: 10px 20px 30px;    padding: 30px 40px 50px;*/        /*上 右 下 左*/    margin: 10px 20px 30px 40px;    padding: 30px 40px 50px 40px;    /*总结*/    /*1.规定起始 2.顺时针 3.不足找对面*/   }

      /*边框: 宽度,颜色,样式*/   .box {    border- 10px;

       /*transparent透明,会透出背景颜色*/    /*border-color: transparent;*/    border-color: #333;        /*边框的不同形式*/    /*solid solid dotted dotted outset inset double*/    border-style: double;

       /*整体设置*/    border: 5px solid orange;   }

     </style> </head> <body>  <div class="box">12345</div> </body> </html>

    边界圆角 <!DOCTYPE html> <html> <head>  <meta charset="UTF-8">  <title>边界圆角</title>  <style type="text/css">   .box {     200px;    height: 200px;    background-color: orange;   }   /*单角设置*/   .box {    /*一个固定值: 横纵*/    border-top-left-radius: 100px;    /*两个固定值:横 纵*/    border-top-left-radius: 100px 50px;    /*百分比赋值*/    border-top-left-radius: 100%;   }

      /*整体赋值*/   .box {    /*不分方位(横纵)*/    /*左上为第一个角,顺时针,不足找对角*/    /*border-radius: 10px 100px 50px;*/

       /*区分横纵*/    /*1./前控制横向,后控制纵向*/    /*2.横向又可以分为1,2,3,4个值,纵向毅然*/    border-radius: 10px 100px 50px / 50px;    /*左上横10 右上横100 右下横50 左下横100 / 纵向全为50*/    /*所有最多可以赋值8个值*/   }  </style> </head> <body>  <div class="box"></div> </body> </html>

    a img list 标签 <!DOCTYPE html> <html> <head>  <meta charset="UTF-8">  <title>a_img_list</title>  <style type="text/css">   /*reset操作: a标签一些默认属性的清除*/   a {    color: #333;    text-decoration: none;    outline: 0;   }  </style> </head> <body>  <!-- 一.基本使用 -->  <!-- 超链接标签:a -->  <!-- 双/行/单一类型标签 -->  <a href="https://www.baidu.com">前往百度</a>  <a href="./05_边界圆角.html">前往边界圆角页面</a>  <!-- ./或省略代表当前文件所在路径,可以访问与该文件同路径下的所有文件及文件夹 -->  <a href="./temp/temp.html">前往temp页面</a>

     <!-- 二.属性 -->  <!-- title:鼠标悬浮的文本提示 -->  <!-- target:_blank,新开空白标签位来打开目标页面 -->  <a href="http://sina.com.cn" title="新浪网" target="_blank">前往新浪</a>

     <!-- 三.其他应用场景 -->  <!-- mailto | sms | tel -->  <a href="mailto:zero@163.com">信息给zero</a>  

     <!-- 四.锚点 -->  <!-- a与a href="#锚点名" -- name="锚点名" -->  <!-- a与标签 href="#锚点名" -- id="锚点名" -->  <a href="#tag">前往底部</a>  <!-- 测试锚点请tab -->  br * 100  <!-- 设置一个锚点 -->  <!-- .bottom做底部布局的区域 -->  <div class="bottom">   <a name="tag"></a>   <!-- <i id="tag"></i> -->   <!-- <div id="tag"></div> -->   ...  </div>

     <!-- 五.img使用 -->  <!-- src可以连接本地及网络图片 -->  <!-- alt:资源加载失败时的文本提示 -->  <!-- title:图片的文本信息(鼠标悬浮时展示) -->  <!-- <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537511739499&di=f5f2763fe54c8ea4d89b2fafe0569c84&imgtype=0&src=http%3A%2F%2Fimg.alicdn.com%2Fimgextra%2Fi1%2FTB2IZbxogmTBuNjy1XbXXaMrVXa_%2521%25212754890204.jpg_400x400.jpg" alt="雪纳瑞" title="一览雪纳瑞风姿"> -->

     <!-- 六.list列表 -->  <!-- reset操作 -->  <style type="text/css">   ol, ul {    margin: 0;    padding: 0;    list-style: none;   }  </style>

     <!-- 有序列表 -->  <ol>   <li>列表项</li>   <li>列表项</li>   <li>列表项</li>  </ol>  <!-- 无需列表:常用 -->  <ul>   <li>列表项</li>   <li>列表项</li>   <li>列表项</li>  </ul> </body> </html>

    伪类选择器 <!DOCTYPE html> <html> <head>  <meta charset="UTF-8">  <title>伪类选择器</title>  <style type="text/css">   a {    color: #333;    text-decoration: none;   }   /*:link为一个整体,代表超链接的初始状态*/   a:link {    color: orange;   }   /*:hover鼠标悬浮*/   a:hover {    color: green;    /*鼠标样式*/    cursor: pointer;   }   /*:active活动状态中(被鼠标点击中)*/   a:active {    color: red;   }   /*:visited访问过的状态*/   a:visited {    color: cyan;   }   /*普通标签运用: :hover :active*/   .box {     200px;    height: 200px;    background-color: red;   }   .box:hover {    background-color: orange;    cursor: pointer;   }   .box:active {     400px;    border-radius: 50%;   }

      /*内容伪类*/   .txt:before {    content: "我是前缀~~~"   }   .txt:after {    content: ">>>我是后缀"   }      /*伪类可以单独出现*/   /*:after {    content: "呵呵"   }*/

      /*位置伪类*/   /*1.位置从1开始*/   /*2.*/   /*先匹配位置,再匹配类型: 找到所有结构下的第2个标签,如果刚好是div,那么匹配成功*/   /*body a-baidu div01*/   div:nth-child(2) {    color: green;   }      /*先确定类型,再匹配位置*/   /*先将页面中所有div找出,在匹配那些在自己结构层次下的第二个div*/   div:nth-of-type(2) {    color: cyan;   }

      /*2n*/   /*    div ooo div    ooo div ooo    div ooo div   */

      /*3n*/   /*    div div ooo    div div ooo    div div ooo   */

      /*3n - 1*/   /*    div ooo div    div ooo div    div ooo div   */

      /*取反伪类*/   /*:not([d]) {    color: red;   }   body.body {    color: orange;   }*/   span:not([d]) {    color: red;   }  </style> </head> <body class="body">  <!-- 1.a标签的四大伪类 -->  <a href="./123.html">访问页面</a>  <a href="https://www.baidu.com">访问过页面</a>  <div class="box">box</div>

     <!-- 2.内容伪类 -->  <div class="txt">原来的文本</div>

     <!-- 3.位置伪类 -->  <div class="wrap">   <span>span01</span>   <div>div01</div>   <div>div02</div>  </div>    <!-- 4.取反伪类 -->  <span d>12345</span>  <span dd>67890</span> </body> </html>

    盒模型布局 <!DOCTYPE html> <html> <head>  <meta charset="UTF-8">  <title>盒模型布局</title>  <style>   /*做页面必备reset操作*/   html, body {    margin: 0   }   .box, .wrap {     200px;    height: 200px;    background-color: red;   }   .wrap {    background: orange;   }   /*影响自身布局*/   /*.box {    margin-top: 30px;    margin-left: 100px;   }*/   /*影响兄弟布局*/   /*margin-bottom影响上下兄弟,尽量别对margin-right进行设置*/   /*margin-right影响左右兄弟,尽量别对margin-bottom进行设置*/   .box {    /*margin-bottom: 30px;*/    margin-right: 100px;   }

      /*display:显示方式*/   /*块:block*/   /*内联:inline*/   /*内联块:inline-block*/   .box, .wrap {    display: inline-block;    /*vertical-align: top;*/   }

         /*兄弟坑*/   /*盒模型布局坑只出现在和margin-top相关的地方*/   .s1, .s2 {     100px;    height: 100px;    background-color: pink;   }   /*重叠取大值*/   .s1 {    margin-bottom: 30px;   }   .s2 {    margin-top: 50px;   }      /*父子坑*/   .sup {     200px;    height: 200px;    background-color: cyan;   }   .sub {     100px;    height: 100px;    background-color: orange;   }   /*父子top重叠,取大值*/   .sup {    margin-top: 50px;   }   .sub {    margin-left: 50px;   }   /*解决盒模型经典布局坑*/   /*1.将父级固定*/   .sup {    /*border-top: 1px solid black;*/    /*border-top: 1px solid transparent;*/    /*保证显示区域 200*200 */    /*height: 199px;*/   }   .sub {    /*margin-top: 50px;*/   }   /*2.通过padding*/   .sup {    padding-top: 50px;    height: 150px;   }

        </style> </head> <body>  <div class="box"></div>  <div class="wrap"></div>

     <!-- 坑 -->  <section class="s1"></section>  <section class="s2"></section>

     <div class="sup">   <div class="sub"></div>  </div> </body> </html>

    w3c引导 <!DOCTYPE html> <html> <head>  <meta charset="UTF-8">  <title>w3c</title>  <style type="text/css">   * {    margin: 0;    padding: 0;    /*border: 1px solid transparent;*/   }   h1.title {     500px;    /*height: 250px;*/    height: 100px;    border: 1px solid black;   }   .title {    background: url('img/bg.png') no-repeat 0 -150px;   }   .title:hover {    background: url('img/bg.png') no-repeat 0 -250px;    cursor: pointer;   }   .nav_div {     150px;    height: 45px;    background-color: #444;    text-align: center;    line-height: 45px;    display: inline-block;   }   .nav_div:hover {    background: red;    cursor: pointer;    color: white;   }  </style> </head> <body>  <div class="warp">   <div class="top">    <h1 class="title"></h1>    <div class="nav">     <div class="nav_div d1">#####</div>     <div class="nav_div d2">#####</div>     <div class="nav_div d3">#####</div>     <div class="nav_div d4">#####</div>     <div class="nav_div d5">#####</div>    </div>   </div>   <div class="main">    <div class="left"></div>    <div class="middle"></div>    <div class="right"></div>   </div>   <div class="end"></div>  </div> </body> </html>

  • 相关阅读:
    Warning! PATH is not properly set up...
    用rvm切换ruby
    Mac下多版本JDK安装
    iOS开发 密码里面含有特殊字符如何处理传给后端
    Cornerstone版本回退160013错误
    iOS 11 Xcode9 tableview点击cell上的按钮cell自动往上跳动
    iOS 获取全部字体的Fontfamily和FontName
    iOS WKWebView 点击超链接跳转至Safari
    iOS 11在window上加视图不显示
    Java并发(2)
  • 原文地址:https://www.cnblogs.com/zhouhao123/p/9789112.html
Copyright © 2020-2023  润新知