css入门基础知识

来源：互联网发布：淘宝活动文案范文编辑：程序博客网时间：2024/06/05 05:28

//列子
h1{ background-color: red;font-size:14px }
//属性大于1个之后，属性之间用分号隔开
//如果大于一个单词，则需要加上引号
p{ font-size: "sans serif"; }

//css高级语法
//标签选着器
1，选着器的分组(h1,h2,h3都有相同的样式)
h1,h2,h3{
    color: red;
}
2，继承（html代码中body标签下的子标签如果不指定样式都会获得这个样式）
body{
color：red
}

// 2节课
//派生选着器(单独对p标签下的strong标签指定样式)
p strong{
    color: red;
}

//3节课
1.id选着器：
    id选着器可以为标有id的html元素指定特定的样式(html标签引用id选着器事例：<p id="dsa">哈哈</p>)
    id选着器以“#”来定义
    #dsa{
        color: red
    }
2，id选着器和派生选着器：
    目前比较常用的方式是id选着器常常用于建立派生选着器(对id为dsa标签下的p标签应用该样式)
        #dsa p{
        color: red
    }



//4节课
//1，类选着器：
//   类选着器以一个点显示(html中引用方式：<p class="pclass">哈哈</p>)
   .pclass{
   color:red
   }
//2，class也可以用作派生选着器
       .pclass span{
        color: red
    }

// 5节课
// 1.属性选着器：
       对带有指定属性的html元素设置样式
   2.属性和值选着器
   事例代码

   <html>
   <head>
    <meta charset="utf-8">
   <style>
        [title]{
        color:blue;
        text-align: center;
        }
        [title=ff]{
        color:blue;
        text-align: center;
        }
   </style>
   </head>
   <body>
        <p title="f">属性选着器</p> //不指定值可以随便写
        <p title="ff">属性和值选着器</p> //指定了值必需对应否则失效

   </body>
   </html>

0 0