CSS基础笔记一（三种引入方式，三种特征，多个选择器，网页常见布局css+div实现）

凡梦_leo

已于 2024-07-11 00:09:03 修改

阅读量1.1k

点赞数 1

分类专栏： CSS 文章标签： css 笔记前端 html html5 python pygame

于 2023-06-27 14:23:12 首次发布

本文链接：https://blog.csdn.net/qq_55006020/article/details/131415468

版权

CSS 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

这篇博客详细介绍了CSS的三种引入方式：内联样式、内部样式和外部引用，强调了CSS样式的继承、层叠和优先级特性，并详细讲解了全局选择器、元素选择器、类选择器、ID选择器和合并选择器的使用。此外，还探讨了CSS+div实现的三色布局和上中下布局两种常见网页结构。

摘要由CSDN通过智能技术生成

引入方式，有三种，分别是内联样式，内部样式，外部引用

css样式的特征有继承，层叠，优先级

css选择器的分类内联 id 类元素合并选择器等

二，CSS样式的特征（继承，层叠，优先级）

三，选择器（全局选择器，元素选择器，类选择器，id选择器，合并选择器）

第五种，合并选择器（选择器1，选择器2，选择器3……）

一，CSS引入方式

有三种

引入方式有3种,
内联样式
内部样式
外部样式

第一种，内联样式

比如对p标签做内联样式的标识.直接在标签里面加标识

<p style="font-size: 30px;color: pink">我是一个段落标签</p>

第二种，内部样式

在开头（head）对标签元素做美化样式

但是如果是多个页面的话，这种会导致多个页面不一致

<head>
    <meta charset="UTF-8">
    <title>css样式</title>
  <!--      给h1做美化-->
<!--    总体引用 但是在多个页面会不一致-->
    <style>
      h1{
        color: pink;
        font-size: 20px;
      }
    </style>

第三种，外部引用

当然也包括导入式引用

代码内部第一个就是外部引用的案例

第二个就是导入式引用的案例

<!--    link是引用css设置文件-->
    <link rel="stylesheet" href="01-2，h2设置.css">
<!--    导入h3设置css文件-->
    <style>
        @import url('01-1,h3设置.css');
    </style>

外部文件的代码一：

h3{
    color: #4135fa;
    font-size: 80px;
}

外部文件的代码二：

/*color 是修改颜色
font-size 是修改大小
*/
h2{
    color: #fa4d15;
    font-size: 50px;
}

二，CSS样式的特征（继承，层叠，优先级）

继承，子代元素继承父级元素的一些样式，但是并不是完全所有的都会继承

层叠，后面的会覆盖掉前面的

优先级。

元素选择器权重是1

类选择器是10

id选择器权重是100

内联权重是1000

行内>id>class>元素

代码：

<!DOCTYPE html>
<!--
css样式表特征有三种
继承性
层叠性
优先级
-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css样式表特征</title>
  <style>
    div{
      /*继承性    我们虽然没有修改p标签的个样式,但是p在div之间 所以他继承了div的样式
      color 颜色  font-size 字体大小
      并不是所有属性都继承
      比如borber 就不会被继承
      borber 是线框  solid是颜色
      */
      color:sandybrown;
      font-size: 20px;
      border: 1px solid pink;
    }
    h1{
      color: red;
    }
    h1{
      /*层叠性,但对同一个标签设置不同的属性的时候,最后一次设置的生效*/
      color:sienna;
    }
    a{
      color: red;
    }
  </style>
</head>
<body>
<div>
  <p>我是段落标签</p>
</div>
<h1>我是一级标题</h1>
<!--优先级:内联样式 大于内部样式-->
<a href="#" style="color:saddlebrown"> 我是超链接</a>
</body>
</html>

三，选择器（全局选择器，元素选择器，类选择器，id选择器，合并选择器）

第一种，全局选择器（*）

通常放在开头，也做初始化处理，典型案例是用来处理网页内置的外边距和内边距处理效果

代码案例用全局选择器来处理页面默认的边距

<!DOCTYPE html>
<!--
1,全局选择器, *{}  通常用来做初始化处理
2,元素选择器,,描述共性,无论隐藏的多深,都能覆盖到 选择所有 而不是一个
3,类选择器

-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css选择器</title>
    <style>
      /*<!--全局选择器 通配符处理全部内容-->*/
      /* 浏览器默认会给网页预留空隙,我们用margin清空
      用padding 填充
      初始化操作 相当于__init__
      */
      /*初始化操作,清空浏览器默认的边距*/
      *{
        /*color: red;
        margin 间隙
        padding  填充
        */
        margin: 0;
        padding: 0;

      }
      div{
        width: 100px;
        height: 100px;
        background-color: pink;
      }
      /*元素选择器,通过选择元素来修改其样式*/
      p{
        font-size: 30px;
        color: red;
      }
      span{
        color: green;
      }
    </style>
</head>
<body>
<div>

</div>

<p>hi</p>
<h1>我是一级标题</h1>
<!--不管嵌套多深,都能覆盖到-->
<table>
  <tr>
    <td><p>哈哈哈</p></td>
  </tr>
</table>
<!--通过修改span的元素  来对我们p元素里面的内容进行修改-->
<p>学习 <span>前端</span>,后在继续学习 <span>python</span></p>


</body>
</html>

第二种，元素选择器（指定元数）

