CSS基础学习--1 简介

yyxhzdm

已于 2023-06-11 14:20:59 修改

阅读量32

点赞数

分类专栏： CSS的基础学习与开发文章标签： css 学习前端

于 2023-06-11 12:30:15 首次发布

本文链接：https://blog.csdn.net/yyxhzdm/article/details/131151980

版权

CSS的基础学习与开发专栏收录该内容

31 篇文章 4 订阅

订阅专栏

一、什么是CSS

CSS指层叠样式表
样式定义如何显示HTML元素
样式通常存储在样式表中
外部样式表可以极大的提高工作效率
外部样式表通常存储在CSS文件中
多个样式定义可层叠为一个

二、CSS是如何编写或工作的？

<!DOCTYPE html>
<html>
	<head>
		<!-- head标签 表示html的文档的头部内容
		 
		 这里我们主要用来编写和引入CSS和JS代码
		 以及当前网页的属性设置
		 -->
		<meta charset="utf-8">
		<title>标题</title>
	</head>

	<body>
		<!-- body标签 表示HTMl的文档的主体内容
		 
		 这里我们主要用来编写页面中具体要显示的内容以及一小部分的JS代码，大部分JS都在head标签中
		 -->
		 这是我的第一个HTML

	</body>
</html>

三、样式解决了一个很大的问题？

<h1>这是一个标题</h1>
<p>这是一个段落。</p>

样式表定义如何显示 HTML 元素，就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

yyxhzdm

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS基础学习--1 简介

CSS指层叠样式表样式定义如何显示HTML元素样式通常存储在样式表中外部样式表可以极大的提高工作效率外部样式表通常存储在CSS文件中多个样式定义可层叠为一个。
复制链接

扫一扫

专栏目录

CSS基础学习--17 布局 - 水平 & 垂直对齐

yyxhzdm的博客

06-17

1480

要水平居中对齐一个元素(如 ), 可以使用 margin: auto;当像这样对齐元素时，对元素的外边距和内边距进行预定义是一个好主意。注意：如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，这时候你可以使用 "clearfix(清除浮动)" 来解决该问题。除了使用 padding 和 line-height 属性外,我们还可以使用 transform 属性来设置垂直居中。如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;

css基础知识总结-学习

12-02

css基础知识总结-学习

参与评论您还未登录，请先登录后发表或查看评论

CSS基础学习--25 border（边框）进阶

yyxhzdm的博客

06-24

1651

boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。有了 CSS3 的 border-image 属性，你可以使用图像创建一个边框：border-image 属性允许你指定一个图片作为边框！在 CSS2 中添加圆角棘手。我们不得不在每个角落使用不同的图像。CSS3 中的 box-shadow 属性被用来添加阴影。在 CSS3 中，很容易创建圆角。比如修改前两位会发生什么？

零基础学习CSS---04.CSS列表属性详解

m0_52136934的博客

10-20

3675

零基础学习CSS---04.CSS列表属性（list-style-type、list-style-image、list-style-position、list-style复合写法）详解。

css基础知识 -- 颜色渐变

热门推荐

qq_52993453的博客

11-20

1万+

渐变：使您可以显示两种或多种指定颜色之间的平滑过渡 CSS 定义了两种渐变类型：线性渐变（向下/向上/向左/向右/对角线）如需创建线性渐变，必须定义至少两个色标。色标是要呈现平滑过渡的颜色。还可以设置起点和方向（或角度）以及渐变效果。 //语法 background-image: linear-gradient(direction, color-stop1, color-stop2, ...); 1.从上到下（默认） #grad { background-image:...

CSS基础学习--26 渐变（Gradients）

yyxhzdm的博客

06-24

3259

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。

CSS基础学习--18 导航栏

yyxhzdm的博客

06-18

2564

如果要在每个选项上添加边框，可以在每个元素上添加。导航条基本上是一个链接列表，所以使用和元素非常有意义。这两种方法都很好，但如果你想链接到具有相同的大小，你必须使用浮动的方法。对于所有的链接宽度相等，浮动元素，并指定为元素的宽度。接下来我们创建一个左边是全屏高度的固定导航条，右边是可滚动的内容。在我们的例子中我们将建立一个标准的 HTML 列表导航栏。我们只需要元素的样式，建立一个垂直的导航栏。在上面的例子中链接有不同的宽度。

CSS基础学习--19 下拉菜单

yyxhzdm的博客

06-18

2947

