CSS介绍

层叠样式表：就是给HTML标签添加养的，让他变的更加的好看

注释：

/*单行注释*/
/*
多行注释1
多行注释2
多行注释3
*/
通常我们在写CSS样式的时候也会用注释来划定样式区域（因为HTML代码多所以对应的CSS代码也会很多）
/* 这是博客园首页的CSS样式文件*/
/*顶部导航条样式*/
/*左侧菜单栏样式*/
/*右侧菜单栏样式*/

# CSS的语法结构
选择器{属性1:值1;
      属性2:值2;
      属性2:值2;
   }

# css的三种引入方式
1.style标签内部直接书写
 <style>
        h1{
            color: aqua;
        }
    </style>
2.link标签引入外部css文件
<link rel="stylesheet" href="mycss.css">
3.行内式(一般不用)
<h1 style="color: aquamarine">
    你好啊
</h1>

'''
css的学习流程
    1.先学如何查找标签
    css查找标签的凡事你一定要学会
    因为后面所有的框架封装的查找语句都是基于css来的
    2.之后在学如何添加样式
'''

1.css选择器

1.1. 基本选择器

元素选择器

p{color:"red";}
id选择器

#id1{

}
类选择器

.c1{

font-size:14px;

}

p.c1{

color:red;

}

注意：

样式类名不要用数字开头（有的浏览器不认）。

标签中的class属性如果有多个，要用空格分隔。
通用选择器

*{

color:white;

}

1.2. 组合选择器

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

<div>
    <p>div里面的p</p>
    <p>div p
        <span>div p span</span>
    </p>
    <span>div里面的span</span>
</div>
在此例子中：
div里面的p，span都是div的后代
p是div的儿子，span是p的儿子，span是div的孙子
div是p的父亲，p是span的父亲

后代选择器

/* 后代选择器*/
div span{
    color: red;
}

儿子选择器

/*儿子选择器*/
div>span{color: green}

毗邻选择器

/*毗邻选择器*/
div+p{
    /*同级别紧挨着的下面的第一个标签*/
    color: aqua;
}

弟弟选择器

/*弟弟选择器*/
div~span{
    /*同级别下面所有的span*/
    color: chartreuse;
}

1.3. 属性选择器

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

含有某个属性

[username]{
               /*所有含有属性名是username的标签背景改为红色    */
           background-color:red ;
           }

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

[username='wss']{
               /*找到所有属性名是username并且属性值为wss的标签    */
            background-color: green;
           }

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

input[username='wss']{
            /*找到所有属性名是username并且属性值是wss的input标签*/
         background-color: antiquewhite;
        }

2. 分组与嵌套

1.分组

div, p, span { 查找div或者p或者span
color: red;
}

2.嵌套

d1, .c1, span { 查找id是d1或者class包含c1或者span
color: red;
}

3. 伪类选择器

a:link{
            /*访问之前的状态*/
            color: red;
        }
        a:hover{
            /*鼠标悬停的状态*/
            color: aqua;
        }
        a:active{
            /*鼠标点击不松开时的状态*/
            color: black;
        }
        a:visited{
            /*访问之后的状态*/
            color: antiquewhite;
        }
        input:focus{
            /*input框获取焦点(鼠标点了input框)*/
            background-color: red;
        }

4. 伪元素选择器

p:first-letter{
    /*第一个字体改变格式*/
    font-size: 48px;
    color: aqua;
}
p:before{
    /*在文本开头 同css添加内容，用户无法选中*/
    content: '你说的对';
    color: blue;
}
 p:after{
    /*在文本结尾 同css添加内容，用户无法选中*/
    content: '你说的对';
    color: blue;
}

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

5. 选择器优先级

d1, .c1, span { 查找id是d1或者class包含c1或者span
color: red;
}

选择器相同书写顺序不同就近原则：谁离标签近，听谁的
选择器不同行内（内联） > id选择器 > 类选择器 >标签选择器精确度越高优先级越高

6. CSS相关属性

