CSS基础

最新推荐文章于 2024-07-19 15:50:46 发布

还没头秃

最新推荐文章于 2024-07-19 15:50:46 发布

阅读量182

点赞数

分类专栏： HTML与CSS 文章标签： css html 前端

本文链接：https://blog.csdn.net/c2517945543/article/details/122351676

版权

HTML与CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

(1) 在html中使用样式

内联样式（行内样式）
内部样式
外部样式

1-2内联样式和内部样式

<!DOCTYPE html>
<html>
<head>
    <style>
        <!-- 内部样式 -->
        p {
            color: green;
            font-size: 30px;
        }
    </style> 
</head>
<body>
    <h3>我的第x个网页</h3>
    <!-- 内联样式 -->
    <div style="color:red;font-size: 25px;">
        我爱web前端<br>
        我爱web前端<br>
        我爱web前端<br> 
    </div>
 
    <p>
        我爱web前端<br>
        我爱web前端<br>
        我爱web前端<br> 
    </p>
</body> 
</html>

3 外部样式

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>Document</title>
    <link rel="stylesheet" href="./demo.css">
</head>
<body>
    <div>
        我爱web前端 <br>
        我爱web前端
    </div>
</body>
</html>

<!-- demo.css -->
div {
    color: red;
    font-size: 30px;
}

(2) 几个简单的css样式

border 边框
width, height 宽高
background-color 背景颜色
color 字体颜色
font-size 字体大小

<!DOCTYPE html>
<html lang="en">
<head>  
    <style>
        div {
            /* 边框: 大小,实线,颜色 */
            border: 2px solid red;
            /* width宽 */
            width: 100px;
            /* height高 */
            height: 100px;
            /* 背景颜色 */
            background-color: #999;
            /* 字体颜色 */
            color: red;
            /* 字体大小 */
            font-size: 10px;
        }
    </style>
</head>
<body>
    <div>
        这是div标签
    </div> 
</body>
</html>

(3) 元素选择器

常用选择器

元素选择器
id选择器
类选择器
群组选择器
后代选择器
子代选择器
兄弟选择器
nth(n) 选择器
:first-child (伪类选择器)
:last-child (伪类选择器css3新增)
:hover (伪类选择器)
:visited (伪类选择器)
:after (伪类选择器)
css3新增选择器

1.元素选择器

<!DOCTYPE html>
<html lang="en">
<head> 
   <style>
      div { color: red; }
      p { color: green; }
   </style>
</head>
<body>
   
   <div> 这是div </div>
   <p> 这是p </p> 
   <div>11111111</div>
</body>
</html>

2.id选择器

id必须唯一

<!DOCTYPE html>
<html lang="en">
<head> 
   <style>
      /* id选择器 */
      #aa {
         color: blue;
      }
      #bb {
         color: red;
      }
      #cc {
         color: green;
      }
   </style>
</head>
<body> 
   <div id="aa"> 这是div </div> 
   <div id="bb">11111111</div>
   <div id="cc">22222222</div>
</body>
</html>

3.class选择器

<!DOCTYPE html>
<html lang="en"> 
<head>
    <style>
        /* class选择器 */
        .red {
            color: red;
        } 
        .pp {
            border: 1px solid;
        }
    </style>
</head>

<body>
    <div class="red"> div222222 </div>
    <p> p22222222 </p>
    <span> span </span>
    <br>
    <i class="red"> i22222222222 </i> 
    <p class="pp">p333333333333</p> 
</body> 
</html>

4.群组选择器

选择器之间用逗号隔开

<!DOCTYPE html>
<html lang="en">
<head> 
    <style>
        /* 群组选择器 */
       .box,#aa,p {
           color: red;
           border: 1px solid;
       }
    </style>
</head>
<body>
    <div class="box">box2222222222</div>
    <div id="aa">aa2222222222222</div>
    <p>pppppppppppppppppp</p>
