第04章、CSS基础（一）

小小代码团

于 2022-02-23 20:07:10 发布

阅读量349

点赞数

分类专栏： SJTU-互联网应用开发技术文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_51394621/article/details/123098030

版权

SJTU-互联网应用开发技术专栏收录该内容

5 篇文章 0 订阅

订阅专栏

第四章、CSS基础（一）

本章将介绍CSS的基础知识，包括选择器的概念，如何引入CSS，背景图片的设置、边框、还有一些基础概念的知识。

文章目录

- - 第四章、CSS基础（一）

第一节、CSS基础知识

1、CSS的概念

CSS 指的是层叠样式表 (Cascading Style Sheets)
CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
CSS 节省了大量工作。它可以同时控制多张网页的布局
外部样式表存储在CSS 文件中

2、CSS的语法

CSS 规则集（rule-set）由选择器和声明块组成：

选择器指向您需要设置样式的 HTML 元素。
声明块包含一条或多条用分号分隔的声明。
每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。
多条 CSS 声明用分号分隔，声明块用花括号括起来。

例如：

选择器（写元素的名字 例如p table h1等等）{
	属性:属性值;
	/*注意分号、冒号！*/
}

3、CSS选择器

a）选择器概述

CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。我们可以将 CSS 选择器分为五类：

简单选择器（根据名称、id、类来选取元素）
组合器选择器（根据它们之间的特定关系来选取元素）
伪类选择器（根据特定状态选取元素）
伪元素选择器（选取元素的一部分并设置其样式）
属性选择器（根据属性或属性值来选取元素）

b）CSS 元素选择器：

元素选择器根据元素名称来选择 HTML 元素。

p {
  text-align: center;
  color: red;
}

c）CSS id选择器：

id 选择器使用 HTML 元素的 id 属性来选择特定元素。
元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！
要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。
**注意：**id 名称不能以数字开头。

#para1 {
  text-align: center;
  color: red;
}

d）CSS 类选择器

类选择器选择有特定 class 属性的 HTML 元素。
如需选择所有带有特定 class 的元素，请写一个句点（.）字符，后面跟类名。
在下面这个例子中，所有带有 class="center" 的 HTML 元素将为红色且居中对齐：

.center {
  text-align: center;
  color: red;
}

在下面这个例子中，只有具有 class="center"的 <p> 元素会居中对齐：

p.center {
  text-align: center;
  color: red;
}

e）CSS 通用选择器

通用选择器（*）选择页面上的所有的 HTML 元素。
下面的 CSS 规则会影响页面上的每个 HTML 元素：

* {
  margin: 0px;
  padding: 0px;
}
/*上面这一段通常用于清楚浏览器默认边距*/

4、CSS的引入

有三种插入样式表的方法：外部 CSS、内部 CSS、行内 CSS

a）外部 CSS

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

b）内部CSS

如果一张 HTML 页面拥有唯一的样式，那么可以使用内部样式表。内部样式是在 head 部分的 <style> 元素中进行定义。

c）行内 CSS

<p style="color:red;">This is a paragraph.</p>

5、CSS的注释

注释允许单行、也允许多行。

/* 这是
一条多行的
注释 */ 

/* 这是一条单行注释 */

6、CSS的颜色

设置背景的颜色： background-color:DodgerBlue;
设置文本的颜色： color:DodgerBlue;
在 CSS 中，可以使用下面的公式将颜色指定为 RGB 值： $r g b (r e d, g r e e n, b l u e)$ 每个参数 (red、green 以及 blue) 定义了 0 到 255 之间的颜色强度。

第二节、CSS 背景

1、背景图片

background-image属性指定用作元素背景的图像。默认情况下，图像会重复，以覆盖整个元素。
注意不要用一些影响阅读的背景图片。

body {
  background-image: url("paper.gif");
}

2、背景重复

设置在水平方向重复：background-repeat: repeat-x;。
设置在数值方向重复：background-repeat: repeat-y;。
设置为不重复：background-repeat: no-repeat;。

3、背景位置

background-position 属性用于指定背景图像的位置。值可以为：

上	中	下
top left	center left	bottom left
top center	center center	bottom center
top right	center right	bottom right

4、背景附着

background-attachment 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）
background-attachment: fixed;表示固定。
background-attachment: scroll;表示可以滚动，滚动后会跟着移动。

5、背景绘制区域

background-clip规定背景的绘制区域，允许的值为：

值	描述
border-box	背景被裁剪到边框盒。
padding-box	背景被裁剪到内边距框。
content-box	背景被裁剪到内容框。

6、简写属性

如需缩短代码，也可以在一个属性中指定所有背景属性。它被称为简写属性。

在使用简写属性时，属性值的顺序为：

background-color
background-image
background-repeat
background-attachment
background-position

属性值之一缺失并不要紧，只要按照此顺序设置其他值即可。例如

body {
  background: #ffffff url("tree.png") no-repeat right top;
}

第三节、CSS 边框

1、长度相关的表示方法

a）px：像素

是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI(Dots Per Inch，每英寸像素数)，在扫描打印时一般都有DPI可选。Windows系统默认是96dpi，Apple系统默认是72dpi。通常设计时候用px表示长度。

b）pt：磅

是一个物理长度单位，指的是72分之一英寸。

c）em：相对m

是一个相对长度单位，最初是指字母M的宽度，故名em。现指的是字符宽度的倍数，用法类似百分比，如：0.8em, 1.2em,2em等。通常1em=16px。

2、border 属性

CSS border 属性允许指定元素边框的样式、宽度和颜色。

a) border-style 属性

指定要显示的边框类型。允许以下值：

