css笔记1

最新推荐文章于 2024-05-15 20:09:31 发布
最新推荐文章于 2024-05-15 20:09:31 发布
阅读量7.1k 收藏 6
点赞数 1
文章标签： css html linq
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_61466402/article/details/123449827
版权

 

目录

css语法

实例

例子解释

css选择器

css使用

三种使用css的方法

外部 CSS

内部 CSS

行内 CSS

多个样式表

层叠顺序

css注释

实例

实例

实例

HTML 和 CSS 注释

css颜色

css背景色

CSS 文本颜色

CSS 边框颜色

CSS 颜色值

实例

css背景

CSS background-color

css背景图像

css背景重复

css背景附着

css背景简写

css语法

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

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

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

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

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

实例

在此例中，所有 <p> 元素都将居中对齐，并带有红色文本颜色：

 p {
   color: red;
   text-align: center;
 }

例子解释

  • p 是 CSS 中的选择器（它指向要设置样式的 HTML 元素：<p>）。

  • color 是属性，red 是属性值

  • text-align 是属性，center 是属性值

css选择器

css使用

三种使用css的方法

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

  • 外部 CSS

  • 内部 CSS

  • 行内 CSS

外部 CSS

通过使用外部样式表，您只需修改一个文件即可改变整个网站的外观！

每张 HTML 页面必须在 head 部分的 <link> 元素内包含对外部样式表文件的引用。

实例

外部样式在 HTML 页面 <head> 部分内的 <link> 元素中进行定义：

 <!DOCTYPE html>
 <html>
 <head>
 <link rel="stylesheet" type="text/css" href="mystyle.css">
 </head>
 <body>
 ​
 <h1>This is a heading</h1>
 <p>This is a paragraph.</p>
 ​
 </body>
 </html>

外部样式表可以在任何文本编辑器中编写，并且必须以 .css 扩展名保存。

外部 .css 文件不应包含任何 HTML 标签。

"mystyle.css" 是这样的：

"mystyle.css"

 body {
   background-color: lightblue;
 }
 ​
 h1 {
   color: navy;
   margin-left: 20px;
 }

注意：请勿在属性值和单位之间添加空格（例如 margin-left: 20 px;）。正确的写法是：margin-left: 20px;

内部 CSS

如果一张 HTML 页面拥有唯一的样式，那么可以使用内部样式表。

内部样式是在 head 部分的 <style> 元素中进行定义。

实例

内部样式在 HTML 页面的 <head> 部分内的 <style> 元素中进行定义：

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

行内 CSS

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

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

实例

行内样式在相关元素的 "style" 属性中定义：

 <!DOCTYPE html>
 <html>
 <body>
 ​
 <h1 style="color:blue;text-align:center;">This is a heading</h1>
 <p style="color:red;">This is a paragraph.</p>
 ​
 </body>
 </html>

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

多个样式表

如果在不同样式表中为同一选择器（元素）定义了一些属性，则将使用最后读取的样式表中的值。

假设某个外部样式表为 <h1> 元素设定的如下样式：

 h1 {
   color: navy;
 }

然后，假设某个内部样式表也为 <h1> 元素设置了如下样式：

 h1 {
   color: orange;    
 }

实例

如果内部样式是在链接到外部样式表之后定义的，则 <h1> 元素将是橙色：

 <head>
 <link rel="stylesheet" type="text/css" href="mystyle.css">
 <style>
 h1 {
   color: orange;
 }
 </style>
 </head>

实例

不过，如果在链接到外部样式表之前定义了内部样式，则 <h1> 元素将是深蓝色：

 <head>
 <style>
 h1 {
   color: orange;
 }
 </style>
 <link rel="stylesheet" type="text/css" href="mystyle.css">
 </head>

层叠顺序

当为某个 HTML 元素指定了多个样式时，会使用哪种样式呢？

页面中的所有样式将按照以下规则“层叠”为新的“虚拟”样式表，其中第一优先级最高：

  1. 行内样式（在 HTML 元素中）

  2. 外部和内部样式表（在 head 部分）

  3. 浏览器默认样式

因此，行内样式具有最高优先级，并且将覆盖外部和内部样式以及浏览器默认样式。

css注释

位于 <style> 元素内的 CSS 注释，以 /* 开始，以 */ 结束：

实例

 /* 这是一条单行注释 */
 p {
   color: red;
 }

