CSS的使用与方法

什么是CSS

  • CSS是层叠样式表。它是一种用于描述网页或者文档外观和样式的标记语言。

  • 层级样式表：就是给HTML标签加样式的。

  • 如果说HTML是个游戏英雄 、那么CSS就是游戏皮肤。

【一】注释语法

/* 注释 */

【二】CSS的语法结构

选择符 {样式属性: 样式属性值;样式属性: 样式属性值;样式属性: 样式属性值, 样式属性值, 样式属性值;
}

【三】CSS的三种引入方式

  • 注意：CSS的三种引入方式都是放在<head>标签内部或 <body>标签内部。

行内样式

  1. 行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。因此，行内式通常放在<body>标签内部。例如：

<body><p style="color: red; font-size: 14px;">这是一段红色字体，字号为14像素的文本。</p>
</body>

内部样式

  1. 嵌入式是将CSS样式集中写在网页的标签对的标签对中。格式如下：位于<head>标签内部。因此，嵌入式样式应该放在<head>标签内部。例如：

<head><style>p {color: red;font-size: 14px;}</style>
</head>
<body><p>这是一段红色字体，字号为14像素的文本。</p>
</body>

外部样式

  1. 外部样式表：外部样式表是将CSS样式定义在独立的CSS文件中，并通过HTML文档的<link>标签引用。<link>标签通常放在<head>标签内部。例如：

<head><link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body><!-- HTML内容 -->
</body>

文件内容

p {color:blue;}
/*注释*/
​
注释一般都使用来描述后面这段css代码是给页面上哪一个板块用的
/*标题样式*/
xxxxx
​
/*个人中心设置*/
​

<link>标签用于在HTML文档中引入外部资源，最常见的用途是引入CSS样式表。除了引入CSS样式表，<link>标签还可以用于引入其他资源，如图标文件、字体文件和其他网页文件。

下面是<link>标签的基本语法：

<link rel="stylesheet" type="text/css" href="styles.css">

  • rel属性：指定链接的关系，当引入CSS样式表时，应将rel属性设置为stylesheet。

  • type属性：指定链接的资源类型，当引入CSS样式表时，应将type属性设置为text/css。

  • href属性：指定要引入的外部资源的路径，可以是相对路径或绝对路径。

例如，下面的代码片段演示了如何使用<link>标签引入名为styles.css的外部样式表：

<head><link rel="stylesheet" type="text/css" href="styles.css">
</head>

通过这样的引入方式，浏览器会加载并应用styles.css文件中定义的样式规则。

<link>标签的使用

<link>标签还可以用于引入其他资源。例如，你可以使用<link>标签引入一个图标文件作为网页的图标：

<head><link rel="icon" href="favicon.ico" type="image/x-icon">
</head>

在上面的例子中，rel属性被设置为icon，href属性指定了图标文件的路径，type属性指定了图标文件的MIME类型。

【四】基本选择器

选择器的优先级

  • 内联样式 > id选择器 > 类选择器 > 元素选择器。

image-20240226214446186

基本选择器是 CSS 中最基础的选择器，用于根据元素的类型、类名、ID 和属性选择元素。以下是一些常见的基本选择器：

  1. 元素选择器：

    通过元素的标签名称选择元素。标签选择器直接使用标签名称。

p  {color: blue;font-size: 16px;
}

image-20240223153807837

上述将选择所有的 <p> 元素，并将它们的文本颜色设置为蓝色，字体大小设置为 16 像素。

  1. 类选择器：

    使用元素的class属性来选择元素。类选择器以"."符号开头，后面跟着类名。

.highlight {background-color: yellow;font-weight: bold;
}

image-20240223153712640

上述将选择具有 highlight 类名的所有元素，并将它们的背景颜色设置为黄色，字体加粗。

  1. ID 选择器：

    使用元素的ID属性来选择元素。ID选择器以"#"符号开头，后面跟着ID的名称。

#header {text-align: center;background-color: gray;
}

image-20240223153657792

上述将选择具有 header ID 的元素，并将它们的文本居中对齐，背景颜色设置为灰色。

4.行内选择器（内联选择器）：直接将样式规则应用于HTML元素的style属性。行内选择器直接写在元素的HTML标签中。

<p style="color: red;">这是一个红色的段落。</p>

分组（多个选择器逗号分隔）

　 当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。

div, p {color: red;
}

总之：就是要先定义选择器里面的信息在用选择器的便签进行编辑。

【五】组合选择器

组合选择器是指将多个选择器组合在一起，以选择更具体的元素或元素组合。通过组合选择器，可以更精确地选择和应用样式。

以下是一些常见的组合选择器：

  1. 同时选择多个元素（Multiple Elements）：使用逗号将多个选择器分隔开。

h1, h2, h3 {color: red;
}