我们可以使用任何的 HTML 元素来打开下拉菜单，如：, 或 a 元素。使用容器元素 (如： ) 来创建下拉菜单的内容，并放在任何你想放的位置上。使用元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。（1）、设置左浮动的下拉菜单内容方向是从左到右，而不是从右到左。（2）、设置右浮动的下拉菜单内容方向是从右到左，而不是从左到右。如果你想设置下拉内容与下拉按钮的宽度一致，可设置。, 这将设置下拉菜单的内容放置在下拉按钮 (使用。

CSS基础学习--9 边框（Border）

yyxhzdm的博客

06-12

2425

为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值）和 thin。CSS 没有定义 3 个关键字的具体宽度，所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px，而另一个用户则分别设置为 3px、2px 和 1px。上面的例子用了很多属性来设置边框，你也可以在一个属性中设置边框。边框样式属性指定要显示什么样的边界。

CSS基础学习--11 padding（填充）

yyxhzdm的博客

06-13

2193

CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。单独使用 padding 属性可以改变上下左右的填充。值说明length定义一个固定的填充(像素, pt, em,等)使用百分比值定义一个填充。

CSS基础：你必须要知道的行高属性 line-height

WangMin@汪末末

11-10

3504

CSS中的行高（line-height）是指网页中每行文字之间的距离，就是对于同一行内的不同内容，行高决定它们之间的间距。换一句话来说，在CSS中包括文字的每一行不是只有文字的高度，其实还有上间距、下间距，所以行高指的是文字的高度+上下间距。合理设置文字行高不仅能够让网页更加美观与整洁，还能够增加用户的视觉与阅读体验，在大段文字中，合适的行高可以让用户阅读起来更加舒适。你可能还是不明白行高是什么？下面我通过几图来仔细给大家讲一下吧！

css基础5-定位布局-装饰

12-05

学习CSS定位布局和装饰性属性的目标是掌握不同定位方式的特点和应用场景，例如解决元素层叠问题，创建固定在屏幕特定位置的导航栏，以及通过圆角边框和光标类型提升用户体验。理解并熟练运用这些知识点，将有助于...

JavaScript基础学习-1

12-20

1. JavaScript基础：学习ECMAScript的基本规则，这是JavaScript的核心语言部分。 2. ES6实战：了解并应用ES6引入的新特性，如箭头函数、类、模板字符串等。 3. 面向对象编程：理解面向对象的概念并学会在JavaScript...

HTML-CSS结合-基础讲解2022优秀文档.ppt

11-14

HTML 和 CSS 是构建网页设计的基础，它们的结合使得开发者能够创建功能丰富且视觉美观的...随着学习的深入，还可以探索更高级的 CSS 特性，如布局技术（Flexbox 和 Grid）、响应式设计以及动画效果等，以提升用户体验。

详解CSS3中border-image的使用

09-25

这个属性是CSS3入门学习中的基础知识，对于提升网页设计的美观度具有重要作用。首先，`border-image`必须与`border`属性一起使用。这意味着，当你设置了`border-image`后，传统的`border-style`将被替换。如果`...

【CSS】css 的opacity属性作用是什么，原理是什么，怎么使用

最新发布

读心悦

06-19

319

值时，浏览器会渲染该元素和其所有子元素时应用这个不透明度。这意味着，如果你给一个包含文本的。是 CSS 中的一个属性，它用于设置元素的不透明度。值定义了该元素和其所有子元素相对于其正常的不透明度的可见程度。属性，或者在 HTML 元素中使用内联样式。的值范围是从 0（完全透明）到 1（完全不透明）。的背景会变得半透明，里面的文本也会变得半透明。你可以直接在 CSS 样式表中设置。希望这能帮助你理解 CSS 的。

CSS从入门到精通——动画:CSS3动画延迟和完成后状态的保持

m0_73614626的博客

06-16

547

上面已经实现了绿色小球向右移动的动画，怎么在绿色小球动画完成时保持这个状态呢？红色小球和绿色小球的动画基本是一样的，调整一下位置就可以了。为了完成本关任务，你需要掌握：1.动画状态，2.动画完成时的状态，3.动画延迟。这里以绿色小球的移动来说明小球的状态。小球向右移动是利用定位来改变它的。它规定了动画在播放之前或之后，其动画效果是否可见。本关任务：用 CSS3 实现小车等待红绿灯的效果。运用第一关学到的知识，先创建一个动画名称为。来实现，它定义了动画在何时开始，默认为。然后把这个动画绑定到。

【CSS】background怎么设置多个背景图

读心悦

06-16

340

在CSS中设置多个背景图片可以通过属性来实现，不同的背景图像之间使用逗号隔开。

css系列：音频播放效果-波纹律动

zkx529的博客

06-12

711

音频律动效果，实现了语音播放时的带有动画的特殊样式的进度条

Autodesk Forge 学习简谈 - 1

06-08

Autodesk Forge 是一个基于云计算的开发平台，旨在帮助开发人员构建应用程序，与 Autodesk 产品进行集成，并利用 Autodesk 的 3D 渲染和建模技术来增强应用程序的功能。在学习 Autodesk Forge 之前，需要具备一定的编程经验和对 web 技术的基本了解，例如 HTML、CSS、JavaScript 和 REST API 等。同时，您需要了解 Autodesk Forge 提供的不同服务和模块以及它们之间的关系。在学习过程中，您可以使用 Autodesk 提供的文档、示例代码和在线课程，以及社区支持来帮助您更好地理解和使用 Autodesk Forge。总的来说，学习 Autodesk Forge 需要一定的技术基础和耐心，但通过学习，您可以获得构建强大的应用程序的能力，并与 Autodesk 的产品进行集成，提高工作效率和创造力。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交