可以在代码中的任何位置添加注释：

实例

 p {
   color: red;  /* 把文本设置为红色 */
 }

注释能横跨多行：

实例

 /* 这是
 一条多行的
 注释 */ 
 ​
 p {
   color: red;
 }

HTML 和 CSS 注释

从 HTML 教程中，您学习到可以使用 <!--...--> 语法在 HTML 源代码中添加注释。

在下面的例子中，我们结合使用了 HTML 和 CSS 注释：

实例

 <!DOCTYPE html>
 <html>
 <head>
 <style>
 p {
   color: red; /* 将文字颜色设置为红色 */
 } 
 </style>
 </head>
 <body>
 ​
 <h2>My Heading</h2>
 ​
 <!-- 这些段落将是红色的 -->
 <p>Hello World!</p>
 <p>这段文本由 CSS 设置样式。</p>
 <p>CSS 注释不会在输出中显示。</p>
 ​
 </body>
 </html>

css颜色

属性名:rgb，颜色名等等

css背景色

style="background-color:+颜色名

实例

 <h1 style="background-color:DodgerBlue;">China</h1>
 <p style="background-color:Tomato;">China is a great country!</p>

CSS 文本颜色

您可以设置文本的颜色：

style="color:+颜色名

实例

 <h1 style="color:Tomato;">China</h1>
 <p style="color:DodgerBlue;">China is a great country!</p>
 <p style="color:MediumSeaGreen;">China, officially the People's Republic of China...</p>

CSS 边框颜色

style="border:边框粗细px solid+颜色值

边框粗细：1，2，3，4...

实例

 <h1 style="border:2px solid Tomato;">Hello World</h1>
 <h1 style="border:2px solid DodgerBlue;">Hello World</h1>
 <h1 style="border:2px solid Violet;">Hello World</h1>

CSS 颜色值

在 CSS 中，还可以使用 RGB 值、HEX 值、HSL 值、RGBA 值或者 HSLA 值来指定颜色：

​

实例

​

 <h1 style="background-color:rgb(255, 99, 71);">...</h1>
 <h1 style="background-color:#ff6347;">...</h1>
 <h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
 ​
 <h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
 <h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

css背景

CSS 背景属性用于定义元素的背景效果。

CSS 背景属性：

  • background-color

  • background-image

  • background-repeat

  • background-attachment

  • background-position

CSS background-color

background-color 属性指定元素的背景色。

实例

页面的背景色设置如下：

 body {
   background-color: lightblue;
 }

通过 CSS，颜色通常由以下方式指定：

  • 有效的颜色名称 - 比如 "red"

  • 十六进制值 - 比如 "#ff0000"

  • RGB 值 - 比如 "rgb(255,0,0)"

CSS 颜色值

其他元素

您可以为任何 HTML 元素设置背景颜色：

实例

在这里，<h1>、<p> 和 <div> 元素将拥有不同的背景色：

 h1 {
   background-color: green;
 }
 ​
 div {
   background-color: lightblue;
 }
 ​
 p {
   background-color: yellow;
 }

不透明度 / 透明度

opacity 属性指定元素的不透明度/透明度。取值范围为 0.0 - 1.0。值越低，越透明：

opacity 1

opacity 0.6

opacity 0.3

opacity 0.1

实例

 div {
   background-color: green;
   opacity: 0.3;
 }

注意：使用 opacity 属性为元素的背景添加透明度时，其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读。

使用 RGBA 的透明度

如果您不希望对子元素应用不透明度，例如上面的例子，请使用 RGBA 颜色值。下面的例子设置背景色而不是文本的不透明度：

100% opacity

60% opacity

30% opacity

10% opacity

RGBA 颜色值指定为：rgba(red, green, blue, alpha)。alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

提示：您可在我们的 CSS 颜色 一章中学到有关 RGBA 颜色的更多知识。

实例

 div {
   background: rgba(0, 128, 0, 0.3) /* 30% 不透明度的绿色背景 */
 }

css背景图像

background-image 属性指定用作元素背景的图像。

默认情况下，图像会重复，以覆盖整个元素。

实例

页面的背景图像可以像这样设置：

 body {
   background-image: url("paper.gif");
 }
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 body {
   background-image: url("/i/paper.jpg");
 }
 </style>
 </head>
 <body>
 ​
 <h1>Hello World!</h1>
 ​
 <p>此页面以图像为背景！</p>
 ​
 </body>
 </html>

