前端基础之HTML+CSS（三）

最新推荐文章于 2023-08-31 08:16:30 发布

南门酒巷

最新推荐文章于 2023-08-31 08:16:30 发布

阅读量109

点赞数 2

分类专栏：前端基础之HTML+CSS 文章标签：前端 html css

本文链接：https://blog.csdn.net/weixin_46685715/article/details/131798144

版权

前端基础之HTML+CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前言

前面总结了HTML骨架常用的标签及其属性，接下来详细总结CSS的相关知识点。

CSS样式表

以下是以表格形式展示CSS的三种样式：内联样式、内部样式和外部样式。

样式类型	语法	用法
内联样式	`<element style="...">`	适用于单个元素，将样式直接应用于元素的`style`属性
内部样式	`<style>...</style>`	适用于整个HTML文档，将样式放置在`<head>`标签内部的`<style>`标签中
外部样式	`<link rel="stylesheet" href="...">`	适用于整个HTML文档，将样式存储在外部CSS文件中并通过`<link>`标签链接到HTML文档中

以下是每种样式的示例用法：

内联样式

<p style="color: red; font-size: 18px;">这是一个内联样式的段落。</p>

内部样式

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: blue;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <p>这是一个内部样式的段落。</p>
</body>
</html>

外部样式

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p>这是一个外部样式的段落。</p>
</body>
</html>

在外部样式表的示例中，CSS规则会存储在名为"styles.css"的外部文件中，并通过<link>标签中的href属性链接到HTML文档。

扩展知识点：link和import之间的区别？

差别1：本质的差别：link属于XHTML标签，而@import完全是CSS提供的一种方式。
差别2：加载顺序的差别：当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。
差别3：兼容性的差别：@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
差别4：使用dom控制样式时的差别：当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

选择器

元素选择器

用于选择HTML文档中的特定元素。它们是CSS选择器中最基本和最常用的类型之一。

语法：

element {
  property: value;
}

说明：

element是要选择的HTML元素的名称，比如p、h1、div等。
property是要应用的CSS属性的名称，例如color、font-size、background等。
value是要应用于CSS属性的值，比如red、16px、#ffffff等。

示例：

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

上述示例中的CSS规则将选择所有的<p>元素，并将其文字颜色设置为红色，字体大小设置为16像素。

使用元素选择器时要注意以下几点：

元素选择器是最常用的选择器之一，可以选择任何HTML元素。
元素选择器是全局选择器，会选择HTML文档中所有匹配元素名称的元素。
可以在同一个样式表中使用多个元素选择器，每个选择器对应不同的样式规则。
元素选择器不仅限于基本HTML元素，也可以选择自定义元素或其他非标准元素。

类选择器

用于选择具有相同类名的HTML元素。它是CSS选择器中常用的一种，允许开发者为一组相关的元素应用相同的样式。

语法：

.className {
  property: value;
}

说明：

.className是要选择的类名，以点号开头，可以是任意有效的CSS类名。
property是要应用的CSS属性的名称，例如color、font-size、background等。
value是要应用于CSS属性的值，比如red、16px、#ffffff等。

示例：

.red-text {
  color: red;
  font-size: 16px;
}

上述示例中的CSS规则将选择所有具有类名为.red-text的HTML元素，并将其文字颜色设置为红色，字体大小设置为16像素。

使用类选择器时要注意以下几点：

类选择器使用类名来选择HTML元素，一个HTML元素可以拥有多个类名，它们以空格分隔。
类名在HTML文档中可以多次使用，以应用相同的样式规则。
类选择器是局部选择器，仅选择匹配类名的元素。
可以在同一个样式表中使用多个类选择器，每个选择器对应不同的样式规则。

通过使用类选择器，可以轻松地将相同类名的元素分组，并为它们应用相同的样式。这种选择器非常有用，尤其在构建具有相似外观或行为的元素集合时。

ID选择器

用于选择具有唯一标识的HTML元素。它是CSS选择器中最具体和最具限制性的一种选择器，每个HTML文档中的元素只能有一个唯一的ID。

语法：

#elementID {
  property: value;
}

说明：

#elementID是要选择的元素的ID，以#开头，后跟元素的唯一ID。
property是要应用的CSS属性的名称，例如color、font-size、background等。
value是要应用于CSS属性的值，比如red、16px、#ffffff等。

