【web前端开发】CSS层叠样式介绍

已于 2022-09-21 23:48:18 修改
阅读量653 收藏
点赞数
文章标签： html
于 2022-09-16 09:10:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65431212/article/details/126867146
版权
本文详细介绍了CSS样式的三种类型：内部样式、内联样式和外部样式，以及它们的应用范围。内容涵盖字体系列、字体大小、字体颜色、文本对齐等文本属性，还涉及了选择器的使用，如标签选择器、伪类选择器、邻近选择器和兄弟选择器。此外，文章讨论了盒子模型、定位属性以及背景属性，为理解和实践CSS提供了全面的基础知识。
摘要由CSDN通过智能技术生成

文章目录

css样式

分为三种：内部样式、内联样式、外部样式

内部样式 < style >

  • 位置:在本文件内，标签外
  • 代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    p{
        color:red;
        text-align: center;
    }
</style>
<body>
    <p>样式</p>
</body>
</html>
  • 效果：在这里插入图片描述

内联样式 < style >

  • 位置：在本文本内，标签内。
  • 代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p style=" color:blue">样式</p>
</body>
</html>
  • 效果：
    在这里插入图片描述

外部样式 < link >

  • 位置：在本文件外，标签外。
  • 代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <!-- <link rel="stylesheet" href="1.css"> -->
    <link rel="stylesheet" href="1.css">
<body>
    <p>css 样式</p>
</body>
</html>

p{
    color: rebeccapurple;
    text-align: center;
}
  • 效果：

在这里插入图片描述

应用范围

样式应用：

  • 简单样式：内联样式、内部样式
  • 复杂样式：外部样式

css文本属性

1.font-family 字体系列

在这里插入图片描述

2.font-size 字体大小 & em/px

  • 作用：设置字体大小
  • 单位：em、px
  • 默认：1em = 16px
  • 修改默认值：

原先：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <!-- <link rel="stylesheet" href="1.css"> -->
    <style>
        span{
            font-size: 2em;
        }
    </style>
<body>
    <p>css 样式</p>
    <span>font-size 文字</span>
</body>
</html>

在这里插入图片描述
修改：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <!-- <link rel="stylesheet" href="1.css"> -->
    <style>
        *{
            font-size: 10px;
        }
        span{
            font-size: 2em;
        }
    </style>
<body>
    <p>css 样式</p>
    <span>font-size 文字</span>
</body>
</html>

在这里插入图片描述

3.font-weight 字体粗细

请添加图片描述

4.font-style字体样式

请添加图片描述

5.字体复合样式

请添加图片描述

请添加图片描述

6.color 字体颜色

请添加图片描述

7.text-align 对齐文本

在这里插入图片描述

8.text-decoration 装饰文本

请添加图片描述

9.text-indent 文本缩进

请添加图片描述

10.line-height 行间距

请添加图片描述

各种选择器

标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    ul li{ 
        color: red;
    }
    .box{
        color:blue;
    }
    #username{
        color:yellow;
    }
</style>
<body>
    <ul>
        <li>语文</li>
        <li class="box">英语</li>
        <li class="box" id="username">数学</li>
    </ul>
</body>
</html>
  • 调用各种类型：
  1. ul li调用对应的无序标签
  2. ‘ . ‘调用对应的class
  3. ’ # ‘调用对应的id
  • 标签优先级：id选择器>class选择器>标签选择器

在这里插入图片描述

邻近选择器

作用：只选择邻近的一个
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box1+.box{
        color: red;
    }
</style>
<body>
    <ul>
        <li class="box1">语文</li>
        <li class="box">英语</li>
        <li class="box" id="username">数学</li>
    </ul>
</body>
</html>

.box1+.box：

相对于box1的第一个box类型

效果：
在这里插入图片描述

兄弟选择器

作用：选择所有符合条件的
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box1~.box{
        color: red;
    }
</style>
<body>
    <ul>
        <li class="box1">语文</li>
        <li class="box">英语</li>
        <li class="box" id="username">数学</li>
    </ul>
</body>
</html>

效果：
在这里插入图片描述

伪类选择器

功能：
在这里插入图片描述
应用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div :first-of-type{
        color:red;
    }
</style>
<body>
    <div>
        <p>数学</p>
        <p>英语</p>
        <p>语文</p>
        <p>物理</p>
    </div>
</body>
</html>

在这里插入图片描述
nth-of-type()注意点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p:nth-of-type(3){
            color:red;
        }
    </style>
</head>

<body>
    <div>
        <p>数学</p>
        <p>英语</p>
        <p>语文</p>
        <p>物理</p>
    </div>
</body>
</html>

