美文网首页
day03前端基础css

day03前端基础css

作者: AidenWang292 | 来源:发表于2018-04-02 17:00 被阅读12次

    -<td>中可以嵌套任意标签，例如嵌套 <table>

    • 基础选择器:类选择器/id选择器/通配符选择器
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="style.css">
    <style type="text/css"> 
    /*类选择器*/
    .box{width:110px;
    height:200px;
    font-size:40px;
    color:red;

    }
    /*一个id选择器只能在一个界面调用一次
        类选择器可以被多次调用

    */
    #nav{
        font-size: 50px;
        color:blue;
    }
    #main{width:200px;
            height:300px;
            background-color:pink;


    }
    /*通配符选择器，作用于页面全部标签，不推荐使用 降低页面加载速度*/
/*
    *{font-size:100px;
    }*/
    </style>
</head>
<body>
    <div class="box" >呵呵呵呵</div>
    <!-- 一个标签只能调用一个id选择器 
         一个标签可同时调用id和类选择器-->
         <!-- 优先id选择器，同时调用的时候 -->
    <h2 id="nav" class="box">laalala</h2>
    <p class="box" id="nav">好啊哈啊</p>



    
</body>
</html>
    • 选择器复习
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础选择器复习</title>
    <style>
        div{width:100px;
                height:100px;
                background-color:pink;
                color:red;

        }
        .box{

            font-size:50px;
            color:blue;

        }
    #nav{background-color:gray;}
    *{color:green;}
    </style>
</head>
<body>
    <div>喜洋洋</div>
    <p class="box">美羊羊</p>
    <h3 id="nav">懒洋洋</h3>
    <span>沸羊羊</span>

</body>
</html>
    • 字体
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本属性</title>
    <style>
    /*1em/2em:一个/两个汉字的大小*/
    .box{font-size:2em;/*大小*/
        
        /*可指定多个字体,中间用，隔开
        多个字体优先先解析认识的*/
        /*浏览器F12->console->escape("宋体"->，回车 %u换成\   font-family:arial,"宋体";*/

   font-family:"5B8B\4F53";
   font-family:""\5FAE\8F6F\96C5\9ED1";
/*文字粗细,默认为normal,其余bold,400,加粗700*/
   font-weight:normal;
/*定义字体风格 normal/italic/oblique:浏览器倾斜*/

    font-style:normal;
    /*行高*/
   line-height:5;
        }


    </style>
</head>
<body>
    <div class="box">aaaaaaaaaaaa 哈哈的回复哈</div>
    <h2>adsfdsafdasf</h2>
    <em>维护任务</em>
</body>

</html>
    • 字体连写
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体综合</title>
    <style>
.box{
    /*文本属性连写，必须写的是大小和字体，其余根据需求，如果不写，则按照默认值 ，大小和行高中间加/，700为字体粗细 ，italic：设置字体是否倾斜*/


    font:700 italic 30px/60px "宋体";
}

    </style>
</head>
<body>
    <div class="box">哈哈哈哈啦啦啦</div>
</body>
</html>
    • 外观属性css
    • 交集选择器
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>交集选择器</title>
<style>
    
    .box{
        font-size:50px;
        color:red;
    }
/*.nav{

    text-indent:2em;
}*/
/*交集选择器*/
div.box{
    text-indent:2em;
}
p.box{
    text-align: center;
    backgound-color:yellow;
    color: yellow;
}
</style>

</head>
<body>
    <div class="box">hahahha
<p>123214</p>

    </div>
    <h3>啦啦啦</h3>
    <p class="box">嘻嘻嘻</p>
    <p></p>
</body>
</html>
    • 并集选择器
    1<0..0!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>并集选择器</title>
    <style>
    /*.box{
        font-size:50px;
        color:red;
    }
        #content{
        font-size:50px;
        color:blue;
    }
        .nav{
        font-size:50px;
        color:green;
    }*/

    .box,#content,#nav{

        font-size:50px;
        color:red;
    }
    </style>
</head>
<!-- +并列选择器 -->
    .box+#content+#nav
    <div class="box">hahah</div>
    <div id="content">adqwer</div>
    <div id="nav">treyrte</div>
</body>
</html>
    • 后代选择器
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>

    <style>
    /*后代选择器发生的前提是嵌套关系，1父在前,子在后;2后代选择器可以无限隔代3*/
    /*只要能代表父元素,后代选择器可以是任意选择器的组合*/
    /*后代选择器重点中的重点*/
    /*div.son.grandson 也可以*/
    /*div p span{*/
        .box .grandson{


    font-size:100px;
    color:red;
}.

