CSS基础知识 ----- 学习
介绍
CSS（Cascading Style Sheets）是一种用于定义网页样式和布局的样式表语言。
它与 HTML 一起用于构建 Web 页面，HTML 负责定义页面的结构和内容，而 CSS 则负责控制页面的外观和样式(各种元素的字体,颜色,大小,间距,边距)。
语法
CSS（Cascading Style Sheets）的语法用于定义网页的样式和外观。CSS 规则通常由选择器、属性和属性值组成，多个规则可以组合在一起，以便同时应用多个样式，以下是 CSS 的基本语法：
选择器 {
属性1: 属性值1;
属性2: 属性值2;
}
-
声明的每一行属性，都需要以英文分号结尾；
-
声明中的所有属性和值都是以键值对这种形式出现的；
-
选择器的声明中可以写无数条属性
CSS 的语法就是选择一个元素，为它指定属性，然后为这些属性指定值。你可以使用不同的选择器来定位不同的元素，然后定义它们的样式以实现所需的外观。 CSS 样式表通常包含多个规则，这些规则会按照特定的优先级和级联规则（Cascading）应用到页面上，以确保一致的外观。
导入方式
在 CSS 中，你可以使用不同的方式来导入样式表，以便将样式应用到 HTML 文档。下面是三种常见的 CSS 导入方式：
-
内联样式（Inline Styles）：内联样式是将 CSS 样式直接嵌入到 HTML 元素中的一种方式。你可以在 HTML 标签的 style 属性中定义样式规则。这些样式仅适用于特定元素，优先级较高。
<h1 style="color: blue; font-size: 30px;">这是一段内联样式文本。</h1>
-
内部样式表（Internal Stylesheet）：内部样式表是将 CSS 样式放置在 HTML 文档的<head>部分的<style>标签内。这些样式将应用于整个文档，但仍具有较高的优先级。
<head>
<style>
h2 {
color: red;
font-size: 16px;
}
</style>
</head>
<body>
<h2>这是一段内部样式表控制文本。</h2>
</body>
-
外部样式表（External Stylesheet）：外部样式表是将 CSS 样式定义在一个单独的 .css 文件中，并使用<link>元素将其链接到 HTML 文档中。这是一种最常用的方式，允许你在多个页面上重用相同的样式。外部样式表具有较低的优先级。
在该 HTML 文件目录下创建名为 css 的目录，并创建 style.css 的外部样式表文件，在其中加入以下代码：
p {
color: purple;
font-size: 16px;
}
在 HTML 文档中链接外部样式表：
<head> <link rel="stylesheet" type="text/css" href="./css/style.css"> </head> <body> <p>这是一段外部样式表控制文本。</p> </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>
<link rel="stylesheet" href="./css/style.css">
<style>
p{
color: blue;
font-size: 26px;
}
h2{
color:green;
}
</style>
</head>
<body>
<p>这是一个应用了CSS样式的文本</p>
<h1 style="color:red">这是一个一级标题标签,使用内联样式</h1>
<h2>这是一个二级标题,应用内部样式</h2>
<h3>这是一个三级标题,应用外部样式</h3>
</body>
</html>
选择器
选择器用于选择要应用样式的 HTML 元素。
可以选择所有的元素、特定元素、特定类或 ID 的元素，甚至更多。
选择器位于规则的开头。
-
元素选择器：选择特定类型的 HTML 元素（例如，
p选择所有段落）。
-
类选择器：选择具有特定类的元素（例如，
.highlight选择具有 highlight 类的元素）。
-
ID 选择器：选择具有特定 ID 的元素（例如，
#header选择 ID 为 header 的元素）。
-
通用选择器：选择页面上所有的元素。
-
子元素选择器：选择直接位于父元素内部的子元素。语法：
父元素 > 子元素，例如，ul > li选择了<ul>元素内直接包含的<li>元素。
-
后代选择器（包含选择器）：选择元素的后代元素。语法：
元素名 元素名，例如，ul li选择了所有在<ul>元素内部的<li>元素。
-
相邻兄弟选择器：选择紧邻在另一个元素后面的兄弟元素。
元素名 + 元素名，例如，h2 + p选择了与<h2>相邻的<p>元素。
-
伪类选择器：选择 HTML 文档中的元素的特定状态或位置，而不仅仅是元素自身的属性。伪类选择器以冒号（:）开头，通常用于为用户交互、文档结构或其他条件下的元素应用样式。这些条件可以包括鼠标悬停（
:hover）、链接状态（:active）、第一个子元素（:first-child）等。
选择器使用样例:
<!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;
}
/* 类选择器 */
.highlight {
background: yellow;
}
/* id选择器 */
#header {
font-size: 35px;
}
/* 通用选择器 */
* {
font-family: 'KaiTi';
font-weight: bolder;
}
/* 子元素选择器 */
.father > .son {
color: yellowgreen;
}
/* 后代选择器 */
.father p{
color: brown;
font-size: larger;
}
/* 相邻元素选择器 */
h3 + p {
background-color: red;
}
/* 伪类选择器 */
#element:hover {
background-color: blueviolet;
}
/*
选中第一个子元素:first-child
:nth-child()
:active
*/
/*
伪元素选择器
::after
::before
*/
</style>
</head>
<body>
<h1>不同类型的 CSS 选择器 </h1>
<h2>这是一个元素选择器示例</h2>
<h3 class="highlight">这是一个类选择器示例</h3>
<h3>这是另一个类选择器示例</h3>
<h4 id="header">这是一个id选择器示例</h4>
<div class="father">
<p class="son">这是一个子元素选择器示例</p>
<div>
<p class="grandson">这是一个后代选择器示例</p>
</div>
</div>
<p>这是一个普通的p标签</p>
<h3>这是一个相邻兄弟选择器</h3>
<p>这是另一个p标签</p>
<h3 id="element">这是一个伪类选择器示例</h3>
</body>
</html>
属性
CSS 的属性有上百个，但是这不意味着，我们每个都要学习，更多的属性可以参考 (CSS 参考手册 | 菜鸟教程)
| 属性名 | 说明 |
|---|---|
| font-family | 用于设置文本的字体.示例: font-family:Arial,sans-serif; |
| font-size | 用于设置文本的字号大小.示例:font-size:16px; |
| color | 用于设置文本的颜色.示例:color:#333; |
| font-weight | 用于设置文本的粗细,可以是normal \ bold 等.示例:font-weight:bold; |
| line-height | 用于设置文本的行高.示例:line-height:bold; |
| text-align | 用于设置文本的对齐方式,可以是left \ righr \ center等.示例:text-align:center; |
| text-decoration | 用于添加文本装饰效果,如下划线 \ 删除线/示例:text-decoration:underline; |
| background-color | 设置或检索对象的背景对象 |
| height | 设置元素的高度 |
| width | 设置元素的宽度 |
块 \ 行内 \ 行内块元素
块元素(block):
-
快原色通常会从新行开始,并占据整行的宽度
-
可以包含其他块级元素和行内元素
行内元素(inline):
-
行内元色通常在同一行内呈现,不会独占一行
-
他们只占据其内容所需的宽度,而不是整行的宽度
-
行内元素不嫩那个包含块级元素,但可以包含其他行内元素
行内块元素(Inline-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: 150px;
height: 100px;
}
.line {
background-color: brown;
}
.inline-block {
width: 100px;
height: 150px;
}
.div-inline {
display: inline;
background-color: aquamarine;
}
.span-inline-block {
display: inline-block;
background-color: blueviolet;
width: 300px;
}
</style>
</head>
<body>
<h1 style="font: bolder 50px 'KaiTi';">这是一个font复合属性示例</h1>
<p style="line-height: 40px;">这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本这是一段长文本</p>
<div class="block">这是一个块级元素</div>
<span class="inline">这是一个行内元素</span><br><br>
<img src="./logo.png" alt="" class="inline-block">
<h2>display</h2>
<div class="div-inline">这是一个转换成行内元素的div标签</div>
<span class="span-inline-block">这是一个转换成行内块元素的span标签</span>
</body>
</html>
盒子模型
盒子模型是 CSS 中一种用于布局的基本概念，它描述了文档中的每个元素都被看作是一个矩形的盒子，这个盒子包含了内容、内边距、边框和外边距。
| 属性名 | 说明 |
|---|---|
| 内容(content) | 盒子包含的实际内同,比如文本 \ 图片等 |
| 内边距(padding) | 围绕在内容的内部,是内容与边框之间的空间.可以使用padding属性来设置 |
| 边框(border) | 围绕在内边距的外部,是盒子的边界.可以是用border属性来设置 |
| 外边距(margin) | 围绕在边框的外部,是盒子与其他元素之间的空间.可以使用margin属性来设置 |
理解盒子模型是构建网页布局的基础，它允许你更精确地控制元素在页面中的位置和大小。
边框的样式:
solid : 实线
dashed : 虚线
dotted : 点线
double : 双实线
盒子示例:
<!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>
.demo {
background-color: aqua;
display: inline-block;
border: 5px solid yellowgreen;
padding: 50px;
margin: 40px;
}
.border-demo {
background-color: yellow;
width: 300px;
height: 200px;
border-style: solid;
border-width: 10px;
border-color: blueviolet;
}
</style>
</head>
<body>
<div class="demo">B站搜索</div>
<div class="border-demo">这是一个边框示例</div>
</body>
</html>
浮动
网页布局的本质其实就是通过块元素来放置盒子，把盒子放在相应的位置。
传统的网页布局方式有以下五种 :
-
标准流(普通流 \ 文档流) : 网页按照元素的书写顺序一次排列
-
浮动
-
定位
-
Flexbox 和 Grid (自适应布局)
标准流是由块级元素和行内元素按照默认规定的方式来排列,块级就是占一行,行内元素一行放好多个元素
浮动:元素脱离文档流,根据开发者的意愿漂浮到网页的任何位置
浮动属性用于创建浮动框,将其移动到一边,知道左边缘或右边缘初级包含块或另一个浮动框的边缘,这样即可使得元素进行浮动
语法 :
选择器 {
float: left/right/none;
}
浮动是相对父元素浮动,只会在父元素的内部移动
浮动的三大特性:
-
脱标 : 顾名思义就是脱离标准流,当元素设置了浮动后,该元素将会脱离标准流(普通流)的控制,移动到指定位置,浮动的盒子不再保留原来所占有的位置,就像漂浮在空中一样,脱离了原来的地面.
-
一行显示,顶部对齐 : 如果多个盒子都设置了浮动,则他们会按照属性值,一行内显示并且顶端对齐排列.
-
具备行内块元素特性 : 不管原先是什么模式的元素,添加浮动之后具有行内块元素相似的特性
Attention :
-
浮动的元素是相互贴靠在一起的(不会有缝隙),如果父级宽度装不下这些浮动的盒子,多出的盒子会另起一行对齐
-
而如果使用元素模式转换,让块级元素转换成行内块元素,彼此之间是由空隙的.
清除浮动
由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置 ，最后父级盒子高度为 0 时，就会影响下面的标准流盒子，从而对整个网页元素的排版产生不良影响。
常见的清除浮动的方法包括以下几种：
-
空的块级元素 + clear 属性： 这是最经典的清除浮动方法之一，通过在浮动元素后添加一个空的块级元素，并设置其 clear 属性，使其不允许浮动元素在其左侧或右侧浮动。 -
伪元素清除浮动： 类似于上述方法，但使用伪元素来创建清除浮动的元素，而不需要在 HTML 中添加额外的空元素。
-
使用 overflow 属性： 将包含浮动元素的容器设置为
overflow: hidden;，可以触发 BFC（块级格式上下文），从而清除浮动。
浮动的使用示例:
<!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>
.father {
background-color: aquamarine;
height: 150px;
border: 3px solid brown;
/*清除浮动方法一: overflow: hidden; */
}
/* 清除浮动方法二:
.father::after {
content:"";
display: table;
clear: both;
} */
.left-son {
width: 100px;
height: 100px;
background-color: yellowgreen;
float: left;
}
.right-son {
width: 100px;
height: 100px;
background-color: yellow;
float: right;
}
</style>
</head>
<body>
<div class="father">
<div class="left-son">左浮动</div>
<div class="left-son">左浮动</div>
<div class="left-son">左浮动</div>
<div class="left-son">左浮动</div>
<div class="left-son">左浮动</div>
<div class="right-son">右浮动</div>
</div>
</body>
</html>
定位
CSS 定位是一种用于控制元素在网页上的位置的布局技术。通过定位，可以将元素放置在页面的特定位置，而不受文档流的约束。CSS 提供了几种定位属性，包括相对定位、绝对定位和固定定位。
定位布局可以精准定位,但缺乏灵活性
定位方式 :
-
相对定位 : 相对于元素在文档流中的正常位置进行定位.通过使用
position: relative;属性，可以在不脱离文档流的情况下调整元素的位置。
.relative-box {
position: relative;
top: 10px;
left: 20px;
}
-
绝对定位 : 相对于其最近的一定为祖先元素进行定位,不占据文档流.通过使用
position: absolute;属性，可以自由地调整元素的位置。
.absolute-box {
position: absolute;
top: 50px;
left: 100px;
}
-
固定定位 : 相对于浏览器窗口进行定位.不占据文档流,固定在屏幕上的位置,不随滚动而移动;通过使用
position: fixed;属性，可以创建固定定位的元素。
.fixed-box {
position: fixed;
top: 10px;
right: 10px;
}
定位使用示例 :
<!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>
.box1 {
height: 350px;
background-color: aqua;
}
.box-normal {
width: 100px;
height: 100px;
background-color: purple;
}
.box-relative {
width: 100px;
height: 100px;
background-color: pink;
position: relative;
/* left: ;
right: ;
top: ;
bottom: ; */
left: 120px;
top: 40px;
}
.box2 {
height: 350px;
background-color: yellow;
/* margin-bottom: 400px; */
}
.box-absolute {
width: 100px;
height: 100px;
background-color: yellowgreen;
position: absolute;
left: 120px;
}
.box-fixed {
width: 100px;
height: 100px;background-color: brown;
position: fixed;
right: 0;
top: 300px;
}
</style>
</head>
<body>
<h1>相对定位</h1>
<div class="box1">
<div class="box-normal"></div>
<div class="box-relative"></div>
<div class="box-normal"></div>
</div>
<h1>绝对定位</h1>
<div class="box2">
<div class="box-normal"></div>
<div class="box-absolute"></div>
<div class="box-normal"></div>
</div>
<h1>固定定位</h1>
<div class="box3">
<div class="box-normal"></div>
<div class="box-fixed"></div>
<div class="box-normal"></div>
</div>
</body>
</html>
通常，相对定位用于微调元素的位置，而绝对、固定定位用于创建更复杂的布局。
原文地址：https://blog.csdn.net/rebirth557/article/details/145185234
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！