Python-web开发学习笔记(4):CSS基础

news2024/11/24 7:55:29

 8246dacbf7224e0f9a35484c3837d3e8.jpeg

🚀 Python-web开发学习笔记系列往期文章:

        🍃 Python-web开发学习笔记(1)--- HTML基础

        🍃 Python-web开发学习笔记(2)--- HTML基础

        🍃 Python-web开发学习笔记(3):Flask Demo,一个网站开发小案例

通过对HTML的学习,我们一起了解了HTML的相关基础知识。从本篇文章开始,我们又要一起学习前端另一个重要的知识板块:CSS。

目录

1. 快速了解css

2. CSS使用方式

 3. 选择器

4. 常见样式

4.1 高度和宽度

4.2 字体

4.3 文字对齐方式

4.4 浮动

4.5 内边距 

4.6 外边距

5. 总结


 

1. 快速了解css

说白了,我们写的HTML标签,仅仅是一些朴素的文本样式,就像我们素描一样,而CSS是干嘛的?CSS就好比我们在素描的基础上,图上色彩。因此可以说,css是用来美化我们的HTML标签的。

通常,为了修饰我们的标签,我们会在HTML标签内部加上“style”属性,通过给style属性赋予不同的值,使标签拥有不同的样式。

46ff13a0ef734f508325a0fc86a8f5d6.png

10c40c76caf54044a5f560774fa35a41.png

2. CSS使用方式

我们要用到css样式,除了上述直接在标签内部定义外,还有以下几种方式: 

  • 在<head>标签中预定义

    预先在head标签中,通过<style>标签以及标签的类名class来定义同属该类名下所有标签的样式:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css学习</title>
    <style>
        .c1{
            color:red;
        }
    </style>
</head>
<body>

<h1 class='c1'>用户登录</h1>
<h2 class='c1'>用户登录</h2>
<h3 class='c1'>用户登录</h3>
    
</body>
</html>

c6f6b3136e4149219ec89606e69de2b8.png

上述我们让所有class=c1的标签内容呈现红色样式。

  • 直接在标签中定义:
<div style="height: 200px;background-color: dodgerblue;"></div>
  • 从css文件导入

这种方式需要将预设的css样式提前写进一个文件中,例如文件中定义了所有class=c1的标签都是红色字体,所有class=c2的标签都是蓝色字体:

.c1{
    color:red;
}

.c2{
    color:blue;
}

 将文件命名为learn.css,然后在html文件中的head标签里导入该文件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css学习</title>
    <link rel="stylesheet" href="learn.css">
</head>
<body>

<h1 class='c1'>我是c1</h1>
<h1 class='c1'>我也是c1</h1>
<h2 class='c2'>那么我是c2</h2>
<h2 class="c2">那么我也是c2</h2>

</body>
</html>

上述href属性定义了css文件所在的路径。rel属性定义了当前页与href所指向的链接之间的关系,这里的关系是stylesheet,表示这是一个css样式的外部链接,这里只需记住外链css样式表就是这么写即可。运行结果如下:

178e07674e2446a8a6571f374091a046.png

 3. 选择器

如果你要在 HTML 元素中设置 CSS 样式,那么你需要通过选择器来获取相应的元素。选择器通常有以下几种:

  • ID选择器

通过“#"来调用元素:

//给所有id=c1的标签设置css样式
#c1{
    
}

<div id='c1'></div>
  • 类选择器

通过“.”来调用元素:

// 给所有class=c1的标签设置css样式
.c1{
    
}

<div class='c1'></div>
  • 标签选择器
//给所有div标签设置css样式
div{
    
}

<div>xxx</div>
  • 属性选择器
//找到所有input标签且属性type=text的标签设置css样式
input[type='text']{
	border: 1px solid red; //将边框设置成1像素红色
}
//找到所有类名class=tag的且属性name=2的标签设置css样式
.tag[name="2"]{
	color: blue;
}

<div class="tag" name="1">a</div>
<div class="tag" name="2">b</div>
<div class="tag" name="3">c</div>
  • 后代选择器
//先找到class=xx的标签,在该标签内部找到所有li标签进行设置
.xx li{
    color: pink;
}
//先找到class=xx的标签,在该标签内部找到子代标签a进行设置,如果不写">",那么会将该标签下所有的a标签进行设置
.xx > a{
    color: dodgerblue;
}
<div class="xx">
    <a href="http://www.baidu.com">百度</a>
    <div>
        <a href="https://www.csdn.net/">CSDN</a>
    </div>
    <ul>
        <li>第一行</li>
        <li>第二行</li>
        <li>第三行</li>
    </ul>
