05 ＜CSS语法＞学习

快来打我* 2022-09-04 10:58 113阅读 0赞

### 文章目录 ###

*   *  简介
 *  CSS语法
 *   *  选择器
     *   *  5种简单选择器
         *   *  注意:
         *  其他的格式需求
     *  使用CSS :内部,外部,行内
 *  框,定位等
 *   *  框
     *   *  边框: border
         *   *  基本样式展示
             *  特意只定义一边
             *  实用方法
         *  内边距: padding
         *  外边距: margin
     *  定位
     *   *  相对定位
         *  绝对定位
         *  固定定位
         *  浮动
 *  颜色,背景,注释
 *   *  颜色
     *  背景
     *   *  纯色的
         *  背景图片
     *  注释
     *  input等的标签,见下一篇博文

学习网站: W3school  
网址: https://www.w3school.com.cn/css/index.asp

## 简介 ##

CSS 是一种**描述 HTML 文档样式**的语言,用于描述应该如何显示 HTML 元素。  
CSS 指的是层叠样式表\* (Cascading Style Sheets)，它可以同时控制多张网页的布局。外部样式表存储在 CSS 文件中。  
\#\#\#一个**描述**例子:  
![在这里插入图片描述][860b3c205ab34d61abaa02ae24648eb0.png]

<!DOCTYPE html>
    <html>
    	<head>
    		<style>
    		body {
          
    		  background-color: green;
    		}
    		
    		h1 {
          
    		  color: white;
    		  text-align: center;
    		}
    		
    		p {
          
    		  font-family: verdana;
    		  font-size: 20px;
    		}
    		</style>
    	</head>
    	<body>
    	
    		<h1>我的第一个 CSS 实例</h1>
    		<p>这是一个段落。</p>
    	
    	</body>
    </html>

由上可见,基本结构是:

>  *  css控制写在<style>内,<style>写在<head>内
>  *  内容(如段落在<p>内,标题在<h1>内,列表在<ol或ul>+<li>内)在body内
>  *  <body>,<head>都在<html>内

下面都是基于此前提

# CSS语法 #

![在这里插入图片描述][91a67a6f4f564716b1a6b4bd2ce84391.png]

> 选择器指向您需要设置样式的 HTML 元素。  
> 每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。  
> 多条 CSS 声明用分号;分隔  
> 声明块用\{花括号\}括起来

## 选择器 ##

### 5种简单选择器 ###

2. 对某id: 应用于属性中< id=“para1” >的 HTML 元素  
3.类选择器: 应用于属性< class=“center” >的 HTML 元素  
4. 通用选择器：影响页面上的每个 HTML 元素  
5. 分组选择器:多个元素,定义同一种样式时,可以合并

跳转方案参考:[Markdown页内跳转实现方法][Markdown]

1.  对某元素:所有的<p>元素都被 **居中,红色**

p {
              # 设置样式的 HTML 元素：<p>
      color: red;		# color 是属性
      text-align: center;		# text-align 是属性
    }

1.  对某id: 应用于属性中< id=“para1” >的 HTML 元素

#para1 {
      text-align: center;
      color: red;
    }
    <h1 id=para1> 这就是我 </h1>
    <p id="para1">Hello World!</p>
    <p>本段是不受样式的影响。</p>

注意：id 名称不能以数字开头。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70]  
3. 类选择器: 应用于属性< class=“center” >的 HTML 元素

.center {
      text-align: center;
      color: red;
    }
    
    <h1 class="center">居中的红色标题</h1>
    <p class="center">居中的红色段落。</p> 
    <p>本段是不受样式的影响。</p>

![在这里插入图片描述][75cd8dac0a364cf1bb34993a9b1297d8.png]

*  进一步限制: 只有具有 class=“center” 的
    
    元素会居中对齐

p.center {
      text-align: center;
      color: red;
    }
    
    <h1 class="center">这个标题不受影响</h1>
    <p class="center">这个段落将是红色并居中对齐的。</p>

![在这里插入图片描述][dc0d6f151ba546589573a1255efa5246.png]

