CSS 层叠样式表

已于 2022-11-26 19:42:41 修改
阅读量166 收藏
点赞数
文章标签： html5
于 2022-11-19 14:58:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55136170/article/details/127936988
版权

层叠样式表：就是给HTML添加样式的，让它变得更加的好看

# 注释

/*单行注释*/

/*

多行注释1

多行注释2

多行注释3

*/

通常我们在写css样式的时候也会用注释来划定样式区域（因为HTML代码多所以对应的CSS代码也很多）

/*这是博客园首页的css样式文件*/

/*顶部导航条样式*/
...
/*左侧菜单栏样式*/
...
/*右侧菜单栏样式*/
...

# css的语法结构

选择器 {

属性1:值1;

属性2:值2;

属性3:值3;

}

css的3种引入方式

        1. style标签内部直接书写

    <style>
        h1 {
            color: burlywood;
        }
    </style>

        2. link标签引入外部css文件（最正规的方式，解耦合）

    <link rel="stylesheet" href="mycss.css">

        3. 行内式（一般不用）

    <h1 style="color: #0000cc">老板好 要上课吗？</h1>

CSS的学习流程

1. 先学如何查找标签

        css查找标签的方式一定要学会

        因为后面所有的框架封装的查找语句都是基于css来的        

2. 之后再学如何添加样式

CSS选择器

基本选择器

# id选择器

# 类选择器

# 元素/标签选择器

# 通用选择器

/*id选择器*/
/*找到id是d1的标签，将文本颜色变成黄绿色*!*/
/*#d1 {
/*    color: greenyellow;*/
/*}*/

/*类选择器*/

/*找到class值里面包含c1的标签*/
/*.c1 {*/
/*    color: red;*/
/*}*/

/*.c2 {*/
/*    color: black;*/
/*}*/

/*元素(标签)选择器*/
/*找到所有的span标签*/
/*span {*/
/*    color: red;*/
/*}*/

/*通用选择器*/
/*将html页面上所有的标签全部找到*/
* {
    color: red;
}

组合选择器

"""

在前端 我们将标签的嵌套用亲戚关系来表述层级

    <div>div
        <p>div p</p>
        <p>div p
            <span>div p san
            </span>
        </p>
        <span>span</span>
        <span>span</span>
    </div>

div里面的p span都是div的后代

p是div的儿子

p里面的span是p的儿子，是div的孙子

div是p的父亲

"""

# 后代选择器

# 儿子选择器

# 毗邻选择器

# 弟弟选择器

        /*后代选择器*/
        /*div span {
            color: red;
        }*/
        /*div>span {
            color: red;
        }*/
        /*毗邻选择器*/
        /*同级别紧挨着的下面的第一个*/
        /*div+span {
            color: aqua;
        }*/
        /*弟弟选择器*/
        /*同级别下面所有的span*/
        div~span{
            color: red;
        }

属性选择器 

"""

1. 含有某个属性

2. 含有某个属性并且有某个值

3. 含有某个属性并且有某个值的某个标签

"""

# 属性选择器是以[]作为标志

        /*将所有含有属性名是username的标签背景色改为红色*/
        /*[username] {
            background-color: red;
        }*/
        /*找到所有属性名是username并且属性值是jason的标签*/
        /*[username ='jason'] {
            background-color: orange;
        }*/
        /*找到所有属性名是username并且属性值是jason的input标签*/
        input[username='jason']{
            background-color: red;
        }

分组选择器

分组与嵌套

        div,p,span {
            color: yellow;
        }

        #d1 .c2 span{
            color: red;
        }

伪类选择器

        body {
            background-color: black;
        }
        /*访问之前的状态*/
        a:link {
            color: red;
        }
        /*鼠标悬浮态*/
        a:hover {
            color: aqua;
        }
        /*鼠标点击不松开的状态 激活态*/
        a:active {
            color: black;
        }
        /*访问之后的状态*/
        a:visited {
            color: gray;
        }
        p {
            color: darkgray;
            font-size:48px ;
        }
        p:hover {
            color: white;
        }
        /*input框获取焦点（鼠标点了input框）*/
        input:focus {
            background-color: red;
        }

