python能開發前端嗎，python全棧開發第二天（CSS簡介，CSS常用的屬性）

2023-10-20 阅读 30 评论 0

摘要：第二天CSS簡介什么是csscss三種引入方式css選擇器引入方式的css優先級三種基本選擇器的優先級關系選擇器css常用的屬性css顏色的表示方法背景屬性字體屬性邊框屬性內間距外間距盒子模型文本屬性布局屬性浮動定位 CSS簡介什么是css 重疊樣式表主要是負責標簽的樣式美化頁面

第二天

- CSS簡介
- - 什么是css
  - css三種引入方式
  - css選擇器
  - 引入方式的css優先級
  - 三種基本選擇器的優先級
  - 關系選擇器
- css常用的屬性
- - css顏色的表示方法
  - 背景屬性
  - 字體屬性
  - 邊框屬性
  - 內間距
  - 外間距
  - 盒子模型
  - 文本屬性
  - 布局屬性
  - 浮動
  - 定位

CSS簡介

什么是css

重疊樣式表
主要是負責標簽的樣式美化頁面

python能開發前端嗎，一個網頁分三大部分
結構層：主要由html負責負責頁面的結構
表現層：主要由css負責頁面的展示樣式美化頁面
行為層：主要由js負責負責頁面和用戶的交互效果

Css是單獨的一種文件類型后綴為.css的文件

css三種引入方式

行間樣式
給標簽添加style屬性值就是你要設置的css樣式
嵌入式
將css代碼寫在 head標簽內的style標簽內
外鏈式
在head標簽內通過link標簽的href屬性引入外部css文件

Css語法格式：
在這里插入圖片描述

<head><meta charset="utf-8"><title>css使用</title><style type="text/css">div{width: 200PX;height: 200PX;background: yellow;}</style><!-- <link rel="stylesheet" type="text/css" href="./css/1.css"> -->
</head><body>
<div style="width: 100px;height: 100px;background: green">行間樣式</div>
<div>內嵌式</div>
<!-- <div>外鏈式</div> -->
</body>css文件
div{width: 200PX;height: 200PX;background: pink;
}

css選擇器

Python html、用來選取要設置的html標簽

1、標簽選擇器：通過標簽名來查找元素
選擇符：標簽名
影響范圍最大一般很少單獨使用

2、Id選擇器：通過標簽的id屬性的值來獲取元素
選擇符 #
Id屬性的值不能重復，一個id值在一個html文件中只能出現一次
影響范圍最小

3、Class選擇器：通過元素的class屬性的值來獲取元素
選擇符: .
一個標簽的class屬性可以有多個值，
一個class屬性的值可以被多個標簽去使用
影響范圍介于id選擇器和標簽選擇器之間

引入方式的css優先級

python 前端？嵌入式
外鏈式
行間樣式
問題：當使用以上三種方式對一個標簽設置樣式時，思考到底哪個生效
注：誰靠近元素越近誰生效

三種基本選擇器的優先級

標簽選擇器<類選擇器<id選擇器
誰的影響范圍大誰的優先級就小

關系選擇器

1、后代選擇器：選擇符空格
選擇指定標簽內的所有符合要求的標簽忽略層級關系

2、子元素選擇器：選擇符>
只獲取指定元素的直接子元素

css開發？3、并集選擇器（組選擇器/并列選擇器）：
選擇符 ,
一次性給多個元素設置相同的樣式

4、偽類選擇器：：hover
當鼠標移入指定元素時，修改當前元素的樣式

5、偽元素選擇器：
After 在指定元素內部的后面插入指定的內容
Before 在指定元素的內部前面插入指定的內容
以上兩個選擇器要配合content使用

/* 后代選擇器設置.wrap內的所有p標簽的樣式*/.wrap p{color:red;}/*子選擇器設置.wrop的子元素p樣式*/.wrap>p{color:blue;}/*并集選擇器*/.wrap>span,span{color:pink;}
/*偽類選擇器 hover*/.box:hover{width: 200px;height: 200px;background: pink;color:green;}/*偽元素選擇器*/.box:before{content:"你";}.box:after{content:"?";}
<div class="wrap"><div class="inner"><p>我是inner里的p</p></div><p>我是wrap里的p</p><span>我是span</span></div><p>我是最外層的p</p><span>我是外部span</span>

css常用的屬性

css顏色的表示方法

A.直接使用單詞來表示

python web，B.十六進制表示方式
取值范圍0-9A-f
一共有六位十六進制數來表示最終顯示的顏色
沒兩個數為一組分別代表紅綠藍

C.十進制數表示方式
由三個進制的數字來表示最終的顯示顏色
0-255
rgb(紅色,綠色,藍色)