实例

本例展示了文本和背景图像的错误组合。文字难以阅读：

 body {
   background-image: url("bgdesert.jpg");
 }
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 body {
   background-image: url("/i/css/bgdesert.jpg");
 }
 </style>
 </head>
 <body>
 ​
 <h1>Hello World!</h1>
 ​
 <p>在此背景图片上阅读这段文本并不容易。</p>
 ​
 </body>
 </html>

注意：使用背景图像时，请使用不会干扰文本的图像。

还可以为特定元素设置背景图像，例如 <p> 元素：

实例

 p {
   background-image: url("paper.gif");
 }
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 p {
   background-image: url("/i/paper.jpg");
 }
 </style>
 </head>
 <body>
 ​
 <h1>Hello World!</h1>
 ​
 <p>本段以一幅图像作为背景！</p>
 ​
 </body>
 </html>

css背景重复

CSS background-repeat

默认情况下，background-image 属性在水平和垂直方向上都重复图像。

某些图像应只适合水平或垂直方向上重复，否则它们看起来会很奇怪，如下所示：

实例

 body {
   background-image: url("gradient_bg.png");
 }

源代码：

 <!DOCTYPE html>
 <html>
 <head>
 <style>
 body {
   background-image: url("/i/css/gradient_bg.png");
 }
 </style>
 </head>
 <body>
 ​
 <h1>Hello World!</h1>
 ​
 <p>奇怪的背景图片...</p>
 ​
 </body>
 </html>

如果上面的图像仅在水平方向重复 (background-repeat: repeat-x;)，则背景看起来会更好：

实例

 body {
   background-image: url("gradient_bg.png");
   background-repeat: repeat-x;
 }

源代码：

 <!DOCTYPE html>
 <html>
 <head>
 <style>
 body {
   background-image: url("/i/css/gradient_bg.png");
   background-repeat: repeat-x;
 }
 </style>
 </head>
 <body>
 ​
 <h1>Hello World!</h1>
 ​
 <p>在这里，背景图像仅在水平方向上重复！</p>
 ​
 </body>
 </html>

提示：如需垂直重复图像，请设置 background-repeat: repeat-y;

CSS background-repeat: no-repeat

background-repeat 属性还可指定只显示一次背景图像：

实例

背景图像仅显示一次：

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

源代码：

 <!DOCTYPE html>
 <html>
 <head>
 <style>
 body {
   background-image: url("/i/photo/tree.png");
   background-repeat: no-repeat;
 }
 </style>
 </head>
 <body>
 ​
 <h1>Hello World!</h1>
 <p>W3School 背景图像实例。</p>
 <p>这幅背景图像仅显示一次，但它会打扰读者！</p>
 ​
 </body>
 </html>

在上例中，背景图像与文本放置在同一位置。我们想要更改图像的位置，以免图像过多干扰文本。

CSS background-position

background-position 属性用于指定背景图像的位置。

实例

把背景图片放在右上角：

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

源代码：

 <!DOCTYPE html>
 <html>
 <head>
 <style>
 body {
   background-image: url("/i/photo/tree.png");
   background-repeat: no-repeat;
   background-position: right top;
   margin-right: 200px;
 }
 </style>
 </head>
 <body>
 ​
 <h1>Hello World!</h1>
 <p>W3School 不重复并设置位置的背景实例。</p>
 <p>现在，背景图像仅显示一次，并且位置与文本分开。</p>
 <p>在此例中，我们还在右侧添加了外边距，因此背景图片将永远不会干扰文本。</p>
 ​
 </body>
 </html>

css背景附着

CSS background-attachment

background-attachment 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）：

实例

指定应该固定背景图像：