*  也不一定,只能引用一个类:

.center {
      text-align: center;
      color: red;
    }
    .large {
      font-size: 300%;
    }
    
    <p class="center large">本段将是center:红色、居中对齐 + large: 使用大字体。</p>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 1]  
4. 通用选择器：影响页面上的每个 HTML 元素

* {
        
      text-align: center;
      color: blue;
    }

1.  分组选择器:多个元素,定义同一种样式时,可以合并  
    比如,h1,h2,p都要居中变红，可以分开，也可以成为一组：

h1, h2, p {
        
      text-align: center;
      color: red;
    }
    
    <h1>Hello World!</h1>
    <h2>更小的标题</h2>
    <h3>我也想居中对齐变红,大师马,怎么肥四?</h3>
    <p>这是一个段落。</p>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 2]

#### 注意: ####

这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。

### 其他的格式需求 ###

1.  如何根据元素之间的关系,确定要应用css格式的部分  
    例如:

>  *  我用div分块后,只想要块内的段落p,应用定义的格式(段外的不用,)怎么办?
>  *  div块内,还有一个section,里面的段落p想保留原格式,怎么办?  
>       
>     
>  *  对于段外的,我可不可以让div的下一个相邻段落p用上我指定的格式?或者后面的全部p用上这个格式?

参考:CSS 组合器

1.  根据特定状态,如悬停,超链接访问后,获得点击后等,来应用渲染  
    还可以:

> 是嵌套次序,如"首个p元素"“p元素的第一个i元素”“首个
> 
> 元素中的所有  *元素”  
>   
> 还可以为不同语言:如 为 lang=“en” 的  元素定义引号*

参考:[CSS 伪类][CSS]

1.  设定元素一部分的样式:如首行,首字母  
    还可以:

> 设定,在每个<h1>元素前/后 插入一些内容。如一幅图  
>   
>   
> 设定, 选中之后的文本的显示样式的变化

参考: [CSS 伪元素][CSS 1]

1.  如果<a>元素有target属性,我就渲染  
    还可以:

> 如果a元素有target属性,且值为"\_blank",我就渲染;  
>   
>   
> 如果图片img的title中有"flower"字样,我就渲染; 还可以指定必须以flower开头/结尾  
>   
>

## 使用CSS :内部,外部,行内 ##

1.  内部css:  
    如果一张 HTML 页面拥有唯一的样式，那么可以使用内部样式表。  
    内部样式是在 head 部分的 <style> 元素中进行定义。  
    前面用的都是这种
2.  外部CSS ：  
    通过使用外部样式表，您只需修改一个文件即可改变整个网站的外观！

*  首先，定义外部CSS文件,文件名为"mystyle.css"：

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

注意: 勿在属性值和单位之间添加空格,例如`20px`不是`20 px`

*  应用外部css  
    必须在 head 部分的 <link> 元素内包含对外部样式表文件的引用。

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

![在这里插入图片描述][c110d425c2c0493192eb34e13afc0916.png]  
3. 行内css(内联样式表,慎用)  
用于为单个元素应用唯一的样式.  
使用方法:  
将 style 属性添加到相关元素(style 属性可包含任何 CSS 属性)。  
注意,与添加到head中的区别.

<body>
    <h1 style="color:blue;text-align:center;">这是标题</h1>
    <p style="color:red;">这是一个段落。</p>
    </body>

![在这里插入图片描述][90db6186633845ce94db7a8b901a5e9b.png]  
注意: 行内样式将内容与呈现混合在一起。请谨慎使用此方法。  
  
  
当有多个css定义时,注意一个元素的显示:

*  优先级:**看距离**: 如果某元素被定义了多个样式,后面的样式会覆盖前面的  
    `!important`: 改变优先级,使本样式的优先级最高
 *  层叠性: **不冲突样式,都会生效**
 *  继承性: p>span\{内容\},其中部分样式会从父级元素继承到子元素中

# 框,定位等 #

## 框 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 3]

### 边框: border ###

