首页 > 代码库 > Python开发【第十篇】：CSS （二）

Python开发【第十篇】：CSS （二）

2024-08-29 09:58:48   217人阅读

Python开发【前端】：CSS

技术分享

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="http://www.mamicode.com/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

Python开发【第十篇】：CSS （二）


联系
我们