6.1. 长宽设置

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: aqua;
            width: 300px;
            height: 100px;
        }
        span{
            /*行内标签无法设置长宽 就算写了，也不会生效*/
            background-color: green;
            width: 100px;
            height: 50px;
        }
    </style>
</head>
<body>
    <p>p</p>
    <span>span</span>
</body>

6.2. 字体属性

font-family：设置字体

font-size：设置字体大小

font-weight：字体粗细，宽度

color：设置颜色

text-decoration：设置字体装饰

text-indent：可以设置缩进

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            font-family: '华文宋体','微软雅黑'; /*第一个不生效，就用后面的字体*/
            font-size: 20px;
            text-indent: 32px;  /*缩进32px*/
            font-weight: bolder; /*bolder lighter 100~900 inherit 继承父元素的粗细值*/
          
            /*color: red;  !*直接写颜色英语*!*/
            /*color: #eeeeee;  !*颜色编号*!*/
            /*color: rgb(128,2,45);  !*三基色 数字 范围 0-255*!*/
            /*color: rgba(128,2,45,02);  !*第四个参数是颜色的透明度 范围是0-1*!*/
            /*text-decoration: underline;     !*下划线*!*/
            text-decoration: overline;  /*上划线*/
        }
        a {
            text-decoration: none;  /*无样式,主要给a标签去掉自带下划线*/
        }
    </style>
</head>
<body>
    <p>曹操了草草，草草了曹</p>
    <a href="https://www.mzitu.com">点我</a>

</body>
</html>

6.3. 文字属性

text-align:

center:设置居中

left：左对齐

right：右对齐

justify：两端对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            /*text-align: center;  !*居中显示*!*/
            /*text-align: left;  !*左对齐*!*/
            text-align: right;  /*右对齐*/
            text-align: justify;  /*两端对齐*/
        }
    </style>
</head>
<body>
    <p>你在叫什么啊。</p>
    <p>讲实话我不比你看的多。</p>
    <p>讲实话上海我不比你呆的时间长。</p>
</body>
</html>

6.4. 边框

边框属性

border-width 边框宽度
border-style 边框样式
border-color 边框颜色

#d1 {
  border-width: 2px;
  border-style: solid;
  border-color: red;
}

通常使用简写方式

#d1 {
  border: 2px solid red;
}

边框样式

除了可以统一设置边框外还可以单独为某一个边框设置样式，如下所示：

#d1 {
  border-top-style:dotted;
  border-top-color: red;
  border-right-style:solid;
  border-bottom-style:dotted;
  border-left-style:none;
}

border-radius

用这个属性能实现圆角边框的效果。

将border-radius设置为长或高的一半即可得到一个圆形。

具体实例，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            background-color: red;
            border-color: red;
        }
        #d1 {
            background-color: green;
            height: 400px;
            width: 400px;
            border-radius: 50%;  /*直接写50%即可 长宽一样就是圆，不一样就是椭圆*/
        }
    </style>
</head>
<body>
    <p>你真帅啊，雀食蟀啊，雀食蟀，你搞的真不赖</p>
    <div id="d1"></div>
</body>
</html>

6.5. display属性

用于控制HTML元素的显示效果

display:"none"与visibility:hidden的区别：

visibility：hidden：可以隐藏某个元素，但隐藏的元素仍需要占用与未隐藏之前一样的空间，也就是说，该元素虽然被隐藏了，但仍然会影响布局

display:none:可以隐藏某个元素，且隐藏的元素不会占用任何空间，也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失

6.6. CSS盒子模型

margin：用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的
padding：用于控制内容与边框之间的距离
border：围绕内边距和内容外的边框
content：盒子中的内容，显示文本和图像

margin外边距 1、 margin是设置盒子与盒子之间的位置关系 2、边框线以外的距离都可以设置margin 3、使用margin

  单一方向margin
            margin-left
            margin-right
            margin-top
            margin-bottom

    多个方向margin
        1个值   4个方向
        2个值   上下   左右
        3个值   上     左右    下
        4个值   上     右      下   左

    margin-left:
                正值  右移动
                负值  左移动

    margin-top
                正值   下移动
                负值   上移动

