Python-web开发学习笔记（3）：CSS基础

news/2024/11/18 4:28:19/

 

🚀 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属性赋予不同的值，使标签拥有不同的样式。

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>

上述我们让所有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样式表就是这么写即可。运行结果如下：

 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>

执行结果：

关于选择器的使用，通常是类选择器用的最多，其次是标签选择器，再次是后代选择器；而属性选择器和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>

4. 常见样式

4.1 高度和宽度

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

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

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

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

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

 此时，我们在div后再加上div内容看看效果：

 

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

我们先不作处理看看：

可以看到，高度和宽度的设置对于行内标签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>

总的来说，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";...}

框框处可以看到我们设置的字体属性。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>

 可以看到，文字内容的位置相对于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>

我们再来看一个例子：

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

 看起来很正常对不对？真的是这样吗？现在我们给这几个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>

再看一下效果：

背景效果不起作用了。理论上，我给上述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>”后我们再来看下效果：

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

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添加了边框，最终效果如下： 

从上图看出，“主题”和“内容”所在的块，距离外框上为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>

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

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

 上述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>

 

除此之外，还有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.ppmy.cn/news/230369.html

相关文章

造轮子--自己封装一个 start

造轮子--自己封装一个 start

背景 都说不要造轮子&#xff0c;但是青柠认为&#xff0c;有的时候&#xff0c;造个轮子&#xff0c;更有助于清楚详细的业务逻辑&#xff0c;所以咱也自己写一个轮子&#xff0c;搞个系统开发。大体思路就是先搭建基础框架&#xff0c;然后细写业务逻辑&#xff0c;会涵盖主…
阅读更多...
python笔记 第二章 变量

python笔记 第二章 变量

系列文章目录 第一章 初识python 文章目录 2.1变量2.1.1变量的作用2.1.2定义变量标识符命名习惯使用变量 2.2 认识bugDebug工具Debug工具使用步骤: 2.3 数据类型 2.1变量 目标 变量的作用定义变量认识数据类型 2.1.1变量的作用 变量就是一个存储数据的的时候当前数据所在的…
阅读更多...
贝叶斯统计中的边缘分布

贝叶斯统计中的边缘分布

概率论与数理统计中的边缘分布 假设有二维随机变量 ( X , Y ) (X,Y) (X,Y)具有分布函数 F ( x , y ) F(x,y) F(x,y)&#xff0c;其中 X , Y X,Y X,Y都是随机变量&#xff0c;也有各自的分布函数&#xff0c;将它们各自的分布函数分别记为 F X ( x ) , F Y ( y ) F_X(x),F_Y(y)…
阅读更多...
【算法题】2460. 对数组执行操作

【算法题】2460. 对数组执行操作

插&#xff1a; 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 坚持不懈&#xff0c;越努力越幸运&#xff0c;大家一起学习鸭~~~ 题目&#xff1a; 给你一个下标从 0 开始的数组 nums…
阅读更多...
佳能Canon PIXMA TS8260 打印机驱动

佳能Canon PIXMA TS8260 打印机驱动

佳能Canon PIXMA TS8260 打印机驱动是官方提供的一款打印机驱动&#xff0c;本站收集提供高速下载&#xff0c;用于解决打印机与电脑连接不了&#xff0c;无法正常使用的问题&#xff0c;本动适用于&#xff1a;Windows XP / Windows 7 / Windows 8 / Windows 10 32/64位操作系…
阅读更多...
佳能i320打印机驱动安装

佳能i320打印机驱动安装

驱动下载 登录Microsoft Update Catalog 驱动下载网站 搜索&#xff1a; i320 找到适合自己的版本&#xff0c;下载解压缩 添加打印机 打开控制面板&#xff0c;选择“查看设备和打印机” 点击“添加打印机” 点击“我所需要的打印机未列出” 选择通过手动添加打印机 点击下一…
阅读更多...
佳能g2810提示5b00_佳能G2810 3800系列出现5B00如何解决

佳能g2810提示5b00_佳能G2810 3800系列出现5B00如何解决

佳能清零软件万能版操作手册通用于佳能所以系列如MG G TS MX MP IX等等注意事项:请一定先打开软件再进维修模式 佳能打印机清零须在维修模式下操作&#xff0c;未进到维维修模式清零会报错006 001 005。需要清零软件包的联系工程师 2、佳能打印机清零须用USB接上电脑操作&#…
阅读更多...
《互联网上网服务营业场所管理条例（2016修订）》

《互联网上网服务营业场所管理条例（2016修订）》

互联网上网服务营业场所管理条例 第一章总则 第一条为了加强对互联网上网服务营业场所的管理&#xff0c;规范经营者的经营行为&#xff0c;维护公众和经营者的合法权益&#xff0c;保障互联网上网服务经营活动健康发展&#xff0c;促进社会主义精神文明建设&#xff0c;制定…
阅读更多...
最新文章

Copyright @ 2022~2023