示例：

#header {
  background-color: blue;
  color: white;
}

上述示例中的CSS规则将选择具有ID为header的唯一HTML元素，并将其背景颜色设置为蓝色，文字颜色设置为白色。

使用ID选择器时要注意以下几点：

ID选择器用于选择具有唯一ID的HTML元素，每个ID只能在整个HTML文档中出现一次。
ID选择器是最具体的选择器，优先级较高，它们的样式规则会覆盖其他选择器的规则。
ID选择器可以应用于任何HTML元素，不仅限于具有特定语义的元素。
可以在同一个样式表中使用多个ID选择器，每个选择器对应不同的样式规则。

使用ID选择器时应确保给每个ID设置一个唯一的名称，以避免冲突和不正确的样式应用。同时，不应滥用ID选择器，应合理使用它们来选择和定义特定的HTML元素。

通配符选择器

在CSS中用于选择所有HTML元素，它是最基础的选择器之一，可以匹配文档中的任何元素。

* {
  margin: 0;
  padding: 0;
}

上述示例中的CSS规则将选择HTML文档中的所有元素，并将它们的外边距（margin）和内边距（padding）都设置为0。

通配符选择器的使用要谨慎，因为它会选择HTML文档中的所有元素，可能导致样式应用于不想被选择的元素上。通常情况下，更推荐使用更具体的选择器来选择目标元素，以避免潜在的副作用。然而，通配符选择器在某些情况下也有其用途，例如重置所有元素的默认样式或设置一些全局样式。

需要注意的是，通配符选择器的优先级较低，当与其他选择器同时应用于同一个元素时，更具体的选择器的样式规则会覆盖通配符选择器的规则。

群组选择器

在CSS中用于选择一组具有相同样式的元素。它允许将多个选择器组合在一起，以应用相同的样式规则。

h1, h2, h3 {
  color: blue;
  font-size: 24px;
}
/* 群组选择器：提出公共代码，节约代码量 */

上述示例中的CSS规则将选择所有的<h1>、<h2>、<h3>元素，并将它们的文字颜色设置为蓝色，字体大小设置为24像素。

使用群组选择器可以同时选择多个不同的元素，并为它们应用相同的样式。这在希望一次性定义多个元素的样式时非常方便。同时，可以在群组选择器中使用不同类型的选择器，如类选择器、ID选择器、元素选择器等，以便更具体地选择元素并应用样式。

后代选择器

在CSS中用于选择某个元素的后代元素。它通过指定两个或多个选择器，中间用空格分隔，选择嵌套在其他元素中的元素。

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

上述示例中的CSS规则将选择所有嵌套在 <div> 元素内部的 <p> 元素，并将它们的文字颜色设置为蓝色，字体大小设置为16像素。

使用后代选择器可以更精确地选择某个元素的后代元素，而不影响其他结构中的相同类型元素。后代选择器适用于嵌套的HTML结构，可以用于选择特定层级下的元素，提供更具针对性的样式定义。后代选择器会选择所有匹配的后代元素，而不仅限于直接嵌套的元素。如果希望仅选择直接子代元素，可以使用子选择器或相邻兄弟选择器。

伪类选择器

在CSS中用于选择元素的特定状态或特殊情况。它允许开发者根据元素的状态或内容来选择和应用样式。伪类选择器以冒号（:）开头，并紧跟着伪类的名称。

a:hover {
  color: red;
  text-decoration: underline;
}

上述示例中的CSS规则将选择所有鼠标悬停（hover）在 <a> 元素上的链接，并将文字颜色设置为红色，添加下划线效果。

常见的伪类选择器包括：

:hover：鼠标悬停在元素上时应用的样式。
:active：元素被激活或点击时应用的样式。
:focus：元素获得焦点时应用的样式。
:first-child：选择作为父元素的第一个子元素的元素。
:last-child：选择作为父元素的最后一个子元素的元素。
:nth-child()：选择作为父元素的特定位置的子元素。

注意：当link-visited-hover-active4个超链接伪类选择符联合使用时应注意顺序，错误的顺序会使超链接样式失效；

a {
  color: red;
}

