CSS学习笔记之基础教程（一）

最新推荐文章于 2024-09-29 09:36:14 发布
最新推荐文章于 2024-09-29 09:36:14 发布
阅读量490 收藏 11
点赞数 3
分类专栏： CSS 文章标签： css 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wz_1992/article/details/138540284
版权

1、CSS语法

  • CSS 规则集（rule-set）由选择器和声明块组成：
    在这里插入图片描述

  • 选择器指向您需要设置样式的 HTML 元素。

  • 声明块包含一条或多条用分号分隔的声明。

  • 每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。

  • 多条 CSS 声明用分号分隔，声明块用花括号括起来。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS</title>
<style>
body{
background-color: #EDEDED;
}
/* 标题h1样式 */
h1{
color: #333333;
text-align: center;
font-size: 20px;
}
/* 段落样式 */
p{
font-size: 15px;
color: #666666;
/* 字体 */
font-family: Verdana;
}
</style>
</head>
<body>
<h1>我的第一个CSS示例</h1>
<p>这是一个段落</p>

</body>
</html>

2、CSS选择器

2.1 什么是CSS选择器

  • CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。

  • 我们可以将 CSS 选择器分为五类：
    （1）简单选择器（根据名称、id、类来选取元素）
    （2）组合器选择器（根据它们之间的特定关系来选取元素）
    （3）伪类选择器（根据特定状态选取元素）
    （4）伪元素选择器（选取元素的一部分并设置其样式）
    （5）属性选择器（根据属性或属性值来选取元素）

2.2 CSS 元素选择器

  • 元素选择器根据元素名称来选择 HTML 元素。
h1{
color: #333333;
text-align: center;
font-size: 20px;
}

2.3 CSS id 选择器

  • id 选择器使用 HTML 元素的 id 属性来选择特定元素。

  • 元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！

  • 要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。

  • id 名称不能以数字开头

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS</title>
<style>
body {
background-color: #EDEDED;
}
#para1 {
text-align: left;
color: red;
}
</style>
</head>

<body>
<!-- id选择器 -->
<p id="para1">这部分受id选择器控制</p>
</body>

</html>

2.4 CSS 类选择器

  • 类选择器选择有特定 class 属性的 HTML 元素。

  • 如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。

  • 类名不能以数字开头！

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS</title>
<style>
body {
background-color: #EDEDED;
}
p.center{
text-align:left;
color: aqua;
}
p.size {
font-size: 20px;
}
</style>
</head>

<body>
<!-- 类选择器 -->
<h1 class="center">这个标题不受影响</h1>
<p class="center">这个段落受类选择器影响</p>
<p class="center size">这个段落受多个类选择器影响</p>
</body>

</html>

运行效果：
在这里插入图片描述

2.5 CSS 通用选择器

  • 通用选择器（*）选择页面上的所有的 HTML 元素。
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS</title>
<style>
body {
background-color: #EDEDED;
}
/* 通用选择器 影响页面中的每一个元素 */
*{
color: blue;
text-align: center;
}
</style>
</head>

<body>
<p>这个段落受通用选择器影响</p>
</body>

</html>

2.6 CSS 分组选择器

  • 最好对选择器进行分组，以最大程度地缩减代码。

  • 如需对选择器进行分组，请用逗号来分隔每个选择器。

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS</title>
<style>
body {
background-color: #EDEDED;
}


/* 分组选择器 */
h1,h2,p{
text-align: left;
color: brown;
}
</style>
</head>

<body>


<h1>Hello</h1>
<h2>你好</h2>
<p>段落</p>
</body>

</html>

运行效果：
在这里插入图片描述

3、CSS的使用

有三种插入样式表的方法：

  • 外部 CSS
  • 内部 CSS
  • 行内 CSS

3.1 外部CSS

  • 通过使用外部样式表，您只需修改一个文件即可改变整个网站的外观！
  • 每张 HTML 页面必须在 head 部分的 <link> 元素内包含对外部样式表文件的引用。
  • 外部样式表可以在任何文本编辑器中编写，并且必须以 .css 扩展名保存。
  • 外部 .css 文件不应包含任何 HTML 标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 外部引入css -->
<link rel="stylesheet" type="text/css" href="css/baseStyle.css">
</head>
<body>

<h1>Hello</h1>
<p>段落内容</p>


</body>
</html>

baseStyle.css:

h1{
text-align: center;
font-size: 20px;
color: #333333;
}
p{
text-align: left;
font-size: 15px;
color: #666666;
}

