【Web前端入门学习】—CSS

目录

  • CSS简介
    • CSS语法
    • CSS三种导入方式
    • CSS选择器
      • 元素选择器(标签选择器)
      • 类选择器
      • ID选择器
      • 通用选择器
      • 子元素选择器
      • 后代选择器(包含选择器)
      • 并集选择器(兄弟选择器)
      • 伪类选择器
      • 伪元素选择器
    • CSS常用属性
    • 盒子模型
    • 网页布局方式
      • 浮动
      • 定位

CSS简介

什么是CSS?
CSS全名是Cascading Style Sheets ,中文名:叠层样式表。用于定义网页样式和布局的样式表语言。通过CSS,你可以指定页面中各个元素的字体、大小、间距、边框、背景等样式从而实现更精确的页面设计。

CSS语法

CSS通常由选择器、属性和属性值构成,多个规则可以组合在一起,以便同时应用多个样式。

选择器{属性1:属性值;属性2:属性值;
}

1、选择器后面大括号的内容也叫做选择器的声明,选择器的声明中可以写无数条属性。
2、选择器选择要应用样式的HTML元素(标签),可以选择所有元素或特定元素。
3、声明的每一个属性都要以英文分号为结尾。
4、声明中的所有属性和值都是以键值对的形式出现的。

例:

p{color:blue;font-size:16px;}

p标签选择器,页面中的所有p标签都被选中,p标签的字体颜色都改为蓝色,p标签中的字体大小改为16像素。

CSS三种导入方式

1、内联样式
2、内部样式表
3、外部样式表