#div #p #span{
    font-size:10px;
    color:yellow;
}

    </style>
</head>
<body>
    <!-- .box>p.xon>span.grandon -->
    <div class="box">
        <p class="son">
        <span class="grandon">几个字

        </span>
        </p>
        <span>qweqwer</span>
    </div>
    <span>11111111</span>
    <div id="box">
        <p id="son">
            <span id="grandson">111
                
            </span>
        </p>
    </div>
</body>
</html>
    • 子代选择器
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子代选择器</title>

    <style>
    /*作用就是选儿子*/
.father .grandon{
    font-size:100px;
    color:red;
}

    </style>
</head>
<body>
    <!-- .box>p.xon>span.grandon -->
    <div class="father">
        <p class="son">
            <span class="grandon">
            几个字
            </span>

        </p>
        <span>qweqwer</span>
    </div>
    <span>11111111</span>
    <div id="box">
        <p id="son">
            <span id="grandson">111
                
            </span>
        </p>
    </div>
</body>
</html>
    • 作业1
    <!DOCTYPE html>
<html lang="en">
<head>
<!-- 在不修改以上代码的前提下，完成以下任务：

链接 登录 的颜色为红色,同时主导航栏里面的所有的链接改为橙色     (简单)

主导航栏和侧导航栏里面文字都是14像素并且是微软雅黑。（中等)

主导航栏里面的一级菜单链接文字颜色为绿色。（难)

伪类选择器 -->
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .site-r a{
            color: red;
        }
    .nav a{
        color:orange;
    }
.nav a, .a ,.site-l{
    font: "微软雅黑";
        }
.nav > ul> li >a{
    color:green;

}


        </style>


    
        

</head>
<body>
    
<div class="nav">    <!-- 主导航栏 -->
  <ul>
    <li ><a >公司首页</a></li>
    <li ><a  >公司简介</a></li>
    <li ><a >公司产品</a></li>
    <li >
         <a >联系我们</a>
            <ul>
                    <li><a href="#">公司邮箱</a></li>
                    <li><a href="#">公司电话</a></li>
            </ul>
    </li>
  </ul>
</div>
<div class="sitenav">    <!-- 侧导航栏 -->
  <div class="site-l">左侧侧导航栏</div>
  <div class="site-r"><a href="#">登录</a></div>
</div>
    </body>