运行效果：
在这里插入图片描述
注意：请勿在属性值和单位之间添加空格（例如 margin-left: 20 px;）。正确的写法是：margin-left: 20px;

3.2 内部 CSS

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}

h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>

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

</body>
</html>

3.3 行内CSS

  • 行内样式（也称内联样式）可用于为单个元素应用唯一的样式。

  • 如需使用行内样式，请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。

  • 行内样式失去了样式表的许多优点（通过将内容与呈现混合在一起）。请谨慎使用此方法。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

<h1 style="font-size: 20px; color:#333333">Hello</h1>
<p style="font-size:15px; color:#666666">段落内容</p>


</body>
</html>

3.4 多个样式表

  • 内部+外部+行内 多种样式一起使用
  • 最终效果为最后声明的样式
  • 页面中的所有样式将按照以下规则“层叠”为新的“虚拟”样式表，其中第一优先级最高：
    （1）行内样式（在 HTML 元素中）
    （2）外部和内部样式表（在 head 部分）
    （3）浏览器默认样式

示例一：此时h1的颜色为后声明的orange

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link type="text/css" rel="stylesheet" href="css/baseStyle.css">
<style>
h1{
color: orange;
}
</style>
</head>
<body>

<h1>Hello</h1>
<p >段落内容</p>


</body>
</html>

baseStyle.css:

h1{
text-align: center;
font-size: 20px;
color: #333333;
}
p{
text-align: left;
font-size: 15px;
color: #666666;
}

运行效果：
在这里插入图片描述
示例二：此时h1的颜色为baseStyle.css中定义的#333333

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<style>
h1{
color: orange;
}

</style>
<link type="text/css" rel="stylesheet" href="css/baseStyle.css">
</head>
<body>

<h1>Hello</h1>
<p >段落内容</p>


</body>
</html>

运行效果：
在这里插入图片描述

4、CSS 背景

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

4.1 背景颜色： background-color

  • 指定元素的背景色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<style>
body{
background-color: orange;
/* background-color: #EDEDED; */
/* background-color: rgb(255,0,0); */
}
h1{
background-color: bisque;
}
</style>
</head>
<body>

<h1>Hello</h1>
<p >段落内容</p>

</body>
</html>

运行效果：
在这里插入图片描述

4.2 背景图像：background-image

  • 指定用作元素背景的图像。
  • 默认情况下，background-image 属性在水平和垂直方向上都重复图像。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<style>
body{
background-image: url(imgs/login_bg.png);
}

</style>
</head>
<body>

<h1>Hello</h1>
<p >段落内容</p>

</body>
</html>

图片资源文件为：
在这里插入图片描述
运行效果：
在这里插入图片描述

4.2.2 背景重复：background-repeat

4.2.2.1 仅在水平方向上重复：background-repeat: repeat-x;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<style>
body{
background-image: url(imgs/login_bg.png);
/* 仅在水平方向上重复 */
background-repeat: repeat-x;
}

</style>
</head>
<body>

<h1>Hello</h1>
<p >段落内容</p>

</body>
</html>

运行效果：
在这里插入图片描述

4.2.2…2 仅在垂直方向上重复：background-repeat: repeat-y;
4.2.2.3 不重复background-repeat: no-repeat;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<style>
body{
background-image: url(imgs/login_bg.png);
background-repeat: no-repeat;
}

</style>
</head>
<body>

<h1>Hello</h1>
<p >段落内容</p>

</body>
</html>

运行效果：
在这里插入图片描述

4.2.3 背景图像位置：background-position

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<style>
body{
background-image: url(imgs/login_bg.png);
background-repeat: no-repeat;
background-position: left top;
}

</style>
</head>
<body>

<h1>Hello</h1>
<p >段落内容</p>

</body>
</html>

4.2.4 CSS 背景附着：background-attachment

  • 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）
4.2.4.1 背景固定，不随页面滚动 background-attachment: fixed;
  • 页面内容滚动，图片一直位于设置的左上角
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<style>
body{
background-image: url(imgs/login_bg.png);
background-repeat: no-repeat;
background-position: left top;
background-attachment: fixed;
}
p{
font-size: 40px;
}

</style>
</head>
<body>

<h1>Hello</h1>
<p >段落内容1</p>
<p >段落内容2</p>
<p >段落内容3</p>

