当前位置： 首页 > article >正文

CSS基本语法

article 2025/2/5 9:37:18

CSS是什么？

CSS是层叠样式表（Cascading Style Sheets）的缩写，是一种用于描述HTML或XML文档样式的计算机语言。CSS允许开发者通过定义样式规则来控制网页的外观，包括字体、颜色、布局、间距等。

CSS是一种标记语言，用于描述网页的样式和布局。它允许开发者将样式与内容分离，使得网页的样式可以独立于内容进行修改和维护。CSS通过选择器来选择要应用样式的元素，并使用属性和值来定义样式规则。

CSS三种引入方式

  1. 内联样式：在HTML元素的style属性中直接定义样式。这种方式适用于对单个元素进行样式设置，但不推荐用于大规模样式定义，因为它会使得HTML代码变得冗长和难以维护。

  2. 外部样式：将样式定义在一个单独的CSS文件中，然后在HTML文件中通过link标签引入该CSS文件。这种方式适用于大规模样式定义，可以将样式与内容分离，使得代码更加清晰和易于维护。

  3. 内部样式：在HTML文件的head标签中使用style标签定义样式。这种方式适用于对整个页面进行样式设置，但同样不推荐用于大规模样式定义，因为它会使得HTML代码变得冗长和难以维护。
    这三种引入方式的生效规则遵循就近原则：即离要设置的元素最近的样式生效

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初步入门</title>

<!-- 外部样式-->
    <link rel="stylesheet" href="css/style.css">

<!-- 内部样式-->
    <style>
        h1{
            color: blueviolet;
        }
    </style>

</head>
<body>


<!--行内样式-->
<h1 style="color: cyan">您看我像标题吗？</h1>

</body>
</html>

CSS选择器

CSS选择器用于选择要应用样式的HTML元素。选择器可以是元素名、类名、ID、属性等。以下是一些常用的CSS选择器：

  1. 元素选择器：根据元素名选择元素，例如h1、p、div等。

  2. 类选择器：根据类名选择元素，例如class=“my-class”。

  3. ID选择器：根据ID选择元素，例如id=“my-id”。

以上这三种选择器的优先级为：ID选择器 > 类选择器 > 元素选择器

示例使用

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


    <style>
        /*元素选择器*/
        h1{
            color: #c1e7e7;
        }

        /*类选择器*/
        .hello{
            color: blueviolet;
        }

        /*id选择器*/
        #id10086{
            color: #f10404;
        }


    </style>

</head>
<body>

<h1>选择器使用</h1>
<h1 class="hello">选择器使用</h1>
<h1 class="world">选择器使用</h1>
<h1 id="id10086">选择器使用</h1>
<h1>选择器使用</h1>
<h1>选择器使用</h1>

</body>
</html>

除此之外还有其他选择器，如伪类选择器、属性选择器、后代选择器、子元素选择器、兄弟选择器等。这些选择器可以根据不同的需求选择不同的元素，从而实现更精确的样式控制。

层次选择器

层次选择器用于选择元素之间的层次关系。以下是一些常用的层次选择器：

  1. 后代选择器：选择所有后代元素，例如div p。

  2. 子元素选择器：选择直接子元素，例如div>p。

  3. 兄弟选择器：选择紧接在某个元素后的兄弟元素，例如div+p。

  4. 相邻兄弟选择器：选择紧接在某个元素后的相邻兄弟元素，例如div~p。

示例使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>


    <style>
        /*后代选择器*/
        div p{
            color: #c1e7e7;
        }

        /*子元素选择器*/
        div>p{
            color: blueviolet;

        }

        /*兄弟选择器*/
        div+p{
            color: #00f146;
        }

        /*相邻兄弟选择器*/
        div~p{
            color: #d76cec;
        }


    </style>

</head>
<body>

<div>
    <p>层次选择器使用</p>
    <p>层次选择器使用</p>
    <p>层次选择器使用</p>