*  边框的样式: `border-style`,等价于`border`

#### 基本样式展示 ####

可以设置线条虚线,实线,双线等

*  取值与样式如下:

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}

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 4]

*  可为各边分别定义  
    定义`上/下,右/左`,或者`上,右/左,下`,或者`上-右-下-左`

p.soliddouble {
        border-style: solid double}
    p.three {
        border-style: solid double groove}
    p.four{
        border-style: solid dotted dashed double;}
    
    <p class="soliddouble">Two nums given. bottom=top and left=right</p>
    <p class="three">Three nums given. left=right</p>
    <p class="four">Four nums given. CLOCKWISE: top-right-bottom-left</p>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 5]

理解这种用法:  
分别定义四种边框.在给出的值小于4个时,发生值复制.  
参考外边距处的解释.

#### 特意只定义一边 ####

`border-top-color`,`border-right-color`,`border-bottom-color`,`border-left-color`分开定义4个边,其中,`color`去掉不会影响效果.

*  可以只留一边:

p.solid {
        border-top-style:solid}
    p.dotted {
        border-bottom-style:dotted}

![在这里插入图片描述][4facac20f61847689797885fe77091b5.png]

*  也可以只替换一边

p {border-style:solid;}
    p.none {border-top-style:none}
    p.dotted {border-top-style:dotted}

![在这里插入图片描述][cc3ab8b422be4e0f8d3cf4a030db20cc.png]

> border-style 的默认值是 none，边框消失了  
> 如果您希望边框出现，就必须声明一个边框样式。之后的边框宽度才有效  
> 如果希望边框透明(不可见), `border-color: transparent;`

*  边框的宽度: `border-width`  
    使用2px或0.1em,或者是 *thin < medium < thick* 指定.
 *  边框的颜色:`border-color` 属性  
    颜色值参考这里  
    它一次可以接受最多 4 个颜色值;如果颜色值2个，值复制就会起作用。

#### 实用方法 ####

简写属性,用于把针对四个边的属性设置在一个声明。

p {
        
       border: medium double rgb(250,0,255)
    }
    <p>Some text</p>

![在这里插入图片描述][34ab043508d34322b701dfdc17764699.png]

### 内边距: padding ###

*  最简单的,各边都有 10 像素的内边距

h1 {
        padding: 10px;}

*  也可以上下一组0.5cm,左右一组2.5cm

td.test2 {
        padding: 0.5cm 2.5cm}
    
    <table border="1">
    	<tr>
    		<td class="test2">
    			这个表格单元的上和下内边距是 0.5cm，左和右内边距是 2.5cm。
    		</td>
    	</tr>
    </table>

![在这里插入图片描述][32b20eaf836c4bc780cb80f2f23dd5a9.png]

*  也可以单独设置 *上-右-下-左*(从上外边距 (top) 开始围着元素顺时针旋转的) ,各边均可以使用不同的单位或百分比值：

h1 {
        padding: 10px 0.25em 2ex 20%;}

等价于

h1 {
        
      padding-top: 10px;
      padding-right: 0.25em;
      padding-bottom: 2ex;
      padding-left: 20%;
      }

其中,百分比数值:

> 百分数值是相对于其父元素的 width 计算的，这一点与外边距一样。  
> 上下,相对于width; 左右,也是相对于width,(不是height)

### 外边距: margin ###

*  margin  
    设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。

/*margin: top right bottom left*/
    
    h1 {
        margin : 10px 0px 15px 5px;}

2个值时的值复制示例:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 6]

> 指定了 3 个值，则第 4 个值（即左外边距）会从第 2 个值（右外边距）复制得到。  
> 如果给定了两个值，第 4 个值会从第 2 个值复制得到，第 3 个值（下外边距）会从第 1 个值（上外边距）复制得到。  
> 最后一个情况，如果只给定一个值，那么其他 3 个外边距都由这个值（上外边距）复制得到。

*  希望除了左外边距,以外所有其他外边距都是 auto

p {
        margin: auto auto auto 20px;}

