🚀 优质资源分享 🚀
| 学习路线指引（点击解锁） | 知识定位 | 人群定位 |
|---|---|---|
| 🧡 Python实战微信订餐小程序 🧡 | 进阶级 | 本课程是python flask+微信小程序的完美结合，从项目搭建到腾讯云部署上线，打造一个全栈订餐系统。 |
| 💛Python量化交易实战💛 | 入门级 | 手把手带你打造一个易扩展、更安全、效率更高的量化交易系统 |
CSS基本知识点
我们在学习HTML之后，前端三件套第二件便是CSS，但CSS内容较多，我们分几部分讲解：
（如果没有学习HTML，请参考之前文章：HTML知识点概括——一篇文章带你完全掌握HTML>）
CSS作用
如果说HTML为网页提供内容，那么CSS就是为内容进行装饰，为网页进行布局
CSS可以控制整体框架，控制文本字体，大小等诸多事宜
CSS语法
CSS基本语法只有一条：
选择器 {
声明1；
声明2；
}
元素显示模式
首先我稍微解释一下元素显示模式：
- 元素以什么方式进行显示
HTML的元素类型模式：
- 块元素
- 行内元素
我们先讲解一下块元素：
- 块元素包括：h标题系列，p，div，ul，ol，li
- 块元素特点包括：
- 自己独占一行
- 高宽，外距，背景色都可以设置
- 宽度默认为父类
- 是一个容器，可以放置行内或行内块元素
我们再来讲解一下行内元素：
- 行内元素包括：a，strong，b，em，span
- 行内元素特点包括：
- 相近元素在一行
- 无法设置长宽
- 默认宽度为字宽度
- 行内元素只能容纳文本和其他行内元素
最后我们介绍一下行内块元素：
- 行内块元素包括：img，input，td
- 行内块元素特点：
- 一行可有多个行内块元素
- 正常情况宽度为内容宽度
- 可以设置宽度
这些属性并非都是绑定的，我们可以通过方法进行转换：
display：inline/block/inline-block 分别对应行内元素，块元素，行内块元素
CSS写入的三种方式
CSS作用HTML中一共有三种方法，我们一一介绍：
- 第一种：行内样式
- 直接在单个标签中写入style并进行书写
- 第二种：内部样式
- 在html文件的head区域写入style进行书写
- 第三种：外部样式
- 在css文件中书写，在html文件中的head区域采用link方法导入
- link语法：
上面三种语法讲究就近原则，当前标签距离谁较近，就是用哪种css
一般情况：行内元素>内部样式>外部样式
下面给出代码示例：
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>导入方法title>
<style>
h1 {
color: aliceblue;
}
style>
<link rel="stylesheet" href="css.css">
head>
<body>
<h1 style="color:aqua;">h1>
body>
html>
h1 {
color: black;
}
CSS的四种选择器
CSS的基本选择器分为四种：
-
通配符选择器：
- 针对所有标签进行选择
-
标签选择器：
- 针对所有对应的标签进行选择
-
类选择器（class）：
- 针对所有对应class名的所有类标签进行选择
- 一个标签可以具有多个类，一个类可以作用于多个标签
-
id选择器（id）：
- 针对对应id名的唯一标签进行选择
- 一个标签只能有一个id，一个id只能作用于一个标签
三种选择器具有明确的优先级：id选择器>类选择器>标签选择器
下面给出示例代码：
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http
最低0.47元/天 解锁文章
867
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