<p >段落内容4</p>
<p >段落内容5</p>
<p >段落内容6</p>
<p >段落内容7</p>
<p >段落内容8</p>

<p >段落内容9</p>
<p >段落内容10</p>

<p >段落内容11</p>
<p >段落内容12</p>
<p >段落内容13</p>

<p >段落内容14</p>
<p >段落内容15</p>
<p >段落内容16</p>
<p >段落内容17</p>
<p >段落内容18</p>

<p >段落内容19</p>
<p >段落内容20</p>
</body>
</html>

在这里插入图片描述

4.2.4.2 背景不固定，随页面滚动 background-attachment: scroll;

4.3 CSS background - 简写属性

按照如下顺序进行简化：

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
body {
background-color: orange;
background-image: url(imgs/login_bg.png);
/* 重复样式 */
background-repeat: no-repeat;
/* 是否随页面内容滚动 */
background-attachment: scroll;
/* 位置 */
background-position: left top;
}

简化为：

body{
background: orange url(imgs/login_bg.png) no-repeat fixed left top;
}

4.4 所有 CSS 背景属性

在这里插入图片描述

5、CSS边框： border

5.1 边框种类

  • dotted - 定义点线边框
  • dashed - 定义虚线边框
  • solid - 定义实线边框
  • double - 定义双边框
  • groove - 定义 3D 坡口边框。效果取决于 border-color 值
  • ridge - 定义 3D 脊线边框。效果取决于 border-color 值
  • inset - 定义 3D inset 边框。效果取决于 border-color 值
  • outset - 定义 3D outset 边框。效果取决于 border-color 值
  • none - 定义无边框
  • hidden - 定义隐藏边框
<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>

<h1>border-style 属性</h1>

<p>此属性规定要显示的边框类型：</p>

<p class="dotted">点状边框。</p>
<p class="dashed">虚线边框。</p>
<p class="solid">实线边框。</p>
<p class="double">双线边框。</p>
<p class="groove">凹槽边框。</p>
<p class="ridge">垄状边框。</p>
<p class="inset">3D inset 边框。</p>
<p class="outset">3D outset 边框。</p>
<p class="none">无边框。</p>
<p class="hidden">隐藏边框。</p>
<p class="mix">混合边框。</p>

</body>
</html>

运行效果：
在这里插入图片描述

5.2 边框宽度： border-width

  • border-width 属性指定四个边框的宽度。
  • 可以将宽度设置为特定大小（以 px、pt、cm、em 计），也可以使用以下三个预定义值之一：thin、medium 或 thick
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>边框</title>

<style>
p.one {
border-style: dotted;
border-width: 5;
}
/* 上下边框10 左右为20 */
p.two{
border-style: double;
border-width: 10px 20px;
}
/* 上右下左各不一样 */
p.three{
border-style:solid;
border-width: 10px 15px 20px 25px;
}
</style>
</head>

<body>
<p class="one">这个段落有边框</p>
<p class="two">这个段落边框宽度不一样</p>
<p class="three">这个段落边框宽度都不一样</p>
</body>

</html>

运行效果：
在这里插入图片描述

5.3 边框宽度 ：border-color

可以通过以下方式设置颜色：

  • name - 指定颜色名，比如 “red”
  • HEX - 指定十六进制值，比如 “#ff0000”
  • RGB - 指定 RGB 值，比如 “rgb(255,0,0)”
  • HSL - 指定 HSL 值，比如 “hsl(0, 100%, 50%)”
  • transparent
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>边框</title>

<style>
/* 四个边框相同宽度 */
p.one {
border-style: dotted;
border-width: 5;
border-color: red;
}
/* 上下边框10 左右为20 */
p.two{
border-style: double;
border-width: 10px 20px;
/* 左右为粉色 山下为蓝色 */
border-color: pink blue;
}
/* 上右下左各不一样 */
p.three{
border-style:solid;
border-width: 10px 15px 20px 25px;
border-color: pink red blue black;
}
</style>
</head>

<body>
<p class="one">这个段落有边框</p>
<p class="two">这个段落边框宽度不一样</p>
<p class="three">这个段落边框宽度都不一样</p>
</body>

</html>

5.4 CSS 边框各边

  • border-top-style
  • border-right-style
  • border-bottom-style
  • border-left-style
p.one {
/* border-style: dotted; */
border-width: 5;
border-color: red;
/* border-color: hsl(0, 100%, 50%); */
/* border-color: rgb(255, 0, 0); */
/* border-color: #ff0000; */
/* 不同边 不同样式 */
border-top-style:dotted ;
border-right-style:double;
border-bottom-style: groove;
border-left-style: inherit;
}