或

p {
        margin-left: 20px;}

其他的还有:  
`margin-top`,`margin-right`,`margin-bottom`

*  外边距会折叠  
    垂直外边距会合并,这个开发时一般不用处理:

> 如果两者都是正值,则取两者间较大的  
> 如果一正一负,它的效果是两者和  
> 如果都是负值,则取两者中,绝对值较大的进行展示

父子元素间`相邻外边距`,子元素的值会传递给父元素,一般要处理.方法有

> 使其不相邻(如给父元素设置边框)  
> 或不用外边距(如通过给父元素设置内边距来实现偏移)  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 7]

## 定位 ##

一切皆为框:

> div、h1 或 p 元素常常被称为块级元素,这意味着这些元素显示为一块内容 : 块框  
> span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中 :行内框

可以使用display改变框的类型 [参考这里:display 属性][display]:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 8]  
定位时,框,默认位置为在HTML中:

> 块级框: 从上到下,一个接一个排列  
> 行内框: 在一行中水平布置  
> 默认方式,即 CSS position属性为static. 还有其他3种方式,如下:

### 相对定位 ###

元素框从原始位置`(x,y)`偏移至`(x',y')`,但是原始位置仍然被占据.  
被占据的意思是,下一个框,会放在原始位置`(x,y)`之后.(绝对定位是会释放原始位置的)  
为什么呢? 可以这样理解: 因为元素的新位置相对于它的原始位置。

下面的例子中,框2包含属性`<id=box_relative>`,可以看到,后面的框3默认放在框2 的原位置之后.

#box_relative {
        
    	 position: relative;
    	 left: 30px;
    	 top: 20px;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 9]  
注意: 移动元素会导致它覆盖其它框。

> 样式 “left:-20px” 从元素的原始左侧位置减去 20 像素。  
>   
> 样式 “left:20px” 向元素的原始左侧位置增加 20 像素。

### 绝对定位 ###

元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。  
元素会释放原始位置,也可以认为,它不占默认位置。

框2包含属性`<id=box_absolute >`

#box_absolute {
        
    	 position: absolute;
    	 left: 30px;
    	 top: 20px;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 10]  
注意: 绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

### 固定定位 ###

元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

#box_fixed{
        
    	position:fixed;
    	top:30px;
    	right:5px;
    }
    
    <p id="box_fixed">一些被安排的文本。</p>

![在这里插入图片描述][ceac6a061ac04520b1f834027caf70f4.png]

### 浮动 ###

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动框没有原始位置,它不在文档的普通流中  
参考:[CSS 浮动][CSS 2]

# 颜色,背景,注释 #

## 颜色 ##

*  首先,比较简单的用法  
    例如：red、green、blue、coral(珊瑚色)、brown (棕色)等  
    [更多颜色名点击这里跳转到网页][Link 1]

下面再介绍2种设置颜色的方式,都比较通用.

*  在 CSS 中，可以使用RGB值指定颜色 :  
    rgb(red, green, blue)

> 每个参数（red, green, blue）定义颜色的强度，可以是 0 到 255 之间的整数或百分比值（从 0％ 到 100％）。  
> 例如，值 rgb(0,0,255) 呈现为蓝色，因为 blue 参数设置为其最高值（255），其他参数设置为 0。此外，以下值定义相同的颜色：rgb(0%,0%,100%)。  
>   
>   
> 与此相应: rgba(red, green, blue, alpha)  
> alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

<h5 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h5>
    <h5 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h5>
    <h5 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h5>
    <h5 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h5>
    <h5 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h5>
    <h5 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h5>
    <h1 style="color:rgb(255,0,0)">这是设置前景色:字体</h1>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 11]

还有一种有趣的方式:

*  十六进制颜色

#p1 {
        background-color:#ff0000;}
    #p2 {
        background-color:#00ff00;}
    #p3 {
        background-color:#0000ff;}
    
    <p id="p1">红色 ff</p>
    <p id="p2">绿色 00ff</p>
    <p id="p3">蓝色 0000ff</p>