</div>
<p>层次选择器使用</p>
<p>层次选择器使用</p>
<p>层次选择器使用</p>

</body>
</html>

伪类选择器

伪类选择器用于选择元素的不同状态或位置。以下是一些常用的伪类选择器：

  1. :first-child：选择第一个子元素。

  2. :last-child：选择最后一个子元素。

  3. :nth-child(n)：选择第n个子元素。

  4. :nth-type(n)：选择第n个同类型的子元素。

  5. :hover：选择鼠标悬停的元素。

  6. :active：选择被激活的元素。

  7. :focus：选择获得焦点的元素。

  8. :visited：选择已访问的链接。

  9. :link：选择未访问的链接。

  10. :target：选择当前活动的目标元素。

示例使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>

    <style>
        /*选择第一个子元素*/
         div  p:first-child{
            color: #f15656;
        }

        /*选择最后一个子元素*/
        div p:last-child{
            color: #a0f495;
        }


        /*选择第n个子元素*/
        p:nth-child(2){
            color: #88a6f6;
        }

        /*选择第n个同类型的子元素*/
        p:nth-of-type(3){
            color: #09b2f8;
        }
        
        /*选择鼠标悬停的元素*/
        p:hover{
            color: #9e6efd;
        }


    </style>

</head>
<body>

<p>伪类选择器使用</p>
<p>伪类选择器使用</p>
<p>伪类选择器使用</p>

<div>
    <p>伪类选择器使用</p>
    <p>伪类选择器使用</p>
    <p>伪类选择器使用</p>
</div>

<p>伪类选择器使用</p>
<p>伪类选择器使用</p>
<p>伪类选择器使用</p>

</body>
</html>

属性选择器

属性选择器用于选择具有特定属性的元素。

示例使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>

    <style>
        /*选择等于指定属性的元素*/
        p[class="test 10086"]{
            color: #f15656;
        }

        /*选择以指定字符开头的元素*/
        p[class^="tests"]{
            color: #88a6f6;
        }

        /*选择以指定字符结尾的元素*/
        p[class$="test"]{
            color: #09b2f8;
        }

        /*选择包含指定字符的元素的元素*/
        p[class*="xxx"]{
            color: #9e6efd;
        }
    </style>

</head>
<body>

<p class="test 10086">属性选择器使用</p>
<p class="test 123456">属性选择器使用</p>
<p class="test 123456 test">属性选择器使用</p>
<p class="test xxx test ">属性选择器使用</p>
<p class="tests 123">属性选择器使用</p>

</body>
</html>

字体样式

字体样式用于设置文本的字体、大小、粗细等。

示例使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>字体样式</title>

  <style>
    /*设置字体*/
    p{
      font-family: 隶书;
    }

    /*设置字体大小*/
    p{
      font-size: 60px;
    }

    /*设置字体粗细*/
    p{
      font-weight: bold;
    }

    /*设置字体颜色*/
    p{
      color: #8fa2ef;
    }
  </style>

</head>
<body>

<p>字体样式使用</p>

</body>
</html>

字体复合属性

字体复合属性用于设置文本的字体、大小、粗细等。

示例使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>字体复合属性</title>

  <style>
    /*设置字体*/
    p{
      font: bolder 60px 楷书;
      color: #09b2f8;
    }
  </style>

</head>
<body>

<p>字体复合属性使用</p>

</body>
</html>

文本样式

文本样式用于设置文本的行高、对齐方式、缩进等。

示例使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>文本样式</title>
  <style>
    /*设置颜色*/
    p{
      color: #9e6efd;
    }
    /*设置行高*/
    p{
      line-height: 60px;
    }

    /*设置文本对齐方式*/
    p{
      text-align: center;
    }

    /*设置文本缩进*/
    p{
      text-indent: 60px;
    }

    /*文本中划线*/
    p{
      /*text-decoration: underline;*/
      text-decoration: line-through;
    }

    /*文字在图片右侧垂直中部*/
    img,span{
      vertical-align: middle;
    }
  </style>

