當前位置：首頁 > 编程语言 > python >内容正文

python

python web开发 CSS基础

發布時間：2024/7/5 python 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 python web开发 CSS基础小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

- 1. 基礎知識
- 2. ID，Class 選擇器
- 3. CSS盒子模型
- 4. 嵌入CSS樣式
- - 4.1 內聯樣式表
  - 4.2 內部樣式表
  - 4.3 外部樣式表

learning from 《python web開發從入門到精通》

1. 基礎知識

CSS ，Cascading Style Sheet 層疊樣式表，標記語言，用于為 HTML 定義布局（字體，顏色，邊距，寬高，背景圖片，定位）

語法結構：選擇器 + 一條/多條聲明
如 p {color: red; font-size: 12px;}
css 聲明總以; 結束，并用 {} 括起來
注釋/* 和 */ 開始和結束

2. ID，Class 選擇器

id 選擇器為標有特定 id 的 HTML 元素指定特定樣式
如 #para1 {text-align: center; color: red;} 將應用于元素屬性 id="para1"
class 選擇器 用于一組元素的樣式，可用于多個元素，在CSS中以.號顯示
如 .center {text-align: center;}擁有 center 類的 HTML 元素均為居中
p.center {text-align: center;} 所有 p 元素使用 class="center"讓該元素文本居中

3. CSS盒子模型

從外到內：

Margin 外邊距（透明）
Border 邊框
Padding 內邊距（透明）
Content 內容：文本圖像

4. 嵌入CSS樣式

4.1 內聯樣式表

使用 HTML 屬性 style，僅影響被 style 屬性包括著的元素

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Css樣式</title> </head> <body> <h1 style="text-align: center; color: red">michael 學習web開發</h1> <p style="padding: 20px; background: rosybrown">盒子模型</p> </body> </html>

4.2 內部樣式表

在 HTML 文件內使用 <style> 標簽，在文檔頭部<head> 標簽內定義內部樣式表

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>內部樣式表</title><style>h1 {text-align: center;color: blue;}p {padding: 20px;background: blueviolet;}</style></head> <body><h1>michael 學習python web開發</h1><p>盒子模型</p></body> </html>

4.3 外部樣式表

一個擴展名為 css 的文本文件，在 HTML 中指向要使用的 css 文件
如 <link rel="stylesheet" type="text/css" href="style/dafault.css" />

mycss.css

h1{text-align: center;color: olivedrab; } p{padding: 20px;background: cornflowerblue; } <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>外部樣式表</title><link rel="stylesheet" type="text/css" href="mycss.css"/></head> <body><h1>michael 學習python web開發</h1><p>盒子模型</p></body> </html>

總結

以上是生活随笔為你收集整理的python web开发 CSS基础的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： pycharm profile对函数调用
下一篇： websocket python爬虫_p