a:hover {
  color: green;
}

上述示例中的CSS规则表示超链接的初始和访问过后的状态一样，鼠标划过的状态和点击时的状态一样。

选择器权重

选择器	权重，CSS中用四位数字表示权重
类型(元素)选择器	0001
Class选择器（类选择器）	0010
id选择器	0100
包含选择符	为包含选择符的权重之和
内联样式	1000
!important	10000

CSS选择器解析规则

当不同选择符的样式设置有冲突的时候，高权重选择符的样式会覆盖低权重选择符的样式
相同权重的选择符，样式遵循就近原则：哪个选择符最后定义，就采用哪个选择符样式。

在CSS中：!important > 行内 > 内部 > 外部

行高和高度的三种关系

行高 = 上距离 + 内容高度 + 下距离，上距离和下距离总是相等的，因此文字看上去是垂直居中的。

如果行高等于盒子高度，文字会 垂直居中
如果行高大于盒子高度，文字上距离变大，文字显示会偏下
如果行高小于盒子高度，文字上距离变小，文字显示会偏上

/* text-transform 大小写 */
p{
    /* none 默认，定义带有小写字母和大写字母的标准文本 */
    /* capitalize; 文本中的每个单词以大写字母开头 */
    /* lowercase; 定义无大写字母，仅有小写字母 */
    /* uppercase;  定义无小写字母，仅有大写字母 */
    /* inherit 规定应该从父元素继承text-transform属性的值 */
}

文本属性

HTML中的文本属性用于控制文本的样式、对齐和其他相关属性。以下是一些常用的文本属性：

color：定义文本的颜色，可以设置为颜色名称或颜色的十六进制值
font-size：定义文本的字体大小
font-family：定义文本的字体系列，可以设置为特定的字体名称或字体族名称
font-style：定义文本的字体样式，可以设置为**normal（常规）、italic（斜体）或oblique（倾斜）**
font-weight：定义文本的字体粗细，可以设置为**normal（常规）、bold（加粗）或bolder（更粗）**
text-decoration：定义文本的装饰效果，可以设置为**none（无装饰）、underline（下划线）、overline（上划线）或line-through（删除线）**
text-align：定义文本的水平对齐方式，可以设置为**left（左对齐）、center（居中对齐）、right（右对齐）或justify（两端对齐）**
text-indent：定义文本首行缩进的距离，只对第一行起作用。
text-transform：定义文本的大小写转换，可以设置为**none（不转换）、uppercase（转换为大写）或lowercase（转换为小写）**
line-height：定义文本行高
letter-spacing：定义文本字符间的间距

font是font-style font-weight font-size / line-height font-family的简写，顺序不能改变，必须同时指定font-size和font-family才有效

.style{
    font:italic 800 30px/80px "宋体"
}

这些文本属性可以与HTML中的标签（如<p>、<span>等）或CSS样式表一起使用，以控制文本的外观和排版。

背景属性

属性	描述	说明
`background-color`	背景颜色	`background-color:red；`
`background-image`	背景图片	`background-image:url();`
`background-repeat`	背景图片的平铺	`background-repeat:no-repeat:不平铺/repeat/repeat-x:x轴平铺/repeat-y:y轴平铺`
`background-position`	背景图片的定位	`background-position：top、bottom、center：指定垂直方向的位置。left、right、center：指定水平方向的位置。`
`background-attachment`	背景图片的固定	`background-attachment: scroll (滚动)/ fixed（固定，固定在浏览器窗口里面，固定之后就相对于浏览器窗口了）`

background-size:contain;
/*
  1. 400px 400px
  2. 100% 100%
  3. cover:把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
  也许无法显示在背景定位区域中。
  4. contain: 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。铺不满盒子,留白
*/

background: url(img/1.jpg) no-repeat center fixed yellow;
/*复合写法:
  1. 用空格隔开
  2. 顺序可以换
  3. 可以只取一个值， 放在后面能覆盖前面的值 */
/* background-size属性只能单独用 */

盒子模型

盒模型是CSS布局的基石，它规定了网页元素如何显示以及元素间相互关系。

CSS定义所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含边框、边界、补白、内容区，这就是盒模型。

在这里插入图片描述

padding