</head>
<body>

<p>
  <img src="../../resources/images/vertin.jpg" alt="涩图">
  <span>文本样式使用</span>
</p>

</body>
</html>

超链接伪类

超链接伪类用于设置超链接的样式。

示例使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>超链接伪类</title>
  <style>
    /*设置超链接的样式*/
    a{
      font-size: 20px;
      color: #9e6efd;
      text-decoration: none;
      text-shadow: 2px 2px 2px #000000;
    }

    /*设置鼠标悬停时的样式*/
    a:hover{
      color: #ff0000;
      font-size: 60px;
    }

    /*设置鼠标点击时的样式*/
    a:active{
      color: #0000ff;
    }
    
  </style>

</head>
<body>

<p>
  <a href="https://www.baidu.com">百度</a>
</p>

</body>
</html>

背景

背景颜色

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>背景颜色</title>
  <style>
    /*设置背景颜色*/
    body{
      background-color: #ff0000;
    }
  </style>

</head>
<body>

</body>
</html>

背景图片

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>背景图片</title>
  <style>
    /*设置背景图片*/
    body{
      background-image: url("../../resources/images/vertin.jpg");
        /* 渐变色
    background-image: radial-gradient( circle 341px at 10% 20%,  rgba(132,94,194,1) 0%, rgba(196,243,251,1) 90% ); */

      background-repeat: no-repeat;
      background-size: cover;
    }

  </style>

</head>
<body>

</body>
</html>

盒子模型

盒子模型是CSS中一个重要的概念，它描述了网页中元素的大小和位置。
盒子模型包含：内容(content)、内边距(padding)、边框(border)、外边距(margin)四个部分。

内容

内容是盒子模型中最重要的部分，它包含了元素的实际内容，如文本、图片等。

内边距

内边距是内容与边框之间的空间，它用于分隔内容和边框。可以通过设置padding属性来调整内边距的大小。

边框

边框是盒子模型的外部边界，它用于分隔不同的元素。可以通过设置border属性来调整边框的样式、宽度和颜色。

外边距

外边距是盒子与其它元素之间的空间，它用于分隔不同的元素。可以通过设置margin属性来调整外边距的大小。

盒子模型示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>盒子模型</title>
  <style>
    .box{
      width: 200px;
      height: 200px;
      background-color: #ff0000;
      /* 内边距 */
      padding: 20px;
      /*边界：粗细 样式 颜色*/
      border: 10px solid #0000ff;
      /* 设置边界圆角 */
      border-radius: 10px;
      /*外边界定义：除此之外，两个参数表示上下、左右；四个参数表示上、右、下、左边距*/
      margin: 20px;
    
    }
  </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

display属性

display属性用于设置元素的显示方式，它有以下几个常用的值：

  1. block：将元素显示为块级元素，占据一整行。
  2. inline：将元素显示为行内元素，只占据内容所需的空间。
  3. inline-block：将元素显示为行内块级元素，既具有块级元素的特性，又具有行内元素的特性。
  4. none：将元素隐藏，不占据任何空间。

display示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>display属性</title>
  <style>
    .block{
      display: block;
      width: 200px;
      height: 200px;
      background-color: #ff0000;
    }
    .inline{
      display: inline;
      width: 200px;
      height: 200px;
      background-color: #00ff00;
    }
    .inline-block{
      display: inline-block;
      width: 200px;
      height: 200px;
      background-color: #0000ff;
    }
    .none{
      display: none;
      width: 200px;

      height: 200px;
      background-color: #ff00ff;
    }
  </style>
</head>
<body>
<div class="block">块级元素</div>
<span class="inline">行内元素</span>
<span class="inline-block">行内块级元素</span>
<span class="none">隐藏元素</span>
</body>
</html>

浮动float

float属性用于设置元素的浮动方式，它有以下几个常用的值：

  1. left：将元素向左浮动。
  2. right：将元素向右浮动。
  3. none：将元素不浮动，默认值。

