Python Web开发记录 Day2：CSS（样式表语言，样式）

在Python Web开发的过程中，CSS是用来控制网页样式的关键语言。以下是一些CSS的基本用法示例：

内联样式：

在HTML标签中直接使用style属性来设置元素的样式。




<p style="color: blue; font-size: 20px;">这是一个蓝色字体的段落。</p>

内部样式表：

在HTML文档的<head>部分使用<style>标签来包含CSS代码。




<head>
    <style>
        p {
            color: red;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <p>这是一个红色字体的段落。</p>
</body>

外部样式表：

创建一个CSS文件（比如styles.css），然后在HTML文档的<head>部分使用<link>标签来引用这个CSS文件。




/* styles.css */
p {
    color: green;
    font-size: 14px;
}




<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <p>这是一个绿色字体的段落。</p>
</body>

CSS选择器：

标签选择器：直接使用HTML标签作为选择器。
类选择器：在HTML元素上使用class属性，并在CSS中以.开头。
ID选择器：在HTML元素上使用id属性，并在CSS中以#开头。




<p class="para">这是一个类选择器示例。</p>
<p id="header">这是一个ID选择器示例。</p>




p {
    color: black;
}
.para {
    font-size: 12px;
}
#header {
    font-weight: bold;
}

CSS盒模型：

width和height属性用于设置元素的内容区域的宽度和高度。
padding属性用于设置内边距，增加元素的内容区域和边框之间的距离。
border属性用于设置边框。
margin属性用于设置外边距，增加元素和其他元素之间的距离。




div {
    width: 300px;
    height: 200px;
    padding: 20px;
    border: 1px solid black;
    margin: 10px;
}

CSS布局：

浮动布局：使用float属性来让块元素并排显示。
定位布局：使用position属性（relative，absolute，fixed）来精确控制元素位置。




.float-left {
    float: left;
    width: 100px;
}
 
.positioned {
    position: relative;
    top: 20px;
    left: 30px;
}




<div class="float-left">左浮动</div>
<div class="float-left">左浮动</div>
<div class="positioned">相对定位</div>

CSS特效：

渐变背景：使用linear-gradient函数为元素添加渐变效果。
阴影效果：使用box-shadow属性为元素添加阴影。




div {
    background: linear-gradient(to right, red, yellow);
    box-shadow:

Python Web开发记录 Day2：CSS（样式表语言，样式）

评论已关闭

推荐阅读