![在这里插入图片描述][f7299f231938472880fc24b5bb05ada2.png]  
![在这里插入图片描述][295edb9d704d4ad5bbe22ac3e55130ab.png]  
用 \#RRGGBB 规定十六进制颜色，其中 RR（红色）、GG（绿色）和 BB（蓝色）十六进制整数指定颜色的成分（分量）。所有值必须在 00 到 FF 之间。

> 与此相应, 如需增加透明度设置，请在 00 和 FF 之间添加两个额外的数字。

#p1a {
        background-color: #ff000080;}   /* 带透明度的红色 */
    #p2a {
        background-color: #00ff0080;}   /* 带透明度的绿色 */
    #p3a {
        background-color: #0000ff80;}   /* 带透明度的蓝色 */

## 背景 ##

背景可以是纯色,或者使用背景图像.

### 纯色的 ###

在head-style中设置:

body {
        background-color: yellow}
    h2 {
        background-color: transparent}
    p {
        background-color: rgb(250,0,255)}
    p.no2 {
        background-color: gray; padding: 20px;}

其中:

> body中的设置的样式,为整张页面(所有元素)设置背景色  
>   
>   
> background-color 其默认值是 transparent。  
> background-color 不能继承，也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。  
>   
>   
> 内边距padding,使文本相对于背景色边缘,缩进来一点点

接着,使用样式.在<body>中设置

<h2>这是标题 2</h2>
    <p>这是段落</p>
    <p class="no2">这个段落设置了内边距,使用了padding来使内部缩进</p>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 12]

### 背景图片 ###

以图像为背景，需要使用 background-image 属性。background-image 属性的默认值是 none.

*  与上类似,可以分别设置整张页面(body)

body {
        background-image: url(/i/eg_bg_04.gif);}

和局部的

p.flower {
        background-image: url(/i/eg_bg_03.gif); }
    a.radio {
        background-image: url(/i/eg_bg_07.gif); padding: 20px;}
    
    <p class="flower">我是个有背景的行,还没完,还有个连接<a href="#" class="radio">我是一个有放射性背景的链接。</a></p></p>

![在这里插入图片描述][ace7935cb027439987cab762cdda40bf.png]

*  平铺吗?不平铺吗?  
    默认是平铺的,即`background-repeat: repeat;`  
    可以选择在一个方向上平铺: `repeat-x 和 repeat-y`  
    或者,不平铺:`no-repeat`
 *  确定图片在背景中的位置  
    可以利用 background-position 属性改变图像在背景中的位置。  
    例子: 在 body 元素中将一个背景图像居中放置

body
      {
         
        background-image:url('/i/eg_bg_03.gif');
        background-repeat:no-repeat;
        background-position:center;
      }
    
    <body>
    </body>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 13]  
可选: `top、bottom、left、right 和 center` 或者 使用长度值，如 `100px 或 5cm`，最后也可以使用`百分数值`  
但其实,虽然用了一个,解释的时候确实两个: `center`等价于 `center center`

> 那么,使用百分数就应该是: `background-position:50% 50%;`

而background-position 的默认值是 0% 0%，这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺

> 使用长度:  
> `background-position:50px 100px;`

比如，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上：

*  背景关联(在no-repeat时有用)  
    如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。可以用 `background-attachment` 属性声明图像相对于可视区是固定的（fixed）。它的默认值是 scroll.

body 
    {
        
    background-image:url(/i/eg_bg_02.gif);
    background-repeat:no-repeat;
    background-attachment:fixed;
    }

## 注释 ##

*  位于 `<style>`元素内的 CSS 注释，以 **/\*** 开始，以 **\*/**  结束
 *  使用**<!–…-->** 语法在 HTML 源代码中添加注释

<!DOCTYPE html>
    <html>
    <head>
    <style>
    p {
          
      color: red; /* 把文本色设置为红色 */
    }
    /* 这是
    一条多行的
    注释 */
    </style>
    </head>
    <body>
    
    <h1>我的标题</h1>
    
    
    <p>Hello World!</p>
    <p>这段文本由 CSS 设置样式。</p>
    <p>CSS 注释不会在输出中显示。</p>
    
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 14]

