【CSS】CSS进阶(2)

目录

  • 一、选择器进阶
    • 1.1 后代选择器
    • 1.2 子代选择器
    • 1.3 并集选择器
    • 1.4 交集选择器
    • 1.5 hover伪类选择器
  • 二、背景
    • 2.1 背景颜色
    • 2.2 背景图片
    • 2.3 背景图片位置
  • 三、元素显示模式
    • 3.1 块级元素
    • 3.2 行内元素
    • 3.3 行内块元素
    • 3.4 元素显示模式转换
  • 四、HTML 嵌套规范


一、选择器进阶

1.1 后代选择器

    <style>
    /* 后代选择器 */
    /* 
        语法:父选择器 后代选择器{ }
        说明:后代可以是儿子、孙子、重孙子...
     */
    div p{
        color: lightpink;
    }
    style>
    
head>
<body>
    <div>
        <p>你好p>
        <span>你好span>
        <p>
            <span>你好span>
        p>
    div>
body>

1.2 子代选择器

    <style>
    /* 子代选择器 */
    /*
        语法:父选择器 > 子选择器 { } 
        说明:只选择儿子
     */
     div> span{
         color: lightsalmon;
     }
    style>
    
head>
<body>
    <div>
        <p>你好p>
        <span>你好span>
        <p>
            <span>你好span>
        p>
    div>

1.3 并集选择器

    <style>
     /* 并集选择器 */
     /* 
        语法:选择器1 ,选择器2 { }
     */
     div,h1,p{
         color: lime;
     }
    style>
    
head>
<body>
     <p>1p>
     <div>2div>
     <h1>3h1>
body>

1.4 交集选择器

    <style>
     /* 交集选择器 */
     /* 
        语法:选择器1 . 选择器2 { }
     */
     div.one{
         color: maroon;
     }
    style>
    
head>
<body>
    
     <div class ="one">div+onediv>
     <div>divdiv>
     <p class="one">onep>
body>

1.5 hover伪类选择器

    <style>
     /* hover伪类选择器 */
     /*
        语法:a:hover { } 
      */
      a:hover{
        color: maroon;
        background-color: mediumaquamarine;
      }
    style>
    
head>
<body>
     <a href="https://www.baidu.com/">百度a>
body>

二、背景

2.1 背景颜色

    <style>
        /* 背景颜色 */
        /*
            属性:background-color 
         */
        /* 
            三种表示方法:
                ①   background-color: green;
                ②   background-color: #ccc;
                ③   background-color: rgba(0,0,0, 0.5);
                    rgba中分别表示:red,green,blue,透明度
        */
         div{
            width: 300px;
            height: 300px;
            background-color: green;
            background-color: #ccc;
            background-color: rgba(0,0,0, 0.5);
        } 

    style>
head>
<body>
    <div>div>
body>
html>

2.2 背景图片

    <style>
        /* 背景图片 */
        /*
            属性名 : background-image     默认平铺

                    background-repeat     属性值: repeat :平铺 
                                                   no-repeat 不平铺
                                                   repeat-x:沿水平方向平铺
                                                   repeat-y:沿垂直方向平铺

         */
         div{
             width: 400px;
             height: 400px;
             background-color: grey;
             background-image: url(1.png);
             background-repeat:no-repeat ;
         }

    style>
head>
<body>
    <div>div>
body>
html>

2.3 背景图片位置

    <style>
         /* 背景图片的位置 */
         /*
            属性名:background-position 
                两种方式表示:
                ① center/right/left + center/top/bottom
                ② 数字px + 数字px     | 数字有+-,右+左- 下+上- 
          */
         div{
             width: 400px;
             height: 400px;
             background-color: grey;
             background-image: url(1.png);
             background-repeat:no-repeat ;
             background-position: center bottom;
         }

    style>
head>
<body>
    <div>div>
body>
html>

三、元素显示模式

3.1 块级元素

    <style>
        div{
            width: 400px;
            height: 400px;
            background-color: green;
        }
    style>
head>
<body>
    
    
     
      <div>hellodiv>
      <div>hellodiv>
body>
html>

3.2 行内元素

head>
<body>
      
    
     
body>
html>

3.3 行内块元素

    <style>
        div{
            width: 400px;
            height: 400px;
            background-color: green;
        }
    style>
head>
<body>
            
    
     
      
      
      <div>hellodiv>
      <div>hellodiv>
body>
html>

3.4 元素显示模式转换

    <style>
        /* 元素显示模式转换 */
        /*
            语法:
                display:block          -> 块级
                display:inline-block   -> 行内块
                display:inline         -> 行
         */
        div{
            width: 400px;
            height: 400px;
            background-color: green;

            display: inline-block;
        }
    style>
head>
<body>
      <div>hellodiv>
      <div>hellodiv>
body>
html>

四、HTML 嵌套规范

    
    
     <p>
         <div>测试p不要套div,p,h等块级元素div>
     p>

【CSS】CSS进阶(2)_第1张图片

你可能感兴趣的:(#,CSS,css,css3,html)