background-attachment: fixed;

 <!DOCTYPE html>
 <html>
 <head>
 <style>
 body {
   background-image: url("/i/photo/tree.png");
   background-repeat: no-repeat;
   background-position: right top;
   margin-right: 200px;
   background-attachment: fixed;
 }
 </style>
 </head>
 <body>
 ​
 <h1>background-attachment 属性</h1>
 ​
 <p>background-attachment 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分滚动）。</p>
 ​
 <p><b>提示：</b>如果看不到任何滚动条，请尝试调整浏览器窗口的大小。</p>
 ​
 <p>背景图像是固定的。请尝试向下滚动页面。</p>
 <p>背景图像是固定的。请尝试向下滚动页面。</p>
 <p>背景图像是固定的。请尝试向下滚动页面。</p>
 <p>背景图像是固定的。请尝试向下滚动页面。</p>
 <p>背景图像是固定的。请尝试向下滚动页面。</p>
 <p>背景图像是固定的。请尝试向下滚动页面。</p>
 <p>背景图像是固定的。请尝试向下滚动页面。</p>
 <p>背景图像是固定的。请尝试向下滚动页面。</p>
 <p>背景图像是固定的。请尝试向下滚动页面。</p>
 <p>背景图像是固定的。请尝试向下滚动页面。</p>
 <p>背景图像是固定的。请尝试向下滚动页面。</p>
 <p>背景图像是固定的。请尝试向下滚动页面。</p>
 <p>背景图像是固定的。请尝试向下滚动页面。</p>
 <p>背景图像是固定的。请尝试向下滚动页面。</p>
 <p>背景图像是固定的。请尝试向下滚动页面。</p>
 <p>背景图像是固定的。请尝试向下滚动页面。</p>
 <p>背景图像是固定的。请尝试向下滚动页面。</p>
 <p>背景图像是固定的。请尝试向下滚动页面。</p>
 <p>背景图像是固定的。请尝试向下滚动页面。</p>
 <p>背景图像是固定的。请尝试向下滚动页面。</p>
 <p>背景图像是固定的。请尝试向下滚动页面。</p>
 <p>背景图像是固定的。请尝试向下滚动页面。</p>
 <p>背景图像是固定的。请尝试向下滚动页面。</p>
 <p>背景图像是固定的。请尝试向下滚动页面。</p>
 <p>背景图像是固定的。请尝试向下滚动页面。</p>
 <p>背景图像是固定的。请尝试向下滚动页面。</p>
 <p>背景图像是固定的。请尝试向下滚动页面。</p>
 <p>背景图像是固定的。请尝试向下滚动页面。</p>
 <p>背景图像是固定的。请尝试向下滚动页面。</p>
 <p>背景图像是固定的。请尝试向下滚动页面。</p>
 <p>背景图像是固定的。请尝试向下滚动页面。</p>
 <p>背景图像是固定的。请尝试向下滚动页面。</p>
 <p>背景图像是固定的。请尝试向下滚动页面。</p>
 <p>背景图像是固定的。请尝试向下滚动页面。</p>
 <p>背景图像是固定的。请尝试向下滚动页面。</p>
 <p>背景图像是固定的。请尝试向下滚动页面。</p>
 <p>背景图像是固定的。请尝试向下滚动页面。</p>
 <p>背景图像是固定的。请尝试向下滚动页面。</p>
 <p>背景图像是固定的。请尝试向下滚动页面。</p>
 <p>背景图像是固定的。请尝试向下滚动页面。</p>
 <p>背景图像是固定的。请尝试向下滚动页面。</p>
 <p>背景图像是固定的。请尝试向下滚动页面。</p>
 <p>背景图像是固定的。请尝试向下滚动页面。</p>
 <p>背景图像是固定的。请尝试向下滚动页面。</p>
 ​
 </body>
 </html>
 ​

实例

指定背景图像应随页面的其余部分一起滚动：