D.帶透明度的顏色表示
rgba(紅色,綠色,藍色,透明度)
0-1之間的小數

.box{width:100px;height: 100px;/*使用單詞來表示*//*background: red;*//*十六進制表示方式*//*background: #ff0000;background: #00ff00;background: #0000ff;*//*簡寫*//*background-color: #00f;*//*十進制表示*//*background-color: rgb(255,0,0);*//*帶透明度*/background-color: rgba(255,0,0,0.2);}<div class="box">上來試試</div>

背景屬性

background-color
background-image
background-position
background-repeat
background-size

         style type="text/css">.box{width: 50px;height: 50px;border: 1px solid red;background-image: url(../img/0.jpg);background-repeat: no-repeat;background-position: -3px 6px;/*圖片占框的百分比,size不能簡寫*//*background-size: 100% 100%*//*簡寫*//*background:url(../img/0.jpg) no-repeat -3px 6px;*/}.box:hover{background-position: -348px -274px;}</style>
<body><div class="box"></div>
</body>

字體屬性

python編程、1、color 顏色

2、font-size 大小
瀏覽器的默認字體大小是16px
谷歌瀏覽器最小只能設置到12px

3、font-weight 是否加粗
bold/800

4、font-family 字體類型
如果用戶電腦沒有指定的字體會使用默認字體顯示
font-family:宋體,楷體; 如果第一個字體不存在會去使用第二個字體
font-family: ‘Angsana New’; 如果字體的名字中有空格需要加引號

java和python。5、font-style 是否傾斜
nomal 不傾斜
italic 傾斜

<head><meta charset="utf-8"><title>字體</title><style type="text/css">/* 默認字體大小 16px*/.box{color:red;font-size:50px;font-weight:bold;/*如果電腦沒有指定的字體會使用默認字體顯示如果第一個字體不存在會使用第二個如果字體名字間有空格需要加空格	*/font-family:楷體,宋體;/*font-family: "Angsanna New";*/font-style: italic;}em{font-style: normal;}</style>
</head>
<body><div class="box">大海啊</div><em>我是斜體</em>
</body>

邊框屬性

border-top:
border-left:
border-right:
border-bottom:
邊框的顏色邊框的樣式邊框粗細
邊框樣式：solid實線 dotted點狀線 dashed虛線

<head><meta charset="utf-8"><title>邊框</title><style type="text/css">.box{width: 200px;height: 200px;/*簡寫 設置四邊邊框的粗細 設置邊框的樣式 設置邊框的顏色*//*border:1px solid red;*/border-top:1px solid red;border-bottom:1px solid red;border-left:1px dashed red;border-right:1px dotted red;}</style>
</head>
<body><div class="box"></div>
</body>

內間距

設置元素邊界距離內部內容之間的間距
會改變元素的實際大小
padding-top:20px;
padding-left:20px;
padding-right:20px;
padding-bottom:20px;

簡寫
如果只給一個值代表四邊的間距
如果是四個值從上開始依次順時針旋轉每個值代表一個邊
如果三個值第一個值是上第二個值是左右第三個值是下
如果是兩個值第一個值是上下第二個值是左右的

padding:50px;
padding:10px 20px 30px 40px;
padding:10px 20px 30px;
padding:20px 50px;

