【前端】CSS

关注

转载最新推荐文章于 2026-05-23 11:36:16 发布 173 阅读 AI 写同款· GEO 优化 ›

前端常用的CSS工具库常用的前端工具库，包含动画，过渡，以及常用CSS工具等等.... 阅读详情

闲来无事，学学前端CSS

转载自：[优快云-Sharry洗手溢CSS](https://blog.youkuaiyun.com/weixin_43779187/article/details/121146867) # 1. 前言学习CSS的基础：需要先学习HTML # 2. CSS样式 ## 2.1 背景

CSS是层叠样式表。我们在学习HTML的过程中不难发现，仅靠HTML的标签和属性，要做出比较美观的网页的，代码却可能非常冗杂，需要给每一个标签添加很多属性。而CSS的出现，就很好地解决了HTML设置样式属性麻烦的问题。

从功能上简单理解，HTML可看作是网页的骨架，CSS则对网页进行布局和美化。

2.2 CSS引入方式

即CSS添加的位置。

2.2.1 内联样式

内联样式的位置在具体标签内，通过style属性设置。

<div style="color: red">红色段落</div>

2.2.2 内部样式

内部样式的位置在html的head标签里，在style标签内设置。

<head>
    <meta charset="UTF-8">
    <title>三种引入方式</title>
    <style>
      #d1{
        color: green;
      }
    </style>
</head>
<body>
    <h1 id = "d1">内部样式，绿色标题</h1>
</body>

2.2.3 外部样式

外部样式即将各种样式写在一个CSS文件中，在head中引入。

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

2.3 选择器

CSS主要通过选择器，对所选择的元素进行样式设置。

2.3.1 元素选择器

通过标签名选择元素。

    h4{background: aqua}
    
    <h4>h4的背景变成了水色</h4>

2.3.2 id选择器

通过"#id"选择元素

    #p1{color: blue}
    
    <p id="p1">苹果</p>

2.3.3 类选择器

通过".类名"选择元素

    .c1{color: brown}
    
    <p class="c1">香蕉</p>

2.3.4 其他选择器

CSS还提供了很多选择器的表达方式，伪类选择器、子元素选择器等，举个小例子：

     /*伪类选择器*/

        /*未访问*/
        a:link{color: red;}
        /*访问过*/
        a:visited{color: pink;}
        /*悬停状态*/
        a:hover{color: green;}
        /*点击状态*/
        a:active{color: pink;}
        
        <a href="http://www.baidu.com">超链接2</a>

篇幅有限，其余表达式可以在需要用到的时候再去查询。

2.4 常见样式

选择器的学习是告诉我们CSS怎么用，那么常见样式则是具体的样式效果。

2.4.1 元素的尺寸与背景

即元素的大小和背景色等样式。

(1)宽、高尺寸与背景色

p#d1{
  width:30%;
  height:30%;
  background-color:red;
}
p#d2{
  width:180px;
  height:50px;
  background-color:blue;
}

<p id="d1"> 按比例设置尺寸,背景红色</p>

<p id="d2"> 按象素设置尺寸,背景蓝色</p>

其中，背景颜色的赋值可以是16进制、三原色比例、具体颜色的英文单词。

(2)图片做背景

     #img{
            background-image: url("apple.png");
            width: 473px;
            height: 532px;
        }
     <div id = "img">图片背景</div>

2.4.2 文本样式

文本样式常见的有大小、字体、颜色、粗细等待，这里举一个例子，在注释中说明作用。

    div{
        width: 200px;
        height: 50px;
        /*边框*/
        border: 1px solid red;
        text-align: center;
        /*行高*/
        line-height: 50px;
        /*文本修饰 overline上划线，underline下划线 line-through删除线*/
        text-decoration: overline;
        /*文本阴影：颜色 x偏移值，y偏移值， 浓度*/
        text-shadow: red -5px 5px 10px;
        /*字体大小*/
        font-size: 20px;
        /*字体加粗*/
        font-weight: bold;
        /*设置斜体*/
        font-style: italic;
        /*设置字体*/
        /*font-family: Serif;*/
        /*一起设置*/
        font: 30px cursive;
        
        
         <div>文本和字体测试</div>
      }