background-attachment: scroll;

 <!DOCTYPE html>
 <html>
 <head>
 <style>
 body {
   background-image: url("/i/photo/tree.png");
   background-repeat: no-repeat;
   background-position: right top;
   margin-right: 200px;
   background-attachment: scroll;
 }
 </style>
 </head>
 <body>
 ​
 <h1>background-attachment 属性</h1>
 ​
 <p>background-attachment 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分滚动）。</p>
 ​
 <p><b>提示：</b>如果看不到任何滚动条，请尝试调整浏览器窗口的大小。</p>
 ​
 <p>背景图像滚动。请尝试向下滚动页面。</p>
 <p>背景图像滚动。请尝试向下滚动页面。</p>
 <p>背景图像滚动。请尝试向下滚动页面。</p>
 <p>背景图像滚动。请尝试向下滚动页面。</p>
 <p>背景图像滚动。请尝试向下滚动页面。</p>
 <p>背景图像滚动。请尝试向下滚动页面。</p>
 <p>背景图像滚动。请尝试向下滚动页面。</p>
 <p>背景图像滚动。请尝试向下滚动页面。</p>
 <p>背景图像滚动。请尝试向下滚动页面。</p>
 <p>背景图像滚动。请尝试向下滚动页面。</p>
 <p>背景图像滚动。请尝试向下滚动页面。</p>
 <p>背景图像滚动。请尝试向下滚动页面。</p>
 <p>背景图像滚动。请尝试向下滚动页面。</p>
 <p>背景图像滚动。请尝试向下滚动页面。</p>
 <p>背景图像滚动。请尝试向下滚动页面。</p>
 <p>背景图像滚动。请尝试向下滚动页面。</p>
 <p>背景图像滚动。请尝试向下滚动页面。</p>
 <p>背景图像滚动。请尝试向下滚动页面。</p>
 <p>背景图像滚动。请尝试向下滚动页面。</p>
 <p>背景图像滚动。请尝试向下滚动页面。</p>
 <p>背景图像滚动。请尝试向下滚动页面。</p>
 <p>背景图像滚动。请尝试向下滚动页面。</p>
 <p>背景图像滚动。请尝试向下滚动页面。</p>
 <p>背景图像滚动。请尝试向下滚动页面。</p>
 <p>背景图像滚动。请尝试向下滚动页面。</p>
 <p>背景图像滚动。请尝试向下滚动页面。</p>
 <p>背景图像滚动。请尝试向下滚动页面。</p>
 <p>背景图像滚动。请尝试向下滚动页面。</p>
 <p>背景图像滚动。请尝试向下滚动页面。</p>
 <p>背景图像滚动。请尝试向下滚动页面。</p>
 <p>背景图像滚动。请尝试向下滚动页面。</p>
 <p>背景图像滚动。请尝试向下滚动页面。</p>
 <p>背景图像滚动。请尝试向下滚动页面。</p>
 <p>背景图像滚动。请尝试向下滚动页面。</p>
 <p>背景图像滚动。请尝试向下滚动页面。</p>
 <p>背景图像滚动。请尝试向下滚动页面。</p>
 <p>背景图像滚动。请尝试向下滚动页面。</p>
 <p>背景图像滚动。请尝试向下滚动页面。</p>
 <p>背景图像滚动。请尝试向下滚动页面。</p>
 <p>背景图像滚动。请尝试向下滚动页面。</p>
 <p>背景图像滚动。请尝试向下滚动页面。</p>
 <p>背景图像滚动。请尝试向下滚动页面。</p>
 ​
 </body>
 </html>

css背景简写

CSS background - 简写属性

如需缩短代码，也可以在一个属性中指定所有背景属性。它被称为简写属性。

而不是这样写：

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

您能够使用简写属性 background：

实例

使用简写属性在一条声明中设置背景属性：

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

在使用简写属性时，属性值的顺序为：

  • background-color

  • background-image

  • background-repeat

  • background-attachment

  • background-position

属性值之一缺失并不要紧，只要按照此顺序设置其他值即可。请注意，在上面的例子中，我们没有使用 background-attachment 属性，因为它没有值。

