前端学习记录~2023.6.6~CSS基础

山药泥拌饭

已于 2023-07-12 20:03:25 修改

阅读量47

点赞数

分类专栏：前端～CSS 前端学习记录文章标签： css 前端学习

于 2023-06-09 14:40:15 首次发布

本文链接：https://blog.csdn.net/Viator_mp3/article/details/131073886

版权

前端学习记录同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

前端～CSS

11 篇文章 1 订阅

订阅专栏

前言
CSS基础
总结

前言

本次只是整理记录 MDN 网站上最前面的基础入门的三大件基础，后续会分别专门深入探究。

CSS基础

1. CSS 是什么

CSS（Cascading Style Sheets，层叠样式表）是为 web 内容添加样式的代码。

CSS 同样也不是编程语言，甚至不是标记语言。是一门样式表语言。这也就是说人们可以用它来选择性地为 HTML 元素添加样式。

1）“CSS 规则集”详解

首先结合上一节 HTML 基础中的内容，在 styles 文件夹新建一个 style.css 文件，然后输入下面的css代码

p {
	color: red;
}

为了使它发挥作用，需要将其应用到 HTML 中。那么在 html 文件的头部也就是 <head>和 </head>标签之间）插入下面代码

<link href="styles/style.css" rel="stylesheet" />

保存并在浏览器中打开后，可以发现段落中的文字变红了。

接下来分析下它的构成部分，来了解它是如何工作的：

在这里插入图片描述
整个结构称为规则集（通常简称为规则），各部分分别为：

1. 选择器（Selector）

HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素（在这个例子中就是 <p> 元素）。要给不同元素添加样式，只需要更改选择器。

2. 声明（Declaration）

一个单独的规则，用来指定添加样式元素的属性（在这个例子中就是color: red;）。

3. 属性（Properties）

改变 HTML 元素样式的途径（本例中color就是<p>元素的属性）。在 CSS 中，由编写人员决定修改哪个属性以改变规则。

4. 属性的值（Property value）

在属性的右边，:后面就是属性的值，它从属性的众多外观中选择一个值。

5. 其他重要语法

除了选择器部分，每个规则集都应该包括在成对的{}里
在每个声明里要用:将属性与属性的值分隔开
在每个规则集里要用;将各个声明分隔开

6. 同时修改多个属性

只需要将它们用;隔开，比如

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

7. 选择多个元素

也可以选择多种类型的元素并为它们添加一组相同的样式。将不同的选择器用，分开，比如

p,
li,
h1 {
	color: red;
}

8. 不同类型的选择器

选择器有许多不同的类型，选择操作可以更加具体。上面只说了元素选择器，可以用来选择 HTML 文档中给定的元素。

下面是一些常用的选择器类型：

选择器名称	选择的内容	示例
元素选择器（也称作标签或类型选择器	所有指定类型的 HTML元素	`p` 选择 `<p>`
ID 选择器	具有特定 ID的元素。单一HTML 页面中，每个 ID只对应一个元素，一个元素只对应一个 ID	`#my-id` 选择`<p id="my-id" >`或`<a id="my-id">`
类选择器	具有特定类的元素。单一页面中，一个类可以有多个实例	`.my-class` 选择`<p class="my-class">`和`<a class="my-class">`
属性选择器	拥有特定属性的元素	`img[src]` 选择`<img src="myimage.png">`但不是`<img>`
伪类选择器	特定状态下的特定元素（比如鼠标指针悬停于链接之上	`a:hover` 选择仅在鼠标指针悬停在链接上时的`<a>`元素

选择器种类还有很多，后面 CSS 的深入探究中还会涉及

2. 字体和文本

还是跟着上面的代码示例来讲。

现在可以尝试把更多规则和信息添加至style.css中

在Google Fonts中找到喜欢的字体，然后将给出的链接html代码添加到index.html的<head>中，比如如下代码：

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap" rel="stylesheet">

这段代码将你的页面链接到一个样式表，该样式表将 Open Sans 字体家族与你的网页一起加载（还没结束）
2. 删除掉上面style.css文件中让字体变红的代码
3. 添加刚才字体对应界面给的css代码添加到css文件中。font-family 属性指的是你想用于文本的字体。这个规则为整个页面定义了一个全局的基本字体和字体大小。由于是整个页面的父元素，它里面的所有元素都继承相同的 font-size 和 font-family