通过选择元素来设置该元素的样式，无论该元素隐藏的多深，都会被找到并且覆盖到。

代码将上面的演示

上面代码演示效果如下：

可以看到网页的边距已经被修改了

并且div和p标签和span标签都通过了元素修改器做了修改

第三种，类选择（class）

<!--  通过创建一个类型,来给这个类型修改一些外观美化效果 就是类选择器-->
<!--  类名不能用数字开头,
同一个元素可以选择多个类选择器-->

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
<!--  通过创建一个类型,来给这个类型修改一些外观美化效果 就是类选择器-->
<!--  类名不能用数字开头,
同一个元素可以选择多个类选择器-->
  <style>
    .wodelei{
      color:deeppink;
    }
    .a2{
      font-size: 80px;
    }
  </style>

</head>
<body>
<!--新建了一个类 wodelei 然后通过style修改类的属性-->
<p class="wodelei">我是第一个段落</p>
<p>我是第二个段落</p>
<!--同一个元素可以选用多个类选择器-->
<h1 class="wodelei a2">我是一级标题</h1>
</body>
</html>

通过我们自定义的类，来对不同高度元素标签做了修改样式

修改效果如下：

第四种，id选择器（#ID名称）

通过给元素命名id的形式，来通过id的命名去对元素做出对应修改

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <style>
/*<!--        还可以选择百分之100-->*/
        #test{
            width: 100%;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
<div id="test"></div>
<!--id是唯一的
id命名不能以数字开头-->
</body>
</html>

第五种，合并选择器（选择器1，选择器2，选择器3……）

如果多个元素里面设置属性都是一样的，可以合并2个选择器，用逗号隔开，来一起执行样式美化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>合并选择器</title>
  <style>
/*<!-- 如果多个选择器里面的设置属性都是一样的话,可以合并2个选择器,用逗号隔开   -->*/
    p,h3{
      color: pink;
    }
    /*层叠性质,后面的覆盖前面的.当然也可以合并多个类选择器*/
    .aaa2,.aaaa{
      color: red;
    }
  </style>
</head>
<body>
<p>我是一个段落标签</p>
<h3>我是三级标题</h3>
<p class="aaaa">我是一个性的段落</p>
<h3 class="aaa2">我是一个新的三级标签</h3>
</body>
</html>

以上代码演示效果如下：

最后重申一下选择器的优先级

内联样式(1000分) >id选择器（100分）>类选择器（10分）>元素选择器（1分）

如果合并了多个选择器，根据其合并的分数也会有不同的权重比

比如一下案例见代码：

合并的选择器会计算她合并的多个选择器一起的权重比去做运算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器的优先级</title>
  <style>
    .a1{
    /*  我是类选择器*/
      color: green;
    }
    p{
    /*  我是元素选择器*/
      color: red;
    }
    #a2{
    /*  我是id选择器*/
      color: yellow;
    }

  /*  优先级的值可以合并的*/

    .a3 .a2{
      color: yellow;
    }
    /*下面的只有10分,上面的有20分.所以上面的优先级高*/
    .a2{
      color: blue;
    }
  </style>
</head>
<body>
<!--
内联大于id 大于类 大于元素
-->
<!--由此可见 style是最大的,其次是id 其次是类 最后是元素选择器-->
<p class="a1" id="a2" style="color: blue">我是一个段落</p>
<div class="a3">
  <h4 class="a2">我是四级标题</h4>
</div>
</body>
</html>

四，css+div布局给常用网页结构布局

第一种，三色布局

页眉

内容

页脚

代码如下：

<!DOCTYPE html>
<!--
常用属性
width 宽度
height 高度
backround-color 背景颜色
float   浮动
-->
<html lang="en">
<!--上中下布局-->
<head>
    <meta charset="UTF-8">
    <title>布局网页常用结构</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .header{
      width: 100%;
      height:100px;
      background-color: #fcc;
    }
    .nav{
      width: 100%;
      height:500px;
      background-color: yellow;
    }
    .footer{
      width: 100%;
      height:200px;
      background-color: aqua;
    }
  </style>
</head>
<body>
<div class="header">页眉</div>
<div class="nav">导航</div>
<div class="footer">底部内容</div>

</body>
</html>

第二种，上中（左右）下布局

分为页眉，导航，左边文章，中间文章，右边文章底部页脚

比如示例这种：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上中下左右结构布局</title>
  <style>
/*<!-- 清除浏览器默认边距   -->*/
    .root{
      margin: 0;
      padding: 0;
    }
    /*页眉和导航共同设置*/
    .header,.nav,.a123{
      width: 100%;
      height: 100px;
    }
    /*如果要显示页脚,要把中间部分也设置一下下,不然页脚不出来了*/
    .a1{
      width: 100%;
      height: 500px;
    }
    .left,.center,.right{
      width:33.3% ;
      height: 100%;
    }
    
  </style>
</head>
<body>
<div class="root">
  <div class="header" style="background-color: red">页眉</div>
  <div class="nav" style="background-color: #ffcccc">导航</div>
  <div class="a1">
    <div class="left" style="float: left;background-color: sandybrown;">左边文章</div>
    <div class="center" style="float:left;background-color: aquamarine">中间文章</div>
    <div class="right" style="float: left; background-color: deeppink">右边文章</div>
  </div>
  <div class="a123" style=" background-color: #006699;">页脚</div>
</div>
</body>
</html>