2.4.3 边框

元素的边框样式设置，通过border设置：

    <style>
.solid{
   border-style:solid;
}
.dotted{
   border-style:dotted;
}
.dashed{
   border-style:dashed;
}
.double{
   border-style:double;
}
.red{
   border-color:red;
}
.radio{
    width: 200px;
    height: 200px;
    border: 1px solid blue;
     /*设置圆角,值越大越圆*/
    border-radius: 100px;
}
</style>

<div> 默认无边框div </div>

<div class="solid"> 实线边框  </div><br/>
<div class="dotted"> 点状边框  </div> <br/>
<div class="dashed"> 虚线边框  </div> <br/>
<div class="double"> 双线边框  </div> <br/>
<div class="red"> 实线红色边框  </div><br/>
<div class="radio"> 边框圆角  </div><br/>

2.4.4 定位

(1)绝对定位

绝对定位将某个元素定位到某个特定位置，参照物可以是相对定位的上级元素。当没有上级元素时，上级元素为body。

    <style>
      #abs{
        position: absolute;
        left: 100px;
        top: 10px;
      }
    </style>
    
    <div id="abs">绝对定位段落</div>
    <p class="abs">绝对定位的p元素</p>

(2)相对定位

相对定位是指将某个元素定位到特定位置，而又不影响“它原本应该有的位置”。参照位置是它的原本的位置

    <style>
      .abs{
        position: relative;
        left: 100px;
        top: 10px;
      }
    </style>
    
    <div >普通段落1</div>
    <div id="abs">绝对定位段落</div>
    <div >普通段落2</div>
    <div >普通段落3</div>

(3)静态定位

默认的定位方式，无法实现层叠效果。
当不添加position，或者position：static时，即为静态定位。

默认的静态定位情况下，我们可以用盒子模型来控制元素的具体位置。

(4)固定定位

比如网页的顶部，很多不随滚动而发生相对窗口的位置变化，此时可用固定定位

#d1{
        width: 1000px;
        height: 100px;
        background-color: red;
        /*固定*/
        position: fixed;
        top: 0;
      }
      
      <div id = "d1"></div>

(5)浮动定位

浮动定位将向左或右浮动，当撞到其他元素时，停止。会像绝对定位一样离开原本的位置，其他元素补上。
浮动的效果很像该浮动的元素，移动过后和其他元素发生挤开、覆盖等结果

    #d1{
            width: 50px;
            height: 50px;
            background-color: red;
            float: right;
        }

        #d2{
            width: 50px;
            height: 50px;
            background-color: green;
            float: left;
        }

        #d3{
            width: 50px;
            height: 50px;
            background-color: blue;
            float: left;
        }
        
        <div id = "d1"></div>
        <div id = "d2"></div>
        <div id = "d3"></div>

(6)显示层级

对非静态定位的元素，显示层级可由z-index控制。即当发生覆盖的时候，谁的z-index值越大，该元素则会在上方

        #d1{
            width: 50px;
            height: 100px;
            background-color: red;
            position: absolute;
            z-index: 3;
        }

        #d2{
            width: 100px;
            height: 50px;
            background-color: blue;
            position: absolute;
            /*设置显示层级，值越大，显示越靠前*/
            z-index:2;
        }
        
    <div id="d1"></div>
    <div id="d2"></div>

2.4.5 display显示方式

元素的display显示方式主要有：隐藏、块级、内联、内联-块级。

(1)隐藏元素 display:none

原本这里有一个元素，但把它隐藏

    div.d{
      display:none;
    }
    
    <div class="d">隐藏了该元素</div>

(2)块级元素 display:block

块级元素会自动加上换行，可以加上宽高尺寸


.d{
  display:block;
  border: 1px solid lightgray;
   margin:10px;
   width:200px;
   height:100px;
}

<span class="d">将span变成块级元素</span>

(3)内联元素 display:inline

前后没有换行，无法加上尺寸，大小由内容决定

.d{
  display:inline;
  border: 1px solid lightgray;
   margin:10px;
   width:200px;
   height:100px;
}

<div class="d">将div变成内联元素</div>

