Python开发【第十篇】:CSS (二)

Python开发【前端】:CSS

Kylin Zhang

Kylin Zhang

发表于 2016-11-10 13:13:57

css样式选择器

标签上设置style属性:

<body>
    <div style="height: 48px;">第一层</div>
    <div style="height: 48px;">第二层</div>
    <div style="height: 48px;">第三层</div>
</body>

直接在div里写相对应的样式

 

id选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            background-color: #2459a2;
            height: 48px;
        }
    </style>
</head>
<body>
    <div id="i1">第一层</div>
</body>

把样式写到head里面,以#开头命名,调用对应样式在div里用id属性指定相应的id名

 

class选择器(最常用)

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: #2459a2;
            height: 48px;
        }
    </style>
</head>
<body>
     <div class="c1">第一层</div>
     <div class="c1">第二层</div>
     <div class="c1">第三层</div>
</body>

把样式写到head里面,以.开头命名,调用对应样式在div里用class属性指定相应的类名,可以多个div调用

 

标签选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            background-color: #2459a2;
            height: 48px;
        }
    </style>
</head>
<body>
     <div >第一层</div>
     <div >第二层</div>
     <div >第三层</div>
</body>

标签选择器,设置div样式,则body里所有的div标签内的内容都会应用此内容

 

关联选择器(层级选择器)

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span div{
            background-color: #2459a2;
            height: 48px;
        }
    </style>
</head>
<body>
     <div >第一层</div>
     <span>
        <div >span里的div</div>
     </span>
     <div >第三层</div>
</body>

只让span里面的div标签应用样式,可多层嵌套

 

组合选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1,#i2,#i3{
            background-color: #2459a2;
            height: 48px;
        }
    </style>
</head>
<body>
     <div id="i1">第一层</div>
     <div id="i2">第一层</div>
     <div id="i3">第一层</div>
</body>

组合选择器,加,号,相同样式多命名

 

属性选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input[name="James"]{width: 20px;height: 20px;}
    </style>
</head>
<body>
    <input type="text" name="James">
    <input type="text">
    <input type="password">
</body>

根据属性进行筛选匹配,只有第一个input标签匹配上对应的样式

 

 

css样式引用

css样式优先级

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: red;
            color: white;
        }
        .c2{
            background-color:black;
        }
    </style>
</head>
<body>
    <div class="c2 c1" style="color:palegreen" >第一层</div>
</body>

如果样式不冲突,则样式都应用,如果样式有冲突,style样式优先级最大,其次其他的安装编写的顺序,越靠近越优先

文件方式引用样式

定义样式并保存到commons.css文件

.c1{
background-color: red;
color: white;
}
.c2{
background-color:black;
}

引用commons.css文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="commons.css">
</head>
<body>
    <div class="c2 c1" style="color:palegreen" >第一层</div>
</body>
</html>

  

 

css样式边框

基本边框

<body>
    <div style="border: 1px dotted red;">
        第一层边框
    </div>
<!--border:边框宽度  solid:边框样式实线(dotted虚线)颜色:red-->
</body>

 

边框其他样式

<body>
    <div style="height: 48px;
    width: 80%;
    border: 1px solid brown;
    font-size: 16px;
    text-align: center;
    line-height: 48px;
    ">第二层边框</div>

    <!--height: 48px 边框高度-->
    <!--width: 80% 宽度页面的80%-->
    <!--border: 1px solid brown 边框宽度、样式、颜色-->
    <!--font-size: 16px;  字体大小-->
    <!--text-align: center; 水平居中-->
    <!--line-height: 48px; 垂直居中-->
</body>

-》》点击显示效果 

 

 

CSS样式浮动

初识float

<body>
    <div style="width: 20%;float: left;">左边</div>
    <div style="width: 80%;float: right;">右边</div>
</body>

-》》点击显示效果

float测试页

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            height: 38px;
            background-color: #dddddd;
            line-height: 38px;
        }
    </style>
</head>
<body style="margin: 0 auto;">
    <div class="pg-header">
        <div style="float: left;">*收藏本站</div>
        <div style="float: right;">
            <a>登录</a>
            <a>注册</a>
        </div>
    </div>
    <div style="width: 300px;border: 1px solid red;">
        <div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>
        <div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>
        <div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>
        <div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>
        <div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>
        <div style="clear: both"></div>
    </div>
</body>

-》》点击显示效果

注:<body style="margin: 0 auto;">消除与浏览器顶部之间的缝隙;<div style="clear: both"></div>子边框浮动后,显示父边框的边框线

 

 

CSS样式display

块级标签和行内标签相互转换

<body>
    <div style="display: inline">块级</div>
    <span style="display: block">行内</span>
</body>

-》》点击显示效果

注:display:inline 转换为行内标签;display:block转换为块级标签;另还有display:none不显示

行内标签:无法设置高度,宽度,padding margin
块级标签:设置高度,宽度,padding margin

<body>
    <span style="display: inline-block;height: 50px;width: 70px">行内</span>
    <div style="display: inline">块级</div>
</body>

-》》点击显示效果

注:display:inline-block 既有inline的属性(默认自己有多少占多少)又有block的属性(可以设置高度、宽度、padding、margin)

 

 

CSS样式边距

外边距margin

<body>
    <div style="border: 2px solid red;height: 70px;">
        <div style="background-color: green;height: 50px;
        margin-top: 25px;"></div>
    </div>
</body>

-》》点击显示效果

注:margin-top:25px表示外边距,子边框与父边框top之间的距离为25px

内边距padding

<body>
    <div style="border: 2px solid red;height: 70px;">
        <div style="background-color: green;height: 50px;
        padding-top: 25px;"></div>
    </div>
</body>

-》》点击显示效果

注:padding-top:25px表示内边距,子边框内自己与top之间的距离为25px

 

内容来源:http://www.cnblogs.com/lianzhilei/p/6046131.html

posted @ 2016-12-26 18:09  redis3389  阅读(239)  评论(0编辑  收藏  举报