伪元素选择器

before和after通常都是用来清除浮动带来的影响：父标签塌陷的问题

        /*
        p:first-letter {
            font-size: 48px;
            color: orange;
        }
        */
        /*在文本开头 用css添加内容*/
        p:before {
            content: '你说得对';
            color: blue;
        }
        p:after {
            content: '?';
            color: orange;
        }

选择器优先级

"""

id 选择器

类 选择器

标签 选择器

行内 选择器

"""

        /*
            1. 选择器相同    书写顺序不同
                就近原则： 谁离标签更近就听谁的
            2. 选择器不同 ...
                行内选择器 > id选择器 > 类选择器 > 标签选择器
                精确度越高越有效
        */

        #d1 {
            color: aqua;
        }

        .c1 {
            color: orange;
        }
        p {
            color: red;
        }

display属性

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1 {
            /*隐藏标签不展示到前端页面并且原来的位置也不再占有了 但是还存在于文档上*/
            /*display: none;*/
            height: 100px;
            width: 100px;
            background-color: red;
            display: inline; /*将标签设置为行内标签的特点 一行显示并且无法修改长宽*/
        }

        #d2 {
            /*隐藏标签不展示到前端页面并且原来的位置也不再占有了 但是还存在于文档上*/
            /*display: none;*/
            height: 100px;
            width: 100px;
            background-color: yellow;
            display: inline;
        }

        #d3 {
            height: 100px;
            width: 100px;
            background-color: red;
            display: block; /*将标签设置成具有会计标签的特点*/
        }

        #d4 {
            height: 100px;
            width: 100px;
            background-color: yellow;
            display: block;
        }

        #d5 {
            height: 100px;
            width: 100px;
            background-color: red;
            display: inline-block; /*将标签既可以在一行展示又可以设置长宽*/
        }

        #d6 {
            height: 100px;
            width: 100px;
            background-color: yellow;
            display: inline-block;
        }
    </style>

</head>
<body>
<div id="d1">01</div>
<div id="d2">02</div>
<span id="d3">span</span>
<span id="d4">span</span>
<div id="d5">01</div>
<div id="d6">02</div>
<div style="display: none">div1</div>
<div>div2</div>
<div style="visibility: hidden">div3</div>
<div>div4</div>

盒子模型 

'''

盒子模型

        就以快递盒为例

                快递盒与快递盒之间的距离(标签与标签之间的距离 margin 外边距)

                盒子的厚度 （标签的边框 border）

                盒子里面的物体到盒子的距离 （内容到边框的距离 padding 内边距）

                物体的大小 （内容 content）

       

        如果你想要调整标签与标签之间的距离        你就可以调整margin

       

        浏览器会自带8px的margin，一般情况下我们在写页面的是偶，上来就会先将border的margin去除

'''

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        p {
            margin-left: 0;
            margin-top: 0;
            margin-right: 0;
            margin-bottom: 0;
        }
        */
        /*上下左右全是0*/
        body {
            margin: 10px 20px ; /*第一个上下 第二个左右*/
            margin: 10px 20px 30px; /*第一个上 第二个左右 第三个下*/
            margin: 10px 20px 30px 40px; /*第一个上 第二个右 第三个下 第四个左*/
        }
        #d1 {
            margin-bottom: 20px;
        }
        #d2 {
            margin-top: 50px; /*不叠加*/
        }
        #dd {
            margin: 0 auto; /*只能做到标签的水平居中*/
        }
        p {
            border: 3px solid red;
            padding-left: 10px;
            padding-top: 20px;
            padding-right: 20px;
            padding-bottom: 50px;
            padding : 10px 20px 30px 40px;

        }
    </style>


</head>
<body>
<!--
    <p style="border: 1px solid red " id="d1">ppp</p>
    <p style="border: 1px solid orange " id="d2">ppp</p>

<div style="border: 3px solid red; height: 400px;width: 400px;">
    <div id="dd" style="border: 1px solid orange; height: 50px;width: 50px;background-color: tomato;"></div>
</div>
-->
<p>ppp</p>
</body>

浮动