float示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>float属性</title>
  <style>
    .box{
      width: 200px;
      height: 200px;
      background-color: #ff0000;
    }
    .box1{
      float: left;
      background-color: #00ff00;
    }
    .box2{
      float: right;
      background-color: #0000ff;
    }
  </style>
</head>
<body>
<div class="box box1">向左浮动</div>
<div class="box box2">向右浮动</div>
</body>
</html>

清除浮动clear

clear属性用于清除浮动，它有以下几个常用的值：

  1. left：清除左浮动。
  2. right：清除右浮动。
  3. both：清除左右浮动。
  4. none：不清除浮动，默认值。

clear示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>clear属性</title>
  <style>
    .box{
      width: 200px;
      height: 200px;
      background-color: #ff0000;
    }
    .box1{
    
      float: left;
      background-color: #00ff00;
    }
    .box2{
      float: right;
      background-color: #0000ff;
    }
    .clear{
      clear: both;
    }
  </style>
</head>
<body>
<div class="box box1">向左浮动</div>
<div class="box box2">向右浮动</div>
<div class="clear"></div>
</body>
</html>

解决父级元素高度塌陷问题

当父级元素没有设置高度时，如果子元素使用浮动，父级元素的高度会塌陷。为了解决这个问题，可以使用以下几种方法：

  1. 给父级元素设置高度：这种方法简单直接，但是不灵活，如果父级元素的内容高度不固定，这种方法就不适用了。
  2. 使用伪元素清除浮动：这种方法是通过在父级元素的最后添加一个伪元素，并设置其clear属性为both，从而清除浮动。这种方法比较常用，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>clear属性</title>
  <style>
    #box{
      background-color: #ff0000;
      border: 1px solid #000000;
    }
    #box:after{
      content: "";
      display: block;
      clear: both;
    }
    .box1{
      float: left;
      background-color: #00ff00;
      height: 100px;
    }
    .box2{
      float: left;
      /*clear: both;*/
      background-color: #0000ff;
      height: 100px;


    }
    .clear{
      clear: both;
    }
  </style>
</head>
<body>
<div id="box">

  <div class="box1">向左浮动</div>
  <div class="box2">向右浮动</div>
  <div class="box1">向左浮动</div>
  <div class="box2">向右浮动</div>
  <div class="box1">向左浮动</div>
  <div class="box2">向右浮动</div>
  <div class="box1">向左浮动</div>
  <div class="box2">向右浮动</div>

</div>
</body>
</html>
  1. 使用overflow属性：这种方法是通过给父级元素设置overflow属性为hidden或auto，从而清除浮动。这种方法比较常用，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>清除浮动</title>
  <style>
    .box{
      width: 200px;
      height: 200px;
      background-color: #ff0000;
      overflow: hidden;
    }
    .box1{
      float: left;
      background-color: #00ff00;
    }
    .box2{
      float: right;
      background-color: #0000ff;

    }
  </style>
</head>
<body>
<div class="box">
  <div class="box1">向左浮动</div>
  <div class="box2">向右浮动</div>
</div>
</body>
</html>
  1. 添加一个空的div元素，并设置clear属性为both，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>clear属性</title>
  <style>
    #box{
      background-color: #ff0000;
      border: 1px solid #000000;
    }
    .box1{
      float: left;
      background-color: #00ff00;
      height: 100px;
    }
    .box2{
      float: left;
      /*clear: both;*/
      background-color: #0000ff;
      height: 100px;


    }
    .clear{
      clear: both;
    }
  </style>
</head>
<body>
<div id="box">

  <div class="box1">向左浮动</div>
  <div class="box2">向右浮动</div>
  <div class="box1">向左浮动</div>
  <div class="box2">向右浮动</div>
  <div class="box1">向左浮动</div>
  <div class="box2">向右浮动</div>
  <div class="box1">向左浮动</div>
  <div class="box2">向右浮动</div>
  <div class="clear"></div>
</div>
</body>
</html>

定位position

