Community Learn Tools Library Leisure
search
English
Home > List of blog posts > css的基础语法和优先级使用iframe框架制作简单后台
Blogger Information
Blog 9
fans 0
comment 0
visits 8014
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
css的基础语法和优先级使用iframe框架制作简单后台
扬cium
Original
696 people have browsed it

CSS基础语法

css规则主要由两个主要部分构成
选择器
以及一条或多条声明
选择器通常是您需要改变样式的HTML元素
每条声明由一个属性和值组成
属性(property)是您希望设置的样式属性(style attribue)，每个属性由一个值，属性和值被冒号分开。

  1. /*选择器选择h1标签*/
  2. h1{
  3.     /*一条颜色的声明*/
  4.     color:red; /*属性：color 值：red*/
  5. }

选择器 + 声明块(是由属性+值) = 规则

css 语法优先级

一个元素会受到四个级别声明影响

继承的:根据元素在文档中的结构和层级关系来确定它最终的样式
用户代理样式:浏览器的,大多数浏览器表现基本一致
自定义的:写到 html 文档中头部 style 标签中
行内样式(内联样式),写到 style 属性中的

层叠优先级

标签选择器<属性选择器<id 选择器

!important 例外规则

当 !important 规则被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他的声明, 无论它处在声明列表中的哪里. 尽管如此, !important规则还是与优先级毫无关系.使用 !important 不是一个好习惯，因为它改变了你样式表本来的级联规则，从而使其难以调试。

  1.  h1 {
  2.       color: green !important;
  3.       /* !important强制提权 */
  4.     }
  5.     .active {
  6.       color: red;
  7.     }
  8.     #first {
  9.       color: royalblue;
  10.     }

.

  1. <h1 class="active" id="first">HelloWord</h1>

iframe框架制作简单后台 iframe框架制作简单后台

  1. body {
  2.   margin: 0;
  3.   display: grid;
  4.   grid-template-columns: 8em 1fr;
  5. }
  6. .header {
  7.   grid-column: span 2;
  8.   height: 3em;
  9.   line-height: 3em; 
  10.   background-color:#4277ad;
  11.   color: azure;
  12. }
  13. .aside {
  14.   display: grid;
  15.   grid-template-rows: repeat(auto-fit, 2em);
  16.   background-color: #555;
  17. }
  18. iframe {
  19.   width: 100%;
  20.   min-height: 42em;
  21.   background-color: #fff;
  22.   border: none;
  23.   padding: 2em;
  24. }
  25. a {
  26.   text-decoration: none;
  27.   color: #c8cdd2;
  28.   background-color: #555;
  29.   border-bottom: 1px solid #ccc;
  30.   border-right: 1px solid #ccc;
  31. }

.

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <link rel="stylesheet" href="style/iframe1.css">
  7.     <title>使用iframe简写后台</title>
  9. </head>
  10. <body>
  11.     <div class="header">网站后台管理</div>
  12.     <div class="aside">
  13.         <a href="https://www.php.cn/" target="content">php中文网</a>
  14.         <a href="https://www.baidu.com/" target="content">百度</a>
  16.     </div>
  17.     <div class="main">
  18.         <iframe srcdoc="" name="content"></iframe>
  19.     </div>
  20. </body>
  21. </html>

Correcting teacher：天蓬老师天蓬老师

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