Python自学第十四周（3）

label标签
    -用于获取光标
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <label for="username">用户名:</label>
 9     <input id="username" type="text" name="user" />
10 </body>
11 </html>
 
 
fieldset标签
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <fieldset>
 9         <legend>登录</legend>
10         <label for="username">用户名:</label>
11         <input id="username" type="text" name="user" />
12         <br />
13         <label for="username1">密码:</label>
14         <input id="username1" type="password" name="pwd" />
15     </fieldset>
16 </body>
17 </html>
 
 
 
 
 
 
css样式
 
    -可以在style属性里面设置
    -当然还可以在head标签里面写style标签写样式
id选择器
有一个缺点：就是在body中写的id值不能重复
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #i1{
 8             
 9             height: 48px;
10         }
11         #i2{
12             background-color: floralwhite;
13             height: 48px;
14         }
15         #i3{
16             background-color: darkturquoise;
17             height: 48px;
18         }
19     </style>
20 </head>
21 <body>
22     <div id="i1">i1的样式</div>
23     <div id="i2">i1的样式</div>
24     <div id="i3">i1的样式</div>
25 </body>
26 </html>
 
class选择器
解决了id选择器中id值不能重复的问题，class值可以重复
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .c1{
 8             
 9             height: 48px;
10         }
11     </style>
12 </head>
13 <body>
14     <div class="c1">c1的样式</div>
15     <div class="c1">c1的样式</div>
16     <div class="c1">c1的样式</div>
17 </body>
18 </html>
 
标签选择器
在head中加入div{
...
}可以将body中的所有的div都变成同一个样式
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div{
 8             
 9             height: 48px;
10         }
11     </style>
12 </head>
13 <body>
14     <div>div的样式</div>
15     <span>hello
16         let go
17         <div>div的样式</div>
18     </span>
19     <div>div的样式</div>
20 </body>
21 </html>
 
 
 
关联选择器（层级选择器）   空格
例如：有一个需求是：只在span下的div进行设置
 
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         span div{
 8             
 9             height: 48px;
10         }
11     </style>
12 </head>
13 <body>
14     <div>div的样式</div>
15     <span>hello
16         let go
17         <div>span下的div的样式</div>
18     </span>
19     <div>div的样式</div>
20 </body>
21 </html>
 
 
 
组合选择器    逗号
  
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #i1,#i2,#i3{
 8             
 9             height: 48px;
10         }
11     </style>
12 </head>
13 <body>
14     <div id="i1">i1的样式</div>
15     <div id="i2">i2的样式</div>
16     <div id="i3">i3的样式</div>
17 </body>
18 </html>
 
 
 
 
 
属性选择器
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         input[type="text"]{
 8             width: 100px;
 9             height: 200px;
10         }
11     </style>
12 </head>
13 <body>
14     <input type="text" />
15     <input type="password" />
16 </body>
17 </html>
 
还可以自定义
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         input[n="zach"]{
 8             width: 100px;
 9             height: 200px;
10         }
11     </style>
12 </head>
13 <body>
14     <input type="text" n="zach" />
15     <input type="password" />
16 </body>
17 </html>
效果一致
 
 
 
 
优先级
标签上style有限，编写顺序，就近原则
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .c1{
 8             
 9             height: 48px;
10         }
11         .c2{
12             background-color: greenyellow;
13             height: 100px;
14         }
15     </style>
16 </head>
17 <body>
18     <div class="c1 c2" style="优先级</div>
19 </body>
20 </html>
 
 
 
css文件
创建一个css文件，提高重用性
需要在head使用link，属性包括rel="stylesheet"和href="commons.css"
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <link rel="stylesheet" href="commons.css">
 7 </head>
 8 <body>
 9     <div class="c1 c2">优先级</div>
10 </body>
11 </html>
12  
13 在创建一个commons.css
14 .c1 {
15     
16     height: 48px;
17 }
18 .c2 {
19     background-color: greenyellow;
20     height: 100px;
21 }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

posted on 2019-08-15 20:22  早唞  阅读(159)  评论(0)    收藏  举报

导航