nth-of-type()前面应该改为p盒子,否则无效

盒子模型

概念

在这里插入图片描述

分类

在这里插入图片描述
在这里插入图片描述

常见属性

1.padding

在这里插入图片描述

2.margin

在这里插入图片描述

3.boder

在这里插入图片描述

position定位

补充知识-文档流

在这里插入图片描述

position属性

1.static–静态定位

需要使用top、right、left、bottem来进行定位

2.raletive–相对定位

根据自己的左上角顶点进行定位的

3.absolute–绝对定位

根据父元素左上角的顶点来进行定位的

  • 注意：当子元素使用绝对定位时，父元素最好使用相对定位
    （因为网页的最顶端还有一个空隙）

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .static{
        position: static;
        width:200px;
        height:200px;
        border:10px solid #000;
    }

    .relative{
        position: relative;
        width:200px;
        height:200px;
        border:10px solid #000;
    }
    .absolute{
        position: absolute;
        width:200px;
        height:200px;
        border:10px solid #000;
    }

    .item{
        position: absolute;
        top:150px;
        width:50px;
        height:50px;
        background-color: blue;
    }
</style>
<body>
    <div class="static">
        <div class="item"></div>
    </div>

    <div class="relative">
        <div class="item"></div>
    </div>

    <div class="absolute">
        <div class="item"></div>
    </div>
</body>
</html>

应用：
在这里插入图片描述

效果：

4.fixed定位

把某个元素固定在一个位置，并且该元素的位置不会随着网页滑动而变化

5.sticky定位

在这里插入图片描述

6.相对位置和绝对位置–居中设置

相对位置
在这里插入图片描述
绝对位置
在这里插入图片描述

背景属性

1.背景颜色

请添加图片描述

2.背景图片

请添加图片描述

3.背景平铺

请添加图片描述

4.背景图片位置

请添加图片描述
请添加图片描述

使用iconfont插入图标

  1. 进入百度搜索“iconfont"
    在这里插入图片描述
  2. 注册
  3. 搜索想要的图标
    在这里插入图片描述
  4. 加入购物车后，选择下载代码
  5. 打开文件夹，点击以下文件，进入图标详解网址
    在这里插入图片描述
    在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>my_incofont</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css"/>
</head>
<!-- <style>
    div{
        display: inline-block;
    }
</style> -->
<body>
    <span class="iconfont icon-huidaodingbu "></span>
</body>
</html>

效果:
在这里插入图片描述