```浮动的元素 没有块级一说 本身多大浮起来之后就只能占多大```

只要是涉及到页面的布局一般都是用浮动来提前规划好

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }
        #d1 {
            width: 20%;
            height: 100%;
            background-color: #4e4e4e;
            float: left;
        }

        #d2 {
            width: 80%;
            height: 2000px;
            background-color: wheat;
            float: right;
        }
    </style>


</head>
<body>
    <div id="d1"></div>
    <div id="d2">

        <div>111</div>
    </div>
</body>

解决浮动带来的影响 

# 浮动带来的影响

会造成父标签塌陷的问题

"""

解决浮动带来的影响 推导步骤

        1. 自己加一个div设置高度

        2. 利用clear属性

        #d4 {
            clear:left; /*该标签的左边（地面和空中）不能有浮动的元素*/
        }

        3.通用的解决浮动的影响的方法

                在写html页面之前 先提前写好处理浮动带来的影响的 css代码

                之后只要标签出现了塌陷的问题就给该塌陷的标签加一个clearfix属性即可

                上述的解决方式是通用的 到哪都一样 并且名字就叫 clearfix

        .clearfix:after {
            content: '';
            display: block;
            clear: both;
        }

溢出属性 

    <style>
        p {
            height: 100px;
            width: 100px;
            border: 3px solid red;
            overflow: visible; /*默认就是可见 溢出还是展示*/
            overflow: hidden; /*溢出部分直接隐藏*/
            overflow: scroll; /*设置成上下滚动条的形式*/
            overflow: auto;
        }
    </style>

定位

静态

        所有的标签默认都是静态的static，无法改变位置

相对定位

        相对于标签原来的位置做移动 relative

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }
        #d1 {
            height: 100px;
            width: 100px;
            background-color: red;
            left:100px; /*从左往右 如果是负数 方向则相反*/
            top:100px; /*从上往下 如果是负数 方向则相反*/
            position: static; /*默认是static无法修改位置*/
            position: relative;
            /*
            相对定位 标签由static变为relative 它的性质就从原来没有定位的标签变成了已经定位过的标签
            虽然哪怕你没有动 但是你的性质也已经改变了
            */
        }
    </style>
</head>
<body>
    <div id="d1"></div>


</body>

绝对定位（常用）

        相对于已经定位过的父标签做移动（如果没有父标签那么就以body为参照）

        eg:小米网站购物车

        当你不知道页面其他标签的位置和参数，只给了你一个父标签的参数，让你基于该标签做定位

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }


        #d2 {
            height: 100px;
            width: 200px;
            background-color: yellow;
            position: relative; /*已经定位过了*/
        }
        #d3 {
            height: 200px;
            width: 400px;
            background-color: yellowgreen;
            position: absolute;
            left:200px;
            top:100px ;
        }
    </style>
</head>
<body>

    <div id="d2">sdsaf
        <div id="d3"></div>
    </div>


</body>

固定定位（常用）

        相对于浏览器窗口固定在某个位置

        eg:右侧小广告

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }



        #d4 {
            position: fixed; /*写了fixed之后 接下来的定位就是依据浏览器窗口*/
            bottom: 10px;
            right:20px;
            height: 50px;
            width: 100px;
            background-color: white;
            border: 3px solid black;
        }
    </style>
</head>
<body>
    <div style="height: 500px; background-color: red"></div>
    <div style="height: 500px; background-color: greenyellow"></div>
    <div style="height: 500px; background-color: blue"></div>
    <div id="d4">回到顶部</div>


</body>

ps：浏览器是优先展示文本内容的

验证浮动和定位是否脱离文档流（原来的位置是否还保留）

"""

浮动

相对定位

绝对定位

固定定位

