Python全栈开发 Day2(CSS)
今日格言: 人与人最小的差别是智商, 最大的差别是坚持。
Hey there, this is Marcos.今天我们要速通的是前端第二件套 =>CSS
ps: 要预览前端界面渲染出来的样子可以使用VsCode插件LiveServer, 在编辑html界面右键选择Open with Live Server即可查看效果
CSS
理论基础
CSS是什么:想象一下，你用HTML搭建了一座房子的骨架（是房间，
是家具），但它只是一个灰色的、毫无生气的毛坯房。这时候，CSS (Cascading Style Sheets，层叠样式表) 就登场了。HTML负责内容和结构（“是什么”），而CSS负责样式和美化（“长什么样”）。将它们分离，能让我们的代码更加清晰、易于维护。
和Html文件是怎么联动的:众所周知html就是一个浏览器可以直接打开的文件,而css文件会通过 类似这样的语句嵌入到html中以更改html中的样式
\\：告诉浏览器，我们要链接一个外部资源。rel=\"stylesheet\"：明确告诉浏览器，这个资源是一个样式表 (stylesheet)。这是必不可少的属性，否则浏览器不知道该拿这个文件做什么。href=\"./style.css\"：这是最重要的部分，它指明了CSS文件的路径./style.css的意思是“在当前文件夹下，找到名为 style.css 的文件”。
具体怎么联动起来的?
通过html的每一个中的内容进行联动,主要有元素选择器,类选择器和Id选择器,
在Html中:直接使用原本元素名字的如\"h4\"就是元素选择器,使用class=“xxx\"语法的,就是要使用类选择器
在Css中: 每一种选择器后面都接一个{}来定义具体的样式, 元素选择器直接接, 类选择器前面加上”.“, id选择器前面加上”#\"
实操演练
看懂原理了直接上实战, 以下是一个简单的html配合css样例, 你只需要创建一个文件夹, 里面放两个文件,一个命名为index.html, 一个命名为style.css, 将代码复制进去, 即可点进index.html预览效果.
tips: 在VsCode中创建好index.html文件后, 输入!然后按下TAB键即可形成初步框架
<!DOCTYPE html><html lang=\"en\"><head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <link rel=\"stylesheet\" href=\"./global.css\"> <title>Document</title></head><body> <h4>选择器</h4> <div class=\"box\">这是一个盒子</div> <div id=\"box2\">这是另一个盒子</div></body></html>h4{ color:blue}.box{ width: 100px; color: red;}#box2{ width: 100px; color: green;}渲染后的效果应该类似下图
核心CSS属性速查表
以下是为初学者准备的CSS核心属性清单，力求用最简短的语言说明其作用：
colorfont-sizefont-weightfont-familytext-alignwidthheightbackground-colorborderborder-radiuspaddingmargindisplayopacitycursor