上述将选择所有的 <h1>、<h2> 和 <h3> 元素，并将它们的文本颜色设置为红色。

  1. 选择具有多个类名的元素（Multiple Classes）：将多个类选择器连续使用。

.button.primary {background-color: blue;color: white;
}

上述具有 button 和 primary 两个类名的元素，并将它们的背景颜色设置为蓝色，文本颜色设置为白色。

  1. 选择具有多个属性的元素（Multiple Attributes）：将多个属性选择器连续使用。

input[type="text"][required] {border: 1px solid red;
}

上述具有 type 属性值为 text 并且具有 required 属性的 <input> 元素，并将它们的边框设置为红色实线。

  1. 选择特定关系的元素组合（Combined Relationships）：将不同的关系选择器组合使用。

div p:first-child {font-weight: bold;
}

上述 <div> 元素内的第一个 <p> 元素，并将它的字体加粗。

【1】具体示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>h1, h2, h3 {color: red;}</style>
</head>
<body>
<h1>你是不是傻
</h1>
<h2 style="color: red">你是个傻逼
</h2>
<p>欢迎来到css
</p></body>
</html>

image-20240221192521761

请注意，组合选择器的使用需要谨慎，尽量保持选择器的简洁和可读性，避免过度嵌套和冗长的选择器链。