html {
    font-size: 10px; /* px 表示“像素（pixel）”: 基础字号为 10 像素 */
    font-family: 'ZCOOL KuaiLe', sans-serif; /* 这应该是你从 Google Fonts 得到的其余输出。 */
}

接下来为 HTML 主体内的元素设置字体大小。我们也将标题居中显示。最后，扩充下方的第二个规则集，为正文设置行高和字间距，从而提高页面的可读性。

h1 {
    font-size: 60px;
    text-align: center;         /* 对齐方式为居中 */
  }

p,
li {
    font-size: 16px;
    line-height: 2;             /* 行高 */
    letter-spacing: 1px;        /* 行间距 */
}

3. CSS：一切皆盒子

页面里大部分 HTML 元素都可以被看作若干层叠的盒子。

CSS 布局主要是基于盒子模型。在你的页面上占用空间的每个盒子都有类似的属性：

padding（内边距）：指内容周围的空间。在下面的例子中，它是段落文本周围的空间
border（边框）：紧接着内边距的线
margin（外边距）：围绕元素边界外侧的空间

这里还使用了：
width：元素的宽度
background-color：元素内容和内边距底下的颜色
color：元素内容（通常是文本）的颜色
text-shadow：为元素内的文本设置阴影
display：设置元素的显示模式

1. 更改页面颜色

这条规则为整个页面设置了背景颜色

html {
  background-color: #00539f;
}

2. 文档体样式

body {
  width: 600px;
  margin: 0 auto;
  background-color: #ff9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

这里有对于<body>元素的几条声明：

width: 600px;：强制页面永远保持 600 像素宽
margin: 0 auto;：设置外边距。当在margin或padding这样的属性上设置两个值时，第一个值影响元素的上下方向，第二个值影响左右方向（auto 是一个特殊的值，它将可用的水平空间平均分配给左和右）
background-color: #FF9500;：指定元素的背景颜色
padding: 0 20px 20px 20px：设置内边距。规则与 margin 类似
border: 5px solid black;：设置边框的宽度、样式和颜色。在本例中，它是一个在主体的所有侧面的 5 像素宽的纯黑色边框。

margin / padding 可以使用1、2、3、4个值任意种。
margin / padding 属性为给定元素设置所有四个（上下左右）方向的外边距属性。也就是 margin-top，margin-right，margin-bottom，和 margin-left 四个外边距属性设置的简写

当只指定一个值时，该值会统一应用到全部四个边的外边距上。
指定两个值时，第一个值会应用于上边和下边的外边距，第二个值应用于左边和右边。
指定三个值时，第一个值应用于上边，第二个值应用于右边和左边，第三个则应用于下边的外边距。
指定四个值时，依次（顺时针方向）作为上边，右边，下边，和左边的外边距。

3. 定位页面主标题并添加样式

h1 {
  margin: 0;
  padding: 20px 0;
  color: #00539f;
  text-shadow: 3px 3px 1px black;
}

前三项设置了外边距、内边距、颜色。

最后的text-shadow对元素的文本内容施加阴影。它的四个值分别是：

第 1 个像素值：设置阴影与文本的水平偏移量，也就是横移的距离
第 2 个像素值：设置阴影与文本的垂直偏移量，也就是向下移动的距离
第 3 个像素值：设置阴影的模糊半径。一个更大的值会产生一个更模糊的阴影
第 4 个值：设置阴影的基色

4. 图像居中

img {
  display: block;
  margin: 0 auto;
}

最后，我们把图像居中来使页面更美观。可以复用 body 的 margin: 0 auto ，但有一些差异，需要额外的设置来使CSS发挥作用

<body>元素是块级元素，意味着它占据了页面的空间并且能够赋予外边距和其他改变间距的值。
而图片是行级元素，不具备块级元素的一些功能。

所以为了使图像有外边距，需要使用display: block给予其块级行为。

测试时使用的图片超过了页面宽度，因此在img代码块添加了max-width: 100%;来限制图片大小，当元素宽度超过最大宽度时会自动缩小

总结

本次只是基本入门，后续会更详细探究。

山药泥拌饭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端学习记录~2023.6.6~CSS基础

本次只是整理记录 MDN 网站上最前面的基础入门的三大件基础，后续会分别专门深入探究。本次只是基本入门，后续会更详细探究。
复制链接

扫一扫

专栏目录