current position:Home>Django website development 02. CSS Cascading Style Sheets (Cascading Style Sheets)

Django website development 02. CSS Cascading Style Sheets (Cascading Style Sheets)

2022-08-06 10:32:40Jay_fearless

1.CSS三种嵌入方式

1.1在标签上 style=""

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

1.2在html的headwrite in partstyle标签,有利于代码的复用.

<!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.后代选择器

<!-- from descendants -->
.yy li{
	color: pink;
<!-- from the son -->
.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文件在headA partial reference to the file can be imported:

<!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>

注:when there are multiple styles,The styles will be combined,At the same time the back covers the same elements in the front:

<!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>
	<!-- Both styles are referenced at the same time,.c2The colors in the style will be overwritten.c1中的颜色,So the color of the test is green -->
	<div class="c1 c2">Test测试</div>
</body>
</html>

但是当.c1的color后面加上!importantcan not be covered by the back:

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

2.常见css样式

1.高度和宽度

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

The width can also be a percentage:

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

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

displayfield declares the style,可以

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

在这里插入图片描述
blockInline tags can be turned into block-level tags:

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

inlineYou can make block-level tags into inline tags:

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

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

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

4.Font alignment style

.c1{
    
	height: 59px;
	width: 300px;
	border: 1px solid red;
	text-align: center;	/*水平方向居中 */
	line-height: 59px;	/*Let the height equalheightThis will center the font vertically */
}

5.浮动

Use this tag to make it appear in a certain position(左边或右边):

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

凡是使用了floatAll styles are used<div style="clear: both;">to maintain the parent-child style relationship:

<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;	/* How far from the upper boundary */
	padding-left:20px;
	padding-right:20px;
	padding-bottom:20px;
}

在这里插入图片描述

7.外边距

Distance from other blocks:

.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参数把bodyPartially removes the white gaps on the four sides of the page:

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>

copyright notice
author[Jay_fearless],Please bring the original link to reprint, thank you.
https://en.pythonmana.com/2022/218/202208061025005108.html

Random recommended