html基础知识(四):css基础知识(样式+选择器)

html基础知识(四):css基础知识

  一、 css:层叠样式表
   作用:美化页面
   样式分类:
      1、行内样式表
         <p style="color: rebeccapurple;font-size: 48px;font-family:sans-serif">段落标签</p>
     2、内部样式表
        <head>
         <style>
            选择器{ 属性名称:属性值; }
         </style>
         </head>
     3、 外部样式表
      1.创建css文件写入样式
      2.引入css文件
      <head>
         <link rel="stylesheet" href="css/css.css"/>
      </head>
      二、css中的选择器
            选择器分类
           /*
       标签选择器:对对应的标签进行渲染
       格式:
          标签名{
             属性: 值;
          }
    */
    p{
        font-size: 48px;
        color: rebeccapurple;
    }
    /*
       类选择器
        .类名{
            属性:值;
         }
    */
    .p1{
        color: tan;
    }
    .p2{
        color:red;
    }
    /*
    id选择器:对id进行渲染
       #id{
         属性:值;
       }
    */
    #p3{
        color: palevioletred;
    }
      应用:
      <p class="p2">段落</p>
      <p id="p3">段落</p>

/*
选择器分类: 权重越大选择器的能力越强
行类样式                       1000
id选择器    “#id”          100
类选择器    “.类名”        10
标签选择器   “标签名”     1
通配符选择器   “*”           0
子代选择器    “>”
后代选择器   “空格”
群组选择器   ","

*/

<style>
        p{
            color: greenyellow;
        }
        /*后代选择器
             选择器 选择器{

             }
         */
        div p{
            color: blue;
        }
        /*
           子代选择器
           父标签>子选择器{
           }
        */
        div>p{
            color: palevioletred;
        }
        strong>p{
            color: bisque;
        }
        /*通配符*/
        *{
            color: brown;
        }
        /*
           群组选择器
        */
        div,p{
            color: tan;
        }

猜你喜欢

转载自blog.csdn.net/qq_43479839/article/details/91544502