</div>

例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css学习</title>
    <style>
        #c1{
            color: red;
        }
        .c1{
            color: blueviolet;
        }
        div {
            color: aqua;
        }
        input[type='text']{
            border: 2px solid red;
        }
        .tag[name='2']{
            color: blue;
        }
        .xx li{
            color: darkcyan;
        }
        .xx > a{
            color: coral;
        }
    </style>
</head>
<body>

<div id='c1'>我是id选择器</div>
<div class='c1'>我是类选择器</div>
<div>我是标签选择器</div>
<div>-------------------</div>
<input type="text">
<input type="password">

<div class="tag" name="1">a</div>
<div class="tag" name="2">b</div>
<div class="tag" name="3">c</div>
<div>-------------------</div>
<div class="xx">
    <a href="http://www.baidu.com">百度</a>
    <div>
        <a href="https://www.csdn.net/">CSDN</a>
    </div>
    <ul>
        <li>第一行</li>
        <li>第二行</li>
        <li>第三行</li>
    </ul>
</div>
</body>
</html>

执行结果:

66b783dbbe1a4ba48323d5d97f20ea05.png

 

关于选择器的使用,通常是类选择器用的最多,其次是标签选择器,再次是后代选择器;而属性选择器和ID选择器用的比较少。当然,具体使用情况还需根据具体业务场景而定。另外,有时候我们会看见class后面跟着多个用空格隔开的类名:class="c1 c2 c3",那么,如果给这三个类名都设置css样式,则后设置的class会覆盖掉之前设置的class,如果不想出现这种覆盖,则应在css中对不想被覆盖的样式后面加上“!important”,如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color: red !important;
        }
        .c2{
            font-size: 20px;
            color: green;
        }
    </style>
</head>
<body>
    <div class="c1 c2">c2的color=green不会生效,我是c1的red</div>
</body>
</html>

18dd5e2057774fccac1fcec27b03ef14.png

4. 常见样式

4.1 高度和宽度

        .c1 {
            height: 200px;
            width: 400px;
        }

1aaa4f197169431a9ca86711b3d8bcec.png

需要注意,在HTML文章中我说过,div是块级标签,块级标签是占用一整行的,所以这里宽度虽然设置了,但是它在页面上的效果仍然是它的所在行不能放置其它内容了,通过浏览器的检查,可以看到效果:

a611d0288eae4d908daa83a2ffcb86b1.png

826200c98f4940d193e07155a67234e2.png

把鼠标放在右侧箭头处,在页面上即可看到一块蓝色一块橘色的区域,蓝色区域显示了我们设置的400*200px,但是橘色区域仍然是当前div所占的区域。

那么,如果我就是想在块级标签后面加上内容怎么办呢?毕竟如果某个块只有两个字,占了一整行,还不让加其它内容,显得很不合理。这个时候,我们只需要加上一行设置就行,如下:

        .c1 {
            display: inline-block;
            height: 200px;
            width: 400px;
        }

 此时,我们在div后再加上div内容看看效果:

b0a61b2c326641d0a3e31253fe2cef83.png

 9c23e3ec780f4ffcb6cb9c96b4c9e0af.png

可以看到,两个div内容放在了同一行了。这个方法也可以用在span、div+span这几种场景:

我们先不作处理看看:

6bcfd2c389884975bc63dfcedd1bd02a.png

 

可以看到,高度和宽度的设置对于行内标签span是不起作用的。但是加上display后,再看看效果:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            display: inline-block;
            height: 200px;
            width: 400px;
        }
    </style>
</head>
<body>
<span class="c1">块级标签</span>
<span class="c2">xxx</span>
</body>
</html>

4b921d67a1064be6855b9dc8971b858f.png

总的来说,inline表示行内、block表示块,inline-block表示行内块,如果display设置成inline,意味着将以行内标签span的属性展示,如果设置成block,将以块级标签div的属性展示,如果是inline-block,那么标签将既具有行内属性又具有块级属性。

4.2 字体

字体的基本属性有颜色color、大小size、 格式font-family等:

        .c1 {
            color: #2aabd2;
            font-size: 60px;
            font-family: "Microsoft YaHei";
            ...
        }

ba2ffa4774474207ba92a6eecce3a3e9.png

框框处可以看到我们设置的字体属性。color的值可以直接写“red、blue、green”等,也可以写成如图的颜色编码,目前计算机能识别的所有颜色都有固定编码,感兴趣可以上网查一下,巨多。

4.3 文字对齐方式