</body>
</html>

5.后代选择器

父元素和子元素之间用空格隔开

<!DOCTYPE html>
<html lang="en">
<head> 
    <style>
        .list1 .item {
            color: green;
        }

       .list2 .item {
           color: red;
       }
    </style>
</head>
<body>
     <ul class="list1">
         <li class="item">1.xxxx</li>
         <li class="item">2.xxxx</li>
         <li class="item">3.xxxx</li>
     </ul>

     <ul class="list2">
        <li class="item">1.xxxx</li>
        <li class="item">2.xxxx</li>
        <li class="item">3.xxxx</li>
    </ul>
</body>
</html>

<!--  demo2 -->
<!DOCTYPE html>
<html lang="en">
<head> 
    <style> 
        .box .bb {
            color: green;
        }

    </style>
</head>
<body>
      <div class="box">
          <div class="aa"> 
              <p class="pp">
                  <span class="bb">
                      这是span元素
                  </span>
              </p>
          </div>
      </div>

      <p>
          <span class="bb">
              这也是span元素
          </span>
      </p>

</body>
</html>

6. 子代选择器

<!DOCTYPE html>
<html lang="en"> 
<head>
    <style>
        /* 子代选择器 */
        .box>.aa {
            /* color: red; */
           border: 1px solid;
        }
    </style>
</head> 
<body>
    <!-- .box爷爷元素 -->
    <div class="box">
        <div class="aa">
            这是儿子元素
            <div class="aa">
                这是孙子元素
            </div>
        </div>
    </div> 
</body> 
</html>

7. 兄弟选择器

<!-- demo1 -->
<style>
    .aa+.bb {
        color: red;
    } 
</style>

<div class="box">
    <div class="aa">aaaaa</div>
    <p class="bb">bbbbbb</p>
</div>


<!-- demo2应用 -->
<style>
    /* 除了第一个li之外, 其它li都添加顶部边框 */
    li+li {
        border-top: 1px solid red;
    }
</style>

<ul>
    <li>1.xxx</li>
    <li>2.xxx</li>
    <li>3.xxx</li>
    <li>4.xxx</li>
    <li>5.xxx</li>
</ul>

伪类选择器

8. :nth(n) 选择器

<!-- demo1 -->
<style>
   li:nth-child(1) {
    color: red;
   }
   li:nth-child(2) {
    color: green;
   }
   li:nth-child(5) {
    color: blue;
   } 
</style>

<ul>
    <li>1.xxx</li>
    <li>2.xxx</li>
    <li>3.xxx</li>
    <li>4.xxx</li>
    <li>5.xxx</li>
</ul>

<!-- demo2 -->
<style>
    p {
        width: 300px;
        height: 50px;
        border: 1px solid red;
    }
    p:nth-child(1) {
        background-color: gray;
    }
    p:nth-child(2) {
        background-color: green;
    }
    p:nth-child(3) {
        background-color: rosybrown;
    }
</style>

<p></p>
<p></p>
<p></p>

<!-- demo3奇数和偶数 -->
<style>
    li:nth-child(even) {
     color: red;
    } 
    li:nth-child(odd) {
     color: blue;
    } 
 </style>
 
 <ul>
     <li>1.xxx</li>
     <li>2.xxx</li>
     <li>3.xxx</li>
     <li>4.xxx</li>
     <li>5.xxx</li>
 </ul>

9. :first-child (第一个)

10. :last-child (最后一个 css3新增)

<style>
    li:first-child {
        color: red;
    }
    li:last-child {
        color: blue;
    }
 </style>
 
 <ul>
     <li>1.xxx</li>
     <li>2.xxx</li>
     <li>3.xxx</li>
     <li>4.xxx</li>
     <li>5.xxx</li>
 </ul>

11. :hover (移动到元素上)

12. :visited (访问过)

