2025年CSS(网页外观、布局设计)

大家好，我是讯享网，很高兴认识大家。

概述

🐳CSS是Cascading Style Sheets（级联样式）

🐳 CSS与HTML的关系：HTML是网页内容； CSS定义页面的样式

2.基本语法

🐳行内样式表：开发用的少

🐳内嵌样式表：将css代码写在head头部标签中，并用styli标签定义

🐳外部样式表：将所有样式放在一或多个.CSS外部样式表文件中，通过link标签将其链接到HTML文档中

 <!--指CSS文件目录 文件名：index.css--> /* css中只有属性 */ p{color: aqua;font-size: 30px;}

讯享网

讯享网<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    
        <!-- 导入外部的css文件   外部样式表 -->
        <link href="css/index.css" rel="stylesheet" />

        <!-- 此标签内，用来写css样式表 
            内嵌样式表-->
        <style type="text/css">
            p{color: aqua;font-size: 30px;}
        </style>

    </head>
    <body>
        <p>
             CSS是Cascading Style Sheets（级联样式表）。
        </p>
        
        <!--行内样式表 开发用的少-->
         <p 
             style="color: aqua;font-size: 20px; font-weight: 100;">
        </p>
    </body>
</html>

3.选择器

🐳id选择器：通过标签的id属性选择唯一的一个标签

🐳类选择器：通过标签的class属性选择一组标签

🐳标签选择器：通过标签名进行匹配

🐳通配选择器：选页面中所有的标签

🐳分配器有优先级：

👻 由高到低： id选择器>类选择器>标签选择器>通配选择器

👻 匹配越多的选择器，优先级越低

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        /* 标签选择器 */
        
        /* p{
            color: #00FFFF;font-size: 30px;
        } */
        
        /* 类选择器 */
        .p1{color: aquamarine;}
        .p2{color: red;}
        .p3{color: gray;}
        
        /* 选择器组合 */
        .p1,.p2{color: yellow;}
        /* .h1{color: #FF0000;} */
        
        /* id选择器 */
        #h1{color: aquamarine;}
      
        </style>
    </head>
    <body>
        <h1 id="h1"> 标题</h1>
        <!-- <h1 class="h1"> 标题</h1> -->
        
        <p class="p1">
             CSS是Cascading Style Sheets（级联样式表）。
        </p>
        <p class="p2">
             CSS是Cascading Style Sheets（级联样式表）。
        </p>
        <p class="p3">
             CSS是Cascading Style Sheets（级联样式表）。
        </p>
    </body>
</html>

4.文本

讯享网基本属性 color： 字体颜色 font-size： 字体大小 font-family： 字体 text-align： 文本对齐 text-decoration:line-through： 定义穿过文本下的一条线 text-decoration:underline： 定义文本下的一条线 text-decoration:none： 定义标准的文本 font-style: italic 斜体文本 font-weight: 字体粗细 line-height: 设置行高 letter-spacing: 可以指定字符间距 text-indent: 用来设置首行缩进

5.背景

基本属性 background-color 背景颜色 background-image 背景图片 background-repeat 背景重复 background-size 背景尺寸 background- position 背景位置

6.列表

列表属性可以放置、改变列表项标志，或者将图像作为列表项标志

讯享网<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        /*后代选择器  父级 子级*/
            .u1 li{
                color: #7FFFD4;
                text-align: center;
                list-style: url(./img/java.png) inside none;
                
            }
        </style>
    </head>
    <body>
        <ul class="u1">
            <li>CSS是Cascading Style Sheets（级联样式表）。</li>
            <li>CSS是Cascading Style Sheets（级联样式表）。</li>
        </ul>
        
        <ul class="u2">
            <li>CSS是Cascading Style Sheets（级联样式表）。</li>
            <li>CSS是Cascading Style Sheets（级联样式表）。</li>
        </ul>
    </body>
</html>

7.伪类

表示标签的特殊状态。

语法：

：hover 当鼠标移入到标签上时，切换到此样式表

：active 当鼠标点击标签时，切换到此样式表：focus 当鼠标聚焦到可输入的标签时，切换到此样式表

8.透明度

用opacity定义透明效果，

规定不透明度：0.0(完全透明)——1.0(完全不透明)

9.标签分类

😈块级标签：独占一行

默认的宽与浏览器/父标签一致

若无内容，默认高为0

可设置宽高

主要用来布局网页；

😈行级标签：占内容大小

讯享网

不能设置宽高

用来包裹文字内容；

行级块：可设置宽高，不占一行

😈行级块标签：可设置宽高，不占一行

🔍一般情况下使用块级标签包含行级标签，不使用行级标签包含块标签

a可以包含任何标签，除去a本身； p标签不可以包含任何的块标签

10.盒子模型

可分为四部分：

内容区(content)

–内边距(padding)是标签内容区与边框以内的空间。 ●内边距会影响整个盒子的大小

–边框(border)

–外边距(mar gin)一个标签距离另一标签的距离，不影响标签实际大小，但影响标签实际位置

11.浮动

😈浮动使标签脱离原文档流，漂浮起来

😈使用float属性。给浮动标签外添加div，此div未浮动，仍在原始的文档流中（二维平面）

😈 浮动问题：浮动后的标签不占原来的文档流空间，未将父标签撑开，称为高度塌陷，会影响后面标签的布局

😈解决办法：

1.为父级标签设置高度，但太麻烦

2.清除浮动影响，<div style="clear: left;"></div>

清除后会将父级标签自动撑开和浮动标签高度一致

12.定位

🔍相对定位(relative)

相对于其起点移动，移动后原来的位置还被占用通过position:relative; 开启相对定位特点：

1.开启标签的相对定位后，不设置偏移量时，标签不会发生任何变化 2.相对定位是相对于标签在文档流中原来的位置进行定位 3.相对定位的标签不会脱离文档流

🔍绝对定位

通过position:absolute; 开启相对定位

开启了标签的绝对定位，标签会漂浮起来（脱离原文档流）；

绝对定位是相对于离它最近的，开启了定位的父标签及浏览器的窗口（不建议）进行定位；

故，一般开启标签的绝对定位都会先开启其父级标签的相对定位；

绝对定位会改变标签的性质，行级标签变为块级标签