"""

# 不脱离文档流

        1. 相对定位

#  脱离文档流

        1. 浮动

        2. 绝对定位

        3. 固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    <div style="height: 100px;width: 200px;background-color: red;position: relative;left: 500px"></div>
    <div style="height: 100px;width: 200px;background-color: yellowgreen"></div>
-->
<!--
<div style="height: 100px;width: 200px;background-color: red;"></div>
<div style="height: 100px;width: 200px;background-color: yellowgreen;position: absolute;left: 500px"></div>
<div style="height: 100px;width: 200px;background-color: blue;"></div>
-->


<div style="height: 100px;width: 200px;background-color: red;"></div>
<div style="height: 100px;width: 200px;background-color: yellowgreen;position: fixed;bottom: 1px; right: 1px"></div>
<div style="height: 100px;width: 200px;background-color: blue;"></div>

</body>
</html>

z-index模态框 

eg: 百度登录页面 其实是三层结构

        1. 最底部是正常内容 (z=0)        最远的

        2. 黑色的透明区 (z=99)        中间层

        3. 白色的注册区域 (z=100)         离用户最近

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }

        .cover {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 9;
        }
        .modal {
            background-color: white;
            height: 200px;
            width: 400px;
            position: fixed;
            left:50%;
            top:50%;
            z-index: 100;
            margin-left: -200px;;
            margin-top: -100px;
        }
    </style>

</head>
<body>
<div>这是最底层的页面内容</div>
<div class="cover"></div>
<div class="modal">
    <h1>登录页面</h1>
    <p>username: <input type="text"></p>
    <p>password: <input type="text"></p>
    <button>点我点我</button>
</div>
</body>
</html>

透明度 opacity

# 它不单单可以修改颜色的透明度 还同时修改字体的透明度

rgba只能影响颜色

而opacity可以修改颜色和字体

作业书写

"""

当你在设计页面的时候 先用div划分区域 之后填写基本内容 最后再调节样式

在书写html代码的时候 class, id等属性最好都起得见名知意