DHPYX
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端学习 -- Html&Css -- 背景
A08110123的博客
05-16 1335
background 在一个声明中设置所有的背景属性。background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。background-color 设置元素的背景颜色。background-image 设置元素的背景图像。background-position 设置背景图像的开始位置。background-repeat 设置是否及如何重复背景图像...
CSS笔记.pdf
07-14
CSS笔记.pdf
CSS笔记1.docx
05-07
CSS笔记1.docx
CSS3笔记1
08-04
多背景(CSS3)凹凸文字导航栏案例文本的装饰CSS 三大特性CSS层叠性CSS继承性CSS优先级CSS特殊性（Specificity）盒子模型（CSS重点）看
background-image:url();url中怎么写；以及区分background属性；
rmkloveme
10-26 14万+
background-image:用于设置需要显示背景图片；  例如-->background-image:url(demo.jpg); 大家知道ulr()中是填写路径：（现在假设背景图片名字叫做demo.jpg） 1、如果该css文件和背景图片在同一文件夹存在且并不包含于其他文件夹 那么直接填写demo.jpg； -->background-image:ur
css样式表里面引用background-image时，url路径错误原因及解决方法
mandy' blog
06-04 3万+
一直对css中background-image：url的路径问题存在误解，半知半解的，有时候路径写的对，有时候又是错的，完全碰运气，今天写resume时又遇到这个问题，在此整理下： css样式表中background-image要引入image文件夹下的portrait.jpg图片， 正确的写法是： background-image:url('../image/portrait....
CSS 初学 （二）使用、注释
weixin_42646630的博客
03-17 373
如何添加 CSS 当浏览器读到样式表时，它将根据样式表中的信息来格式化 HTML 文档。 三种使用 CSS 的方法 有三种插入样式表的方法： 外部 CSS 内部 CSS 行内 CSS 外部 CSS 通过使用外部样式表，您只需修改一个文件即可改变整个网站的外观！ 每张 HTML 页面必须在 head 部分的 <link> 元素内包含对外部样式表文件的引用。 外部样式表可以在任何文本编辑器中编写，并且必须以 .css 扩展名保存。 外部 .css 文件不应包含任何 HTML 标签
background-image使用
m0_62404884的博客
05-18 4万+
目录 background-image:(" ") background-repeat属性（背景平铺） background-size属性（设置背景图片大小） background-position属性（背景图片位置） 1.background-image: url(" ") ; 首先要知道background-image是将图片作为背景，使用方法为： background-image: url("") ; 其次是关于图片路径问题， 如果该...
background-image的用法
热门推荐
lxiaopfeng的博客
09-09 15万+
background-image将图片作为背景，配合使用的属性background-repeat、background-position、还有css3才有的background-size，下面通过几个图片来展示这几个结合使用实现图片作为背景（如搜索框中的一个搜索图片）        1、background-image的用法，为图像制定url：       2、background-rep
CSS笔记1
01-07
CSS 指层叠样式表 (Cascading Style Sheets) 样式：定义如何显示 HTML 元素，通常存储在样式表中 外部样式表：可以极大提高工作效率，通常存储在 CSS 文件中 CSS规则 CSS 规则两个主要的部分：选择器，一条或多条...
css笔记
04-02
css笔记是自己最近没啥事,重新的梳理了一遍之后,写的,为了帮助自己提高,希望对看到笔记的人,也能有所帮助.
background-image:url();url中怎么写
QZC295919009的专栏
04-09 1万+
background-image:用于设置需要显示背景
css background
qq_36481758的博客
07-24 242
background: background-size: 100px 100px; // 背景图片宽100px;高100px; background-size:100% 80%; // 背景图片width等于盒子宽,height是盒子高度的80%; .box { width: 410px; height: 210px; borde...
CSS中background-image:url()属性设置
Masquerades成长之路
01-03 2万+
background-image 是css中设置背景图片的属性，最近在我用MVC架构开发WEB时却出现了一个小问题。 我在视图里写了这样一句代码： 很显然，我是想将整个页面的背景设置成一张图片，注意里面assets文件夹是Web项目根目录下的文件夹，，这样写貌似没有错误， 但是运行后那张背景图片并没有显示出来，审查元素的结果 显然，在根目录下又加上了控制器“home”的名字，后
background-image:url
醉梦的我
06-06 1203
作者：点击打开链接 我遇到了一个问题，就是在外部CSS文件中定义了背景图，无法在引用它的html文件中显示。具体来说是这样的：样式表文件Style1.css放在~/Style文件夹下，在~/Admin文件夹下有个index.aspx引用了这个外部样式表， 在Style1.css文件有这样的定义： .logo{background-image:url(../pic/logo.jpg
背景图片的使用方法
weixin_69474097的博客
07-16 575
背景图片的使用方法
background-image: url(图片路径)；设置元素背景无法显示
Lsiyi_的博客
07-15 5274
background-image: url(图片路径);设置元素背景无法显示
样式表单MIME 类型 “text/plain“ 不是 “text/css“问题处理
最新发布
jkzyx123的博客
05-15 167
样式表单www.*.com/static/js/*.css未载入，因为它的 MIME 类型 "text/plain" 不是 "text/css"。
pink老师css笔记
08-17
很抱歉，我无法根据提供的引用内容回答你的问题，因为引用内容并没有提到"Pink老师CSS笔记"这个话题。如果你有关于"Pink老师CSS笔记"的具体问题，我将非常乐意帮助你回答。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [CSS知识点整理（pink老师课程的学习笔记）](https://blog.csdn.net/m0_53975499/article/details/113576769)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [HTML+CSS学习笔记（pink老师前端课程笔记--补档）](https://blog.csdn.net/weixin_44524703/article/details/121071964)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值