## input等的标签,见下一篇博文 ##

[860b3c205ab34d61abaa02ae24648eb0.png]: /images/20220829/ee270df049484ca3aa1ce1fd5d21879a.png
[91a67a6f4f564716b1a6b4bd2ce84391.png]: /images/20220829/e1f4fb71bf8345e6b2165138f8368d5f.png
[Markdown]: https://www.cnblogs.com/tocy/p/markdown-link-inner-page.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70]: /images/20220829/cd742b9874a5448381d16f27a0502bf9.png
[75cd8dac0a364cf1bb34993a9b1297d8.png]: /images/20220829/df59aada4d534ab7ada0c6b6f68a90df.png
[dc0d6f151ba546589573a1255efa5246.png]: /images/20220829/bc4686e4c07645909debea9af32285f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 1]: /images/20220829/ef00bb9a886643af9ad845f672b414f2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 2]: /images/20220829/672bcdf03f66409a9cf7260d7b1d74ee.png
[CSS]: https://www.w3school.com.cn/css/css_pseudo_classes.asp
[CSS 1]: https://www.w3school.com.cn/css/css_pseudo_elements.asp
[c110d425c2c0493192eb34e13afc0916.png]: /images/20220829/940767e19605450f806968ebaa574056.png
[90db6186633845ce94db7a8b901a5e9b.png]: /images/20220829/2560e85f39bf418d90d25edb87fd64f8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 3]: /images/20220829/d8b2eab9c70e4e06940ef213e1562b3f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 4]: /images/20220829/b95eca41a53242d59b23fc22574e7de6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 5]: /images/20220829/ec217c97444d4457bbf9ca02afbcd15c.png
[4facac20f61847689797885fe77091b5.png]: /images/20220829/8fab455480bb4a8aaf54e93a457be898.png
[cc3ab8b422be4e0f8d3cf4a030db20cc.png]: /images/20220829/b2137391f32c4ba2be0eefbadf3978de.png
[34ab043508d34322b701dfdc17764699.png]: /images/20220829/f23b59581d7e42b0834c53b14e3025dc.png
[32b20eaf836c4bc780cb80f2f23dd5a9.png]: /images/20220829/a918983f49b844b88515f3b0f92a700f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 6]: /images/20220829/6cb9ed70c403459d941637de8504aa29.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 7]: /images/20220829/6dafa338f0ca4372855c2cb7b3182c46.png
[display]: https://www.w3school.com.cn/cssref/pr_class_display.asp
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 8]: /images/20220829/49ae90c510f34e8a88907e60c7bace3a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 9]: /images/20220829/77470aff83284aea82f5b506b4610fa9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 10]: /images/20220829/b09bcf6ddb0d46f8baaf79aae49e3ecb.png
[ceac6a061ac04520b1f834027caf70f4.png]: /images/20220829/48ee53291d844b0bbe675a50a2f55461.png
[CSS 2]: https://www.w3school.com.cn/css/css_positioning_floating.asp
[Link 1]: https://www.w3school.com.cn/cssref/css_colors.asp
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 11]: /images/20220829/5388b46522204ad696a7ac86ed55ee6a.png
[f7299f231938472880fc24b5bb05ada2.png]: /images/20220829/57fac34077c141dd8b2f80b67a85c334.png
[295edb9d704d4ad5bbe22ac3e55130ab.png]: /images/20220829/c9e100a28eb249348cce0feb044385e4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 12]: /images/20220829/baec2536f4e045dfb38fc2964772c45f.png
[ace7935cb027439987cab762cdda40bf.png]: /images/20220829/b74e2ae410ec4b2e8686324571fdfafb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 13]: /images/20220829/6d12c46e340c4167907c8649b9058821.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQzMzgwOQ_size_16_color_FFFFFF_t_70 14]: /images/20220829/956e57e408ef424ea4a4eea8e16e751b.png