属性选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>组合选择器</title>
{#    <style>#}
{#        /* 弟弟选择器 */#}
{#        div~span {#}
{#            color: #430d5e;#}
{#        }#}{#/* 儿子选择器 */#}{#div>span {#}{#    color: red;#}{#}#}{#/* 毗邻选择器 */#}{#span+div {#}{#    color: #430d5e;#}{#}#}
{#        /* 弟弟选择器 */#}
{##}
{##}
{#    </style>#}<style>[username]{color: pink;}</style></head>
<body><input type="text" username><input type="text" username="json"><input type="text" username="xiao"><input type="text" username="mao"><div username = 'json'>英雄</div><p username = 'xiao'>垃圾老师</p><span username = 'mao'>没心情</span><div>div标签<span>span</span><span>span</span><p>div p</p><p>div p<span>div p span标签</span></p><span>span</span><span>span</span></div>
<span>你好1</span><span>你好2</span>
</body>
</html>

image-20240223160459081

【2】标签关系

<div>div1<div>div2<p>p1</p></div><p>p2<span>span1</span></p><span>span2</span>
</div>

  • 通过嵌套层级来表示亲属关系

    • 1.对于div1来说：div2、p2、span2都是儿子

    • 2.对于div2、p2、span2来说：div1就是父亲

    • 3.对于p1来说：div2是父亲 div1是爷爷(可以将div1和div2统称为祖先)

    • 4.对于span2来说：div2、p2是哥哥 span2是弟弟

    • 5.div1内部所有的标签无论层级都可以称之为是div1的后代

【六】CSS之属性

  • /* 块级标签无法设置长度和宽度，就算写了也不会生效 */

CSS属性有很多，每个属性都有不同的功能和用途。以下是一些常见的CSS属性及其功能的示例：

  1. color：设置文本的颜色。

color: blue;

  1. font-size：设置文本的字体大小。

font-size: 16px;

  1. background-color：设置元素的背景颜色。

background-color: #f1f1f1;

  1. width 和 height：设置元素的宽度和高度。

width: 200px;
height: 100px;

  1. margin 和 padding：设置元素的外边距和内边距。

margin: 10px;
padding: 20px;

  1. border：设置元素的边框样式、宽度和颜色。

border: 1px solid black;

  1. display：设置元素的显示方式。

display: block;

  1. position：设置元素的定位方式。

position: absolute;
top: 0;
left: 0;

  1. text-align：设置文本的对齐方式。

text-align: center;

  1. transition：设置元素的过渡效果。

transition: width 1s ease;

具体示例

<!DOCTYPE html>
<html>
<head><style>/* 设置文本的字体 */.box {font-family: Arial, sans-serif;}/* 设置文本的颜色和字体大小 */.box {color: blue;font-size: 20px;}/* 设置元素的背景颜色、宽度和高度 */.box {background-color: #f1f1f1;width: 200px;height: 100px;}/* 设置元素的外边距和内边距 */.box {margin: 10px;padding: 20px;}/* 设置元素的边框样式、宽度和颜色 */.box {border: 1px solid black;}/* 设置元素的显示方式 */.box {display: block;}/* 设置元素的定位方式 */.box {position: absolute;top: 0;left: 0;}/* 设置文本的对齐方式 */.center {text-align: center;}/* 设置元素的过渡效果 */.box {transition: width 1s ease;}/* 鼠标悬停时改变元素的背景颜色 */.box:hover {background-color: yellow;}</style>
</head>
<body><div class="box center">你好</div>
</body>
</html>

【7】盒子模型

image-20240221200318425

【1】定义

  • CSS盒子模型是用来描述元素在页面布局中所占空间的模型。

  • 每个HTML元素被看作是一个矩形的盒子。

  • 这个盒子包括内容区域、内边距、边框和外边距四个部分。

盒子模型并不仅仅是内容与边界的距离，而是包括了内容、内边距、边框和外边距，这些部分共同构成了一个元素在页面中所占据的空间。

【2】盒子模型的要素：

  1. 内容区域（Content）：指的是元素中实际包含内容的部分，比如文本、图片等。

  2. 内边距（Padding）：围绕在内容区域外部的空白区域，可以用来控制内容与边框之间的间距。

  3. 边框（Border）：内边距的外部是边框，用于包围内容区域和内边距。

  4. 外边距（Margin）：围绕在边框外部的空白区域，用来控制元素与其他元素之间的间距。

在 CSS 中，可以通过设置不同的属性来控制盒子模型的各个部分，例如：

  • width 和 height：用于设置内容区域的宽度和高度。

  • padding：用于设置内边距。

  • border：用于设置边框样式、宽度和颜色。

  • margin：用于设置外边距。

【3】盒子模型的核心思想

  • 元素是盒子：每个 HTML 元素都被看作是一个矩形的盒子，而不仅仅是其包含的内容。这样的抽象模型简化了页面布局的处理和控制。

  • 四个部分：每个盒子包括：

    • 内容区域（Content）、

    • 内边距（Padding）、

    • 边框（Border）、

    • 外边距（Margin）

    • 四个部分，每个部分都可以通过 CSS 属性进行控制。

  • 相互影响：这四个部分之间相互影响，比如设置内边距会影响内容区域的大小，设置边框会影响整个盒子的大小等。开发者需要综合考虑它们之间的关系来实现期望的布局效果。

【4】元素的计算公式

  • 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

  • 元素的总高度最终计算公式是这样的：

  • 总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

【5】具体示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box{width:100px;height:50px;padding:10px;border:5px solid #ffcc;margin:30px;background-color:#0000;box-sizing: border-box;
}</style>
</head>
<body><p class='box'>盒子模型</p></body>
</html>

image-20240221201333470

万能搭配

  1. 内容居中对齐：

    • 设置 margin: 0 auto; 来使元素水平居中对齐。

    • 使用 text-align: center; 来使元素内部文本水平居中对齐。

  2. 等高列布局：

    • 将多个列元素放在一个父容器中。

    • 设置 display: flex; 和 align-items: stretch; 来使列元素等高。

  3. 两栏布局：

    • 将两个栏目元素放在一个父容器中。

    • 设置一个栏目的宽度，另一个栏目使用剩余空间，可以使用 flex 或者 float 属性来实现。

  4. 响应式布局：

    • 使用 max-width 和 min-width 来设置元素的最大和最小宽度，以实现在不同屏幕尺寸下的自适应布局。

    • 使用媒体查询（media queries）来根据屏幕尺寸应用不同的样式。

【6】溢出属性

  • 溢出属性（overflow property）用于控制当内容超出容器尺寸时的表现方式。

如果像我输入的文本信太多就会出现下面的结果。属性溢出也是我们要解决的。

<p class="box-three"> 白日依山尽，黄河入海流。如穷千里目，更上一层楼。</p>

image-20240221202601122

它有以下几个常用的取值：

  1. visible（默认值）： 当内容超出容器尺寸时，会显示在容器外部，可能会覆盖其他元素。

  2. hidden： 当内容超出容器尺寸时，会被裁剪隐藏，不显示在容器外部。

  3. scroll： 当内容超出容器尺寸时，会显示滚动条，允许用户滚动查看内容。

  4. auto： 当内容超出容器尺寸时，会根据需要显示滚动条。如果内容未超出容器尺寸，则不显示滚动条。

/* overflow: visable 默认是可见，溢出还是展示 */
/*overflow: hidden; !* 溢出部分直接隐藏 *!*/
/*overflow: scroll; !* 字体内容可以滚动 *!*/
overflow: auto; /* 自动 */

这些取值可以应用于具有固定尺寸的容器，例如 <div> 元素。以下是一个示例：

.container {width: 200px;height: 200px;overflow: scroll;
}

在上面的示例中，.container 类的元素具有固定的宽度和高度，且当内容超出容器尺寸时，会显示滚动条。

除了上述取值外，还有一些其他的取值可以用于特殊情况，例如 overflow-x 和 overflow-y 可以分别控制水平和垂直方向上的溢出表现。此外，还可以使用 overflow-wrap 和 word-wrap 来控制文本内容的换行方式。

溢出属性是一种非常有用的工具，可以帮助您控制容器中内容的显示方式，确保页面布局的合理性和用户体验。

具体案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body {margin: 0;background-color: #4e4e4e;}#d1 {height: 200px;width: 200px;border-radius: 50%;border: 3px solid white;margin: 0 auto;overflow: hidden;}#d1 > img {width: 100%; /* 占标签100%比例 */}</style>
</head>
<body>
<div id="d1"><img src="https://wx2.sinaimg.cn/mw690/003XddEhly1hn0zb7296yj61x82i81kx02.jpg" alt="">
</div>
</body>
</html>

image-20240221203509032

【8】定位方式

CSS 提供了四种定位方式，它们分别是：

  • 静态定位（Static）：这是所有元素的默认定位方式。在静态定位下，元素遵循正常的文档流排列，不受 top、bottom、left、right 属性的影响。

    • <div style="background-color: lightblue;">这是一个静态定位的文字：山不见我，我来见山。
</div>

      image-20240221204025213

  • 相对定位（Relative）：相对定位是相对于元素在正常文档流中的位置进行定位。通过设置 top、bottom、left、right 属性，可以使元素相对于自身原来的位置进行偏移，但是在文档流中仍占据原来的空间。

    • <div style="position: relative; left: 20px;">这是一个相对定位的   关关雎鸠，在河之洲。窈窕淑女，君子好逑。
</div>

      image-20240221204332410

  • 绝对定位（Absolute）：绝对定位是相对于最近的具有定位属性（非 static）的祖先元素进行定位。如果没有符合条件的祖先元素，那么元素会相对于初始包含块进行定位。绝对定位的元素脱离了文档流，不再占据原来的空间，可以通过设置 top、bottom、left、right 属性来确定其位置。

    • <div style="position: absolute; top: 50px; left: 50px; background-color: lightcoral;">嗟乎！时运不齐，命途多舛。 </div>

      image-20240221204844604

  • 固定定位（Fixed）：固定定位是相对于浏览器窗口进行定位的。无论页面滚动与否，固定定位的元素始终保持在窗口的固定位置。也是通过设置 top、bottom、left、right 属性来控制位置。

    • <div style="position: fixed; top: 10px; right: 10px; background-color: lightgreen;">这是一个固定定位：唧唧复唧唧，木兰当户织。不闻机杼声，唯闻女叹息。
</div>

    • image-20240221204758965

总结：

  • 相对定位

    • 相对于标签原来的位置移动 relative

  • 绝对定位(常用)

    • 相对于已经定位过的父标签做移动，如果没有父标签那么就以body为父标签

    • 当你不知道页面其他标签的位置和参数，只给了你一个父标签的参数，让你基于该标签做定位

  • 固定定位(常用)

    • 相对于浏览器窗口固定在某个位置

【9】浮动

【1】传统网页布局的三种方式

  • 网页布局的本质 —— 用 CSS 来摆放盒子。把盒子摆到相应位置.

    • 普通留 (标准流)

    • 浮动

    • 定位

这三种布局方式都是用来摆放盒子的，盒子摆到合适位置，布局自然就完成了。

【2】标准流 (普通流 / 文档流)

所谓的标准流：就是标签按照规定好默认方式排列。

  1. 块级元素会独占一行，从上向下顺序排列。

    • 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table

  2. 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。

    • 常用元素：span、a、i、em 等

以上都是标准流布局，我们前面学习的就是标准流，标准流是最基本的布局方式。

【3】 为什么需要浮动？

总结：有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式。

浮动最典型的应用：可以让多个块级元素一行内排列显示。

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

网页布局第二准则：先设置盒子大小，之后设置盒子的位置。

【4】什么是浮动？

float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

浮动（float）是 CSS 的一个属性，用于控制元素的浮动行为。其语法如下：

/* 选择器 { float: 属性值; } */
selector {float: value;
}

  • selector：选择器，用于选中要应用浮动的元素。

  • value：取值可以是 left、right 或 none。其中：

    属性值描述
    none元素不浮动（默认值）
    left元素向左浮动
    right元素向右浮动

示例：

/* 将 .box 元素向左浮动 */
.box {float: left;
}/* 将 #sidebar 元素向右浮动 */
#sidebar {float: right;
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>浮动</title><style>div{width: 100px;height: 100px;border: 2px solid green;margin:3px 0;}.d2{float: left;border: 2px solid red;}.d3{float: right;}.d4{float: right;}</style>
</head>
<body>
<div class="d1">1</div><div class="d2">2</div><div class="d3">3</div><div class="d4">4</div>
</body>
</html>

image-20240221212112818

【5】清除浮动

当使用浮动布局时，可能会遇到一些问题，如父容器塌陷、相邻元素排列不正常等。这时，我们可以使用浮动的清除（clearfix）来解决这些问题。

清除浮动的方法有多种，以下是其中两种常见的方法：

  1. 使用空的伪元素清除浮动：

.clearfix::after {content: "";display: table;clear: both;
}

在需要清除浮动的容器上添加 clearfix 类，并使用 ::after 伪元素来清除浮动。这样可以确保容器的高度适应其内部浮动元素。

示例用法：

<style>.clearfix::after {content: "";display: table;clear: both;}
</style><div class="clearfix"><!-- 浮动元素 --><div class="float-left">浮动元素1</div><div class="float-right">浮动元素2</div>
</div>

  1. 使用额外的空元素清除浮动：

.clearfix:after {content: "";display: block;height: 0;clear: both;visibility: hidden;
}

同样，在需要清除浮动的容器上添加 clearfix 类，并使用一个空元素（如 <div>）来清除浮动。通过设置 clear: both; 属性，确保容器的高度适应其内部浮动元素。

示例用法：

<style>.clearfix::after {content: "";display: block;height: 0;clear: both;visibility: hidden;}
</style><div class="clearfix"><!-- 浮动元素 --><div class="float-left">浮动元素1</div><div class="float-right">浮动元素2</div><div style="clear: both;"></div> <!-- 清除浮动 -->
</div>

这些方法可以帮助解决浮动布局可能带来的问题，确保页面元素按预期进行布局和排列。

【10】z-index模态框

  • 前端界面其实是一个三维坐标系 z轴指向用户

  • 动态弹出的分层界面 我们也称之为叫模态框

z-index 是一个 CSS 属性，用于控制元素的堆叠顺序。通过设置不同的 z-index 值，我们可以改变元素在垂直方向上的层叠顺序。

要创建一个模态框（Modal）并设置其堆叠顺序，可以按照以下步骤进行操作：

  1. 创建 HTML 结构，包含模态框的内容和遮罩层：

<div class="modal-overlay"><div class="modal"><!-- 模态框内容 --></div>
</div>

在上述代码中，我们使用了一个外层容器 .modal-overlay 来作为遮罩层，并在其中嵌套了一个 .modal 容器来放置模态框的内容。

  1. 添加 CSS 样式，设置模态框的样式和层叠顺序：

.modal-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);z-index: 9999; /* 设置遮罩层的层叠顺序 */
}.modal {position: relative;background-color: #fff;width: 400px;height: 200px;margin: 100px auto;z-index: 10000; /* 设置模态框的层叠顺序 */
}

在上述代码中，我们设置了 .modal-overlay 的 position 为 fixed，使其覆盖整个视口。通过设置 z-index 属性，我们可以控制遮罩层和模态框的层叠顺序。较高的 z-index 值会使元素显示在较低的 z-index 值之上。

  1. 添加 JavaScript 代码，以便在需要时显示或隐藏模态框：

const modalOverlay = document.querySelector('.modal-overlay');function openModal() {modalOverlay.style.display = 'block';
}function closeModal() {modalOverlay.style.display = 'none';
}

在上述代码中，我们定义了 openModal 和 closeModal 函数，分别用于打开和关闭模态框。通过操作 modalOverlay 元素的 display 属性，我们可以控制模态框的显示和隐藏。

通过以上步骤，你可以创建一个具有正确层叠顺序的模态框。可以通过调整 z-index 的值来适应你的需求，并根据实际情况进行样式和交互的调整。

【11】定位position标签的使用方式

  • 静态

    • 所有的标签默认都是静态的static，无法改变位置

  • 相对定位（了解即可）

    • 相对与标签原来的位置做为移动relative

  • 绝对定位（常用）

    • 相对于已经定位过的父标签做移动（如果没有父标签那么就以为body为参照）

  • 固定定位（常用）

    • 相对于浏览器窗口固定在某个位置

<!-- position定位  -->
<!-- 使用方法 -->

  1. static：默认值。元素在文档流中正常排列，不受定位影响，即没有特定的定位行为。top、right、bottom 和 left 属性对 static 元素无效。

  2. relative：相对定位。元素相对于其正常位置进行定位，通过设置 top、right、bottom 和 left 属性来调整元素的位置。相对定位不会影响其他元素的布局，即元素在文档流中仍然占据原来的空间。

  3. absolute：绝对定位。元素相对于其最近的已定位（非 static）父元素进行定位，如果没有已定位的父元素，则相对于文档的初始包含块进行定位。通过设置 top、right、bottom 和 left 属性来确定元素的位置。绝对定位会从文档流中脱离，其他元素不会受其影响，绝对定位的元素不占据空间。

  4. fixed：固定定位。元素相对于视口进行定位，始终保持在固定的位置，即使页面滚动也不会改变其位置。通过设置 top、right、bottom 和 left 属性来确定元素的位置。固定定位的元素也不会占据空间。

  5. sticky：粘性定位。元素根据用户滚动的位置进行定位。在元素到达指定的阈值位置之前，它表现为相对定位，之后表现为固定定位。通过设置 top、right、bottom 和 left 属性以及 position: sticky; 来确定元素的位置。粘性定位的元素在文档流中占据空间，直到触发阈值后才变为固定定位。

这些定位属性值可以与其他 CSS 属性（如 top、right、bottom 和 left）一起

CSS属性相关

【1】宽和高

  • width属性可以为元素设置宽度。

  • height属性可以为元素设置高度。

  • 块级标签才能设置宽度，内联标签的宽度由内容来决定。

【2】字体属性

文字字体

  • font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它识别的第一个值

    <style>p {font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}</style>

image-20240226221947839

字体大小

    <style>body {font-size: 14px;}</style>

image-20240226221834646

字重（粗细）

    <style>p {font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif;font-weight: bold;}</style>

值描述
normal默认值，标准粗细
bold粗体
bolder更粗
lighter更细
100~900设置具体粗细，400等同于normal，而700等同于bold
inherit继承父元素字体的粗细值

文本颜色

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常指定。

  • 十六进制值 - 如: ＃FF0000 #前两位是表示红，中间两位表示绿，后面两位表示蓝，F是最高级别，0表示最低级别（无色）

  • 一个RGB值 - 如: RGB(255,0,0) #红绿蓝就是RGB的意思，第一个参数是红，最高255，最低0

  • 颜色的名称 - 如: red

  • 还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。

    <style>body {color: #000000;}</style>

文字属性

文字对齐

       <style>p {font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif;font-weight: bold;color: #daade6;text-align:  center; <!-- 对齐方式  -->}</style>

  • text-align 属性规定元素中的文本的水平对齐方式

  • 值描述
    left左边对齐 默认值
    right右对齐
    center居中对齐
    justify两端对齐

文字装饰

  • text-docoration 属性用来给文字添加特殊效果

  • 值描述
    none默认。定义标准的文本。
    underline定义文本下的一条线。
    overline定义文本上的一条线。
    line-through定义穿过文本下的一条线。
    inherit继承父元素的text-decoration属性的值。
<style>
a {text-decoration: none;
}
</style>

首行缩进

<style>
p {text-indent: 32px; #首行缩进两个字符，因为我记得一个字在页面上的默认大小为16px
}
</style>

【3】背景属性

/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url('1.jpg');  
#url里面是图片路径，如果和你的html文件在一个目录下，使用这种相对路径就行了，来个葫芦娃图片试一下
background-repeat: no-repeat; 
/* 背景重复 repeat(默认):背景图片沿着x轴和y轴重复平铺，铺满整个包裹它的标签 repeat-x：背景图片只在水平方向上平铺 repeat-y：背景图片只在垂直方向上平铺 no-repeat：背景图片不平铺*//*背景位置*/
background-position: right top;/*background-position: 200px 200px;*/ #200px 200px 是距离父级标签的左边和上边的距离，以前大家都用雪碧图，就是将很多的网页上需要的小图片组合成一个大图，用这个图中哪个位置的小图片，就通过这个参数来调整，看下面的示例操作，现在很少用这个了

不透明度/透明度

image-20240226223527442

div {background-color: green;opacity: 0.3; /* opacity 属性指定元素的不透明度/透明度。取值范围为 0.0 - 1.0。值越低，越透明： */
}

把背景图片放在右上角：

body {background-image: url("tree.png");background-repeat: no-repeat;background-position: right top;
}

在Web开发中，可以使用CSS来设置背景图片的属性。以下是一些常用的背景图片属性：

  1. background-image： 用于设置元素的背景图片。可以指定一个图片的URL，也可以使用线性渐变或径向渐变来创建背景效果。

  2. background-repeat： 用于设置背景图片的重复方式。常见的取值包括：

    • repeat（默认值）：背景图片在水平和垂直方向上平铺重复。

    • repeat-x：背景图片在水平方向上平铺重复。

    • repeat-y：背景图片在垂直方向上平铺重复。

    • no-repeat：背景图片不进行重复。

  3. background-position： 用于设置背景图片的位置。可以使用关键词（如top、bottom、left、right）或者百分比值（如50% 50%）来指定背景图片在元素中的位置。

  4. background-size： 用于设置背景图片的尺寸。常见的取值包括：

    • auto（默认值）：保持背景图片的原始尺寸。

    • cover：将背景图片等比缩放，使其完全覆盖元素，并保持宽高比例。

    • contain：将背景图片等比缩放，使其完全包含在元素内，并保持宽高比例。

  5. background-attachment： 用于设置背景图片的滚动方式。常见的取值包括：

    • scroll（默认值）：背景图片会随着元素内容的滚动而滚动。

    • fixed：背景图片固定在元素的位置，不会随着滚动而滚动。

这些属性可以通过CSS样式表中的选择器来设置，例如：

.d1 {background-image: url('image.jpg');background-repeat: no-repeat;background-position: center;background-size: cover;background-attachment: fixed; /**/
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/764438.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

深度学习新篇章：PyTorch在遥感地物分类的革命性应用

深度学习新篇章：PyTorch在遥感地物分类的革命性应用

我国高分辨率对地观测系统重大专项已全面启动&#xff0c;高空间、高光谱、高时间分辨率和宽地面覆盖于一体的全球天空地一体化立体对地观测网逐步形成&#xff0c;将成为保障国家安全的基础性和战略性资源。未来10年全球每天获取的观测数据将超过10PB&#xff0c;遥感大数据时…
阅读更多...
数据结构从入门到精通——排序的概念及运用

数据结构从入门到精通——排序的概念及运用

排序的概念及运用 前言一、排序的概念排序稳定性内部排序外部排序 二、排序运用三、常见的排序算法四、排序性能检测代码srand()clock() 五、oj排序测试代码 前言 排序是将数据按照一定规则重新排列的过程&#xff0c;常见规则有升序、降序等。排序算法如冒泡排序、快速排序等…
阅读更多...
如何关闭Wifi的双频合一功能？很简单

如何关闭Wifi的双频合一功能？很简单

前言 前段时间中国电信建议关闭路由器的双频合一功能&#xff0c;主要是为了解决Wi-Fi速度慢、信号弱等问题。 双频合一是啥&#xff1f;简单来说就是同个Wi-Fi信号有两种不同的通道……嗯&#xff0c;可能有点看不懂。。。 简单来说就是A地点到B地点有两条路&#xff0c;一条…
阅读更多...
基于ssm的勤工助学管理系统+数据库+报告+免费远程调试

基于ssm的勤工助学管理系统+数据库+报告+免费远程调试

项目介绍: 基于ssm的勤工助学管理系统。Javaee项目&#xff0c;ssm项目。采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&#xff0c;通过Spring SpringMvc Mybatisplus VuelayuiMaven来实现。有管理员和老…
阅读更多...
第十五届蓝桥杯嵌入式模拟考试I

第十五届蓝桥杯嵌入式模拟考试I

第十五届蓝桥杯嵌入式模拟考试I 时隔多日&#xff0c;蓝桥杯比赛将之&#xff0c;听老师说还有模拟题这个东西(以前从没听说过)&#xff0c;不模拟不知道&#xff0c;一模拟吓一跳&#xff0c;废话不多说直接上图&#xff0c;这是只做编程题的得分满分85,剩下的几分我实在拿不…
阅读更多...
Python：熟悉简单的skfuzzy构建接近生活事件的模糊控制器”(附带详细注释说明）+ 测试结果

Python：熟悉简单的skfuzzy构建接近生活事件的模糊控制器”(附带详细注释说明）+ 测试结果

参考资料&#xff1a;https: // blog.csdn.net / shelgi / article / details / 126908418 ————通过下面这个例子&#xff0c;终于能理解一点模糊理论的应用了&#xff0c;感谢原作。 熟悉简单的skfuzzy构建接近生活事件的模糊控制器 假设下面这样的场景, 我们希望构建一套…
阅读更多...
互联网思维:息共享、开放性、创新和快速反应、网络化、平台化、数据驱动和用户体验 人工智能思维:模拟人、解放劳动力、人工智能解决方案和服务

互联网思维:息共享、开放性、创新和快速反应、网络化、平台化、数据驱动和用户体验 人工智能思维:模拟人、解放劳动力、人工智能解决方案和服务

互联网思维&#xff1a;信息共享、开放性、创新和快速反应、网络化、平台化、数据驱动和用户体验 互联网思维是指一种以互联网为基础的思考方式&#xff0c;强调信息共享、开放性、创新和快速反应的特点。这种思维方式注重网络化、平台化、数据驱动和用户体验&#xff0c;以适…
阅读更多...
TCP重传机制详解——01概述

TCP重传机制详解——01概述

文章目录 TCP重传机制详解——01概述什么是TCP重传&#xff1f;TCP为什么要重传&#xff1f;TCP如何做到重传&#xff1f;TCP重传方式有哪些超时重传(timeout or timer-based retransmission)快速重传(fast retransmission或者fast retransmit)改进的重传机制&#xff0c;早期重…
阅读更多...
Avalonia(11.0.2)+.NET6 打包运行到银河麒麟V10桌面系统

Avalonia(11.0.2)+.NET6 打包运行到银河麒麟V10桌面系统

操作系统配置 项目结构 .net版本 这次我们是在银河麒麟V10系统上打包运行Avalonia(11.0.2)+.NET6.0的程序 开始打包 准备Linux下的桌面快捷方式以及图标 调整AvaloniaApplication2.Desktop.csproj的配置项,重点看下图红色线圈出来的部分，里面涉及到了LinuxPath的设置。完整的配…
阅读更多...
10、chrome拓展程序的实现

10、chrome拓展程序的实现

一、拓展程序的实现 拓展程序项目的构成 和前端项目一样&#xff0c;拓展程序也是有Html、CSS、JS文件实现的&#xff0c;现在看来它就是一个静态的前端页面。但是不同的是&#xff0c;拓展程序中还需要额外的一个清单文件&#xff0c;就是manifest.json&#xff0c;清单文件可…
阅读更多...
Prompt进阶系列5:LangGPT(提示链Prompt Chain)--提升模型鲁棒性

Prompt进阶系列5:LangGPT(提示链Prompt Chain)--提升模型鲁棒性

Prompt进阶系列5:LangGPT(提示链Prompt Chain)–提升模型鲁棒性 随着对大模型的应用实践的深入&#xff0c;许多大模型的使用者&#xff0c; Prompt 创作者对大模型的应用越来越得心应手。和 Prompt 有关的各种学习资料&#xff0c;各种优质内容也不断涌现。关于 Prompt 的实践…
阅读更多...
SQLiteC/C++接口详细介绍sqlite3_stmt类（十）

SQLiteC/C++接口详细介绍sqlite3_stmt类（十）

返回&#xff1a;SQLite—系列文章目录 上一篇&#xff1a;SQLiteC/C接口详细介绍sqlite3_stmt类&#xff08;九&#xff09; 下一篇&#xff1a; SQLiteC/C接口详细介绍sqlite3_stmt类&#xff08;十一&#xff09; 38、sqlite3_column_value sqlite3_column_valu…
阅读更多...
云计算系统等保测评对象和指标选取

云计算系统等保测评对象和指标选取

1、云计算服务模式与控制范围关系 参考GBT22239-2019《基本要求》附录D 云计算应用场景说明。简要理解下图&#xff0c;主要是云计算系统安全保护责任分担原则和云服务模式适用性原则&#xff0c;指导后续的测评对象和指标选取。 2、测评对象选择 测评对象 IaaS模式 PaaS模式…
阅读更多...
Python Flask 返回json类型数据

Python Flask 返回json类型数据

from flask import Flask, make_responseapp Flask(__name__)app.route("/") def hello():data {"name": "张三"}return make_response(data)if __name__ __main__:app.run(debugTrue)如果像返回字符串那么可以用 return make_response(json.…
阅读更多...
HTML（二）

HTML（二）

一、表格标签 1.1表格的主要作用 表格主要用于显示、展示数据&#xff0c;因为它可以让数据显示的非常的规整&#xff0c;可读性非常好。特别是后台展示数据的时候&#xff0c;能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。 1.2 表格的…
阅读更多...
鸿蒙一次开发，多端部署（十一）交互归一

鸿蒙一次开发，多端部署（十一）交互归一

对于不同类型的智能设备&#xff0c;用户可能有不同的交互方式&#xff0c;如通过触摸屏、鼠标、触控板等。如果针对不同的交互方式单独做适配&#xff0c;会增加开发工作量同时产生大量重复代码。为解决这一问题&#xff0c;我们统一了各种交互方式的API&#xff0c;即实现了交…
阅读更多...
【SQL】1407. 排名靠前的旅行者

【SQL】1407. 排名靠前的旅行者

题目描述 leetcode题目&#xff1a;1407. 排名靠前的旅行者 Code 写法一 先过滤&#xff0c;再连表 -- 写法一&#xff1a;先过滤再连表 select name, ifnull(summ, 0) as travelled_distance from Users left join(select user_id, sum(distance) as summfrom Ridesgroup …
阅读更多...
kubernetes K8s的监控系统Prometheus安装使用(一)

kubernetes K8s的监控系统Prometheus安装使用(一)

简单介绍 Prometheus 是一款基于时序数据库的开源监控告警系统&#xff0c;非常适合Kubernetes集群的监控。Prometheus的基本原理是通过HTTP协议周期性抓取被监控组件的状态&#xff0c;任意组件只要提供对应的HTTP接口就可以接入监控。不需要任何SDK或者其他的集成过程。这样做…
阅读更多...
TS + Vue3 elementUI 表格列表中如何方便的标识不同类型的内容，颜色区分 enum

TS + Vue3 elementUI 表格列表中如何方便的标识不同类型的内容，颜色区分 enum

TS Vue3 elementUI 表格列表中如何方便的标识不同类型的内容&#xff0c;颜色区分 enum 本文内容为 TypeScript 一、基础知识 在展示列表的时候&#xff0c;列表中的某个数据可能是一个类别&#xff0c;比如&#xff1a; enum EnumOrderStatus{"未受理" 1,"…
阅读更多...
【LeetCode-74.搜索二维矩阵】

【LeetCode-74.搜索二维矩阵】

题目详情&#xff1a; 给你一个满足下述两条属性的 m x n 整数矩阵&#xff1a; 每行中的整数从左到右按非严格递增顺序排列。每行的第一个整数大于前一行的最后一个整数。 给你一个整数 target &#xff0c;如果 target 在矩阵中&#xff0c;返回 true &#xff1b;否则&am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023