(4)内联-块级元素 inline-block

元素将同处于同一行，并且能指定大小，将内联元素和块级元素的特点都整合在一起了

.d{
  display:inline-block;
  border: 1px solid lightgray;
   margin:10px;
   width:200px;
   height:100px;
}

<div class="d">将div变成内联-块级元素1</div>
<div class="d">将div变成内联-块级元素2</div>
<div class="d">将div变成内联-块级元素3</div>
<div class="d">将div变成内联-块级元素4</div>

2.4.6 布局相关

(1)居中

<div align="center">
通过设置属性align="center" 居中的内容
</div>

(2)左侧固定

.left{
   width:200px;
   float:left;
   background-color:pink
  }
<div class="left">左边固定宽度</div>

2.5 盒子模型

盒子模型用来控制元素的显示效果，包括：元素内容
content + 外边距margin + 边框 border + 内边距 padding
元素内容content:控制元素的显示尺寸
外边距margin:控制元素的显示位置
边框border：控制边框效果
内边距：padding:控制元素内容的位置

2.5.1 外边距margin

作用：控制元素显示位置

赋值方式
margin-left/right/top/bottom : 单独某个方向赋值
margin:10px:四个方向赋值
margin:10px 20px 上下10，左右20
margin:10px 20px 30px 40 px 上右下左，顺时针赋值

行内元素上下外边距无效
上下相邻彼此添加外边距，取最大值
左右相邻彼此添加外边距，两者相加

粘连问题：
给上级元素添加overflow：hidden解决

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #d1{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      /*默认左上为基准*/
      /*margin-left: 100px;*/
      /*margin-top: 100px;*/
      /*margin-bottom: 100px;*/
      /*上下相邻，彼此添加外边距，取最大值*/
      /*  margin-bottom: 50px;*/

    }

    #d2{
        width: 100px;
        height: 100px;
        border: 1px solid red;
        /*加入上边距，看效果*/
        margin-top: 100px;
    }

    #s1{
        /*行内元素上下边距无效*/
        margin-bottom: 100px;
        margin-right: 100px;
    }

    #s2{
        /*左右相邻，彼此添加外边距，两者相加*/
        margin-left: 100px;
    }

    #big{
        width: 200px;
        height: 200px;
        background-color: green;
        /*解决粘连问题*/
        overflow: hidden;
    }

    #big>div{
        width: 50px;
        height: 50px;
        background-color: red;
        margin-left: 50px;
        /*元素上边距与上级元素挨在一起时，需要用overflow解决粘连问题*/
        margin-top: 50px;
    }

    #border_div{
        width: 200px;
        height: 200px;
        border: 1px solid blue;
        /*设置圆角,值越大越圆*/
        border-radius: 100px;
    }

  </style>
</head>
<body>

<div id = "d1">外边距测试</div>

<div id = "d2"> div2</div>

<span id = "s1">span1</span>
<span id = "s2">span2</span>

<div id = "big">
    <div></div>
</div>

<div id = "border_div"></div>

</body>
</html>

2.5.2 内边距hidden

作用：控制元素内容的位置
赋值方式：和外边距类似

padding-left/right/top/bottom : 10px; 单独某个方向赋值
padding: 10 px; 四个方向赋值
padding: 10px 20px; 上下左右赋值
padding: 10px 20px 30px 40 px; 顺时针循环赋值

给元素添加内边距会影响元素的显示宽高

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
      div{
        width: 150px;
        height: 150px;
        border:1px solid red;

        /*内边距会影响元素的宽高*/
        padding-top: 50px;
        padding-left: 50px;

      }

    </style>
</head>
<body>
  <div>内边距</div>

</body>
</html>

2.6 优先级

到目前为止，我们已经知道了CSS的添加方式、常见样式，那么当用多种方式表达不同的样式，对象又是同一个元素时，优先级为：
作用范围越小，优先级越大。如果要越过优先级，加！important，举个例子：

    #d1{
            color: red;
        }
    div{
            /*提升优先级: !important*/
            color: green !important;        
        }
        
    <div id = "d1" style="color: blue"> 
    测试优先级
</div>