Python 官方文档：入门教程 => 点击学习
目录1. 表单框类型文件上传：2. 表单属性3. CSS引入my.css4. 选择器4.1 常用选择器4.2 选择器的优先级4.3 关系选择器4.4 属性选择器4.5 伪类选择器_颜
<!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="">
<!-- 单选框 radio 多选一 name名字要一致 checkedc:默认选中 -->
<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 />
<!-- 复选框 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 默认选中, disabled 无法选中-->
<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="点我" />
</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;" >请填写相关数据</textarea>
<hr/>
<!-- 隐藏的表单框 => 隐藏要修改的数据id -->
<input type="hidden" name="sid" value="13" />
<hr/>
<input type="submit" value="提交"/>
</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>input属性</title>
</head>
<body>
<!--
placeholder 灰色输入提示
required 必填
readonly 只能读不能改 可以被提交
disabled 只能读不能改 不会被提交
size 设置输入框的大小
maxlength 输入框最多可以输入多少字符
minlength 输入框最少需要输入多少字符
autofocus 自动获取焦点, 整个页面只能有一个
tabindex 设置tab的切换顺序
-->
<form action='' method="" >
用户名:<input type="text" name="username" placeholder="请输入用户名" 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 />
班级: <input type="text" name="classroom" size=100 maxlength = 5 minlength=2 tabindex=2/>
<br />
国籍: <input type="text" name="country" autofocus tabindex=1 />
<br />
<input type="submit">
</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>css学习 css的三种引入方法</title>
<!-- 2.内嵌样式 -->
<style>
p
{color:blue;}
</style>
<!-- 外部引入 -->
<link href="my.css" type="text/css" rel="stylesheet" />
</head>
<body>
<p>今天学习css</p>
<!-- 1.行内样式 -->
<p style="color:tan;">今天学习css</p>
<p>我们很开心</p>
<a href="">我是链接</a>
</body>
</html>
a
{font-size:100px;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>常用选择器</title>
<style>
h1
{color:cyan}
.one
{color:green;}
#two
{color:red;}
h1,h2,h3,h4
{color:Goldenrod;}
h1.one
{color:gray;}
h2#two
{color:greenyellow;}
</style>
</head>
<body>
<!--
标签选择器 : 指定的是哪一些标签
类选择器 : 指定的是哪一类标签
ID选择器 : 指定的是哪一个标签
-->
<h1>1号标签111</h1>
<h1 class="one" >1号标签222</h1>
<h2 id = "two">2号标签333</h2>
<a href="" class="one">我是连接</a>
<span id ="two">我是span</span>
<h3>我是h3标签</h3>
</body>
</html>
aoe
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器的优先级</title>
<style>
font
{color:greenyellow;}
.one
{color:blue;}
#two
{color: indigo;}
font
{color:greenyellow!important;}
</style>
</head>
<body>
<!--
!important <- 行内样式 <- ID选择器 <- 类选择器 <- 标签选择器
大原则: 泛指的元素优先级低, 特指的元素优先级高 , 越具体优先级就越高
-->
<font style="color:tan;" class="one" id="two"> 选择器的优先级 </font>
</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>
<style>
ul li
{color:darkslateblue;}
ul>li
{color:yellow;}
ol+li
{color:green;}
ol~li
{color:deeppink;}
</style>
</head>
<body>
<ul>
<li>动漫频道</li>
<li>学习频道</li>
<li>直播频道</li>
<li>游戏频道</li>
<ol>
<li>少儿频道</li>
<li>智慧树,大风车</li>
<li>老年人频道</li>
</ol>
<li>授课直播</li>
<li>亚洲捆绑</li>
</ul>
</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>
<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="点我">
</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>
<style>
a:hover
{color:teal;}
ul li:first-child
{color:yellow;}
ul li:last-child
{color:green;}
ul li:nth-child(4)
{color: red;}
ul li:nth-child(even)
{color:turquoise;}
ul li:nth-child(odd)
{color:violet;}
table
{background-color:green;}
table tr:nth-child(2n)
{background-color: blue;}
table tr td
{}
table tr:nth-child(3n)
{background-color:yellow;}
table tr:hover
{background-color: red;}
</style>
</head>
<body>
<a href="#"> 老男孩教育 </a>
<ul>
<li>马春妮</li>
<li>孙坚</li>
<li>晓东</li>
<li>文东</li>
<li>王伟</li>
<li>好心</li>
<li>蜂拥</li>
<li>倩倩</li>
<li>石超</li>
<li>帅帅</li>
</ul>
<!--
小练习:
1.写一个table表格,设置一个背景色
2.偶数行颜色为蓝色
3.第3 , 6 , 9 3被行颜色为黄色
4.鼠标滑过时,颜色变成红色
-->
<!--
颜色设置:
RGB: 三原色
R:red 0~255 0~ff
G:green 0~255 0~ff
B:blue 0~255 0~ff
1.使用rgb方式表达颜色:
rgb(100,100,100) 三原色的设置
rgba(100,100,100,0~1) 三原色+透明度设置
2.使用十六进制的方式表达颜色
f -> 15 1111 ff -> 255 1111 1111
纯红色: # ff 00 00 => #f00 (简写)
纯绿色: # 00 ff 00 => #0f0 (简写)
纯蓝色: # 00 00 ff => #00f (简写)
-->
<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>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>伪对象选择器</title> <style> .name {color:goldenrod;} .name::before { content:"我问:"; color:green; } .name::after { content:"肯定对!"; color:magenta; } .name::selection { background-color: mediumspringgreen; color: white; } </style></head><body> <span class="name">王文很帅,对不对?</span></body></html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css的相关属性: 字体属性 </title>
<style>
@font-face
{
font-family:"王文";
src:url("font/方正舒体.TTF");
}
.c1
{
font-style:italic;
font-weight:bold;
font-size:32px;
font-family:"宋体";
}
.c2
{font:italic bold 32px "宋体"; }
.c3
{
border:solid 1px red;
font:64px/2 "宋体";
background-color: yellow;
}
.c4
{font:64px/2 "王文";}
ul
{
list-style:none;
cursor:wait;
}
</style>
</head>
<body>
<ul>
<li class="c1">设置字体相关的属性1</li>
<li class="c2">设置字体相关的属性2</li>
<li class="c3">设置字体相关的属性3</li>
<li class="c4">设置字体相关的属性4</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css的相关属性: 文本属性 </title>
<style>
.p0
{
font-size:16px;
width:200px;height:200px;background-color: red;
letter-spacing:5px;
text-indent:2em;
}
.p1
{word-wrap: break-word;}
.p2
{white-space:nowrap;}
.p3
{font-size:16px;width: 200px;height:50px; line-height: 50px; background-color:goldenrod;}
.p4
{font-size:16px;width: 200px;height:50px; line-height: 50px; background-color:goldenrod;text-align:center;}
.p5
{text-decoration:none;}
.p6 img
{vertical-align:-600%;}
.p7
{text-shadow:7px 4px 10px gray;}
</style>
</head>
<body>
<p class="p0 p1">setwordxiangguanpropertyhahahah </p>
<p class="p0 p2">设置文本属性111222233asd设置文本属性设置文本属性</p>
<p class="p3">本属性</p>
<p class="p4">本属性</p>
<a href="" class="p5">本属性</a>
<del>特价取消</del>
<p class="p6"> <img src="tupian1.png" /> <a href>点我跳转</a> </p>
<p class="p7"> 我是炫酷的阴影效果</p>
</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>
<style>
#d1
{
width: 200px;
height:200px;
border:solid 10px green;
border-top:dotted 3px red;
border-right:dashed 5px blue;
}
#d2
{
width: 200px;
height:200px;
border:solid 5px red;
border-top-left-radius: 100px;
border-bottom-right-radius: 100px;
}
#d3
{
width: 200px;
height:200px;
border:solid 5px red;
padding:10px 20px 30px;
}
#d4
{
width: 200px;
height:200px;
border:solid 5px red;
margin:10px 20px;
margin:10px 20px 30px;
}
#d5
{
width: 200px;
height:200px;
border:solid 5px red;
margin:0px auto;
}
#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>
学习css一般有三种工具提供给我们开发:
1. 代码编辑器本身一般自带提示或者语法提示.
2. css手册,内部提供提供了所有的样式属性和样式值的使用参考,甚至包括一些演示代码.
Http://css.doyoe.com
3. 浏览器也内置了一些css辅助工具给我们学习和开发.
F12,或者Ctrl+shift+i,或者鼠标右键,检查代码
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注编程网的更多内容!
--结束END--
本文标题: Python全栈之学习CSS(1)
本文链接: https://lsjlt.com/news/163479.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-03-01
2024-03-01
2024-03-01
2024-02-29
2024-02-29
2024-02-29
2024-02-29
2024-02-29
2024-02-29
2024-02-29
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0