【 Python 全栈开发 - WEB开发篇 - 25 】css基础
CSS 是一种用来描述网页样式并定义其布局的标准。CSS 主要分为三个部分：CSS2，CSS2.1 和 CSS3。
- CSS注释
CSS 注释是用来在 CSS 代码中解释样式规则的。浏览器会忽略注释，所以它们对于理解代码是做什么的非常有用。
/* 这是一个 CSS 注释，它不会影响样式 */- CSS的导入方式
CSS 可以通过以下三种方式导入 HTML 文件：
- 外部样式表：创建一个单独的 CSS 文件，然后在 HTML 文件中通过 link 标签引入。
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>- 内部样式表：在 HTML 文件的 head 标签中使用 style 标签直接书写 CSS 代码。
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p2 {color: red;}
</style>
</head>- 内联样式：直接在元素的 style 属性中书写 CSS 代码。
<p style="color: red;">This is a paragraph.</p>- CSS的选择器
CSS 选择器用于选择需要添加样式的元素。常见的选择器有：
- 类选择器：以 "." 开头，后跟类名。
.center {text-align: center;}- ID 选择器：以 "#" 开头，后跟 ID 名。
#myID {font-size: 20px;}- 元素选择器：直接使用 HTML 元素作为选择器。
p {color: red;}- 属性选择器：用于选择具有特定属性的元素。
input[type="text"] {width: 150px;}- 伪类选择器：用于选择元素的特定状态。
a:hover {color: red;}- CSS的盒模型
CSS 盒模型定义了元素如何显示以及如何处理元素的内边距，边框和外边距。
- 标准盒模型：元素的宽度和高度只包含内容区域。
- IE盒模型：元素的宽度和高度包含内容区域、边框和内边距。
/* 设置为标准盒模型 */
box-sizing: content-box;
/* 设置为 IE 盒模型 */
box-sizing: border-box;- CSS的布局
CSS 提供了多种布局方式，包括浮动布局、绝对定位布局、相对定位布局、固定定位布局等。
- 浮动布局：可以让块元素并排显示。
img {
float: right;
}- 定位布局：可以精确控制元素的位置。
div {
position: absolute;
top: 100px;
left: 100px;
}- CSS的特性
CSS 的特性包括层叠性、继承性、特殊性和优先级。
- 层叠性：多个样式可以应用于同一元素，最终样式由各个样式叠加决定。
- 继承性：一些 CSS 属性可以从父元素继承到子元素。
- 特殊性：ID 选择器比类选
评论已关闭