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

ops/2024/9/23 4:33:54/

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>css">
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>css">
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>css">
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>css">
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>css">
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>css">
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="css language-css">font-size: 20px; color:#333333">Hello</h1>
<p style="css language-css">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>css">
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>css">
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>css">
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>css">
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>css">
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>css">
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>css">
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>css">
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>css">
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>css">
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>css">
/* 四个边框相同宽度 */
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>css">
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 边框属性

在这里插入图片描述


http://www.ppmy.cn/ops/36339.html

相关文章

linuxwindowns文件共享之samba

linuxwindowns文件共享之samba

samba 我们所了解过的 FTP 文件传输&#xff0c;的确可以让不同主机之间进行文件传输&#xff0c;此方式特点是&#xff0c;传输文件&#xff0c;用户想要在客户端直接修改服务器的数据&#xff0c;还是较为麻烦。 既然如此&#xff0c;linux 上有一款应用叫 Samba&#xff0…
阅读更多...
经典面试题---环形链表

经典面试题---环形链表

1. 环形链表1. - 力扣&#xff08;LeetCode&#xff09; 要解决这道题&#xff0c;我们首先要挖掘出带环的链表与不带环的链表之间的差别。 以此&#xff0c;才能设计出算法来体现这种差别并判断。 二者最突出的不同&#xff0c;就是不带环的链表有尾结点&#xff0c;也就是说…
阅读更多...
Compose 状态管理

Compose 状态管理

文章目录 Compose 状态管理概述使用MutableStaterememberStatelessComposable & StatefulComposable状态提升rememberSaveable支持parceable不支持parceable 使用ViewModelViewModelProvider.Factory 使用Flow Compose 状态管理 概述 当应用程序的状态发生变化时&#xf…
阅读更多...
sql server

sql server

SQL Server 是微软开发的关系型数据库管理系统&#xff08;RDBMS&#xff09;&#xff0c;广泛用于企业级应用开发和数据管理。它遵循 SQL&#xff08;Structured Query Language&#xff09;标准&#xff0c;提供了数据存储、查询、更新和管理的功能。以下是 SQL Server 的一些…
阅读更多...
如何实现源代码防泄漏？十种有效方法防止源代码泄漏

如何实现源代码防泄漏？十种有效方法防止源代码泄漏

由于研发人员比普通办公人员要精通电脑&#xff0c;除了常见的网络&#xff0c;邮件&#xff0c;U盘&#xff0c;QQ等数据扩散方法外&#xff0c;还有很多对于研发人员来 说非常容易的方法&#xff0c;比如&#xff1a; —网线直连&#xff0c;即把网线从墙上插头拔下来&#…
阅读更多...
图片编辑工具-Gimp

图片编辑工具-Gimp

一、前言 GIMP&#xff08;GNU Image Manipulation Program&#xff09;是一款免费开源的图像编辑软件&#xff0c;具有功能强大和跨平台的特性。 GIMP作为一个图像编辑器&#xff0c;它提供了广泛的图像处理功能&#xff0c;包括但不限于照片修饰、图像合成以及创建艺术作品…
阅读更多...
STM32——WWDG（窗口看门狗）

STM32——WWDG（窗口看门狗）

技术笔记&#xff01; 1.WWDG&#xff08;窗口看门狗&#xff09;简介 本质&#xff1a;能产生系统复位信号和提前唤醒中断的计数器。 特性&#xff1a; 递减的计数器&#xff1b; 当递减计数器值从 0x40减到0x3F时复位&#xff08;即T6位跳变到0&#xff09;&#xff1b; …
阅读更多...
OpenAI API搭建的智能家居助手；私密大型语言模型(LLM)聊天机器人；视频和音频文件的自动化识别和翻译工具

OpenAI API搭建的智能家居助手；私密大型语言模型(LLM)聊天机器人；视频和音频文件的自动化识别和翻译工具

✨ 1: GPT Home 基于Raspberry Pi和OpenAI API搭建的智能家居助手 GPT Home是一个基于Raspberry Pi和OpenAI API搭建的智能家居助手&#xff0c;功能上类似于Google Nest Hub或Amazon Alexa。通过详细的设置指南和配件列表&#xff0c;用户可以自行组装和配置这个设备&#x…
阅读更多...
最新文章

Copyright @ 2022~2023