</html>
    • 作业2
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业</title>
<style>
        
    .nav{text-align:center;}
        
    .span1{color:gray;}
    .span2{color:#990000;}
    input{color:red;}
    .sou{color:green }

    
 p{
    text-indent: 2em;
    }

    


   p span{color:blue;}





</style>
</head>
<body>

<div class ="nav">
    <div class="title"><h2>中乙队赛前突然换帅仍胜毅腾 高原黑马欲阻击舜天</h2></div>
    <span class="span1">2014年07月16日20:11></span>>
    
    <span class="span2"> 新浪体育</span> <span class="span2">评论中大奖（11人参与）</span> <a href="">收藏文本</a> 
    <input type="text" value="请输入查询条件" ><button class="sou">搜索</button>

</div>
<hr>
<div class="content">

    <p>新浪体育讯　7月16日是燕京啤酒<span>[微博]</span>2015中国足协杯第三轮比赛，丽江嘉云昊队主场迎战哈尔滨毅腾队的比赛日。然而就在比赛日中午，丽江嘉云昊队主帅李虎和另外两名成员悄然向俱乐部提出了辞呈，并且收拾行囊准备离开。在这样的情况下，丽江嘉云昊队不得不由此前的教练员杨贵东代理指挥了本场比赛。</p>

    <p>在昨日丽江嘉云昊队主帅李虎就缺席了赛前的新闻发布会，当时俱乐部给出的解释是李虎由于身体欠佳，去医院接受治疗。然而今日李虎出现在俱乐部时，向记者否认了这一说法，并且坦言已经向俱乐部提出了辞呈。</p>
极其教练组近来在执教成绩上承受了不小的压力，在联赛间歇期期间，教练组曾向俱乐部提出能够多引进有实力的球员补强球队，然而由于和俱乐部在投入以及成绩指标上的分歧，李虎最终和教练组一起在比赛日辞职。
    <p>据记者多方了解的情况，李虎[<span>微博</span>]</p>

    <p>这样的情况并没有影响到丽江嘉云昊队[<span>微博</span>]的队员，在比赛中丽江队在主场拼的非常凶，在暴雨之中仍然发挥出了体能充沛的优势，最终凭借点球击败了中超球队哈尔滨毅腾，顺利晋级下一轮比赛。<strong>根据中国足协杯的赛程，丽江嘉云昊队将在本月23日迎战江苏舜天队。</strong></p>

 </div>

</body>
</html>
    • 选择器总结
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器总结</title>
    <style>
    /*1.并集选择器 可同时为多个，不同类型选择器/标签，设置相同样式,不同选择器中间以英文,间隔，空格可以不加，也可以加但是,必须加*/
    /*.b p, h1{

        color:red;
    }
*/
    /*2.交集选择器
      1:标签后接类选择器或者id选择器，标签与类选择器之间没有空格;
      2：交集选择器可以扩充具有相同类名或者id名字的某一个标签的样式;
      3:类选择器和交集选择器同时设置相同颜色等属性，以交集选择器设置的属性为准;



    */
    .box{color:green;
        text-decoration:none;

        text-indent:1em;

      }
    span.box{
        /*字体属性复习*/
        text-decoration:underline;underline/line-through/overline
        line-height:5;  /*行高*/
        font-family:宋体; /*字体类型*/
        font-size: 30px;/* 字体大小*/
        color:pink;    /*字体颜色color:rgb(23,24,255);*/
        font-weight:700; /*字体粗细*/
        font-style:italic; /*字体倾斜*/
        text-indent:20em; /*字体缩进*/

    

    }
    /*3.后代选择器
    1：特别注意不同类型选择器，或者标签，中间务必用空格间隔开,否则样式不生效
    2后代选择器应用广泛,既可以使用设置父代后某一代标签/类选择器/id选择器的样式，也可以设置后代所有具有相同标签/类选择器/id选择器的统一样式。
    */

     /*.a span{
        color:gray;
    }
    
*/  /*此处也可写为*//*.a .b .box ul li span{
        color:gray;
    } */


    /*4.父子选择器
        不能跨代,用>链接，空格与否都可以

    */
    /*.a>.b>.box> ul>li>span{
         color:blue;
            
    }*/
    /*如果写成后代选择器，选择器与选择器之间要加空格*/
    .a .b .box ul li span{
         color:blue;    
    }

    /*后代选择器同时选择出不同层级p
        后设置属性覆盖先设置的属性
    */

    .box p{
        color:gray;

    }
    
    .a p{

       color:red;

    }

    /*<h1>5.后代选择器可跨级</h1 >*/
 .a .box p{
    color:green;
}
/*伪类选择器*/
.box a:link{  
text-decoration:line-through;
color:red;
}
.box a:visited{
    color:pink;
}
.box a:hover{
    color:yellow;
}
.box a:active{
    color:green;
}
    </style>
</head>
<body>

        <div class="a">
            
            <div class="b">
                <p>小狗小狗小狗小狗小狗</p>
                <h1 class="">小猫小猫小猫小猫
                    <p>测试同时选择多标签</p>
                </h1>

                 <span class="box">小猪小猪小猪小猪小猪

                        <ul>
                            <li>
                                <div>猜猜我在哪里</div>
                                <span>我是哈哈哈</span>
                                <p>测试同时选择多标签</p>
                                <p>
                                    测试同时选择多标签
                                    <p><a href="#1">1234567</a></p>


                                </p>

                            </li>
                        </ul>
                 </span>

            </div>
        </div>
 
</body>
</html>

    -并集选择器小练习


    1.png 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小练习</title>

<style>
.main{
 text-align:center;
 width: 500px;
 height:100px;
 background-color:pink;
 margin:0 auto;
 line-height:20px;
}
/*.main h4 ,.main .a2{
    color: white;
}*/
span{
    background-color: blue;
}
h4,#s1,.a2{

    color: white;
}
#s2,.a1{
    color: yellow;
}
</style>
</head>
<body>
    <div class="main">
        <h4>传智播客</h4>
        <span id="s1">黑马</span>&nbsp;<span id="s2">程序员</span>
        <p><a class="a1"href="">点击搜索</a>&nbsp;&nbsp;<a class="a2" href="">点击搜索</a>  </p>


    </div>
</body>
</html>

    相关文章

      网友评论

          本文标题：day03前端基础css

          本文链接：https://www.haomeiwen.com/subject/eedocftx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|day03前端基础css|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！