汪汪想变强
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css层叠样式总结
cj1555640的博客
07-28 1750
java学习第四天:css知识点总结
css的层叠样式
D2961953033的博客
11-26 4247
1 css的层叠样式有四种： 行内样式 内嵌样式 外链样式 导入样式 1.1行内样式 行内样式又叫做标签样式，它是在标签里面加上style属性。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css...
css层叠样式
base_boy的博客
02-07 281
CSS: 四大核心： 一、选择器 二、盒子模型（实现网页布局） 三、浮动四 四、定位 了解css： 概念:层叠样式表（级联样式表）（Cascading Style s heet） 作用：美化网页（通过css的方式给HTML标签设置样式） css语法： 选择器 { 属性： 值; 属性 ： 值； } 什么是选择器? 用来选中标签 属性：给标签设置样...
CSS（层叠样式表）
小小Bug编写员
03-23 1634
CSS非常灵活，可以嵌入HTML文档中（写在head文件中），也可以是一个单独的外部文件，如果是独立文件，必须以.css为后缀名。 width：100px（像素）--宽 height：100（像素）--高 background-color--背景色 想让文字在垂直方向上居中，设置“行高＝元素高度” 一、基础选择器 1.标签选择器 HTML标签名称作为选择器，按标签名称分类，选择页面中某一类标签 语法： 标签名{ 属性1：属性值1; ...
Web前端开发css基础样式总结(推荐)
09-24
在Web前端开发中，CSS（层叠样式表）是用于控制网页元素呈现的重要技术。本文将对CSS的基础样式进行总结，帮助初学者更好地理解和运用。 首先，我们要了解颜色的表示方法。颜色可以用颜色名称（如red）、16进制代码...
WEB前端CSS层叠样式表思维导图（Xmind）
06-23
本人网页制作课程所用的思维导图，包含了所有web前端技术的概念和知识点，比较适合学生、初学者建立一个初步的思维模型，另外本人还有html标语言的思维导图，欢迎大家下载查看。
头歌教学实践平台 Web前端开发基础 CSS-表格样式
最新发布
01-20
在Web前端开发中，CSS（层叠样式表）是用于美化HTML或XML文档的重要工具，包括网页中的表格。本教程将深入探讨如何使用CSS来控制和美化HTML表格的样式。"头歌教学实践平台"提供了这个实践课程，帮助学习者掌握CSS在...
头歌教学实践平台 Web前端开发基础 CSS-背景样式
01-20
在Web前端开发中，CSS（层叠样式表）是用于美化HTML或XML文档的重要工具，它赋予了网页丰富的视觉效果。本教程将聚焦于CSS中的背景样式，这是创建吸引人且具有专业外观网页的关键元素。在"头歌教学实践平台"上，这个...
css-2.0.rar_web前端开发
09-23
**CSS（层叠样式表）2.0：Web前端开发的核心技术** CSS（Cascading Style Sheets）2.0是Web页面布局与样式的基石，是前端开发人员必须掌握的关键技能之一。它允许开发者分离内容（HTML或XML）与表现（样式），从而...
CSS层叠样式总结
果然的博客
07-07 377
CSS 层叠样式表 如何在页面中引入CSS 行内式 标签的style属性，不推荐使用，少量的样式可以这样写。结构和样式分开 内嵌式 在 head 标签内部放置 style 标签。与行内式差不多，但是这里注意⚠️是不支持嵌套的。 <head> <style> 选择器:{ k:v; k:v; } </style> </head> 外链式 把CSS单独放在一个或者多个文件中 引入的语法： <head>
CSS--层叠样式表
weixin_45398401的博客
08-23 1177
注：浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。（因为浮动之后会脱标）
CSS层叠样式表
Han_Zhou_Z的博客
10-08 649
一、CSS层叠样式表（cascading style sheet） 1、CSS的主要作用 （1）可以美化页面的外观 （2）可以统一页面的风格 （3）可以实现内容和样式的分析，更适合团队的开发 2、CSS的使用方法 （1）行内嵌入式 给标签添加style属性，用来设置样式 <p style="color: aqua; font-size: 20px;">CSS展示</p> 但这种方法只对目前嵌入的标签有效 （2）页面嵌入式 在页面中使用<style&gt.
CSS - 层叠样式表
weixin_47790139的博客
12-13 387
文章目录前言CSS1.1、概述1.2、用法1.3、创建样式1.3.1、外部样式表（外联式）1.3.2、内部样式表（内联式）1.3.3、内联样式（行内式）第二章 CSS选择器2.1、标签名选择器2.2、class选择器2.3、id选择器2.4、分组选择器2.5、属性选择器第三章 CSS常见样式3.1、背景样式3.2、文本样式3.3、字体样式3.4、链接样式3.5、列表样式3.6、表格样式3.7、轮廓样式第四章 CSS盒子模型4.1、概述4.2、内边距4.3、边框4.4、外边距 前言 本人发布的一系列资料都是学
CSS 层叠样式表
weixin_52223392的博客
01-09 1179
所有HTML元素都可以视为方框，在CSS中，在谈论设计和布局时，会使用术语“盒模型”或“框模型”CSS框模型实质上是一个包围每个HTML元素的况，包括：外边距、边框、内边距以及内容内容：框的内容，显示文本和图像内边距：清除内容周围的区域，内边距是透明的边框：围绕内边距和内容的边框外边距：清除边界外的区域，外边距是透明的宽度：内容区域的宽度高度：内容区域的高度元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。
css叠层
m0_73301498的博客
10-08 130
1、css层叠性 概念：当样式声明发生冲突时，用户代理需要确定样式声明的最终值，既要考虑样式的来源又要考虑样式的特殊声明又要考虑优先级、以及先后顺序 ，这个过程就叫做层叠 当一个标签被相同的选择器 选择到的时候，相同的样式会发生层叠,遵循就近原则。 不同的样式不会有影响 总结 css的层叠性是通过继承性 和 优先级实现 样式声明不冲突 （同时应用于元素） 样式声明冲突 同级选择器，css样式中最后定义的声明应用于元素（就近原则） 不同级选择器，由选择器优先级决定
CSS层叠式样式表
小白鼠的成长记
12-13 733
cascading stylesheet 基本语法规则： 选择器以及一条或者多条声明；选择器就是需要改变样式的HTML元素，每条声明有一个属性和一个值组成； 如果只大于一个单词，需要添加引号； 子元素集成最高级元素所拥有的属性；
web前端开发css
10-20
Web前端开发CSS是指使用CSS（层叠样式表）来设计和开发网站的外观和样式。CSS可以控制网站的布局、颜色、字体、背景等方面，使网站更加美观、易于阅读和导航。在Web前端开发中，CSS通常与HTML和JavaScript一起使用，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值