"""

weixin_55136170
关注
CSS层叠样式表
10-15
分享的是来自麦子学院网课，关于CSS层叠样式表的知识结构图，用的思维导图工具是xmind，一款免费的思维导图工具
CSS层叠样式表的层叠是什么意思(自我理解)
09-25
CSS层叠样式表（Cascading Style Sheets，简称CSS）是一种用于描述网页及应用程序用户界面外观和表现的样式语言。层叠的概念是CSS的核心特性之一，它涉及到样式表中的继承、权重和覆盖规则，帮助开发者有效地管理和...
css层叠样式表学习笔记
我的个人博客
04-20 1166
为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS由此思想而诞生，CSS是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表。有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁。
CSS层叠样式表-选择器
QLqrr的博客
05-21 995
一、css层叠样式表的三种形式 1.行内样式表 2.内部样式表 3.外部样式表 二、CSS选择器 1.标签选择器 例： <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initia
4.CSS层叠样式表一
sss_white的博客
08-14 808
CSS层叠样式表 目标 能够说出什么是CSS 能够使用CSS基础选择器 能够设置字体样式 能够设置文本样式 能够说出CSS的三种引入方式 能够使用Chrome调试工具调试样式 1、CSS简介 CSS：美化网页，布局页面 1.HTML的局限性 HTML主要做结构，显示网页元素内容 2.CSS-网页的美化 层叠样式表（Cascading Style Sheets）简称CSS，有时称CSS样式表、级联样式表 CSS是一种标记语言 CSS用于设置HTML页面中的文本内容（字体、大小、对齐方式）、图片的外形（宽高
CSS层叠样式表--三大特性
QLqrr的博客
05-27 740
一、继承性 有些属性，如果父元素中已经设置过，其子元素无需重新设置。（可以节省代码） ★★★继承性失效的情况 1.继承的优先级没有浏览器的默认样式高。 二、层叠性 1.多个选择器可以同时作用于同一个标签，效果叠加。 例： <style> p{ color:red; } .fs14{ font-size:14px; } #para{ text-decoration:underline; } </style> <p id="para" class
第一章CSS层叠样式表
weixin_61877104的博客
12-26 333
CSS层叠样式表 1.初识CSS 概念： CSS(Cascading Style Sheets),通常称为CSS样式表或层叠样式表（级联样式表） 作用： 主要用于设置HTML页面中的文本内容（字体，大小，对齐方式等），图片的外形（宽高，边宽样式，边距等）以及版面的布局和外观显示样式。 CSS以HTML为基础，提供了丰富的功能，如字体，颜色，背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。 2.三种CSS样式表 2.1行内式（内联样式） 概念： 程行内样式，行间样式。 是
CSS层叠样式表之选择器
L201122y的博客
03-20 633
CSS层叠样式表之选择器
带你了解前端之CSS层叠样式表
主要发布一些日常学习代码及理解
08-23 1007
详细介绍了CSS层叠样式表 快速入门
css层叠样式表(css层叠样式表有哪几种类型他们的层也有意见及关系熟)
计算机毕业论文源码，学生个人网页制作html源码。贴近用户做网络推广和互联网优化。
02-25 370
如何使用层叠样式表(CSS)javascvipt编程 这里写你想要实现的javascript代码 如何在HTML页面中使用CSS层叠样式表，即CSS的格式与应用形? 如果属性的值是多个单词组成，必须在值上加引号，比如字体的名称经常是几个单词的组合：p { font-family: "sans serif"} 　(...
HTML5中`＜span＞`标签深入解析
软考鸭
09-10 526
span>标签是一个无语义的行内容器，用于包裹文档中的一部分内容，而不改变文档的结构。它通常与CSS和JavaScript结合使用，以实现对特定内容的样式化或动态操作。
HTML5下＜hr＞标签的CSS样式定制
软考鸭
09-10 977
hr>标签在HTML页面中创建一条水平线，这条水平线通常用于分隔段落、章节或者主题变化。在HTML中，是一个空元素，没有结束标签，直接使用即可。然而，在XHTML中，为了符合XML的严格语法，必须被正确地关闭，比如。
中秋之美——html5+css+js制作中秋网页
Timi2019的博客
09-02 2344
八月十五，秋已过半，是为中秋。“但愿人长久，千里共婵娟”，中秋时节，气温已凉未寒，天高气爽，月朗中天，正是观赏月亮的最佳时令。古人把圆月视为团圆的象征，因此，又称八月十五为“团圆节”。
HTML5中元素的拖放详解
最新发布
业精于勤荒于嬉，行成于思毁于随
09-11 1035
只要为元素添加draggable属性，就可实现元素的拖放。
HTML5全面知识点
A_cot的博客
09-10 858
HTML（HyperText Markup Language）是构建网页的基础语言。版本历史：从 HTML 的早期版本发展到现在的 HTML5，功能不断增强，支持更多的多媒体和交互特性。定义：HTML 是一种用于描述网页结构的标记语言，通过各种标签来定义网页的内容和布局。
HTML5 `＜button＞` 标签深入全面解析
软考鸭
09-10 1002
标签广泛应用于各种交互式网页中，如表单提交、模态框的打开和关闭、导航菜单的展开和收起等。通过结合使用CSS样式和JavaScript事件处理，可以创建出既美观又功能强大的按钮。标签是一个功能强大且灵活的元素，它提供了丰富的属性用于定义按钮的行为和外观，同时也支持CSS样式和JavaScript事件处理。标签的用法和特性，我们可以更好地利用它来创建出优秀的交互式网页。在这个简单的例子中，我们创建了一个普通的按钮，其上的文本是“点击我”。标签用于定义一个可点击的按钮，它是创建交互式网页的重要元素之一。
HTML5中`＜ul＞`标签深入全面解析
软考鸭
09-10 744
更改项目符号的类型，如none（无符号）、disc（实心圆点）、circle（空心圆点）、square（实心方块）等。：使用自定义图像作为项目符号，增添个性色彩。：调整项目符号的位置，inside（内嵌）、outside（外置）任你选。通过对标签的深入剖析，我们不难发现其在网页设计中的重要地位。无论是基础的列表展示，还是复杂的导航菜单、产品展示等场景，标签都能凭借其灵活的布局和丰富的样式选项，满足我们多样化的需求。未来，随着HTML和CSS技术的不断发展，
理解CSS层叠样式表：定义、使用与优势
"CSS层叠样式表" 在网页设计领域，CSS（Cascading Style Sheets）是一种不可或缺的技术，它用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档的呈现方式。由W3C（万维网联盟）制定，CSS让网页设计师能够...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值