相对定位relative

  1. 相对定位是元素在文档流中的原始位置进行定位，可以通过top、bottom、left、right属性来调整元素的位置。
  2. 相对定位不会脱离文档流，元素在文档流中的位置仍然保留。
  3. 相对定位的元素可以通过z-index属性来设置元素的堆叠顺序，z-index值越大，元素越靠前。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>相对定位</title>
  <style>
    .box{
      width: 200px;
      height: 200px;
      background-color: #ff0000;
      position: relative;
      top: 50px;
      left: 50px;
    }


  </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

绝对定位absolute

  1. 绝对定位是元素相对于最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于文档的根元素进行定位。
  2. 绝对定位的元素会脱离文档流，元素在文档流中的位置不再保留。
  3. 绝对定位的元素可以通过top、bottom、left、right属性来调整元素的位置。
  4. 绝对定位的元素可以通过z-index属性来设置元素的堆叠顺序，z-index值越大，元素越靠前。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>绝对定位</title>
  <style>
    .box{
      width: 200px;
      height: 200px;
      background-color: #ff0000;
      position: absolute;
      top: 50px;
      left: 50px;
    }


  </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

固定定位fixed

  1. 固定定位是元素相对于浏览器窗口进行定位，元素的位置不会随页面滚动而改变。
  2. 固定定位的元素会脱离文档流，元素在文档流中的位置不再保留。
  3. 固定定位的元素可以通过top、bottom、left、right属性来调整元素的位置。
  4. 固定定位的元素可以通过z-index属性来设置元素的堆叠顺序，z-index值越大，元素越靠前。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>固定定位</title>
  <style>
    .box{
      width: 200px;
      height: 200px;
      background-color: #ff0000;
      position: fixed;
      top: 50px;
      left: 50px;
    }


  </style>
</head>
<body>
<div class="box"></div>
</body>
</html>
opacity可以设置元素的透明度，取值范围为0到1，0表示完全透明，1表示完全不透明。

笔记总结于视频：https://www.bilibili.com/video/BV1YJ411a7dy?spm_id_from=333.788.videopod.episodes&vd_source=16bf0c507e4a78c3ca31a05dff1bee4e


http://www.kler.cn/a/532248.html

相关文章：

  • 昆仑万维Java开发面试题及参考答案
  • 多线程的创建方式一:继承Thread类
  • 【玩转 Postman 接口测试与开发2_016】第13章：在 Postman 中实现契约测试（Contract Testing）与 API 接口验证（上）
  • 蓝桥杯C语言组：暴力破解
  • 蓝桥备赛指南（6）
  • Kotlin 使用 Springboot 反射执行方法并自动传参
  • Redis 持久化原理分析和使用建议
  • 在LINUX上安装英伟达CUDA Toolkit
  • 数据结构---前缀和
  • 2025年2月4日（i2c和spi树莓派oled sdd1306）
  • 艾瑞泽8车机安装软件
  • Linux基本指令2
  • wx050基于django+vue+uniapp的傣族节日及民间故事推广小程序
  • JUC 三大辅助类: CountDownLatch CyclicBarrier Semaphore
  • Chromium132 编译指南 - Android 篇（七）：安装其他构建依赖项
  • 信息学奥赛一本通 2088：【22CSPJ普及组】逻辑表达式(expr) | 洛谷 P8815 [CSP-J 2022] 逻辑表达式
  • Java导出Excel简单工具类
  • 基于python去除知乎图片水印
  • Starrocks 对比 Clickhouse
  • 柔性数组与c/c++程序中内存区域的划分
  • 【办公类-99-01】20250201学具PDF打印会缩小一圈——解决办法：换一个PDF阅读器
  • TCP相关实验
  • 2025系统架构师---论数据访问层设计技术及其应用
  • 计算机网络——三种交换技术
  • 【Daily Code】leetcode热题100道
  • Day35-【13003】短文，什么是双端队列？栈和队列的互相模拟，以及解决队列模拟栈时出栈时间开销大的方法