0
点赞
收藏
分享

微信扫一扫

css笔记1

秀儿2020 2022-03-13 阅读 86
csshtmllinq

 

目录

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 属性，因为它没有值。

举报

相关推荐

CSS笔记1

csscss3前端

前端笔记css（1）----css使用方法

csshtml选择器

<<CSS揭秘>>学习笔记(1):css编码技巧

技术技术干货代码改变世界程序员让前端飞

黑马前端笔记3--CSS（1）

css前端html

HTML5+CSS3 学习笔记 1

html5htmlweb标准标记语言编程语言

CSS笔记及展示（1）（级联样式单）

css级联样式单Html/CSS前端开发

css笔记

css

CSS笔记

css前端

css练习1

csscss3html

css基础【1】

csshtmlcss3
0 条评论