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

文阿花2024-05-07 19:15

1、CSS语法

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

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

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

  • 每条声明都包含一个 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>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 元素。
html 复制代码 
h1{
color: #333333;
text-align: center;
font-size: 20px;
}

2.3 CSS id 选择器

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

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

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

  • id 名称不能以数字开头

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;
}
#para1 {
text-align: left;
color: red;
}
</style>
</head>

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

</html>

2.4 CSS 类选择器

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

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

  • 类名不能以数字开头！

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;
}
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 元素。
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 分组选择器

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

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

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;
}


/* 分组选择器 */
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 标签。
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:

html 复制代码 
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

html 复制代码 
<!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 属性。

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

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>
</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

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>
<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:

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

运行效果：

示例二：此时h1的颜色为baseStyle.css中定义的#333333

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>

<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

  • 指定元素的背景色
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>

<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 属性在水平和垂直方向上都重复图像。
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>

<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;
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>

<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;
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>

<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

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>

<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;
  • 页面内容滚动，图片一直位于设置的左上角
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>

<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
html 复制代码 
body {
background-color: orange;
background-image: url(imgs/login_bg.png);
/* 重复样式 */
background-repeat: no-repeat;
/* 是否随页面内容滚动 */
background-attachment: scroll;
/* 位置 */
background-position: left top;
}

简化为：

html 复制代码 
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 - 定义隐藏边框
html 复制代码 
<!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
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>边框</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
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>边框</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
html 复制代码 
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;
}

简化写法：

html 复制代码 
<!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
html 复制代码 
p {
border: 5px solid red;
}

或者：

html 复制代码 
p {
border-left: 6px solid red;
background-color: lightgrey;
}

5.6 CSS 圆角边框 ：border-radius

5.7 所有 CSS 边框属性

相关推荐
我要洋人死20 分钟前
导航栏及下拉菜单的实现
前端·css·css3
数据与后端架构提升之路1 小时前
从神经元到神经网络：深度学习的进化之旅
人工智能·神经网络·学习
一行11 小时前
电脑蓝屏debug学习
学习·电脑
咔叽布吉1 小时前
【论文阅读笔记】CamoFormer: Masked Separable Attention for Camouflaged Object Detection
论文阅读·笔记·目标检测
johnny2331 小时前
《大模型应用开发极简入门》笔记
笔记·chatgpt
亦枫Leonlew1 小时前
微积分复习笔记 Calculus Volume 1 - 4.7 Applied Optimization Problems
笔记·数学·微积分·1024程序员节
小肥象不是小飞象1 小时前
（六千字心得笔记）零基础C语言入门第八课——函数（上）
c语言·开发语言·笔记·1024程序员节
星LZX1 小时前
WireShark入门学习笔记
笔记·学习·wireshark
阑梦清川1 小时前
在鱼皮的模拟面试里面学习有感
学习·面试·职场和发展
qq_433099401 小时前
Isaac Gym学习笔记——概述
学习
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10红米手机使用google play