除了上述属性,我们经常还会看到文字对齐方式:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height: 500px;
            width: 1000px;
            border: 1px solid red;

            text-align: center; /* 水平方向居中 */
            line-height: 250px; /* 垂直方向居中 */
        }
    </style>
</head>
<body>
    <div class="c1">文字内容</div>
</body>
</html>

b84cad5a8a9b4a31a05ebd0072865d75.png

 可以看到,文字内容的位置相对于div块的大小(500*1000) 处于水平居中,垂直方向距离上边250像素的位置。

4.4 浮动

如果想让文字灵活的在页面上左右浮动,那么可以设置浮动属性style="float":

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <span>左边</span>
        <span style="float: right">右边</span>
    </div>
</body>
</html>

2b643844749e420880576b7cd12fed1f.png

我们再来看一个例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            float: left;
            width: 280px;
            height: 170px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div style="background-color: #2aabd2">
        <div class="c1">11111111</div>
        <div class="c1">222222222</div>
        <div class="c1">33333333</div>
        <div class="c1">4444444444</div>
        <div class="c1">555555555</div>
    </div>
<div>你好你好</div>
</body>
</html>

85007aea03884c8185c9f81b41c1f20e.png

 看起来很正常对不对?真的是这样吗?现在我们给这几个div填充背景颜色:

    <div style="background-color: red">
        <div class="c1">11111111</div>
        <div class="c1">222222222</div>
        <div class="c1">33333333</div>
        <div class="c1">4444444444</div>
        <div class="c1">555555555</div>
    </div>

再看一下效果:

9b62b8dfce044a4880726020ce9c1e01.png

背景效果不起作用了。理论上,我给上述5个div所在的块填充了红色,但是实际上并没有任何变化,为什么呢?其实并不是没变化,而是由于我给5个div设置了float属性,名曰浮动,所以它们实际上就“飘起来”了,飘起来,自然就脱离了下面一层“红色”的块,所以这里根本不起作用。如果要解决此问题,我们可以如下:

        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div style="clear: both;"></div>

加上“<div style="clear: both;"></div>”后我们再来看下效果:

fac189ca4c894f37b962a349f95fd5a8.png

背景效果出来了,说明浮起来的块被底下的块给拽回来了。浮动的效果,可以用来将块内容横着排列,这在有时候页面的展示上式必须的。

4.5 内边距 