使用方法（内间距）：当分析一个缝隙相对于当前容器来说是里面的时候，就用 padding。

填充：padding，在设定页面中一个元素内容到元素的边缘(边框) 之间的距离，也称补白。

用法：

1）用来调整内容在容器中的位置关系

2）padding 值是额外加在元素原有大小之上的，如想保证元素大小不变，需从元素宽或高上减掉后添加的padding属性值

属性值的4种方式：

{
    padding: 0px 0px 0px 40px;	/* 上 右 下 左 */
    padding: 10px 20px 30px;	/* 上 左右 下 */
    padding: 10px 20px; 	/* 上下 左右 */
    padding: 2px;	/* 上下左右 */
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}

说明：可单独设置一方向填充，如：上方向 padding-top:10px; 右方向下方向左方向

border

{
    border-width: 40px; /* 边框宽度 */
    border-color: blue; /* 边框颜色 */
    border-style: solid/dashed/dotted/double; /* 实线/虚线/点划线/双线 */ 
    border：30px solid blue; /* 简写 边框宽度 边框风格 边框颜色 */
    border-top：30px blue solid; /*上边框 */  
    border-bottom / border-left / border-right
}

margin

边界：margin,在元素外边的空白区域，被称为边距。

与padding的属性大致相同

margin-left：左边界 margin-right：右边界 margin-top：上边界 margin-bottom：下边界

属性值的4种方式：margin可以给负数

四个值：上右下左 三个值：上左右下 二个值：上下左右 一个值：四个方向

margin:0 auto; /* 一个有宽度的元素在浏览器中横向居中。*/

特性问题：

兄弟关系，两个盒子垂直外边距与水平外边距问题
- 垂直方向，外边距取最大值。
- 水平方向，外边距会进行合并处理。
父子关系，给子加外边距，但作用于父身上了，怎么解决?
子margin-top ==> 父的padding-top, 注意高度计算。
给父盒子设置边框
加浮动
BFC：overflow:hidde,

溢出属性

溢出属性（容器）

控制溢出属性的容器是通过使用 overflow 属性来实现的。overflow 属性用于指定当容器内的内容超出其指定尺寸时如何处理溢出。

常用的 overflow 属性值有：

overflow: visible;（默认值）：内容会溢出容器，并且不会裁剪，会显示在容器外部。
overflow: hidden;：内容会溢出容器，但超出部分会被裁剪隐藏，不显示在容器外部。
overflow: scroll;：如果内容没有溢出，表现与 visible 相同。如果内容溢出，会显示滚动条，用户可以滚动查看超出部分。
overflow: auto;：类似于 scroll，如果内容没有溢出，表现与 visible 相同。如果内容溢出，会显示滚动条，但只在必要时出现滚动条，否则不显示滚动条。

空余空间

white-space 属性，用于控制文本元素中空白字符的处理方式，从而影响空余空间的呈现。

white-space 属性有以下几个常用的取值：

white-space: normal;（默认值）：正常处理空白字符，连续的空白字符被合并为一个空格，换行符也被处理成空格。
white-space: pre;：保留空白字符的原始格式，即按照源代码中的空白字符呈现。
white-space: nowrap;：不换行，所有文本在同一行内显示，忽略换行符。
white-space: pre-wrap;：保留空白字符的原始格式，并允许文本换行。
white-space: pre-line;：合并多个空白字符为一个空格，但保留换行符。

省略号显示

使用 text-overflow 属性。结合 white-space 和 overflow 属性，可以实现省略号的显示效果。

示例：

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      width: 200px;
      border: 1px solid black;
      white-space: nowrap; /* 不换行，文本在一行内显示 */
      overflow: hidden; /* 隐藏超出容器宽度的文本部分 */
      text-overflow: ellipsis; /* 显示省略号 */
    }
  </style>
</head>
<body>
  <div class="container">
    This is a long text that will be truncated with an ellipsis when it overflows the container width.
  </div>
</body>
</html>

在这个例子中，.container 是一个宽度为 200px 的容器。通过设置 white-space: nowrap 属性，文本将在一行内显示，不会换行。当文本内容超出容器宽度时，设置 overflow: hidden 属性将隐藏超出部分，最后使用 text-overflow: ellipsis 属性显示省略号，以指示文本被截断。