• css.day02


    1.复合选择器

    复合选择器 一般会有几个标签混合使用 。把多个组合成一个  称之为复合

      1.1标签指定式 复合选择器 (交集选择器)

      格式: 标记选择器+ 类名/ID名称 { 属性:值;}

      实际情况用的相对少。 但是 高手 会用的特别好。

      加选  shift  减选 alt  交叉  shift+alt

      1.2后代选择器 (父子级关系)

      格式:  选择器1 选择器2 ... { 属性:值;}

      选择器1 一定是 选择器2 的父级   选择器2 一定是选择器1 的子级

     

      <div>

     

         <p> 测试</p>

     

      </div>

     

      div p{color:red;}

     

      注意:  选择器之间一定用空格隔开。

      1.3并集选择器  (集体声明)

      代码冗余  

      注释:  (隐形战斗机)

      注释 :代码看不见(不执行)  程序员(人)能看见

      语法: /*    内容    */

      并集选择器适合于: 多个标签具有同一种样式。

    <style type="text/css">
    /*p{color:#F00; }   
    span{color:#F00;}
    ul{color:#F00;}*/
    p,span,ul{color:#F00;}
    </style>

      核心: 标签之间用 逗号 隔开。

    2.通配符选择器 (*)

      我们window 系统有两个通配符 :  *   和  ?

      * 所有的意思。

      *{color:#F00;}  所有的标签都是红色

      大家觉得: *{color:red;}  简单  

      还是 p,div,span,ul{color:red;}  简单

    写起来简单  但是 代码执行起来还是第二个简单。

    注意:我们现在几乎不用 ,现在它只剩下一个作用,就是用来测试用。

    3.伪类选择器(链接伪类 a

    伪类:  伪娘   女汉子  

    **  嗲    伪类:明明不存在,但是确实有实际效果。

     .class

    伪类 :(冒号)  

    关于链接:

    a:link  链接平时(正常)的状态 

    a:visited  链接访问过之后的状态 (点击后)

    a:hover  鼠标经过时候的状态

    a:active   鼠标点击时的状态

    单词:

    text-decoration: 文本修饰

    <style type="text/css">
    a:link{color:#000; text-decoration:none; }/*文本修饰为没有下划线*/
    a:visited{color:#F90; text-decoration:none;}   /*点击后,为黄色 没有下划线*/
    a:hover{color:#F00; text-decoration:underline;} /*鼠标经过的时候,为红色下划线*/
    a:active{color:#00ff00; text-decoration:underline;} /*鼠标点击的时候,为绿色 下划线*/

    /*现在都可以这么写:*/

    a{color:#000; text-decoration:none;}
    a:hover{color:#F00; text-decoration:underline;}

    注意: 如果四个状态写全了,必须按照:

    顺序不能颠倒

    l   v    h    a   

    第一种记忆:   l ov e     h a t e   由爱生恨

    第二种记忆 :  l  v     h a o    lv包包  好 

    导航栏小案例:

    案例分析:

    1. 因为鼠标放上去会变换图片和文字  就应该用到  链接伪类。

    2. 链接 a 属于那种显示模式:行内显示模式。在这里需要把它转换成:行内块元素。

    3.指定相应背景图片

    代码准备:

    1. 一般是先准备结构 (标签) 后准备样式。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
    div{text-align:center;}
    div a{width:88px; height:44px; background-image:url(gray.JPG);display:inline-block; color:#FFF; text-decoration:none; line-height:44px;}
    div a:hover{background-image:url(red.JPG); color:#F90;}
    </style>
    </head>
    <body>
    <div>
    <a href="#">首页</a>
    <a href="#">相册</a>
    <a href="#">作品</a>
    <a href="#">生活</a>
    <a href="#">展示</a>
    <a href="#">留言</a>
    </div>
    </body>
    </html>

    4.行高不简单

    基线位置  : asdfasdffgjjhkjlkjl

    行高是两行文字 基线之间的距离 :

    我们会发现:  如果给一个块级盒子的高度 和它的行高相等 ,这个盒子的文字就会在盒子里面垂直居中。(注意,只限一行文字)

    5.css 背景的设置

     background-color:  背景颜色

     background-image:url() 背景图片

     background-repeat: 背景是否平铺

    默认是平铺的           no-repeat  不平铺

    background-position   背景图片位置

    top   bottom   left   right   center (中间)    方位名词

    background-position: x坐标  y坐标;         精确像素

    注意: x坐标和y坐标的顺序不能颠倒。

    背景简写: 

    background: 背景图片  背景位置 背景颜色  背景重复等等;

    属性的各个值用空格隔开。

    以后我们碰到像背景这样的属性我们称之为 复合属性

    背景的最后一个属性值: 背景固定 (兼容性不好)

    background-attachment:  背景固定还是滚动

    默认是scroll  滚动的        fixed  固定的

    6.边框  (border)

      border-color  边框颜色

      border-width   边框粗细

      border-style    边框样式  实线  虚线   双线 、、

      border-color  边框颜色

      border-width  边框粗细

      一般情况 我们都是用像素作为单位

      比如: border-width1px;  

      border-style  边框样式

      none : 无边框。与任何指定的border-width值无关
      hidden : none : 无边框。与任何指定的border-width值无关
      hidden : 隐藏边框。IE不支持
      dotted : 点线。
      dashed : 虚线。
      solid : 实线边框(重点)

      double : 双线边框。两条单线与其间隔的和等于指定的border-width
      groove : 根据border-color的值画3D凹槽
      ridge : 根据border-color的值画菱形边框
      inset : 根据border-color的值画3D凹边
      outset : 根据border-color的值画3D凸边隐藏边框。IE不支持

      边框简写 

      border: 1px solid #f00;

      用空格隔开

      border:solid 1px #f00;

      border-top:1px solid #f00;

    7.行业动态案例

      注意:测量时,边框线是不计算在宽和高内的。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
    .hd{height:35px; width:238px; border:1px solid #D9E0EE; border-top:3px solid #FF8400; border-bottom:0;}
    .bd{height:130px; width:238px; border:1px solid #D9E0EE; }
    .bd ul li{line-height:24px;}
    .bd  a{font-size:12px; text-decoration:none; color:#3c3c3c;}
    .bd a:hover{color:#FF8400; text-decoration:underline;} 
    </style>
    </head>
    
    <body>
    <div class="hd"></div>
    <div class="bd">
        <ul>
            <li><a href="#">不老女神-伊能静的减肥秘诀!!</a></li>
            <li><a href="#">不老女神-伊能静的减肥秘诀!!</a></li>
            <li><a href="#">不老女神-伊能静的减肥秘诀!!</a></li>
            <li><a href="#">不老女神-伊能静的减肥秘诀!!</a></li>
        </ul>
    
    </div>
    
    </body>
    </html>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
    .hd{height:35px; width:238px; border:1px solid #D9E0EE; border-top:3px solid #FF8400; border-bottom:0; text-indent:2em; font-weight:bold; line-height:35px;}
    .bd{height:130px; width:238px; border:1px solid #D9E0EE; }
    .bd ul li{line-height:24px; background:url(hhh.jpg) no-repeat left center; text-indent:1em;}
    .bd ul{list-style:none; /*清除列表样式*/}
    .bd  a{font-size:12px; text-decoration:none; color:#3c3c3c;}
    .bd a:hover{color:#FF8400; text-decoration:underline;} 
    </style>
    </head>
    <body>
    <div class="hd">行业动态</div>
    <div class="bd">
        <ul>
            <li><a href="#">不老女神-伊能静的减肥秘诀!!</a></li>
            <li><a href="#">不老女神-伊能静的减肥秘诀!!</a></li>
            <li><a href="#">不老女神-伊能静的减肥秘诀!!</a></li>
            <li><a href="#">不老女神-伊能静的减肥秘诀!!</a></li>
    </ul>
    </div>
    </body>
    </html>

    列表样式:  list-style:none;  清除列表样式

    转载请备注。

     

  • 相关阅读:
    (转) 一步一步学习ASP.NET 5 (五)- TypeScript
    #一周五# win10通用平台,无处不在的Xamarin,msbuild开源,MVP卢建晖的Asp.NET 5系列 (视频)
    (转) 一步一步学习ASP.NET 5 (四)- ASP.NET MVC 6四大特性
    (转) 一步一步学习ASP.NET 5 (三)- 认识新的Web结构
    #winhec# 开发人员刷屏看点 (视频)
    (翻译) TFS源代码控制的未来 (TFSVC vs. Git)
    (转) 一步一步学习ASP.NET 5 (二)- 通过命令行和sublime创建项目
    【JS教程03】函数
    【JS教程02】变量、数据类型及基本语法规范
    【JS教程01】JavaScript介绍与页面嵌入方式
  • 原文地址:https://www.cnblogs.com/brittany/p/4833658.html
Copyright © 2020-2023  润新知