　　让块元素水平居中（内联元素不起作用）
  margin：0  auto

  margin-top:5px;
  margin-right:10px;
  margin-bottom:15px;
  margin-left:20px;

推荐使用简写：

margin: 5px 10px 15px 20px;

常见居中：

 #d1 {
  margin: 0 auto;
}

padding内边距填充1、控制盒子与内容之间的位置关系 2、边框线以内的距离都可以设置padding 3、内边框会撑大盒子，如果设置padding，让盒子不变形，加上多少padding，盒子的宽高就需要减去多少padding 4、padding的设置单一方向padding padding-left padding-right padding-top padding-bottom

多个方向padding 1个值 4个方向 2个值上下左右 3个值上左右下 4个值上右下左

5、padding不能设置负值

#d1 {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 15px;
  padding-left: 20px;
}

推荐使用简写：

#d1 {
  padding: 5px 10px 15px 20px;
}

6.7. float浮动

在CSS中，任何元素都可以浮动

浮动元素会生成一个块级框，而不论它本身是何种元素

关于浮动的两个特点：

浮动的框可以向左或向右移动，知道它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

三种取值

left：向左浮动

right：向右浮动

none：默认值，不浮动

浮动带来的影响

浮动带来的影响：父标签塌陷

通用的解决浮动带来的影响方法

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

.clearfix:after {
    content:' ';
    display:block;
    clear:both;
}
只要标签出现了塌陷的问题就给该塌陷的标签加一个clearfix属性即可

6.8. clear

clear属性规定元素的哪一侧不允许其他浮动元素。

注意：clear属性只会对自身起作用，而不会影响其他元素。

6.9. 清除浮动

清除浮动的副作用（父标签塌陷问题）

主要有三种方式：

固定高度
伪元素清除法
overflow:hidden

伪元素清除法（使用较多）：

clearfix:after {
  content: "";
  display: block;
  clear: both;
}

6.10. overflow溢出属性

overflow（水平和垂直均设置）
overflow-x（设置水平方向）
overflow-y（设置垂直方向）

圆形头像

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆形头像</title>
    <style>
        body{
            margin: 0;
            background-color: #4e4e4e;
        }
        #d1 {
            height: 400px;
            width: 400px;
            border-radius:50% ;
            border: 5px solid white;
            margin: 0 auto;
            overflow: hidden;
        }
        #d1>img {
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="d1">
        <img src="22.png" alt="">
    </div>

</body>
</html>

6.11. 定位

静态

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

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

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

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

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

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

'''
浮动
相对定位
绝对定位
固定定位
'''
# 不脱离文档流
浮动
# 脱离文档流
相对定位
绝对定位
固定定位

6.12. 模态框

z-index

#i2 {
  z-index: 999;
}

设置对象的层叠顺序。

z-index 值表示谁压着谁，数值大的压盖住数值小的，
只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
从父现象：父亲怂了，儿子再牛逼也没用

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

1.最底部是正常内容（z=0）离用户最远

2.黑色的透明层（z=90）

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;
            right: 0;
            top:0;
            bottom: 0;
            z-index: 90;
            background-color: rgba(0,0,0,0.5);

        }
        .modal{
            background-color: white;
            height: 200px;
            width: 400px    ;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left:-200px ;
            margin-top:-100px ;
            z-index: 100;
        }

    </style>
</head>
<body>
<div>这是最底层的页面内容</div>
<div class="cover"></div>
<div class="modal">
    <h1>登陆</h1>
    <p>usernmae<input type="text"></p>
    <p>password<input type="text"></p>
</div>
</body>
</html>

6.13. opacity

用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。

posted @ 2022-04-26 22:59 shangxin_bai 阅读(80) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 爬虫从入门到入狱之入门（2）

· Flask入门

· 前段知识之CSS

· 前端基础之CSS

· CSS层叠样式表

阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· .NET10 - 预览版1新功能体验（一）

公告

昵称： shangxin_bai
园龄： 3年2个月
粉丝： 2
关注： 5

+加关注

2025年3月

日

一

二

三

四

五

六

shangxin_bai