Python全棧之學(xué)習(xí)CSS(1)
更新時(shí)間：2022年01月23日 16:44:55 作者：熬夜泡枸杞
這篇文章主要為大家介紹了Python全棧之CSS，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
1. 表單框類型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>單選框 , 復(fù)選框 , 下拉框</title>
</head>
<body>
<form action="" method="">
<!-- 單選框 radio 多選一 name名字要一致 checkedc:默認(rèn)選中 -->
<input type="radio" name="sex" value="m" id="sex1" /> <label for="sex1" >男性</label>
<input type="radio" name="sex" value="w" id="sex2" checked /> <label for="sex2" >女性</label>
<hr />
<!-- 復(fù)選框 checkbox 多選多 name名字要一致 -->
<input type="checkbox" name="food" value="banana" checked />香蕉
<input type="checkbox" name="food" value="huanggua" />黃瓜
<input type="checkbox" name="food" value="qiezi" checked />茄子
<input type="checkbox" name="food" value="donggua" />冬瓜
<hr />
<!-- 下拉框 select 多選一 selected 默認(rèn)選中, disabled 無(wú)法選中-->
<select name="city" >
<option value="beijing" >北京人</option>
<option value="xian" selected>西安人</option>
<option value="dalian" >大連人</option>
<option value="fuzhou">福州人</option>
<option value="zhengzhou" disabled >鄭州人</option>
</select>
<hr / >
<input type="submit" value="點(diǎn)我" />
</form>
</body>
</html>
文件上傳：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 文件上傳 </title>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data">
<!-- 文件上傳 -->
頭像:<input type="file" name="myfile" />
<hr/>
<!-- 大段文本框 -->
<textarea name="info" style="width:100px;height:100px;background-color:tan;" >請(qǐng)?zhí)顚?xiě)相關(guān)數(shù)據(jù)</textarea>
<hr/>
<!-- 隱藏的表單框 => 隱藏要修改的數(shù)據(jù)id -->
<input type="hidden" name="sid" value="13" />
<hr/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
2. 表單屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>input屬性</title>
</head>
<body>
<!--
placeholder 灰色輸入提示
required 必填
readonly 只能讀不能改 可以被提交
disabled 只能讀不能改 不會(huì)被提交
size 設(shè)置輸入框的大小
maxlength 輸入框最多可以輸入多少字符
minlength 輸入框最少需要輸入多少字符
autofocus 自動(dòng)獲取焦點(diǎn), 整個(gè)頁(yè)面只能有一個(gè)
tabindex 設(shè)置tab的切換順序
-->
<form action='' method="" >
用戶名:<input type="text" name="username" placeholder="請(qǐng)輸入用戶名" required tabindex=5 />
<br />
密碼: <input type="password" name="pwd" tabindex=4 >
<br />
年齡: <input type="text" name="age" value="18" readonly tabindex=3 />
<br />
郵箱: <input type="text" name="email" value="123463922@qq.com" disabled />
<br />
班級(jí): <input type="text" name="classroom" size=100 maxlength = 5 minlength=2 tabindex=2/>
<br />
國(guó)籍: <input type="text" name="country" autofocus tabindex=1 />
<br />
<input type="submit">
</form>
</body>
</html>
3. css引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css學(xué)習(xí) css的三種引入方法</title>
<!-- 2.內(nèi)嵌樣式 -->
<style>
p
{color:blue;}
</style>
<!-- 外部引入 -->
<link href="my.css" type="text/css" rel="stylesheet" />
</head>
<body>
<p>今天學(xué)習(xí)css</p>
<!-- 1.行內(nèi)樣式 -->
<p style="color:tan;">今天學(xué)習(xí)css</p>
<p>我們很開(kāi)心</p>
<a href="">我是鏈接</a>
</body>
</html>
my.css
a
{font-size:100px;}
4. 選擇器
4.1 常用選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>常用選擇器</title>
<style>
/* 標(biāo)簽選擇器*/
h1
{color:cyan}
/* 類選擇器 */
.one
{color:green;}
/* ID選擇器 */
#two
{color:red;}
/* 組合選擇器 */
h1,h2,h3,h4
{color:goldenrod;}
/* 越具體指定,優(yōu)先級(jí)就越高 */
h1.one
{color:gray;}
h2#two
{color:greenyellow;}
</style>
</head>
<body>
<!--
標(biāo)簽選擇器 : 指定的是哪一些標(biāo)簽
類選擇器 : 指定的是哪一類標(biāo)簽
ID選擇器 : 指定的是哪一個(gè)標(biāo)簽
-->
<h1>1號(hào)標(biāo)簽111</h1>
<h1 class="one" >1號(hào)標(biāo)簽222</h1>
<h2 id = "two">2號(hào)標(biāo)簽333</h2>
<a href="" class="one">我是連接</a>
<span id ="two">我是span</span>
<h3>我是h3標(biāo)簽</h3>
</body>
</html>
aoe
4.2 選擇器的優(yōu)先級(jí)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>選擇器的優(yōu)先級(jí)</title>
<style>
font
{color:greenyellow;}
.one
{color:blue;}
#two
{color: indigo;}
font
{color:greenyellow!important;}
</style>
</head>
<body>
<!--
!important <- 行內(nèi)樣式 <- ID選擇器 <- 類選擇器 <- 標(biāo)簽選擇器
大原則: 泛指的元素優(yōu)先級(jí)低, 特指的元素優(yōu)先級(jí)高 , 越具體優(yōu)先級(jí)就越高
-->
<font style="color:tan;" class="one" id="two"> 選擇器的優(yōu)先級(jí) </font>
</body>
</html>
4.3 關(guān)系選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 關(guān)系選擇器 </title>
<style>
/* 多行注釋 */
ul li /* 包含選擇器/后代選擇器 */
{color:darkslateblue;}
ul>li /* 父子選擇器 */
{color:yellow;}
ol+li /* 相鄰選擇器 特指下面一個(gè)*/
{color:green;}
ol~li /* 兄弟選擇器 特指下面一堆*/
{color:deeppink;}
</style>
</head>
<body>
<ul>
<li>動(dòng)漫頻道</li>
<li>學(xué)習(xí)頻道</li>
<li>直播頻道</li>
<li>游戲頻道</li>
<ol>
<li>少兒頻道</li>
<li>智慧樹(shù),大風(fēng)車(chē)</li>
<li>老年人頻道</li>
</ol>
<li>授課直播</li>
<li>亞洲捆綁</li>
</ul>
</body>
</html>
4.4 屬性選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>屬性選擇器</title>
<style>
input[name]
{background-color: dodgerblue;}
input[name=username]
{background-color: red;}
input[type=password]
{background-color:yellow;}
input[type=text]
{background-color:green;}
</style>
</head>
<body>
<form action="" method="" >
用戶名: <input type="text" name="username" />
<br />
密碼: <input type="password" name="nickname">
<br />
性別:<input type="radio" name="sex" value="m"> 男
<input type="radio" name="sex" value="w"> 女
<br />
<input type="submit" value="點(diǎn)我">
</form>
</body>
</html>
4.5 偽類選擇器_顏色設(shè)置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>偽類選擇器</title>
<style>
/* 鼠標(biāo)懸停的時(shí)候觸發(fā) */
a:hover
{color:teal;}
/* 列表中第一個(gè)元素 */
ul li:first-child
{color:yellow;}
/* 列表中最后一個(gè)元素 */
ul li:last-child
{color:green;}
/* 列表中具體某一個(gè)元素 */
ul li:nth-child(4)
{color: red;}
/* 偶數(shù)個(gè)2n / even 奇數(shù)個(gè)2n-1 / odd n不可換 */
ul li:nth-child(even)
{color:turquoise;}
ul li:nth-child(odd)
{color:violet;}
/* 小練習(xí) */
/* 1.寫(xiě)一個(gè)table表格,設(shè)置一個(gè)背景色 */
table
{background-color:green;}
/* 2.偶數(shù)行顏色為藍(lán)色 */
table tr:nth-child(2n)
{background-color: blue;}
table tr td
{}
/* 3.第3 , 6 , 9 3倍行顏色為黃色 */
table tr:nth-child(3n)
{background-color:yellow;}
/* 4.鼠標(biāo)滑過(guò)時(shí),顏色變成紅色 */
table tr:hover
{background-color: red;}
</style>
</head>
<body>
<a href="#"> 老男孩教育 </a>
<ul>
<li>馬春妮</li>
<li>孫堅(jiān)</li>
<li>曉東</li>
<li>文東</li>
<li>王偉</li>
<li>好心</li>
<li>蜂擁</li>
<li>倩倩</li>
<li>石超</li>
<li>帥帥</li>
</ul>
<!--
小練習(xí):
1.寫(xiě)一個(gè)table表格,設(shè)置一個(gè)背景色
2.偶數(shù)行顏色為藍(lán)色
3.第3 , 6 , 9 3被行顏色為黃色
4.鼠標(biāo)滑過(guò)時(shí),顏色變成紅色
-->
<!--
顏色設(shè)置:
RGB: 三原色
R:red 0~255 0~ff
G:green 0~255 0~ff
B:blue 0~255 0~ff
1.使用rgb方式表達(dá)顏色:
rgb(100,100,100) 三原色的設(shè)置
rgba(100,100,100,0~1) 三原色+透明度設(shè)置
2.使用十六進(jìn)制的方式表達(dá)顏色
f -> 15 1111 ff -> 255 1111 1111
純紅色: # ff 00 00 => #f00 (簡(jiǎn)寫(xiě))
純綠色: # 00 ff 00 => #0f0 (簡(jiǎn)寫(xiě))
純藍(lán)色: # 00 00 ff => #00f (簡(jiǎn)寫(xiě))
-->
<table border=1 style="width:600px;" cellspacing=0 cellpadding=0 >
<tr>
<td style="background-color: #800000;">111</td><td style="background-color:#0f0;">222</td><td style="background-color:#00f;">333</td><td>444</td>
</tr>
<tr>
<td style="background-color:rgb(100,100,100);">111</td><td>222</td><td>333</td><td>444</td>
</tr>
<tr>
<td style="background-color:rgba(100,100,100,0.7);">111</td><td>222</td><td>333</td><td>444</td>
</tr>
<tr>
<td>111</td><td>222</td><td>333</td><td>444</td>
</tr>
<tr>
<td>111</td><td>222</td><td>333</td><td>444</td>
</tr>
<tr>
<td>111</td><td>222</td><td>333</td><td>444</td>
</tr>
<tr>
<td>111</td><td>222</td><td>333</td><td>444</td>
</tr>
<tr>
<td>111</td><td>222</td><td>333</td><td>444</td>
</tr>
<tr>
<td>111</td><td>222</td><td>333</td><td>444</td>
</tr>
<tr>
<td>111</td><td>222</td><td>333</td><td>444</td>
</tr>
</table>
</body>
</html>
4.6 偽對(duì)象選擇器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>偽對(duì)象選擇器</title> <style> .name {color:goldenrod;} /* 在內(nèi)容之前插入 */ .name::before { content:"我問(wèn):"; color:green; } /* 在內(nèi)容之后插入 */ .name::after { content:"肯定對(duì)!"; color:magenta; } /* 鼠標(biāo)選中后的樣式 */ .name::selection { background-color: mediumspringgreen; color: white; } </style></head><body> <span class="name">王文很帥,對(duì)不對(duì)?</span></body></html>5. 字體屬性設(shè)置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css的相關(guān)屬性: 字體屬性 </title>
<style>
/*@符制定規(guī)則,來(lái)設(shè)置引入的自定義字體 */
@font-face
{
font-family:"王文";
src:url("font/方正舒體.TTF");
}
/* 設(shè)置字體屬性 */
.c1
{
font-style:italic; /*字體斜體*/
font-weight:bold; /*字體粗細(xì)*/
font-size:32px; /*字體大小*/
font-family:"宋體";/*字體種類*/
}
/* 簡(jiǎn)寫(xiě)字體1 */
.c2
{font:italic bold 32px "宋體"; }
/* 簡(jiǎn)寫(xiě)字體2 */
.c3
{
border:solid 1px red;
font:64px/2 "宋體"; /* 字體大小/行高比例 字體種類 */
background-color: yellow;
}
/* 自定義字體 */
.c4
{font:64px/2 "王文";}
ul
{
/* 去掉前面的點(diǎn). */
list-style:none;
/* 改變鼠標(biāo)的形態(tài) */
cursor:wait;
}
</style>
</head>
<body>
<ul>
<li class="c1">設(shè)置字體相關(guān)的屬性1</li>
<li class="c2">設(shè)置字體相關(guān)的屬性2</li>
<li class="c3">設(shè)置字體相關(guān)的屬性3</li>
<li class="c4">設(shè)置字體相關(guān)的屬性4</li>
</ul>
</body>
</html>
cursor屬性：
6. 文本屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css的相關(guān)屬性: 文本屬性 </title>
<style>
.p0
{
font-size:16px;
width:200px;height:200px;background-color: red;
/* 字符間距 */
letter-spacing:5px;
/* 文本的首行縮進(jìn) */
/* text-indent:32px; */ /* px代表像素*/
text-indent:2em; /* 1em = 1個(gè)元素的大小 按照字體比例縮進(jìn) */
}
.p1
/* 強(qiáng)制換行 純英文不會(huì)默認(rèn)換行*/
{word-wrap: break-word;}
.p2
/* 強(qiáng)制不換行 中文默認(rèn)換行 */
{white-space:nowrap;}
.p3
/* 設(shè)置height與line-height數(shù)值相同,可以讓文字在垂直方向上居中 */
{font-size:16px;width: 200px;height:50px; line-height: 50px; background-color:goldenrod;}
.p4
/* text-align:left/center/right 文本水平對(duì)齊方式 */
{font-size:16px;width: 200px;height:50px; line-height: 50px; background-color:goldenrod;text-align:center;}
.p5
/* text-decoration:overline/line-through/underline/none; */
{text-decoration:none;}
.p6 img
/* vertical-align:top/middle/bottom 文本垂直對(duì)齊方式[一般都是在圖片排版的時(shí)候使用] */
{vertical-align:-600%;}
/*
text-shadow相關(guān)設(shè)置
none： 無(wú)陰影
<length>①： 第1個(gè)長(zhǎng)度值用來(lái)設(shè)置對(duì)象的陰影水平偏移值。可以為負(fù)值
<length>②： 第2個(gè)長(zhǎng)度值用來(lái)設(shè)置對(duì)象的陰影垂直偏移值?？梢詾樨?fù)值
<length>③： 如果提供了第3個(gè)長(zhǎng)度值則用來(lái)設(shè)置對(duì)象的陰影模糊值。不允許負(fù)值
<color>： 設(shè)置對(duì)象的陰影的顏色。 */
.p7
{text-shadow:7px 4px 10px gray;}
</style>
</head>
<body>
<p class="p0 p1">setwordxiangguanpropertyhahahah </p>
<p class="p0 p2">設(shè)置文本屬性111222233asd設(shè)置文本屬性設(shè)置文本屬性</p>
<p class="p3">本屬性</p>
<p class="p4">本屬性</p>
<a href="" class="p5">本屬性</a>
<del>特價(jià)取消</del>
<p class="p6"> <img src="tupian1.png" /> <a href>點(diǎn)我跳轉(zhuǎn)</a> </p>
<p class="p7"> 我是炫酷的陰影效果</p>
</body>
</html>
7. 盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 盒子模型 </title>
<style>
#d1
{
width: 200px;
height:200px;
/* 上 右 下 左 top right bottom left*/
border:solid 10px green;
border-top:dotted 3px red;
border-right:dashed 5px blue;
}
#d2
{
width: 200px;
height:200px;
border:solid 5px red;
/* border-radius: 100px; */
border-top-left-radius: 100px;
border-bottom-right-radius: 100px;
}
#d3
{
width: 200px;
height:200px;
border:solid 5px red;
/*上 右 下 左 padding會(huì)增大盒子的面積 內(nèi)填充*/
/* padding:50px; */
/* 上下 左右*/
/* padding:10px 20px; */
/* 上 左右 下 */
padding:10px 20px 30px;
/* 上 右 下 左 */
/* padding:10px 20px 30px 10px; */
/* padding-left:30px; */
}
#d4
{
width: 200px;
height:200px;
border:solid 5px red;
/*上 右 下 左 盒子與盒子之間的間距 外邊距*/
/* margin:60px; */
/* 上下 左右 */
margin:10px 20px;
/* 上 左右 下 */
margin:10px 20px 30px;
/* 上 右 下 左 */
/* margin:10px 20px 30px 10px; */
/* margin-left:30px; */
}
#d5
{
width: 200px;
height:200px;
border:solid 5px red;
/* 上下0px 左右自動(dòng)居中*/
margin:0px auto;
}
/*
box-shadow:
<length>①： 第1個(gè)長(zhǎng)度值用來(lái)設(shè)置對(duì)象的陰影水平偏移值?？梢詾樨?fù)值
<length>②： 第2個(gè)長(zhǎng)度值用來(lái)設(shè)置對(duì)象的陰影垂直偏移值?？梢詾樨?fù)值
<length>③： 如果提供了第3個(gè)長(zhǎng)度值則用來(lái)設(shè)置對(duì)象的陰影模糊值。不允許負(fù)值
<length>④： 如果提供了第4個(gè)長(zhǎng)度值則用來(lái)設(shè)置對(duì)象的陰影外延值?？梢詾樨?fù)值
<color>： 設(shè)置對(duì)象的陰影的顏色。 */
#d6
{width:100px;height:100px;border:solid 5px red;box-shadow:6px 3px 16px 6px black;}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3">我是d3</div>
<div id="d4">我是d4</div>
<div id="d5">我是d5</div>
<div id="d6"></div>
</body>
</html>
order-style:
8. 學(xué)習(xí)工具
學(xué)習(xí)css一般有三種工具提供給我們開(kāi)發(fā): 1. 代碼編輯器本身一般自帶提示或者語(yǔ)法提示. 2. css手冊(cè),內(nèi)部提供提供了所有的樣式屬性和樣式值的使用參考,甚至包括一些演示代碼. http://css.doyoe.com 3. 瀏覽器也內(nèi)置了一些css輔助工具給我們學(xué)習(xí)和開(kāi)發(fā). F12,或者Ctrl+shift+i,或者鼠標(biāo)右鍵,檢查代碼
總結(jié)
本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
本文主要介紹了Flask接收上傳圖片方法實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
21行Python代碼實(shí)現(xiàn)拼寫(xiě)檢查器
21行python代碼實(shí)現(xiàn)的一個(gè)簡(jiǎn)易但是具備完整功能的拼寫(xiě)檢查器，感興趣的小伙伴們可以參考一下2016-01-01
Python中import導(dǎo)入上一級(jí)目錄模塊及循環(huán)import問(wèn)題的解決
Python中的import語(yǔ)句導(dǎo)入模塊相信大家再熟悉不過(guò)了,這里我們會(huì)來(lái)講解Python中import導(dǎo)入上一級(jí)目錄模塊及循環(huán)import問(wèn)題的解決,需要的朋友可以參考下2016-06-06
tensorflow之自定義神經(jīng)網(wǎng)絡(luò)層實(shí)例
今天小編就為大家分享一篇tensorflow之自定義神經(jīng)網(wǎng)絡(luò)層實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-02-02
Python動(dòng)態(tài)配置管理Dynaconf的實(shí)現(xiàn)示例詳解
這篇文章主要為大家介紹了Python動(dòng)態(tài)配置管理Dynaconf實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
python實(shí)現(xiàn)比較兩段文本不同之處的方法
這篇文章主要介紹了python實(shí)現(xiàn)比較兩段文本不同之處的方法,涉及Python針對(duì)文本與字符串的相關(guān)操作技巧,需要的朋友可以參考下2015-05-05
用python寫(xiě)的一個(gè)wordpress的采集程序
在學(xué)習(xí)python的過(guò)程中，經(jīng)過(guò)不斷的嘗試及努力，終于完成了第一個(gè)像樣的python程序，雖然還有很多需要優(yōu)化的地方，但是目前基本上實(shí)現(xiàn)了我所要求的功能,需要的朋友可以參考下2016-02-02
Python+Selenium實(shí)現(xiàn)短視頻自動(dòng)上傳與發(fā)布的實(shí)踐
本文主要介紹了Python+Selenium實(shí)現(xiàn)短視頻自動(dòng)上傳與發(fā)布的實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
Python中處理字符串的相關(guān)的len()方法的使用簡(jiǎn)介
這篇文章主要介紹了Python中處理字符串的相關(guān)的len()方法的使用簡(jiǎn)介,是Python入門(mén)的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-05-05
jupyter notebook遠(yuǎn)程訪問(wèn)不了的問(wèn)題解決方法
這篇文章主要介紹了jupyter notebook遠(yuǎn)程訪問(wèn)不了的問(wèn)題解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01