简化写法：

<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
/* 四个值 */
p.four {
border-style: dotted solid double dashed;
}

/* 三个值 */
p.three {
border-style: dotted solid double;
}

/* 两个值 */
p.two {
border-style: dotted solid;
}

/* 一个值 */
p.one {
border-style: dotted;
}
</style>
</head>
<body>

<h1>单独的边框</h1>

<p class="four">四种不同的边框样式。</p>
<p class="three">三种不同的边框样式。</p>
<p class="two">两种不同的边框样式。</p>
<p class="one">一种边框样式。</p>

</body>
</html>

5.5 CSS 简写边框属性

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

  • border-width
  • border-style（必需）
  • border-color
p {
border: 5px solid red;
}

或者：

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

5.6 CSS 圆角边框 ：border-radius

5.7 所有 CSS 边框属性

在这里插入图片描述

文阿花
关注
专栏目录
DIV+CSS基础教程笔记
sapphire7的博客
07-10 2366
缺点：1）显示样式和数据是绑定的在一起 2）布局的时候，灵活度不高 3）一个页面可能会有大量的元素，代码会冗余 4）增加带宽 5）搜索引擎不喜欢这样的布局优点：1）理解比较简单 2）不同的浏览器看到的效果一般是相同的 3）显示数据还是很好的 基本思想：数据和样式要分离 div元素是用来为HTML文档内大块的内容提供结构和背景的元素。 ......
css基础入门学习笔记详细教程
04-15
css入门学习笔记详细教程
CSS学习笔记之基础教程（二）
wz_1992的博客
05-07 379
上节内容CSS学习笔记之基础教程（一） 6、边距 6.1 外边距：margin 6.1.1 外边距 margin margin-top margin-left margin-bottom margin-right <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"
尚硅谷CSS学习笔记
MissXu666的博客
10-10 1392
等等），导致节点位置发生变化，此时触发浏览器重排（reflow），需要重新生成渲染树。③维护方面：CSS Sprites在维护的时候比较麻烦，页面背景有少许改动时，就要改这张合并的图片，无需改的地方尽量不要动，这样避免改动更多的CSS，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动CSS。我们在编码时，不用过于关注浏览器的私有前缀，不用去记忆，去查询，因为常用的css3 新特性，主流浏览器都是支持的，对于老版本浏览器，我们也可以借助现代构建工具，去帮我们添加私有前缀。
菜鸟教程CSS学习笔记（04）
2301_79999289的博客
09-13 1220
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。.marked p{ }: 为所有 class=“marked” 元素内的 p 元素指定一个样式。p.marked{ }: 为所有 class=“marked” 的 p 元素指定一个样式。.marked{ }: 为所有 class=“marked” 的元素指定一个样式。CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。Float（浮动），往往是用于图像，但它在布局时一样非常有用。
CSS-基础-MDN文档学习笔记
qq_57508808的博客
02-16 1398
完整的 CSS 盒模型应用于块级盒子，内联盒子只使用盒模型中定义的部分内容CSS 中的书写模式是指文本的排列方向是横向还是纵向的可以使用进行属性间的切换：块流向从上至下，对应的文本方向是横向的：块流向从右向左，对应的文本方向是纵向的：块流向从左向右，对应的文本方向是纵向的属性实际上设定的是页面上块级元素的显示方向，而这决定了文本的方向。
超详细的学习笔记：CSS基础（附代码示例）
lbcbjtlhmjq的博客
06-30 2933
CSS入门容易，精通难。因为CSS的属性很多，一个一个去学去记根本不可能，我们要善于借助网络工具。关于HTML和CSS的学习资源，网上的在线教程、速查宝典就有一大推。所以只要了解HTML和CSS标签及属性的基本用法，再借助于在线文档，基本上HTML和CSS的学习就不会有太大问题。但是要提醒大家的是，不要完全依赖于在线文档。最基本的一些属性（比如字体样式、文本样式等）还是需要掌握并且熟练使用，我写这篇博客就是为了让大家更好地熟悉并运用CSS的常见属性。
CSS学习笔记目录
wz_1992的博客
05-30 497
CSS学习笔记之基础教程（一） CSS学习笔记之基础教程（二） CSS学习笔记之中级教程（一） CSS学习笔记之中级教程（二） CSS学习笔记之中级教程（三） CSS学习笔记之高级教程（一） CSS学习笔记之高级教程（二） CSS学习笔记之高级教程（三） CSS学习笔记之高级教程（四）
超详细的学习笔记：CSS进阶（附代码示例）
lbcbjtlhmjq的博客
07-09 653
作用:根据 HTML标签的套关系，选择父元素 子代中 满条件的元素选择器语法:选择器1 > 选择器2{ css }2、背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色。在选择器1所找到标签的后代(儿子、孙子、重孙子...)中，找到满足选择器2的标签，i设置样式。作用:同时选择多组标签，设置相同的样式选择器语法:选择器1，选择器2{ css }(既又原则)找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式。
尚硅谷前端入门html+css学习笔记——HTML4
qq_62237063的博客
08-04 898
尚硅谷前端入门html+css零基础教程，零基础前端开发html5+css3视频网页（淘宝、京东）、小程序（支付宝、抖音）、数据可视化（智慧工地可视化大数据展示平台）、服务器、客户端全称：HyperText Markup Language 译为： 超文本标记语言1996年W3C制定HTML规范，2014年HTML5由W3C正式发布。
尚硅谷前端入门html+css零基础教程，零基础前端开发html5+css3视频尚品汇项目源码
03-06
【标题】中的“尚硅谷前端入门html+css零基础教程”指的是一个由尚硅谷教育机构提供的，面向初学者的前端开发课程，主要涵盖了HTML（超文本标记语言）和CSS（层叠样式表）的基础知识。这个教程是为那些对前端开发...
PC端html与css学习笔记.pdf
01-16
HTML（HyperText Markup Language）是用于创建网页的标准标记语言，而CSS（Cascading Style Sheets）则是一种样式表语言，用于描述...参考资源如W3School和MDN Web Docs提供了详细的教程和文档，是深入学习的好地方。
Web前端CSS视频教程课堂笔记
12-17
本套CSS基础视频教程详细讲解了什么是css 。层叠样式表(英文全称：CascadingStyleSheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅...
CSS-Day3
最新发布
m0_74039531的博客
09-29 237
伪类的语法：selector:pseudo-class {property:value;}CSS类也可以使用伪类：selector.class:pseudo-class {property:value;}您可以使用 :first-child 伪类来选择父元素的第一个子元素。p:first-child { color:blue; }在下面的例子中，选择相匹配的所有<p>元素的第一个 <i> 元素：p > i:first-child { color:blue; }在下面的例子中，选择器匹配所有作
前端工程规范-3：CSS规范（Stylelint）
Vinca@的博客
09-26 1032
Stylelint 是一个灵活且强大的工具，适用于保持 CSS 代码的质量和一致性。结合其他工具（如 Prettier 和 ESLint），可以更全面地保障前端代码的整洁性和可维护性。
CSS开发全攻略
邓邓子的博客
09-25 1381
在网页设计与开发的世界中，CSS（Cascading Style Sheets，层叠样式表）是一种不可或缺的技术，它允许开发者对网页的布局和样式进行精细的控制。本文将从CSS的基本概念、作用以及它在现代网页设计中的重要性等方面进行详细概述。CSS是一种用于描述HTML或XML文档样式的样式表语言。它定义了如何将结构化文档（例如HTML文档或XML应用程序）呈现为网页。CSS的主要作用是分离文档的内容（HTML或XML结构）与文档的表现形式（布局、颜色、字体等），从而实现更高效的页面设计与维护。
CSS学习 - 常用属性
Aaron121314的博客
09-25 461
font-style、font-variant、font-weight、font-size/line-height 以及 font-family 的简写属性。要按照顺序，可以不设置某个值，未设置的使用默认值。border-width、border-style 以及 border-color 的简写属性。可以去这边查看几乎所有的属性。
如何只用 CSS 制作网格？
偶尔记一下 - mybatis.io
09-24 1178
在看这篇文章时，对其中的网格比较好奇，作者提供了 stackoverflow 的链接，就看到了来源的这个问题和众多回复。本文从里面挑选了一些个人比较喜欢的样式，贴在下面展示。
HTML与CSS基础学习笔记
在学习过程中，可以参考书籍如《HTMLXHTMLCSS基础教程》以及网站如“Webstandards Solutions”、“CSS禅意花园”和“点石成金”，同时了解行业专家如Tim Berners-Lee、Dan Cederholm、Jeffrey Zeldman等人的观点。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值