• CSS笔记(一)CSS规则


      CSS是层叠式样式表(Cascading Style Sheets)的缩写,定义了如何显示HTML元素。

    • CSS规则由两个主要的部分构成:选择器 + 一条或多条声明。
    • 每条声明由一个属性和一个值构成。
    selector  {
            property1: value1;
            property2: value2;
          }

      

    • 选择器的分组
      h1,h2,h3,h4,h5,h6 {
        color: green;
        }
    • 继承

      子元素从父元素继承属性。但可以单独定义子元素的规则来摆脱父元素的规则。

    body {
           font-family: Verdana, sans-serif;
         }
    
    p {
         font-family: Times, "Times New Roman", serif;
      }
    • 派生选择器
    strong {
         color: red;
         }
    
    h2 {
         color: red;
         }
    
    h2 strong {
         color: blue;
         }
    • id选择器

      id选择器可以为特定id的HTML元素指定特定的样式。

      id选择器以“#”来定义。

    #red {color:red;}
    #green {color:green;}
    <p id="red">这个段落是红色。</p>
    <p id="green">这个段落是绿色。</p>
    • id派生选择器

    只有在指定id内的元素会得到特殊的处理。

    #sidebar p {
        font-style: italic;
        text-align: right;
        margin-top: 0.5em;
        }
    
    #sidebar h2 {
        font-size: 1em;
        font-weight: normal;
        font-style: italic;
        margin: 0;
        line-height: 1.5;
        text-align: right;
        }
    • 类选择器

      类选择器以一个点号显示。

    .center { text-align: center }
    <h1 class="center">
    This heading will be center-aligned
    </h1>
    
    <p class="center">
    This paragraph will also be center-aligned.
    </p>
    • 类派生选择器

    ❶ 在下边的例子中,funk类的内部的表格单元会以灰色背景显示橙色文字(funk可能是一个表格或div)。

    .funk td {
        color: #f60;
        background: #666;
        }

    ❷ 在下边的例子中,funk类的表格单元将会以灰色背景显示橙色文字。

    td.funk {
        color: #f60;
        background: #666;
        }
    <td class="fancy">

      

  • 相关阅读:
    存图---链式前向星
    Codeforces Round #664 (Div. 2)(A B C D)
    Go Running HDU
    Total Eclipse HDU
    Little W and Contest HDU
    2018 ICPC Asia Nanjing Regional Contest
    Codeforces Round #662 (Div. 2)(A B C D)
    Codeforces Round #661 (Div. 3)(A B C D E)
    素数判断(欧拉筛)
    网络流专题 模板 + 例题 (Going Home POJ
  • 原文地址:https://www.cnblogs.com/AmitX-moten/p/4793281.html
Copyright © 2020-2023  润新知