dotted - 定义点线边框
dashed - 定义虚线边框
solid - 定义实线边框
double - 定义双边框
groove - 定义 3D 坡口边框。效果取决于 border-color 值
ridge - 定义 3D 脊线边框。效果取决于 border-color 值
inset - 定义 3D inset 边框。效果取决于 border-color 值
outset - 定义 3D outset 边框。效果取决于 border-color 值
none - 定义无边框
hidden - 定义隐藏边框

可以设置一到四个值（用于上边框、右边框、下边框和左边框）

**注意：**除非设置了 border-style 属性，否则其他 CSS 边框属性都不会有任何作用！

但是，如果要指定某一个边，或者要求四个边的长度各有不同，就需要单独设置。

p {
  border-top-style: dotted;			/*上面是点、线交错的边框*/
  border-right-style: solid;		/*右边是实线*/
  border-bottom-style: double;		/*底部是双线*/
  border-left-style: solid;			/*左边是实线*/
}

当然，也可以用简便的写法，即简写属性：

如果 border-style 属性设置三个值：则第二个值为右和左边框，第一个、第三个分别为上边框，下边框。
如果 border-style 属性设置两个值：则第一个值为上下边框，第二个为左右边框。

b）border-width 属性

border-width: 可以跟四个参数或者两个参数或者一个参数，依次表示上、右、下、左的宽度。

p.one {
  border-style: solid;
  border-width: 5px 20px; /* 上边框和下边框为 5px，其他边为 20px */
}

p.two {
  border-style: solid;
  border-width: 20px 5px; /* 上边框和下边框为 20px，其他边为 5px */
}

p.three {
  border-style: solid;
  border-width: 25px 10px 4px 35px; /* 上边框 25px，右边框 10px，下边框 4px，左边框 35px */
}

c）border-color 属性

border-width:red；

c）border-radius 属性

border-radius 属性用于向元素添加圆角边框。可以避免边框过于生硬。

p {
  border: 2px solid red;
  border-radius: 5px;		/*根据实际情况具体调试参数值，单位是px*/
}

3、border 简写属性

为了缩减代码，也可以在一个属性中指定所有单独的边框属性。

border 属性是以下各个边框属性的简写属性：

border-width
border-style（必需）
border-color

当然，单独设置一条边的时候也可以，参考下面的：

p {
  border-left: 6px solid red;
  background-color: lightgrey;
}

第四节、CSS 边距

1、CSS框模型

所有 HTML 元素都可以视为方框。在 CSS 中，在谈论设计和布局时，会使用术语“盒模型”或“框模型”。
CSS 框模型实质上是一个包围每个 HTML 元素的框。它包括：外边距、边框、内边距以及实际的内容。下图展示了框模型：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q3QOteuW-1645617706974)(C:\Users\zhangziqian\OneDrive - musicminion\2021-2022-2\2021-2022-2 Web Application Development\学习笔记\第04章、CSS基础.assets\boxmodel.gif)]

内容 - 框的内容，其中显示文本和图像。
内边距 - 清除内容周围的区域。内边距是透明的。
边框 - 围绕内边距和内容的边框。
外边距 - 清除边界外的区域。外边距是透明的。
框模型允许我们在元素周围添加边框，并定义元素之间的空间。
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：

元素的总宽度应该这样计算：
$元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距$
元素的总高度应该这样计算：
$元素总高度 = 高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距$

**提示：**背景应用于由内容和内边距、边框组成的区域。
**提示：**内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。
**提示：**外边距可以是负值，而且在很多情况下都要使用负值的外边距。

2、CSS外边距

CSS margin 属性用于在任何定义的边框之外，为元素周围创建空间。
通过 CSS，可以完全控制外边距。有一些属性可用于设置元素每侧（上、右、下和左）的外边距。

CSS 拥有用于为元素的每一侧指定外边距的属性：

margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;

所有外边距属性都可以设置以下值：

auto 浏览器来计算外边距
length 以 px、pt、cm 等单位指定外边距
% 指定以包含元素宽度的百分比计的外边距
inherit 指定应从父元素继承外边距

至于简写的方式可以参考前面的 border。

3、CSS外边距合并

定义： 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

情形： 当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。

请添加图片描述

情形： 当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。

在这里插入图片描述

情形： 假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：
在这里插入图片描述

注释： 只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

4、CSS内边距

CSS padding 属性用于在任何定义的边界内的元素内容周围生成空间。

CSS 拥有用于为元素的每一侧指定内边距的属性，这和最开始的 border 是完全一样的。

padding-top
padding-right
padding-bottom
padding-left

5、box-sizing 属性锁死元素宽度

首先我们要知道，一直所说的 width 还有 height 指的是什么的宽度和高度，宽度指的是下图中黑色实线部分的水平宽度，而高度指的是黑色实线部分的竖直宽度，简而言之就是 margin 以内的部分。

那么来看这样的一个案例：

div {
  width: 300px;
  padding: 25px;
}

请问最终真实的 width 就是上图所说的黑色实线部分的水平宽度，是300px吗，不是。真实的是350px。于是有人会提出，如果我调换顺序，是否会变化呢？实际测试还是350px。

所以，如果我要解决这个问题，可以用下面的方法：使用 box-sizing 属性将宽度保持为 300px，无论填充量如何。这样的方法就是说：无论内边距多少，都保证这个 width = 300px; 。也就是说如果内边距逐渐增大，那么说可用的距离就会慢慢的变少。

5、高度和宽度实例

如果用比例设置元素的高度或者宽度，那么比例的参照是元素的父元素的宽度或者高度。
max-width 属性用于设置元素的最大宽度。即使当浏览器窗口被拖动到大于这个值（或者小于最小宽度），元素的值都可以保持。

小小代码团

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录