css的引入方式和选择器

最新推荐文章于 2024-07-23 14:51:29 发布

iheyu

最新推荐文章于 2024-07-23 14:51:29 发布

阅读量375

点赞数

分类专栏：前端 CSS引用方式选择器文章标签： css

本文链接：https://blog.csdn.net/iheyu/article/details/104719694

版权

前端同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

CSS引用方式

1 篇文章 0 订阅

订阅专栏

选择器

1 篇文章 0 订阅

订阅专栏

html(hyperText markup language) ——>结构；
css(cascading style sheet)层叠样式表——>样式；
javascript ——>行为；

一.html 引入css 的三种引入方式：
1.行间样式:
<html>
    <head>
        <meta charset="utf-8">
        <title>document</title>
    </head>
    <body>
       <!--引入css-->
       1.行间样式
       <div style="
            width:100px;
            height:100px;
            background-color: red;
       "></div>
    </body>
</html>

2.页面级css:
<html>
    <head>
        <meta charset="utf-8">
        <title>document</title>
        <style type="text/css">
            div{
                width: 100px;
                height: 100px;
                background-color: green;
            }
        </style>
    </head>
    <body>
       <!-- 2.页面级css -->
       <div><div>
    </body>
</html>

3.外部css文件:
<html>
    <head>
        <meta charset="utf-8">
        <title>document</title>
        <link rel="stylesheet" type="text/css" href="css/lesson3.css">
    </head>
    <body>
       <!--引入css-->
       <!-- 3.外部css文件 -->
       <div><div>
    </body>
</html>

div {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    background-color: black;
}

给别人传送数据就叫"服务器"；
html文件是怎么引入到页面里面来的么？
www.baidu.com(域名)——>dns-->192.168.000.001(物理地址)

二. 选择器
1. id 选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>demon</title>
    <link rel="stylesheet" type="text/css" href="css/lesson3.css">
</head>
<body>
    <!-- 1 id 选择器，就像人用的身份证一样，一个id对应一个代码一个样式-->
    <div id="only">123</div>
    <div id="only1">456</div>
</body>
</html>

#only {
    background-color: red;
}
#only1 {
    background-color: green;
}

2. class 选择器
<body>
     <!--2. class 选择器  个class值 可以对多个元素-->
     <div class="demo demo1">123</div>
     <div class="demo">234</div>

</body>

.demo {
    background-color: yellow;
}
.demo1 {
    color: #f40;
}

3.标签选择器
<body>
     <!--3.标签选择器 -->
     <span>123</span>
     <div>
         <span>234</span>
     </div>

</body>

span {
    color: #f40;
    font-weight: bold;
}

4 统配符选择器
<body>
     <!--4 统配符选择器 -->
     <span>123</span>
     <div>234</div>
     <strong>111</strong>

</body>

* {
    background-color: green;
 }

5 属性选择器
<body>
     <!--5 属性选择器  有属性是id的元素 或有属性其它的选择器-->
     <div id="only" class="demo">123</div>
     <div id="only1">234</div>

</body>

[id]{
     background-color: hotpink;
}

6 !important
<body>
    
     <div style="background-color: red;">123</div>

</body>

div{
    background-color: green!important;
}

iheyu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css的引入方式和选择器

html(hyperText markup language) ——>结构；css(cascading style sheet)层叠样式表——>样式；javascript ——>行为；一.html 引入css 的三种引入方式：1.行间样式:<html> <head> <meta charset="utf-8"&g...
复制链接

扫一扫