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

原创已于 2022-08-06 08:51:47 修改 · 285 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

于 2022-08-05 18:58:16 首次发布

Django 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了CSS的三种嵌入方式：内联样式、内部样式表和外部样式表，并讲解了ID选择器、类选择器、标签选择器、属性选择器和后代选择器等五种选择器的使用。此外，还阐述了常见的CSS样式，如高度、宽度、行内块、字体样式、对齐方式、浮动、内边距和外边距等，以及如何通过浮动和清除浮动来处理布局问题。最后，给出了实际的HTML代码示例，展示这些概念在实际网页设计中的应用。

1.CSS三种嵌入方式

1.1在标签上 `style=""`

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

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<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>

5种选择器

1.ID选择器

#c1{
	color:red;
}

<div id='c1'></div>

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

.c1{
	color:red;
}

<div clss='c1'></div>

3.标签选择器

div{
	color:red;
}

<div>xxx</div>

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">abc</div>
<div class="v1" type="456">abc</div>
<div class="v1" type="999">abc</div>
</body>

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.3引用`css`文件

common.css

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

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<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>

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		.cl{
			color: red;
			border: 1px solid red;
		}
		.c2{	
			font-size: 28px;
			color: green;
		}
	</style>
</head>
<body>
	<!-- 同时引用了两种样式，.c2的样式中的颜色会覆盖掉.c1中的颜色，所以测试的颜色为绿色 -->
	<div class="c1 c2">Test测试</div>
</body>
</html>

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

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

2.常见css样式

1.高度和宽度

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

宽度也可以为百分比:

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

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

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

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

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

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

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

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

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

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

4.字体对齐样式

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

5.浮动

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

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

凡是使用了float样式的都要使用<div style="clear: both;">来保持父子样式关系：

<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

6.内边距

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

在这里插入图片描述

7.外边距

距离其他块的距离：

.c1{
	margin-top: 20px;
}

在这里插入图片描述

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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>MIUT</a>
                <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>

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

body {
	margin: 0;
}

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

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

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

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

<div class="container">12345</div>