<head><meta charset="utf-8"><title>內間距,外間距</title><style type="text/css">.box{width: 100px;height: 100px;background:#0f0;/*	padding-top:20px;padding-left:20px;padding-right: 20px;padding-bottom: 20px; *//*簡寫*如果是一個值代表四邊的間距如果是四個值從上開始一次順時針旋轉 每個值代表一邊如果是三個值 第一個值是是上邊第二個是左右第三個是下如果是兩個值 第一個是上下，第二個是左右//*	padding:50px;padding:10px 20px 30px 40px;padding:10px 20px 30px;*/padding:20px 50px;}/*外間距 外補白 margin*/.item2,.item3{width: 200px;height:200px;}.item2{border:1px solid red;margin-top:20px;margin-bottom:20px;margin-left: 20px;margin-right:20px;}.item3{border: 1px solid blue;}/*設置item4 水平居中*/.item4{width: 200px;height: 200px;border:1px solid red;margin:0 auto;}/*margin 為負值 主要應用于邊框的合并*/.item5,.item6{width:200px;height:200px;border:5px solid red;}.item6{margin-top:-5px;}</style>
</head>
<body><div class="box">1</div><div class="item2">2</div><div class="item3">3</div><div class="item4">4</div><div class="item5">5</div><div class="item6">6</div>
</body>

外間距

python前端界面，設置元素距離四周外部元素之間的間距
margin:
margin的使用和padding是一樣的可以單獨指定方向設置
還可以不指定方向一次設置多個值

一般情況下
我們用margin來去實現塊元素的水平居中
margin 為負值主要應用于邊框的合并

<head><meta charset="utf-8"><title>內間距,外間距</title><style type="text/css">.box{width: 100px;height: 100px;background:#0f0;/*	padding-top:20px;padding-left:20px;padding-right: 20px;padding-bottom: 20px; *//*簡寫*如果是一個值代表四邊的間距如果是四個值從上開始一次順時針旋轉 每個值代表一邊如果是三個值 第一個值是是上邊第二個是左右第三個是下如果是兩個值 第一個是上下，第二個是左右//*	padding:50px;padding:10px 20px 30px 40px;padding:10px 20px 30px;*/padding:20px 50px;}/*外間距 外補白 margin*/.item2,.item3{width: 200px;height:200px;}.item2{border:1px solid red;margin-top:20px;margin-bottom:20px;margin-left: 20px;margin-right:20px;}.item3{border: 1px solid blue;}/*設置item4 水平居中*/.item4{width: 200px;height: 200px;border:1px solid red;margin:0 auto;}/*margin 為負值 主要應用于邊框的合并*/.item5,.item6{width:200px;height:200px;border:5px solid red;}.item6{margin-top:-5px;}</style>
</head>
<body><div class="box">1</div><div class="item2">2</div><div class="item3">3</div><div class="item4">4</div><div class="item5">5</div><div class="item6">6</div>
</body>

盒子模型

使用現實中的盒子來描述頁面中的元素的屬性
盒子的實際寬度=width+左border+右border+左padding+右padding
盒子的實際高度=height+上border+下border+上padding+下padding

box-sizing:border-box 讓盒子大小=css樣式的實際大小

<head><meta charset="utf-8"><title>盒子模型</title><style type="text/css">/* 將外間距，內間距初始值全部設為0*/*{margin:0;padding:0;}	.box1{width: 100px;height:100px;background:yellow;}.box2{width:100px;height:100px;background:yellow;border:20px solid #000;/*讓盒子的實際大小=css設置的實際大小*/box-sizing:border-box;}.box3{width:100px;height:100px;background:yellow;border:20px solid #000;padding:20px;box-sizing:border-box;}.box4{/*要求元素大小為100*100邊框20padding20*/width:20px;height:20px;background:yellow;border:20px solid #000;padding:20px;}</style>
</head>
<body><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div><div class="box4">4</div>
</body>

文本屬性

python查看類的屬性，text-indent: 設置首行縮進
text-align: 文本的水平對其方式
text-decoration: 設置下劃線
line-height: 行高
設置行于行之間的間距
一般用于單行文本的垂直居中

vertical-align:
讓圖片中間或頂部和文本對齊
vertical-align:middle
vertical-align: top

<style type="text/css">*{margin:0;padding:0;}.item{width:400px;height:400px;border:1px solid red;/*設置首行縮進*/text-indent:32px;text-align:center;/*設置行高*//*line-height:30px;*/}.item1{width:400px;height:400px;border:1px solid red;/*文本水平對齊方式 一般用于單行文本*/text-align:center;/*添加下劃線*//*text-decoration:underline;*//*上劃線*//*text-decoration:overline;*//*中劃線 刪除線*//*text-decoration:line-through;*//*設置垂直居中 一般以實際height值設*/line-height:400px;}a{/*去除下劃線*/text-decoration:none;}.item2 img{/*讓圖片中間或頂部和文本對齊*//*vertical-align:middle;*//*vertical-align: top;*/}</style>
</head>
<body><div class="item"><span>帝高陽之苗裔兮，朕皇考曰伯庸。</span>攝提貞于孟陬兮，惟庚寅吾以降。皇覽揆余初度兮，肇錫余以嘉名：名余曰正則兮，字余曰靈均。紛吾既有此內美兮，又重之以修能。扈江離與辟芷兮，紉秋蘭以為佩。汩余若將不及兮，恐年歲之不吾與。朝搴阰之木蘭兮，夕攬洲之宿莽。日月忽其不淹兮，春與秋其代序。</div><div class="item1">帝高陽之苗裔兮</div><a href="http://www.baidu.com">百度</a><div class="item2">攝提貞于孟陬兮，惟庚寅吾以降。<img  src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2491562693,485434067&fm=26&gp=0.jpg" alt=""></div>

布局屬性

1、塊元素：獨占一行寬度默認是父元素的100% 默認高度由內容決定
支持所有的樣式
就算設置了寬度也會獨占一行

2、行內元素：不會獨占一行元素排在一行顯示
默認寬度是0 高度由內容決定
不支持寬高屬性和margin的上下屬性

python寫html，3、行內快元素不會獨占一行支持所有的樣式默認寬度0 默認高度由內容決定

4、display：規定元素以哪種元素類型顯示
none 隱藏
block 以塊元素顯示
inline-block 以行內快元素顯示此屬性已經被廢棄但是還能用
inline: 以行內元素顯示

補充visibility
display:none 隱藏隱藏好不在占據文檔位置
visibility:hidden 隱藏元素隱藏但是還是會占據文檔位置

注：一般情況下我們都是將行內元素轉變成塊元素或者行內快，不會將塊元素轉成行內元素

5、overflow：
visible: 默認值
hidden: 超出部分隱藏
scroll: 添加滾動條
auto: 自檢測并添加滾動條

清除當前元素內部對外部元素的影響

<style type="text/css">*{margin:0;padding:0;}.item{width:100px;height:100px;border:1px solid red;/*超出部分隱藏*//*overflow:hidden;*//*添加滾動條*//*overflow:scroll;*//*自動檢測內容是否超出 如果超出自動添加滾動條*/overflow:auto;}</style>
</head>
<body><div class="item"><img src="../img/3.jpg" alt=""></div>

浮動

float:只有left和right

文檔流：元素以從上到下，從左向右的排列方式這種排列規則就是文檔流

A.浮動會脫離文檔流會將后面沒有浮動的元素覆蓋
浮動不會覆蓋文字

B.浮動只有兩個方向，左浮動或者右浮動

C.當浮動元素碰到父元素的邊界時會停止浮動，碰到前面有浮動元素也會停止浮動，并排在一排顯示如果浮動元素的寬度超過父元素的寬度會自動換行

D.如果前面有未浮動的元素會另起一行進行浮動

浮動遇到的問題：當父元素沒有設置固定高度時，子元素全部浮動，會導致父元素高度無法撐開

解決辦法：
1.給父元素設置固定高度
2.給父元素添加overflow：hidden
3.給父元素的最后添加一個空標簽設置clear:both 讓該元素不受浮動影響
這種方式會添加無意義的空標簽影響頁面結構所以不推薦
4.使用偽元素選擇
給父元素添加偽類 after

<style type="text/css">.wrap{width:300px;border:2px solid red;/*清除浮動對外部元素的影響*//*overflow:hidden;*/}/*清除浮動對外部元素的影響*/.wrap:after{/*	content:'';display: table;clear:both;*/content:'';display:block;clear:both;}.item1{width:100px;height:100px;background:green;/*添加左浮動*/float:left;/*添加右浮動*//*float:right;*/}.item2{width:105px;height:105px;background:blue;/*左浮動*/float:left;}.item3{width:100px;height:100px;background:#f39;float:left;}.clear{/*width:100px;height:100px;*//*background:yellow;*//*清除浮動clear:both   清除兩邊元素浮動產生的影響left   清除前面元素左浮動 帶來的影響right  清除前面元素右浮動帶來的影響*/clear:both;}</style></head>
<body><div class="wrap"><div class="item1">1</div><div class="item2">2</div><div class="item3">3</div><!-- <div class="clear"></div> --></div>

定位

position
1、相對定位 relative
相對于元素原來的位置進行偏移參考點是原來位置的起始點
不會脫離文檔流

2、絕對定位 absolute
會脫離文檔流默認以body的00點位參考點進行位移
如果父元素有定位屬性，絕對定位就以父元素的00點位參考點進行偏移
如果父元素沒有定位屬性，就找爺爺元素，以此向上找，找到body為止

3、固定定位(綁定定位)fixed
脫離文檔流
相對于瀏覽器窗口進行定位

4、定位的層級：
只能給有定位屬性的元素設置
z-index:
z-index:1
z-index:2
數字越大越在上層

<title>相對定位</title><style type="text/css">*{margin:0;padding:0;}.wrap{width:600px;height:600px;border:1px solid red;margin-left:100px;}.item1{width:200px;height:200px;background:#f33;/*相對定位*/position:relative;top:200px;left:200px;}.item2{width:200px;height:210px;background: blue;}</style>
</head>
<body><div class="wrap"><div class="item1"></div><div class="item2"></div></div><title>絕對定位</title><style type="text/css">*{margin:0;padding:0;}.wrap{width:600px;height:600px;border:1px solid red;margin-left:200px;position:relative;}.item1{width:200px;height:200px;background:#f33;/*絕對定位*/position:absolute;top:200px;left:200px;}.item2{width:200px;height:200px;background: blue;}</style>
</head>
<body><div class="wrap"><div class="item1"></div><div class="item2"></div></div><title>固定定位</title><style type="text/css">*{margin:0;padding:0;}body{height:2000px;}.top{width:100px;height:50px;background:green;text-align:center;line-height:50px;/*國定定位*/position:fixed;right:20px;bottom:20px;}</style>
<div class="top">返回頂部</div>