简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 样式来源优先级
Blogger Information
Blog 13
fans 0
comment 0
visits 6516
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
样式来源优先级
shooter
Original
381 people have browsed it

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>登录表单</title>
  8.   </head>
  9.   <body>
  10.     <form action="#" method="post">
  11.       <div>
  12.         <label for="username">用户名：</label>
  13.         <input
  14.           type="username"
  15.           id="username"
  16.           name="username"
  17.           placeholder="数字加字母最少六位"
  18.           autofocus
  19.           required
  20.         />
  21.       </div>
  22.       <div>
  23.         <labelfor="psw">&nbsp;密码&nbsp;&nbsp;：</labelfor=>
  24.         <input
  25.           type="password"
  26.           id="psw"
  27.           name="password"
  28.           placeholder="数字加字母最少八位"
  29.           required
  30.         />
  31.       </div>
  32.       <div>
  33.         <label for="my-email">&nbsp;邮箱&nbsp;&nbsp;：</label>
  34.         <input
  35.           type="email"
  36.           name="email"
  37.           id="my-email"
  38.           placeholder="a@qq.com"
  39.           required
  40.         />
  41.       </div>
  42.       <div>
  43.         <label for="male">&nbsp;性别&nbsp;&nbsp;：</label>
  44.         <input type="radio" name="gender" id="male" checked /><label>男</label>
  45.         <input type="radio" name="gender" id="female" /><label>女</label>
  46.       </div>
  47.       <div>
  48.         <input type="submit" id="submit" value="登录" />
  49.         <input type="reset" value="重置">
  50.       </div>
  51.       <div>
  52.         <a href="#">找回密码</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">注册</a>
  53.       </div>
  54.     </form>
  55.   </div>
  56.   </body>
  57. </html>

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>后台管理</title>
  8.     <style>
  9.       body {
  10.         height: 100vh;
  11.         width: 100vw;
  12.         display: grid;
  13.         grid-template-columns: 10em 1fr;
  14.         grid-template-rows: 6em 1fr;
  15.         margin: 0;
  16.       }
  18.       body .header {
  19.         grid-column-end: span 2;
  20.         border-bottom: 1px solid currentColor;
  21.         background-color: #efe;
  22.         padding: 2em;
  23.         display: flex;
  24.         align-items: center;
  25.       }
  27.       body .header div {
  28.         margin-left: auto;
  29.       }
  31.       body .nav {
  32.         background-color: #efc;
  33.         margin: 0;
  34.         padding-top: 1em;
  35.         list-style: none;
  36.       }
  38.       body iframe {
  39.         width: calc(100vw - 10em);
  40.         height: calc(100vh - 6em);
  41.         border-left: 1px solid currentColor;
  42.         background-color: cyan;
  43.       }
  44.     </style>
  45.   </head>
  46.   <body>
  47.     <div class="header">
  48.       <h1>后台管理</h1>
  49.       <div>
  50.         <span>admin</span>
  51.         <a href="#">退出</a>
  52.       </div>
  53.     </div>
  54.     <ul class="nav">
  55.       <li><a href="1.html" target="content">菜单1</a></li>
  56.       <li><a href="1.html" target="content">菜单2</a></li>
  57.       <li><a href="1.html" target="content">菜单3</a></li>
  58.       <li><a href="1.html" target="content">菜单4</a></li>
  59.       <li><a href="1.html" target="content">菜单5</a></li>
  60.     </ul>
  61.     <iframe src="" frameborder="2" name="content"></iframe>
  62.   </body>
  63. </html>

样式来源与优先级

1.浏览器默认样式

2. 用户自定义样式会覆盖默认样式

3.某些属性具有继承特征,例如颜色,字号,字体,子元素会继承父元素的同名属性

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>样式来源优先级</title>
  8.   </head>
  9.   <body>
  10.     <!-- 来源1: 代理样式/浏览器样式/默认样式 -->
  11.     <h2>hello1</h2>
  13.     <!-- 来源2：自定义样式 -->
  14.     <h2 style="color: red">hello2</h2>
  16.     <!-- 来源3：书写顺序，写在后面的同名属性会覆盖前面的 -->
  17.     <div>
  18.       <!-- 某些属性具有继承特征,例如颜色,字号,字体,子元素会继承父元素的同名属性 -->
  19.       <h1>php.cn</h1>
  20.     </div>
  21.   </body>
  22. </html>

自定义样式来源与优先级

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>自定义样式来源与优先级</title>
  8.   </head>
  9.   <body>
  10.     <!-- 1. 默认样式: 继承自html -->
  11.     <!-- 2. 自定义样式1: 行内样式, style属性 -->
  12.     <!-- <h1 style="color: blue">晚上好</h1>
  13.     <h1 style="color: blue">吃了吗?</h1> -->
  14.     <h1>你好</h1>
  15.     <h1>大家好</h1>
  16.     <style>
  17.       /* 分二步:
  18.         1. 找到它: 选择器
  19.         2. 设置它: 样式声明 */
  20.       h1 {
  21.         color: red;
  22.       }
  23.     </style>
  24.   </body>
  25. </html>

样式复用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>样式复用</title>
  8.     <!-- <link rel="stylesheet" href="./style.css" /> -->
  9.     <style>
  10.       @import url("./style.css");
  11.     </style>
  12.   </head>
  13.   <body>
  14.       <!-- 1. 自定义样式: 外部样式, css文档 -->
  15.       <!-- 2. 自定义样式: 文档样式/内部样式, style标签 -->
  16.     <h1>hello</h1>
  17.   </body>
  18. </html>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！