码迷,mamicode.com
首页 > Web开发 > 详细

7.8CSS部分的学习!

时间:2018-07-08 20:14:04      阅读:183      评论:0      收藏:0      [点我收藏+]

标签:title   code   back   用户名   开发   项目开发   引入   属性选择器   The   

<!DOCTYPE html>
<html>
<head>
    <title>CSS元素选择器</title>
<style type="text/css">

/*  id选择器
    id 选择器使用 #引入,它引用的是id属性中的值
    html标签   id名字可以重复
*/
    #div1{
        border:1px  dashed red;
    }
/*    类选择器
    类选择器使用时,需要在类前面加一个  .  
    在项目开发中,给标签添加属性都是通过类选择器
*/
    .weather{
        color:red;
        border: 1px dashed green;
    }
/*    元素选择器
    这是最常见的选择器,简单说,文档中的元素就是选择器
*/
    div{
        width: 200px;
        height: 200px;
        border:1px solid red;
    }

    span{
        border:1px solid green;
    }
/*    属性选择器
?如果需要选择有某个属性的元素,而不论属性是什么,可以使用属性选择器*/
    /*只能改变type = "text" 的属性*/
    input[type = "text"] {
        background-color:yellow;
        border: 1px solid blue;
    }

</style>
</head>
<body>

<div id="div1">
    今天天气不错1....
</div>
<div id="div2">
    今天天气不错2...
</div>
<div class="weather">
今天天气不错4
</div>

<div>习主席</div>
<div>李克强</div>

<span>汪洋</span><br>

<input type="text" placeholder="请输入用户名"><br>
<input type="password" placeholder="请输入密码"><br>
<input type="text" placeholder="请输入地址">
</body>
</html>

 

7.8CSS部分的学习!

标签:title   code   back   用户名   开发   项目开发   引入   属性选择器   The   

原文地址:https://www.cnblogs.com/zhen1996/p/9280979.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!