<style>
    /* 伪类选择器 */
     a:link {
        color: #999;
     }
     a:hover {
         color: blue;
     }
     a:visited {
         color: red;
     }
 </style>
 

 <a href="#">百度</a>
 <a href="#">新浪</a>

13. :before 和 :after (伪类选择器)

<style>
    /* 伪类选择器 */
    div {
        border: 1px solid;
        width: 300px;
        height: 200px;
    }
    div:before {
        content: '我是伪类元素before';
        color: red; 
    }
    div:after {
        content: '我是伪类元素after';
        color: blue;
    }
 </style>

 <div> </div>

14. 属性选择器

<style>
   a[href='http://baidu.com'] {
       border: 1px solid red;
       color: red;
   }
 </style>

<a href="http://baidu.com">百度</a>
<a href="http://sina.com">辛浪</a>

15. emmet语法(了解)

<!DOCTYPE html>
<html lang="en"> 
<body>
    <!-- 1. div#box 添加id -->
    <div id="box"></div>
    <!-- 2. div.box 添加class-->
    <div class="box"></div>
    <!-- 3. div>p 添加后代元素-->
    <div>
        <p></p>
    </div>
    <!-- 4. div{我爱web} 添加内容 -->
    <div>我爱web</div>
    <!-- 5. input[type=radio]添加属性 -->
    <input type="radio">
    <!-- 6. ul>li{$.xxxx}*5添加列表 -->
    <ul>
        <li>1.xxxx</li>
        <li>2.xxxx</li>
        <li>3.xxxx</li>
        <li>4.xxxx</li>
        <li>5.xxxx</li>
    </ul>
    <!-- 7. ul.list>li.item{$.xxxx}*5 综合 -->
    <ul class="list">
        <li class="item">1.xxxx</li>
        <li class="item">2.xxxx</li>
        <li class="item">3.xxxx</li>
        <li class="item">4.xxxx</li>
        <li class="item">5.xxxx</li>
    </ul> 
</body>
</html>

(4) 选择器优先级

css样式特点

有些样式可以继承, 比如color, font-zide, line-height等
可以使用多个选择器对同一个元素同一个样式进行设置
可以多个class作用在同一个元素上

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        body {
            color: red;
            font-size: 30px;
        }
        .aa {
            border: 1px solid;
        }
        .bb {
            font-size: 20px;
        }
        .cc {
            background-color: gray; 
        }
    </style>
</head>

<body>
    <div class="aa bb cc">div标签</div>
    <p>p标签</p>
</body> 
</html>

优先级规则

内联样式 > 内部样式 > 外部样式 (就近原则)

 <style>
     .box { color: blue; }
     .pp {
         background-color: gray;
         background-color: green;
     }
 </style>

 <div class="box" style="color: red;">
     div元素
 </div>
 <p class="pp">pppppppppp</p>

!important > id选择器 > class选择器 > 元素选择器 > 通配符(*)选择器

注意: !important能不用就不用, 因为用不好对维护会产生影响

 <style>
     * {
         color: greenyellow;
     } 
      #box {
          color: red;
      }
      .box {
          color: blue!important;
      }
      div {
          color: yellow;
      } 
 </style>

 <div id="box" class="box">
     div元素
 </div>

都是class的情况下, 一般选择器越"长", 优先级越高

 <style>
     .aa.bb.cc {
          color: green;
      }
      .aa {
          color: red;
      } 
 </style>

 <div class="aa bb cc">
     div元素
 </div> 


 <style>
     .aa .bb .cc {
         color: blue;
     }

    .aa .cc {
        color: red;
    } 
 </style>

<div class="aa">
    <div class="bb">
        <div class="cc">
            div元素
        </div>
    </div>
</div>

还没头秃

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础

(1) 在html中使用样式内联样式内部样式外部样式1-2内联样式和内部样式<!DOCTYPE html><html><head> <style>  p { color: green; font-size: 30px; } </style> </head>&lt
复制链接

扫一扫