5.三种基本选择器-重要

5.三种基本选择器-重要

代码部分:

  • 标签选择器

     
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Documenttitle>
     ?
         <style>
             /*标签选择器, 会选择到页面上所有的这个标签的元素*/
             h1 {
                 color: hotpink;
                 background: greenyellow;
                 border-radius: 15px;
             }
             p {
                 font-size: 80px;
             }
         style>
     ?
     head>
     <body> 
         <h1>学Javah1>
         <h1>学Javah1>
         <p>听狂神说p>
     body>
     html>

     

  • 类选择器

     
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=, initial-scale=1.0">
         <title>Documenttitle>
         <style>
             /*类选择器的格式    .class的名称{}
             好处, 可以多个标签归类, 是同一个class, 可以复用
             */
             .qinjiang {
                 color: #be2424;
             }
             .kuangshen {
                 color: indigo;
             }
         style>
     head>
     <body>
         <h1 class="qinjiang">标题1h1>
         <h1 class="kuangshen">标题2h1>
         <h1 class="qinjiang">标题3h1>
         <p class="qinjiang">p标签p>
     body>
     html>

     

  • Id选择器

     
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Documenttitle>
         <style>
             /*
             id选择器: id必须保证全局唯一!
             #id名称 {}
             不遵循就近原则, 固定的
             id选择器> 类选择器> 标签选择器
             */
             #qinjiang {
                 color: lawngreen;
             }
             .style1 {
                 color: magenta;
             }
             h1 {
                 color: mediumpurple;
             }
         style>
     head>
     <body>
         <h1 id="qinjiang" class="style1">标签1h1>
         <h1 class="style1">标签2h1>
         <h1 class="style1">标签3h1>
         <h1>标签4h1>
         <h1>标签5h1>
     body>
     html>

 

CSS

相关

DOM修改 使用DOM操作CSS

HTML和CSS

1.css布局技巧

Scss支持多主题切换的方案实现

google icons 的使用 和 css 设置图标为 loading 状态

node-scss npm的时候报错

CSS设置文字超出部分自动换行

整理gulp自动化构建工具(包含PostCss)

CSS背景属性

css中溢出的处理

51-Web基础-CSS

CSS3与页面布局学习总结（四）——页面布局大全

标签