CSS的基础学习与开发
关注
分享
扫一扫
文章平均质量分 61
HTML的基础学习，主要学习css。用于Web前端的开发。根据教程完成多个方面知识的积累。
yyxhzdm
通过近些年的学习，在Android、Java、微信小程序、uniapp等开发都有些心得体会。最近开始接触HarmonyOS原生以及ArkUI框架的开发...
展开
-
CSS基础学习--27 常使用的属性
【代码】CSS基础学习--27 常使用的属性。原创 2023-06-24 19:24:32 · 588 阅读 · 0 评论 -
CSS基础学习--26 渐变（Gradients）
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。原创 2023-06-24 19:04:14 · 3775 阅读 · 0 评论 -
CSS基础学习--25 border（边框）进阶
boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。有了 CSS3 的 border-image 属性，你可以使用图像创建一个边框：border-image 属性允许你指定一个图片作为边框！在 CSS2 中添加圆角棘手。我们不得不在每个角落使用不同的图像。CSS3 中的 box-shadow 属性被用来添加阴影。在 CSS3 中，很容易创建圆角。比如修改前两位会发生什么？原创 2023-06-24 18:45:39 · 1735 阅读 · 0 评论 -
CSS基础学习--24 表单
默认情况下，一些浏览器在输入框获取焦点时（点击输入框）会有一个蓝色轮廓。这样可以确保浏览器呈现出带有指定宽度和高度的输入框是把边框和内边距一起计算进去的。属性来禁用文本框可以重置大小的功能（一般拖动右下角可以重置大小）。如果你想在输入框中添加图标，可以使用。属性可以修改 input 边框的大小或颜色，使用。注意设置图标的左边距，让图标有一定的空间。使用 width 属性来设置输入框的宽度。选择器可以设置输入框在获取焦点时的样式。属性可以在输入框中添加内边距。属性来设置输入框的背景颜色，原创 2023-06-24 18:20:54 · 764 阅读 · 0 评论 -
CSS基础学习--23 CSS属性 选择器
[title]color:blue;CSS基础学习-选择器原创 2023-06-24 17:55:01 · 351 阅读 · 0 评论 -
CSS基础学习--22 图像透明/不透明
首先，我们创建一个固定的高度和宽度的div元素，带有一个背景图片和边框。然后我们在第一个div内部创建一个较小的div元素。这个div也有一个固定的宽度，背景颜色，边框 - 而且它是透明的。透明的div里面，我们在P元素内部添加一些文本。第一个CSS块是和例1中的代码类似。此外，我们还增加了当用户将鼠标悬停在其中一个图像上时发生什么。在这种情况下，当用户将鼠标悬停在图像上时，我们希望图片是清晰的。较低的值，使得元素更加透明。值越小，使得元素更加透明。当鼠标指针远离图像时，图像将重新具有透明度。原创 2023-06-19 22:56:49 · 1218 阅读 · 0 评论 -
CSS基础学习--21 img ( 图片 )
【代码】CSS基础学习--21 图片廊。原创 2023-06-19 22:30:05 · 336 阅读 · 0 评论 -
CSS基础学习--20 提示工具(Tooltip)
提示工具在鼠标移动到指定元素后触发，总共四种样式实例： 提示框在鼠标移动到指定元素上显示 HTML- 使用容器元素 (like <div>) 并添加 "tooltip" 类。在鼠标移动到 <div> 上时显示提示信息。提示文本放在内联元素上(如 <span>) 并使用class="tooltiptext"。CSS-tooltip 类使用 position:relative, 提示文本需要设置定位值 position:absolute。 注意: 接下来的实例会显示更多的定位效果。tooltiptext原创 2023-06-18 18:40:11 · 3566 阅读 · 0 评论 -
CSS基础学习--19 下拉菜单
我们可以使用任何的 HTML 元素来打开下拉菜单，如：, 或 a 元素。使用容器元素 (如： ) 来创建下拉菜单的内容，并放在任何你想放的位置上。使用 元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。（1）、设置左浮动的下拉菜单内容方向是从左到右，而不是从右到左。（2）、设置右浮动的下拉菜单内容方向是从右到左，而不是从左到右。如果你想设置下拉内容与下拉按钮的宽度一致，可设置。, 这将设置下拉菜单的内容放置在下拉按钮 (使用。原创 2023-06-18 18:10:45 · 3799 阅读 · 0 评论 -
CSS基础学习--18 导航栏
如果要在每个选项上添加边框，可以在每个 元素上添加。导航条基本上是一个链接列表，所以使用 和 元素非常有意义。这两种方法都很好，但如果你想链接到具有相同的大小，你必须使用浮动的方法。对于所有的链接宽度相等，浮动 元素，并指定为 元素的宽度。接下来我们创建一个左边是全屏高度的固定导航条，右边是可滚动的内容。在我们的例子中我们将建立一个标准的 HTML 列表导航栏。我们只需要 元素的样式，建立一个垂直的导航栏。在上面的例子中链接有不同的宽度。原创 2023-06-18 13:06:08 · 2720 阅读 · 0 评论 -
CSS基础学习--17 布局 - 水平 & 垂直对齐
要水平居中对齐一个元素(如 ), 可以使用 margin: auto;当像这样对齐元素时，对 元素的外边距和内边距进行预定义是一个好主意。注意：如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，这时候你可以使用 "clearfix(清除浮动)" 来解决该问题。除了使用 padding 和 line-height 属性外,我们还可以使用 transform 属性来设置垂直居中。如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;原创 2023-06-17 22:57:19 · 1519 阅读 · 0 评论 -
CSS基础学习--16 Float(浮动)
CSS基础学习-float浮动img原创 2023-06-17 22:36:41 · 1125 阅读 · 1 评论 -
CSS基础学习--15 CSS布局 - Overflow
CSS基础学习-overflowwidth: 80%;这里的文本内容是可以滚动的，滚动条方向是垂直方向。这里的文本内容是可以滚动的，滚动条方向是垂直方向。这里的文本内容是可以滚动的，滚动条方向是垂直方向。原创 2023-06-17 22:24:55 · 1122 阅读 · 0 评论 -
CSS基础学习--14 Position(定位)
position属性指定了元素的定位类型staticrelativefixedabsolutesticky元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。原创 2023-06-17 18:49:34 · 1750 阅读 · 0 评论 -
CSS基础学习--13 Display(显示) 与 Visibility（可见性）
display属性设置一个元素应如何显示visibility属性指定一个元素应可见还是隐藏。原创 2023-06-13 23:46:51 · 1923 阅读 · 0 评论 -
CSS基础学习--12 分组 和 嵌套 选择器
h1、h2与p标签字体颜色都是绿色， 为了尽量减少代码，可以使用分组选择器。为了尽量减少代码，你可以使用分组选择器。在样式表中有很多具有相同样式的元素。每个选择器用逗号分隔。原创 2023-06-13 23:30:23 · 1520 阅读 · 0 评论 -
CSS基础学习--11 padding（填充）
CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。单独使用 padding 属性可以改变上下左右的填充。值说明length定义一个固定的填充(像素, pt, em,等)使用百分比值定义一个填充。原创 2023-06-13 23:12:41 · 2262 阅读 · 0 评论 -
CSS基础学习--10 margin(外边距)
CSS margin(外边距)属性定义元素周围的空间。原创 2023-06-13 22:48:21 · 1589 阅读 · 0 评论 -
CSS基础学习--9 边框（Border）
为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值） 和 thin。CSS 没有定义 3 个关键字的具体宽度，所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px，而另一个用户则分别设置为 3px、2px 和 1px。上面的例子用了很多属性来设置边框，你也可以在一个属性中设置边框。边框样式属性指定要显示什么样的边界。原创 2023-06-12 23:12:35 · 2927 阅读 · 0 评论 -
CSS基础学习--8 盒子模型(Box Model)
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model)：Margin(外边距)- 清除边框外的区域，外边距是透明的。Border(边框)- 围绕在内边距和内容外的边框。Padding(内边距)- 清除内容周围的区域，内边距是透明的。Content(内容)原创 2023-06-12 22:42:55 · 995 阅读 · 0 评论 -
CSS基础学习--7 fonts字体
注意：在上面的例子，em的文字大小是与前面的例子中像素一样。不幸的是，仍然是IE浏览器的问题。能否管理文字的大小，在网页设计中是非常重要的。: 如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"，多个字体系列是用一个逗号分隔指明。在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。如果你不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）。在所有浏览器的解决方案中，设置 <body>元素的默认字体大小的是百分比。原创 2023-06-12 22:24:32 · 1639 阅读 · 0 评论 -
CSS基础学习--6 CSS Text（文本）
当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐。即：可以设置像素（50px）、百分比（2%）、继承父元素 text-indent 属性的值。text-decoration 属性用来设置或删除文本的装饰。可用于所有字句变成大写或小写字母，或每个单词的首字母大写。文本转换属性是用来指定在一个文本中的大写和小写字母。文本排列属性是用来设置文本的水平对齐方式。文本缩进属性是用来指定文本的第一行的缩进。比对：图2是设置justify属性值的。颜色属性被用来设置文字的颜色。原创 2023-06-11 15:53:58 · 1036 阅读 · 0 评论 -
CSS基础学习--5 background背景
body {原创 2023-06-11 15:31:13 · 1461 阅读 · 0 评论 -
CSS基础学习--4 创建式样
在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部（head）中。由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。备注：外部样式表可以在任何文本编辑器中进行编辑。浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。当单个文档需要特殊的样式时，就应该使用内部样式表。时，外部样式表将是理想的选择。原创 2023-06-11 14:18:49 · 1109 阅读 · 0 评论 -
CSS基础学习--3 id和class 选择器
如果你需要在HTML中设置CSS样式，你需要在元素中设置“id”和“class”选择器。原创 2023-06-11 13:12:04 · 155 阅读 · 0 评论 -
CSS基础学习--2 语法
1、CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:（1）、选择器通常是您需要改变样式的 HTML 元素。（2）、每条声明由一个属性和一个值组成。（3）、属性是您希望设置的样式属性。每个属性有一个值。属性和值被冒号分开。2、实例CSS声明总是以分号;结束，声明总以大括号 {} 括起来p {color:red;二、CSS 注释注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。CSS注释以/*开始, 以*/原创 2023-06-11 12:48:28 · 178 阅读 · 0 评论 -
CSS基础学习--1 简介
CSS指层叠样式表样式定义如何显示HTML元素样式通常存储在样式表中外部样式表可以极大的提高工作效率外部样式表通常存储在CSS文件中多个样式定义可层叠为一个。原创 2023-06-11 12:30:15 · 55 阅读 · 0 评论 -
uni-app css之background属性说明
background-color background-position background-size background-repeat background-image background-origin background-clip background-attachment1.background-color : 设置元素的背景颜色 有三种格式：（1）.background-color:yellow;（2）.background-color:#00ff00;（3.原创 2021-11-03 14:30:55 · 4552 阅读 · 0 评论 -
Html与CSS基础知识篇（CSS基础篇）
认识CSS样式CSS的全称“层叠样式表（cascading style sheets）”,它主要用于定义HTML内容在浏览器内显示样式，如字体大小、颜色、粗细等。示例代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>第一个网页标题</title> <link> <style>转载 2021-03-19 14:53:25 · 609 阅读 · 0 评论 -
Html与CSS基础知识篇（Html标签语法篇2）
前言：上章我们主要介绍Html中常用到的一些标签，最后我们提到了表格<table>标签，它默认显示没有表格线，但是我们常见到的都会有表格线的，那样既美观也实用。下面我们着重介绍一下CSS样式用CSS样式，为表格加入边框table表格在没有添加CSS样式之前，是没有边框的。这样不便于我们后期合并单元格知识的讲解，所有我们这一节我们为表格添加一些样式，为它添加边框。在编译器中添加如下代码：<head> <meta charset="UTF-8">原创 2021-03-17 17:28:39 · 267 阅读 · 0 评论 -
Html与CSS基础知识篇（HTML标签语法篇）
HTML和CSS的关系学习Web前端开发基础技术需要掌握：Html、CSS、JavaScript语言。下面我们大致了解一下这三门技术都用来实现什么：（1）HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、多媒体等。（2）CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或者标题加入北京图片、边框等。所有这些用来改变内容外观的东西称之为表现（3）JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景原创 2021-03-15 21:31:51 · 504 阅读 · 0 评论