内联样式:
内联样式就是将CSS样式直接放到HTML元素标签中。
内部样式表:
在HTML文档的head标签中定义。
外部样式表:
将CSS样式单独放到一个CSS文件中,之后在head标签中使用另一个标签将它链接到HTML文档中。(这种方式允许在多个页面中重复使用相同的样式。
内部样式表例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS导入方式</title><style>p{color:blue;font-size:26px;}</style>
</head>
<body><p>这是一个应用了CSS样式的文本。</p>
</body>
</html>

在这里插入图片描述
内联样式例:

<body><h1 style="color:red">应用了内联样式的文本。</h1>
</body>

在这里插入图片描述
外部样式表例:
在同目录下创建CSS文件夹。
在这里插入图片描述
在CSS文件夹内创建style样式.css文件。
在这里插入图片描述
在style文件.css文件中写入样式。

注意:该选择器名须和改动的标签一致。

h3 {color:blueviolet;font-style: italic;
}

在这里插入图片描述
下面在CSS导入方式.html文件中将style文件.css文件导入。
在CSS导入方式.html文件的title下使用link。
在这里插入图片描述
herf内填入style文件.css文件的路径。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS导入方式</title><link rel="stylesheet" href="./CSS文件/style文件.css"><style>p{color:blue;font-size:26px;}</style>
</head>
<body><p>这是一个应用了CSS样式的文本。</p><h1 style="color:red">应用了内联样式的文本。</h1><h3>使用外部样式。</h3>
</body>
</html>

在这里插入图片描述
三种导入方式的优先级:内联样式>外部样式表>内部样式表

优先级有什么作用?
优先级高的会覆盖优先级低的样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS导入方式</title><link rel="stylesheet" href="./CSS文件/style文件.css"><style>p{color:blue;font-size:26px;}h3{color:chartreuse;font-size: larger;}</style>
</head>
<body><p>这是一个应用了CSS样式的文本。</p><h1 style="color:red">应用了内联样式的文本。</h1><h3>使用外部样式。</h3>
</body>
</html>

在这里插入图片描述

CSS选择器

元素选择器(标签选择器)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS选择器</title><style>h2{color: aqua;}</style>
</head>
<body><h2>元素选择器</h2>
</body>
</html>

在这里插入图片描述

类选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS选择器</title><style>.highlight{background-color: bisque;}</style>
</head>
<body><h3 class="highlight">类选择器</h3><h3>这是另一个类选择器</h3>
</body>
</html>

在这里插入图片描述

ID选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS选择器</title><style>#header{font-size: larger;}</style>
</head>
<body><h4 id="header">这是一个ID选择器</h4>
</body>
</html>

在这里插入图片描述

通用选择器

通用选择器表示对所有的元素进行选择。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS选择器</title><style>#header{font-size: larger;}* {/* 更改字体 */font-family: 'Courier New', Courier, monospace;}</style>
</head>
<body><h4 id="header">这是一个ID选择器</h4>
</body>
</html>

在这里插入图片描述

子元素选择器

子元素选择器:选择直接位于父元素内部的子元素。也就是嵌套,一个大标签嵌套一个小标签,大标签相对于小标签来讲就是父元素。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS选择器</title><style>*{font-weight: bolder;}.father>.son{color:blue;}</style>
</head>
<body><div class="father"><p class="son">这是一个子元素选择器</p></div>
</body>
</html>

这里的div标签相对于p标签来讲就是父元素。
这里要注意子元素选择器的语法形式
.父类>.子类{ }

在这里插入图片描述

后代选择器(包含选择器)

在这里插入图片描述

给father类的子元素添加了蓝色字体,但是为什么后代选择器颜色没有改变?
子代和后代的区别:后代是包含子代的,而子代不包含父代。如下:

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS选择器</title><style>*{font-weight: bolder;}/* 子元素选择器 */.father>.son{color:blue;}/* 后代选择器 */.father p{color: red;font-size:larger;}</style>
</head>
<body><div class="father"><p class="son">这是一个子元素选择器</p><div><p class="grandson">这是一个后代选择器</p></div></div>
</body>
</html>

在这里插入图片描述

并集选择器(兄弟选择器)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS选择器</title><style>/* 相邻兄弟选择器 */h3 + p{background-color: brown;}</style>
</head>
<body><p>这是一个p标签</p><h3>这是一个相邻兄弟选择器</h3><p>这是另一个p标签</p>
</body>
</html>

在这里插入图片描述

相邻元素选择器会选择在同一级别下的元素中的紧跟在选中元素之后的第一个p标签。

伪类选择器

伪类选择器选择HTML文档的元素的特定状态或者位置。伪类选择器以冒号开头,通常给用户交互文档结构或者其他条件下的元素应用样式。例如鼠标悬停在一个元素上,这是处于一个悬停状态,可以用伪类选择器来实现。
鼠标悬停示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS选择器</title><style>/* 伪类选择器 */#element:hover{/* 当鼠标放到这一行字上时,背景色会发生变化 。*/background-color: blueviolet;}</style>
</head>
<body><h3 id="element">这是一个伪类选择器示例</h3>
</body>
</html>

选中第一个子元素:first-child
选中第n个子元素:nth-child
链接状态:active

伪元素选择器

用于创建一个虚拟元素,并且样式化,而不是选择实际存在的元素。伪元素选择器通常以双冒号开头。

::after
::before

CSS常用属性

CSS参考手册: link
字体font属性:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS常用属性</title>
</head>
<body><h1 style="font:bolder 50px 'KaiTi';">这是一个font复合属性示例</h1>
</body>
</html>

在这里插入图片描述
line-height设置行高属性:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS常用属性</title>
</head>
<body><p style="line-height:40px">这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本</p>
</body>
</html>

在这里插入图片描述
width属性和height属性:

行内块元素:
1、水平方向上排列,但是可以设置宽度、高度、内外边距等。
2、行内块元素可以包含其他行内元素或块级元素。
行内元素:inline
行内块元素:inline-block
块元素:block

行内块元素和块元素可以设置宽和高,但是行内元素对于所设置的宽和高是无效的。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS常用属性</title><style>.block{background-color: aqua;width: 200px;height: 150px;}.inline{background-color: brown;width: 200px;height: 150px;}.inline-block{width: 100px;height: 150px;}</style>
</head>
<body><div class="block">这是一个块级元素</div><span class="inline">这是一个行内元素</span><!-- 行内块元素 --><img src="./logo.png.jpeg" alt="" class="inline-block">
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS常用属性</title><style>.block{background-color: aqua;width: 200px;height: 150px;}.inline{background-color: brown;width: 200px;height: 150px;}.inline-block{width: 100px;height: 150px;}</style>
</head>
<body><div class="block">这是一个块级元素</div><div class="block">这是一个块级元素</div><span class="inline">这是一个行内元素</span><!-- 行内块元素 --><img src="./logo.png.jpeg" alt="" class="inline-block"><img src="./logo.png.jpeg" alt="" class="inline-block"><img src="./logo.png.jpeg" alt="" class="inline-block">
</body>
</html>

在这里插入图片描述
行内元素、行内块元素和块元素互相转换:使用display属性

<body><div style="display: inline;background-color: red;">这是一个转换成行内元素div标签</div>
</body>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS常用属性</title><style>.div-inline{display:inline;background-color: aqua;}</style>
</head>
<body><div class="div-inline">这是一个转换成行内元素div标签</div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS常用属性</title><style>.span-inline-block{display:inline-block;background-color: aqua;}</style>
</head>
<body><span class="span-inline-block">这是一个转换成行内块元素的span标签。</span>
</body>
</html>

在这里插入图片描述

在这里display还可以设置成其他值。

盒子模型

盒子模型是CSS中一种常用布局的基本概念,描述了文档中的每个元素都可以被看成是一个矩形的盒子。这个盒子包含了内容(Content),内边距(Padding),文本边框(Border),外边距(Margin)。
在这里插入图片描述
盒子模型的相关属性:

属性名说明
内容Content盒子包含的实际内容,比如:文本,图片等
内边距Padding围绕在内容的内部,是内容与边框之间的空间。可以使用padding属性来设置。
边框Border边框围绕在内边距的外部,是盒子的边界,可以使用border属性来设置。
外边距Margin围绕在边框的外部,是盒子与其他元素之间的空间。可以使用Margin属性来设置。

以边框为例,其他3个属性与边框类似。

通过border属性可以设置边框的宽度,颜色样式,border属性是一个复合属性。

在这里插入图片描述

边框的样式可以是solid(实线),dotted(点线),dashed(虚线),double(双实线)

在这里插入图片描述

对于上面的border-的三个属性,依然是复合属性。通过对border-width来设置4个边框。
border-width属性设置边框的宽度可以给4个不同的属性值,4个不同的属性值根据上右下左的顺序(顺时针)依次匹配。
同理也可以给border-style添加4个不同的属性等等。

在这里插入图片描述

给单一的边框设置样式,例如border-left,也是一个复合属性,和其他的不同的是,border-left只对左边框属性进行更改,同理其他也类似。

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

网页布局方式

传统网页布局方式:

  • 标准流(普通流、文档流):网页按照元素的书写顺序依次排列。标准流由块元素和行内元素按照默认规定方式来排列,块级就是占一行,行内元素一行放好多个元素。
  • 浮动
  • 定位
  • Flexbox和Grid(可以实现复杂的自适应布局)

这几种布局方式主要是来摆盒子,将盒子摆放到相应的位置。

浮动

浮动相对于标准流来讲 可以改动元素的默认排列顺序,让网页更加灵活多变。浮动最典型应用:让多个块级元素在同一行内排列显示。
浮动属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块会另一个浮动框的边缘,这样即可以使得元素进行浮动。

浮动和行内块的区别:浮动的元素是相互贴靠在一起的不会有缝隙,如果父级宽度装不下这些盒子,多出来的盒子则另起一行,使用行内块元素,彼此之间是有空隙的。
浮动是相对于父元素进行浮动的,只会在父元素的内部进行移动。

选择器{
float: left/right/none;
}

浮动的三大特性:

  • 脱标:脱离标准流
  • 一行显示,顶部对齐
  • 具备行内块元素特性

在这里插入图片描述

给块级元素设置浮动属性。

在这里插入图片描述

左浮动占满一行后排在下一行,右浮动占满一行后排在下一行。

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

如果将父类的高度去掉,盒子出现浮动,此时父元素就出现了坍塌。

在这里插入图片描述

由于盒子出现了高度的坍塌,导致文本出现了两个浮动的盒子中间。这时就需要清除浮动。

在这里插入图片描述
如何清除浮动?
1、在浮动的父元素中添加一个属性overflow,属性值hidden。
在这里插入图片描述
2、使用为元素伪元素选择器。
在这里插入图片描述

定位

定位方式: 定位布局可以精准定位,但缺乏灵活性。

  • 相对定位:相对于元素在文档流中的正常位置进行定位。
  • 绝对定位:相对于其最近的已经定位的祖先元素进行定位,不占据文档流。
  • 固定定位:相对于浏览器窗口进行定位,不占据文档流,固定在屏幕上的位置,不随滚动而移动。

相对定位:
在这里插入图片描述

改变left right等属性后,相对位置发生变化,但是normal盒子并没有移动,相对定位的元素并不会脱离正常的文档流。

在这里插入图片描述
绝对定位:
在这里插入图片描述
在这里插入图片描述

在.box-absolute中加position: absolute; 后,这里绝对定位的元素就脱离了正常的文档流。4

固定定位:
固定定位是相对于浏览器窗口进行定位的,即使页面滚动,元素依然保持在窗口的相同位置。
在这里插入图片描述

此时无论怎样滚动鼠标,蓝色方块都会存在。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/728456.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

电脑工作电压是多少你要看看光驱电源上面标的输入电压范围

要确定电脑的工作电压&#xff0c;必须查看电源上标注的输入电压范围。 国内法规规定民用220V电压范围为10%-15%&#xff0c;也就是说通信220V电压正常范围为187--242V&#xff0c;供电设备一般为180V。 --250V电压范围&#xff0c;即正常情况下电脑电源电压不低于187V即可工作…

css相邻元素边框重合问题,解决方案

1、如下图所示&#xff0c;在给元素设置边框后&#xff0c;相邻元素会出现重合的问题 2、解决方案 给每个元素设置margin-top以及margin-left为负的边框 <div style"width: 300px;display: flex;flex-wrap: wrap;margin-top: 50px;"><div style"border…

【数据结构】二、线性表:5.静态链表的定义及其基本操作(定义、初始化、插入、查找、删除、遍历、长度、特点)

文章目录 5.静态链表5.1定义5.2初始化5.3插入5.4查找5.5删除5.6遍历5.7长度5.8特点 5.静态链表 静态链表是使用数组来模拟链表结构的一种数据结构&#xff0c;用数组的方式实现的链表。 它与传统链表的区别在于&#xff0c;静态链表使用数组保存节点&#xff0c;每个节点包括…

mac系统Idea登录codeium不跳转,报错faild download language server

问题描述 idea通过插件中心安装Codeium以后&#xff0c;登录无法正常跳转到登录页&#xff0c;等待一段时间&#xff0c;右下角图标报错**“faild download language server”** 解决方案 根据上面的报错&#xff0c;是没有成功下载“language_server_macos_x64“&#xff0…

CSAPP-程序的机器级表示

文章目录 概念扫盲思想理解经典好图安全事件 概念扫盲 1.汇编代码使用文本格式&#xff0c;相较于汇编的二进制可读性更好 2.程序内存包括&#xff1a;可执行的机器代码、操作系统需要的信息、管理过程调用和返回的运行时栈、用户分配的内存块 3.链接器为函数调用找到匹配的可…

P9889 [ICPC2018 Qingdao R] Plants vs. Zombies 题解 二分+贪心

[ICPC2018 Qingdao R] Plants vs. Zombies 传送门 题面翻译 给定 n n n 个植物和 m m m 的步数限制&#xff0c;每个植物在位置 1 … n 1\dots n 1…n 上。你初始时在位置 0 0 0&#xff0c;每次可以移动到相邻的位置上。 每次设你走完一步后到达的位置是 i i i&#…

数学建模【模糊综合评价分析】

一、模糊综合评价分析简介 提到模糊综合评价分析&#xff0c;就先得知道模糊数学。1965年美国控制论学家L.A.Zadeh发表的论文“Fuzzy sets”标志着模糊数学的诞生。 模糊数学又称Fuzzy数学&#xff0c;是研究和处理模糊性现象的一种数学理论和方法。模糊性数学发展的主流是在…

大语言模型系列-GPT-3

文章目录 前言一、GTP-3的改进二、GPT-3的表现总结 前言 《Language Models are Few-Shot Learners&#xff0c;2020》 前文提到GPT-2进一步提升了模型的zero shot能力&#xff0c;但是在一些任务中仍可能会“胡说”&#xff0c;GTP-3基于此提出了few shot&#xff0c;即预测…

7-22 试试手气(Python)

我们知道一个骰子有 6 个面&#xff0c;分别刻了 1 到 6 个点。下面给你 6 个骰子的初始状态&#xff0c;即它们朝上一面的点数&#xff0c;让你一把抓起摇出另一套结果。假设你摇骰子的手段特别精妙&#xff0c;每次摇出的结果都满足以下两个条件&#xff1a; 1、每个骰子摇出…

ZYNQ--AXI_DMA使用

文章目录 手册阅读典型连接图SG模式关闭时的寄存器地址SG模式开启时的寄存器地址BD设计PS端设计对于DMA寄存器的控制对DMA进行初始化 手册阅读 典型连接图 SG模式关闭时的寄存器地址 SG模式开启时的寄存器地址 关于各个bit的功能&#xff0c;具体看数据手册。 BD设计 通过PL侧…

sql高级

sql高级 SQL SELECT TOP 子句 SELECT TOP 子句用于规定要返回的记录的数目。 SELECT TOP 子句对于拥有数千条记录的大型表来说&#xff0c;是非常有用的。 **注意:**并非所有的数据库系统都支持 SELECT TOP 语句。 MySQL 支持 LIMIT 语句来选取指定的条数数据&#xff0c; O…

Qt + mqtt对接阿里云平台(一)

一、阿里云平台 官网&#xff1a;点击跳转 二、创建产品与设备 1、“公共实例” 2、“设备管理”->“产品”->“创建产品” 3、“产品名称”->“自定义品类”->"确认" 4、“前往添加” 5、“添加设备” 6、摄入DeviceName和备注名称 7、"前往查…

每周一算法:A*(A Star)算法

八数码难题 题目描述 在 3 3 3\times 3 33 的棋盘上&#xff0c;摆有八个棋子&#xff0c;每个棋子上标有 1 1 1 至 8 8 8 的某一数字。棋盘中留有一个空格&#xff0c;空格用 0 0 0 来表示。空格周围的棋子可以移到空格中。要求解的问题是&#xff1a;给出一种初始布局…

文心一言 VS 讯飞星火 VS chatgpt (210)-- 算法导论16.1 1题

一、根据递归式(16.2)为活动选择问题设计一个动态规划算法。算法应该按前文定义计算最大兼容活动集的大小 c[i,j]并生成最大集本身。假定输入的活动已按公式(16.1)排好序。比较你的算法和GREEDY-ACTIVITY-SELECTOR的运行时间。如何要写代码&#xff0c;请用go语言。 文心一言&…

excel统计分析——裂区设计

参考资料&#xff1a;生物统计学 裂区设计&#xff08;split-plot design&#xff09;是安排多因素试验的一种方法&#xff0c;裂区设计对因素的安排有主次之分&#xff0c;适用于安排对不同因素试验精度要求不一的试验。 裂区设计时&#xff0c;先按第一因素的处理数划分主区&…

独立站营销新纪元:AI与大数据塑造个性化体验的未来

随着全球互联网的深入发展和数字化转型的不断推进&#xff0c;作为品牌建设和市场营销的重要载体&#xff0c;独立站将迎来新的发展机遇。新技术的涌现&#xff0c;特别是人工智能和大数据等技术的广泛应用&#xff0c;为独立站带来了前所未有的机遇与挑战。本文Nox聚星将和大家…

ios xcode 15 PrivacyInfo.xcprivacy 隐私清单

1.需要升级mac os系统到13 兼容 xcode 15.1 2.升级mac os系统到14 兼容 xcode 15.3 3.选择 New File 4.直接搜索 privacy 能看到有个App Privacy 5.右击Add Row 7.直接选 Label Types 8.选中继续添加就能添加你的隐私清单了 苹果官网文档Describing data use in privacy man…

springboot247人事管理系统

人事管理系统的设计与实现 摘 要 传统信息的管理大部分依赖于管理人员的手工登记与管理&#xff0c;然而&#xff0c;随着近些年信息技术的迅猛发展&#xff0c;让许多比较老套的信息管理模式进行了更新迭代&#xff0c;问卷信息因为其管理内容繁杂&#xff0c;管理数量繁多导…

Redis基本使用和基础知识整理

Redis是做什么的&#xff1f; Redis是一个开源&#xff0c;内存存储的数据结构服务器&#xff0c;可用作数据库&#xff0c;高速缓存和消息队列。Redis将数据储存在内存当中 内存的特点 易失性&#xff08;在断电之后数据就没有了&#xff09;进行读取数据等IO操作的速度要比…

C语言进阶—表达式求值

隐式类型转换&#xff1a; C 的整型算术运算总是至少以缺省(默认)整型类型的精度来进行的。 为了获得这个精度&#xff0c;表达式中的字符和短整型操作数在使用之前被转换为普通整型&#xff0c;这种转换称为整型提升。 #include <stdio.h>int main() {char c 1;printf(…