内边距,顾名思义,内容距离自己所在块的边界的上下左右距离,用padding-top、padding-bottom、padding-left、padding-right。比如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer{
            border: 1px solid red;
            height: 200px;
            width: 200px;

            padding-top: 100px;
            padding-left: 20px;
            padding-right: 20px;
            padding-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div style="background-color: gold; font-size: 30px">主题</div>
        <div>
            内容
        </div>
    </div>
</body>
</html>

上述代码中,为了方便展示,给div添加了边框,最终效果如下: 

283dc35e9b2a47babe095d3f8743c986.png

从上图看出,“主题”和“内容”所在的块,距离外框上为100像素,左右下各为20像素。

4.6 外边距

与内边距相反,外边距是指块与块之间的距离,我们先来看一个不设置外边距的例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="height: 200px;background-color: dodgerblue;"></div>
<div style="background-color: red;height: 100px;"></div>
</body>
</html>

e572063535ac4d70b8cb23f81105b1b5.png

可以看到两个块紧挨在一起了,现在设置一下外边距:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="height: 200px;background-color: dodgerblue;"></div>
<div style="background-color: red;height: 100px;margin-top: 10px"></div>
</body>
</html>

ad6cc303e08a412cadb91e0924a572fa.png 上述margin-top设置成10px,意味着红色块距离上方蓝色块10像素,这里还可以在红色块下再加一个块,然后设置margin-bottom看看效果:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="height: 200px;background-color: dodgerblue;"></div>
<div style="background-color: red;height: 100px;margin-top: 10px;margin-bottom: 20px"></div>
<div style="height: 200px;background-color: dodgerblue;"></div>
</body>
</html>

 5388316f08254e38a296945b96d31be1.png

除此之外,还有margin-left,margin-right,可根据需要进行设置。

5. 总结

至此,CSS基础知识咱们学习完毕,还是那句话,样式千千万,不可能全部都学也不可能全都记住,哪怕是我们本次笔记学习过的,也不可能全都记住,毕竟每种属性还会有多种不同的值设置,每个标签也能有多种不同的css样式设置,所以我们最重要的是掌握css的用法,多看多学多写,做到今后在读别人的代码或者修改别人的样式时,不至于抓瞎,这不仅是分享给大家的,也是敲我自己记住的,因为本人也是在不断学习中~

本文主要介绍了一下几方面内容:

1. css的三种使用方式:在head中、在标签中、从css文件导入;

2. 五种选择器:id选择器、类选择器、标签选择器、属性选择器、后代选择器;

3. 高度和宽度。要注意对span标签默认无效、通过display实现块级标签和行内标签互相转换;

4. 字体格式:大小font-size、颜色color、样式font-family等;

5. 文字对齐方式:注意垂直方向无center属性值;

6. 浮动:能够让块内容顺序排列。但要注意避免块漂浮而脱离文档流,可以用clear: both解决;

7. 内边距、外边距

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/613940.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

面试常考算法(1):反转链表、局部反转链表(包含误区分析)

BM1 反转链表 给定一个单链表的头结点pHead(该头节点是有值的&#xff0c;&#xff0c;$ 长度为n&#xff0c;反转该链表后&#xff0c;返回新链表的表头。   数据范围: 0 ≤ n ≤ 1000 0 \leq n \leq 1000 0≤n≤1000   要求: 空间复杂度 O ( 1 ) O(1) O(1) &#xff0c…

QT QHorizontalSpacer弹簧控件

本文详细的介绍了QHorizontalSpacer控件的各种操作&#xff0c;例如&#xff1a;新建界面、控件布局、隐藏控件、设置宽高、添加布局、其它参数、.h源文件、cpp源文件、其它文章等等操作。 实际开发中&#xff0c;一个界面上可能包含十几个控件&#xff0c;手动调整它们的位置既…

最优化简明版(上)

引言 本文简单地介绍一些凸优化(Convex Optimization)的基础知识&#xff0c;可能不会有很多证明推导&#xff0c;目的是能快速应用到机器学习问题上。 凸集 直线与线段 设 x 1 ≠ x 2 x_1 \neq x_2 x1​x2​为 R n \Bbb R^n Rn空间中的两个点&#xff0c;那么具有下列形…

基于 log4j2 插件实现统一日志脱敏,性能远超正则替换

前言 金融用户敏感数据如何优雅地实现脱敏&#xff1f; 日志脱敏之后&#xff0c;无法根据信息快速定位怎么办&#xff1f; 经过了这两篇文章之后&#xff0c;我们对日志脱敏应该有了一定的理解。 但是实际项目中&#xff0c;我们遇到的情况往往更加复杂&#xff1a; 1&am…

开发云原生应用应遵循的十二要素

代码库&#xff1a;一份版本控制下的基准代码库&#xff0c;多份部署 应用程序的源代码仓库应该只包含一个应用程序&#xff0c;并列出它所依赖的资源清单。对于不同的环境&#xff0c;我们应该不需要重新编译或打包应用程序。每个环境中特有的设置应该与代码无关 依赖&#…

SpringMVC-【回顾】

回顾MVC架构 什么是mvc&#xff1a;模型、视图、控制器 -----软件设计规范 回顾servlet maven项目导入依赖&#xff08;webmvc,servlet-api,jsp-api,jstl,junit&#xff09;创建子模块&#xff0c;在子模块中添加框架支持&#xff08;在子模块中导入依赖jsp、servlet【因为父…

【NACK】视频rtp包接收及nack触发流程走读

这里大神分析很很透彻了:原文地址:WebRTC中NACK的处理流程 - 资料 - 音视频开发中文网 - 构建全国最权威的音视频技术交流分享论坛视频包的接收 RtpVideoStreamReceiver::ReceivePacket void RtpVideoStreamReceiver::ReceivePacket(const RtpPacketReceived& packet)知乎…

聊聊哪些奇葩的代码规范 —— 代码放一行

因为有些要求感觉实是太过奇葩&#xff0c;收集下来娱乐下大家。 代码规范要求 要求代码必须要放在一行上面&#xff0c;导致代码上面有不少行甚至超过了 1000 个字符。 规范解读 就是有时候代码过长&#xff0c;我们会折行增加可读性&#xff0c;最简单的一个例子就是 obj…

CG平台实验——逻辑回归

文章目录 练习2&#xff1a;逻辑回归介绍1 Logistic回归1.1 数据可视化1.2 实现1.2.1 Sigmoid函数1.2.2 代价函数和梯度1.2.2.1 代价函数1.2.2.2 梯度下降 1.2.3 寻找最优参数1.2.4 评估逻辑回归 2 正则化逻辑回归2.1 数据可视化2.2 特征映射2.3 代价函数和梯度 2.4 寻找最优参…

rust疑难进阶手册(1)-安装和管理,类型推断,打印输出(1)

目录 安装管理和配置工具项目管理类型推断格式输出位置参数格式化文本命名参数安装 不管OS是否带有rust,都应使用rustup来安装rust linux/freebsdcurl https://sh.rustup.rs -sSf | shwindows https://www.rust-lang.org/tools/install windows下建议使用GNU的编译链接库,不…

GraphQL入门实战

解决什么问题 根据请求控制返回结果 例如&#xff1a; 一个User对象&#xff0c;有id&#xff0c;name&#xff0c;mobile&#xff0c;email 有些接口只要返回id,name &#xff0c;有些接口还要要返回 mobile 适用场景 弱文档管理&#xff0c;公司对文档要求不高需求复杂变…

【JavaEE进阶】springBoot热部署、请求转发与重定向

目录 一、SpringBoot热部署 1.1热部署的步骤 1.1.1导入maven中央仓库的jar包 1.1.2开启项目自动编译 1.1.3启动项目 1.2热部署的原理 二、请求转发&重定向 2.1关键字不一样 2.2定义不同 请求转发(forward)&#xff1a; 请求重定向(redirect): 2.3数据共享不一样…

如何用MASM32开发Windows应用程序

提醒&#xff1a;以下内容仅做参考&#xff0c;可自行发散。在发布作品前&#xff0c;请把不需要的内容删掉。IT技术日异月异&#xff0c;无论是初学者还是有经验的专业人士&#xff0c;都需要与时俱进&#xff0c;不断学习新技术。在学习一门新的IT技术时&#xff0c;都需要采…

Github自定义个人首页

前言 GitHub 个人主页&#xff0c;官方称呼是 profile&#xff0c;是一个以 Markdown 脚本语言编写的个人 GitHub 展示主页面。Guthub 个人主页可以展示很多有用的信息&#xff0c;例如添加一个首页被访问次数的计数器&#xff0c;一个 Github 被 Star 与 Commit 的概览信息&a…

JVM-学习笔记

一 . JVM架构图 JVM是Java Virtual Machine的简称&#xff0c;意为Java虚拟机。JVM有很多种&#xff0c;使用最为广泛的JVM为HotSpot。 如上面架构图所示&#xff0c;JVM分为三个主要子系统&#xff1a; 类加载器子系统&#xff08;Class Loader Subsystem&#xff09; 运行…

Linux命令学习之cp和mv

cp man 1 cp可以看一下cp的帮助说明。 cp -r /learnwell/good/ /tmp把good目录复制到/tmp目录下&#xff0c;注意想要复制目录&#xff0c;一定要加上-r选项。 接下来学习复制文件&#xff0c;cp 源文件 目标目录&#xff08;相对路径方法&#xff09;或者是cp /源文件所在目…

华为OD机试题【IPv4地址转换成整数】【2023 B卷 100分】

文章目录 &#x1f3af; 前言&#x1f3af; 题目描述&#x1f3af; 解题思路示例 1示例 2&#x1f4d9; Python代码实现&#x1f4d7; Java代码实现&#x1f4d8; C语言代码实现 &#x1f3af; 前言 &#x1f3c6; 《华为机试真题》专栏含2023年牛客网面经、华为面经试题、华为…

Spark安装和编程实践(Spark2.4.0)

系列文章目录 Ubuntu常见基本问题 Hadoop3.1.3安装&#xff08;单机、伪分布&#xff09; Hadoop集群搭建 HBase2.2.2安装&#xff08;单机、伪分布&#xff09; Zookeeper集群搭建 HBase集群搭建 Spark安装和编程实践&#xff08;Spark2.4.0&#xff09; Spark集群搭建 文章目…

linux(信号产生的各种方式)

目录&#xff1a; 1.引入 2.介绍系统支持的信号列表 3.键盘方式产生信号 4.程序中存在异常问题&#xff0c;产生信号 5.系统调用产生信号 6.软件条件也能产生信号 7.任何理解OS给进程发送信号 1.引入 我怎么证明ctrlc是向指定进程发送了2号信号呢&#xff1f;&#xff1f; sig…

5万字大数据实验室建设方案能源大数据中心建设方案word

本资料来源公开网络&#xff0c;仅供个人学习&#xff0c;请勿商用&#xff0c;如有侵权请联系删除篇幅有限&#xff0c;无法完全展示&#xff0c;喜欢资料可转发评论&#xff0c;私信了解更多信息。 大数据实验室建设方案 大数据实验室建设方案 目录 1概述 1.1建设背景 1.…