• Django网站开发 02.CSS层叠样式表(Cascading Style Sheets)

    1.CSS三种嵌入方式

    1.1在标签上 style=""

    <img src="... " style="height : 100px"/>
<div style="color :red; ">中国联通div>

    • 1
    • 2

    1.2在html的head部分里写style标签，有利于代码的复用。

    DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Titletitle>
	<style>
		.cl{
			color:red;
		}
	style>
head>
<body>
<h1 class='c1'>用户登录h1>
<hl class='c1 '>用户登录h1>
<h1 class='c1'>用户登录h1>
<h1 class='c1 '>用户登录h1>
body>
htm1>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    5种选择器

    1.ID选择器

    #c1{
	color:red;
}

<div id='c1'>div>

    • 1
    • 2
    • 3
    • 4
    • 5

    2.类选择器(使用最多)

    .c1{
	color:red;
}

<div clss='c1'>div>

    • 1
    • 2
    • 3
    • 4
    • 5

    3.标签选择器

    div{
	color:red;
}

<div>xxxdiv>

    • 1
    • 2
    • 3
    • 4
    • 5

    4.属性选择器

    <head>
input[type='text']{
	border: 1px solid red;
}
.v1[type="456"]{
	color: gold;
}
head>
<body>
<input type="text">
<input type= "password">

<div class="v1" type="123">abcdiv>
<div class="v1" type="456">abcdiv>
<div class="v1" type="999">abcdiv>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    5.后代选择器

    
.yy li{
	color: pink;

.yy > a{
	color: dodgerblue;
{

<div class="yy">
	<a>百度a>
	<div>
		<a>谷歌a>
	div>
	<ul>
		<li>美国li>
		<li>日本li>
		<li>韩国li>
	ul>
div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    1.3引用css文件

    common.css

    .c1{
	height:100px;
}
.c2{
	color:red;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    html文件在head部分引用该文件即可导入：

    DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Titletitle>
	<link rel="stylesheet" href="common.css"/>head>
head>
<body>
<h1 class='c1'>用户登录h1>
<hl class='c1'>用户登录h1>
<h1 class='c2'>用户登录h1>
<h1 class='c2'>用户登录h1>
body>
htm1>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    注：当有多个样式时，会将将样式进行组合，同时后面的覆盖前面的相同元素：

    DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Titletitle>
	<style>
		.cl{
			color: red;
			border: 1px solid red;
		}
		.c2{	
			font-size: 28px;
			color: green;
		}
	style>
head>
<body>
	
	<div class="c1 c2">Test测试div>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    但是当.c1的color后面加上!important时就无法被后面的覆盖了：

    	<style>
		.cl{
			color: red !important;
			border: 1px solid red;
		}
		.c2{	
			font-size: 28px;
			color: green;
		}
	style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    2.常见css样式

    1.高度和宽度

    .c1{
	height : 300px;
	width: 500px;
}

    • 1
    • 2
    • 3
    • 4

    宽度也可以为百分比:

    .c1{
	height : 300px;
	width: 50%;
}

    • 1
    • 2
    • 3
    • 4

    2.inline-block(行内块标签)

    用display字段声明该样式，可以

        <style>
        .c1{
            display:inline-block;
            height:200px;
            width:300px;
            color:red;
        }
    style>
    
    <div class="c1">中国div>
    <span class="c1">法国span>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    在这里插入图片描述
    block可以让行内标签变为块级标签：

    <span style="display: block; ">中国span>

    • 1

    inline可以让块级标签变为行内标签：

    <div style="display: inline; ">中国div>

    • 1

    3.字体颜色、大小、粗细、格式

    .c1{
	color:#O0FF7F;
	font-size: 58px;
	font-weight: 600;
	font-family: Microsoft Yahei;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    4.字体对齐样式

    .c1{
	height: 59px;
	width: 300px;
	border: 1px solid red;
	text-align: center;	/*水平方向居中 */
	line-height: 59px;	/*让高度等于height就可以让字体在垂直方向居中 */
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    5.浮动

    使用该标签可以让出现在某一个位置(左边或右边)：

    .c1{
	float: left;
	width: 280px;
	height: 170px;
	border: 1px solid red;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    凡是使用了float样式的都要使用

    来保持父子样式关系：

    <div style="background-color: dodgerblue">
	<div class="c1">div>
	<div class="c1">div>
	<div class="c1">div>
	<div class="c1">div>
	<div class="c1">div>
	<div style="clear:	both;">div>
div>I

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    6.内边距

    .outer{
	border: 1px solid red;
	height:200px;
	width: 200px;
	
	padding-top:20px;	/* 离上边界多少距离 */
	padding-left:20px;
	padding-right:20px;
	padding-bottom:20px;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    在这里插入图片描述

    7.外边距

    距离其他块的距离：

    .c1{
	margin-top: 20px;
}

    • 1
    • 2
    • 3

    在这里插入图片描述

    示例：

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        body{
            margin: 0;
        }
        .header{
            background-color: #333;
        }
        .container{
            width: 1226px;
            margin: 0 auto;
        }
        .header .menu{
            float: left;
            color: white;
        }
        .header .account{
            float: right;
            color: white;
        }
        .header a {
            color: #b0b0b0;
            line-height: 40px;
            display: inline-block;
            font-size: 12px;
            margin-right: 10px;
        }
    style>
head>
<body>
    <div class="header">
        <div class="container">
            <div class="menu">
                <a>小米商城a>
                <a>MIUTa>
                <a>云服务a>
                <a>有品a>
                <a>开放平台a>
            div>
            <div class="account">
                <a>登录a>
                <a>注册a>
                <a>消息通知a>
            div>
            <div style="clear: both">div>
        div>
    div>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53

    设置margin参数把body部分去除页面四边的白色间隙：

    body {
	margin: 0;
}

    • 1
    • 2
    • 3

    内容居中
    1.文本居中，文本会在这个区域中居中

    <div style="width: 200px; text-align: center;">123div>

    • 1

    2.区域居中（宽度+margin-left :auto;margin-right:auto）

    <style>
	.container{
		width: 980px;
		margin: 0 auto;
	}
style>

<div class="container">12345div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
  • 相关阅读:
    CPP-Templates-2nd--第十九章 萃取的实现 19.1-19.3
    远程代码执行渗透测试—Server2128
    HTML5和CSS3四属性总结一
    C++不能在子类中构造函数的初始化成员列表中直接初始化基类成员变量
    python中is和==的区别，地址和重新复制后，地址变化
    ZCMU操作系统期末复习策略
    sCrypt 中的 ECDSA 签名验证
    利用python的Matplotlib库进行基本绘图
    Smart Link 和 Monitor Link应用
    运用谷歌浏览器的开发者工具，模拟搜索引擎蜘蛛抓取网页
  • 原文地址：https://blog.csdn.net/Jay_fearless/article/details/126183483