Python全栈最全学习之路-WEB前端（二）

tech2025-06-20 2

CSS入门

一、CSS介绍与基本使用

1、CSS介绍

CSS样式层叠样式表（Cascading Style Sheets）是一种用来表示HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS作用 CSS就是网页的化妆师，可以让网页变得更加美观。使用方法 1、直接写在标签；2、写在style标签内；3、使用外部.css文件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS的三种引入方式</title>         </head> <body>   <p style="color: red;">我是段落标签</p>  </body> </html>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS的三种引入方式</title>  <style> p{ color: green; } </style>   </head> <body>    <p>我是段落标签</p> </body> </html>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS的三种引入方式</title>    <link rel="stylesheet" href="css/css.css"> </head> <body>    <p>我是段落标签</p> </body> </html>

二、CSS选择器

1、选择器

选择器作用给指定的元素设置样式，能够更加精准选择器权重选择器也有权重差别，当出现冲突样式的时候，选择权重大的样式选择器种类有标签选择器、ID选择器、class选择器、兄弟选择器、后代/子代选择器、复杂选择器、伪类选择器

2、选择器种类

ID选择器通过标签的id属性，选择对应的元素注意：id是唯一的

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS样式</title> <style> #d1{ color: red; } </style> </head> <body> <div id="d1"> 这是个啥标签来着 </div> </body> </html>

class选择器通过标签的class属性，选择对应的元素借助了一个类的概念，一处定义，可以多处使用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS样式</title> <style> .d1{ color: green; } </style> </head> <body> <div class="d1" id="di1"> 这是个啥标签来着 </div> </body> </html>

群组选择器群组选择器是可以同时选择多个标签的选择器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS样式</title> <style> div,p{ color: red; } </style> </head> <body> <div class="d1" id="di1"> 这是个啥标签来着 </div> <p>我是段落标签1</p> </body> </html>

层次选择器层次选择器分为，子代、后代、相邻和兄弟等四种选择器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS样式</title> <style> #p1~p{ color: green; } </style> </head> <body> <div class="d1" id="di1"> 这是个啥标签来着 <p id="p1">我是段落标签 <span>我是文本标签 <b>我是粗体标签</b> </span> </p> <p>我是段落标签2</p> </div> </body> </html>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS样式</title> <style> div span{ color: red; } </style> </head> <body> <div class="d1" id="di1"> 这是个啥标签来着 <p id="p1">我是段落标签 <span>我是文本标签 <b>我是粗体标签</b> </span> </p> <p>我是段落标签2</p> </div> </body> </html>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS样式</title> <style> p[name='p1']{ color: red; } </style> </head> <body> <p name="p1">我是段落标签1</p> <p name="p2">我是段落标签2</p> </body> </html>

3、伪类选择器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS选择器</title> <style> /*伪类选择器*/ /*未访问的*/ a:link{ color: red; } /*访问过后*/ a:visited{ color: green; } /*鼠标移上超链接时*/ a:hover{ color: darkblue; } /*激活状态下*/ a:active{ color: darkorchid; } </style> </head> <body>  <a href="#">我是超链接</a> </body> </html>

4、选择器总结

选择器优先级概况如下： 1、在id>class>标签 2、复杂选择器的优先级比较如下： A.先比id（最高位），再比class，最后比tagName（标签个数） B.id个数不等，id越多，优先级越高 C.id相同，class越多，优先级越高 D.id，class都相同，则标签越多，优先级越高 3、行内样式>内部样式=外部样式

三、CSS字体/文本

1、字体样式

类型表示字体font-family字体大小font-size字体样式font-style字体粗细font-weight小大写font-variant复合样式font <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字体的常用样式</title> <style> p{ /*字体类型*/ /* font-family: 华文楷体;*/ /*字体大小*/ /*font-size: 40px;*/ /*字体样式*/ /*font-style: italic;*/ /*字体粗细*/ /* font-weight: bold;*/ /*字体小大写:只针对英文*/ /*font-variant: small-caps;*/ /*复合样式*/ /*顺序：字体样式，字体小大写，字体粗细，字体大小，字体类型*/ font: italic small-caps bold 20px 黑体; } </style> </head> <body> <p>我是段落标签</p> <p>HELLO WORLD</p> <p>hello world</p> </body> </html>

2、文本常用样式

类型表示对齐方式text-align首行缩进text-indent文本线text-decoration字距letter-spacing词距word-spacing行高line-height （单行文本的垂直居中：行高=高度） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本的常用样式</title> <style> p{ height: 80px; /*对齐方式*/ text-align: left; /*首行缩进*/ text-indent: 2em; /*文本下划线*/ /* text-decoration: underline;*/ /*文本删除线*/ /*text-decoration: line-through;*/ /*去掉文本线*/ text-decoration: none; /*字距*/ letter-spacing: 10px; /*词距*/ word-spacing: 50px; /*行高：解决单行文本的对齐，行高=高度*/ line-height: 80px; } </style> </head> <body> <p>我是段落标签</p> <span>我是文本标签</span> </body> </html>

四、CSS背景

1、背景常用样式

类型表示背景颜色backgrou-color背景图片background-image背景铺盖background-repeat背景大小background-size背景定位background-position复合样式background <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景的常用样式</title> <style> div{ width: 300px; height: 300px; border: 1px solid #caffc2; /*背景颜色*/ background-color: green; /*背景图片*/ background-image: url("images/caomei.jpg"); /*背景大小*/ background-size: 300px 300px; /*背景平铺*/ background-repeat: no-repeat; /*背景定位*/ background-position: 50% 50%; } </style> </head> <body> <div> </div> </body> </html>

最新回复(0)