id怎么换背景颜色-1. 基础语法

1. CSS 1. 基本语法

CSS的定义由三部分组成：选择器、属性和属性值。 基本语法是在选择器名称后添加{}大括号id怎么换背景颜色，括号内设置属性和属性值，属性和属性值之间用冒号“:”分隔。

其基本语法如下。

<code class="language-css">选择器{
  	属性:属性值;
}    
即
selector{ 
	properties:value 
  }

CSS 语法有几点需要注意。

属性必须用 {} 括起来。

属性和属性值用“:”分隔。

当有多个属性时，使用“;” 来区分它们。

编写属性时，属性之间使用空格、换行符等不会影响属性的显示。

如果一个属性有多个值，则每个属性值之间用空格分隔。

2.CSS选择器

选择器是CSS中非常重要的概念，HTML语言中的所有标签都是通过不同的选择器来控制的。 用户通过将各种样式分配给不同的选择器来控制HTML标签，以达到各种效果。 选择器分为三种类型：标签选择器、类选择器和 ID 选择器。 所谓的后代选择器和组选择器只是前三个选择器的扩展应用。

(1)、标签选择器

HTML 页面由许多不同的标签组成，CSS 标签选择器用于声明哪些标签使用哪种 CSS 样式。 因此，每个HTML标签的名称都可以作为对应标签选择器的名称。例如id怎么换背景颜色，p选择器用于声明所有

标记的样式。 同样ip形象，您可以通过 hl 选择器为页面中的所有标签声明 CSS 样式。 语法：

标签名 {
	属性1：属性值1；
	属性2：属性值2； 
    属性3：属性值3； 
    ... 
}

优势：

快速统一设置页面同类型标签的样式

缺点：

无法区分样式卡通形象，只能选择当前所有标签

(2)、类选择器

Web设计者可以自己定义一个类选择器，设置属性和值，然后应用在XHTML中。 在 CSS 中，类选择器由句点标识，句点加上类名，后面是写在 {} 大括号中的属性和值。 语法：

.类名 {
	属性1：属性值1：
	...
}

使用类的方法是通过元素的属性在 HTML 中引用它。

    
        .red {
            color: red;
        }
    


    

        
1
        
2
        
3
        
4
    

注意：

多个类名

如何使用：

红色

使用场景：

(3)、ID选择器

ID选择器的用法与类选择器的用法基本相同。 不同的是，类选择器可以在页面中重复使用，而ID选择器在XHTML中只能使用一次。 具体使用方法是在CSS中使用#来标识ID选择器。 语法是#加上ID名称，然后在{大括号中写入属性和值。 语法：

#id名 {
	属性1：属性值1;
	..
}

应用ID的方法是以 的形式将其引入到XHTML中，跟在元素的开始标记后面。前面定义了名为A的ID，应用到它的段落语句写为

请注意，每个 ID 在一个页面上只能使用一次，因此应该为每个页面上唯一且仅使用一次的元素保留该 ID。 如果需要在多个地方使用相同的 CSS 规则，则不应使用 ID。 ，您可以使用类选择器或其他方法来提供样式。

    
        #pink {
            color: pink;
        }
    


    
12345
    
67890

(4)、万能选择器

通用选择器由星号 (*) 表示，匹配任何元素，其定义适用于 HTML 文档中的每个元素。 为了保证页面兼容多种浏览器，需要重置HTML中的所有标签，并将以下代码添加到CSS文件的顶部。 语法：

* {
	属性1：属性值1；
    ...
}

例子

    
        * {
            color: red;
        }
    


    
12345
    
67890
    

        
24680
    

3.CSS字体属性（一）、字体族

CSS 使用 font-family 属性来定义文本的字体系列

    
        h2 {
            font-family: '楷体';
        }
    


    
标题
    
测试测试测试测试
    
测试测试测试测试
    
测试测试测试测试

(2)、字体大小

使用 font-size 属性定义字体大小

p {
	font-size:20px;
}

    
        h2 {
            font-size: 16px;
        }
    


    
标题
    
测试测试测试测试
    
测试测试测试测试
    
测试测试测试测试

(3) 文字粗细

使用front-weight属性设置文字粗细，语法：

p {
	font-weight:bold;
}

属性：

普通的

默认值

大胆的

定义粗体（粗体）

100-900

400相当于普通，700相当于粗体。 请注意，数字后面没有单位。

例子：

    
        .bold {
            font-weight: 700;
        }
        h2 {
            font-weight: 400;
        }
    


    
标题
    
测试测试测试测试
    
测试测试测试测试
    
测试测试测试测试

(4) 文字样式

使用 font-style 属性设置文本样式

p { font-style:normal; }

适当的价值：

普通的

默认情况下，浏览器将显示标准字体样式

斜体

浏览器将显示斜体字体样式

例子：

    
        p {
            font-style: italic;
        }
        em {
            font-style: normal;
        }
    


    
测试测试测试测试
    测试测试测试测试

(5)、字体复合属性

    
        div {}
            font:italic 700 16px 'Courier New';
        }
    


    
测试文本

4.文字属性（1）、文字颜色

div {
	color:red;
}

(2) 对齐文本

div {
    /*text-align设置水平对其*/
	text-align:center;
}

左边

左对齐（默认）

正确的

右对齐

中心

中心对齐

(3) 装饰文字

div {
	text-decoration:underline;
}

没有任何

默认.无装饰线

强调

Underline.Link a 有下划线

上划线

上划线

直通

删除线

(4) 文字缩进

div {
	text-indent:10px;
}

通过设置此属性，所有元素的第一行都可以缩进给定的长度，甚至是负值。

div [
	text-indent:2em;
}

(5)、行间距

p { line-height:26px; }

5. Emmet语法（一），快速生成HTML结构语法 6. 多元素组合的选择器

多个元素的组合选择器包括多元素选择器、后代元素选择器、子元素选择器和相邻元素选择器。

(1)、多元素选择器

多元素选择器的语法格式如下：E,F。

多元素选择器同时匹配所有E元素或F元素，以逗号分隔。

例如：

h1,h2{color:blue;)

这意味着 h1 和 h2 元素的颜色都设置为蓝色。

(2) 后代选择器

也称为包含选择器，您可以选择父元素内的子元素。 写法是外标签写在前面，内标签写在后面，中间用空格隔开。 当标签嵌套时，内部标签将成为外部标签的后代。 语法：

此语法意味着选择元素 1 内的所有元素 2 (hou'dai'yuan's)

元素1 元素2 {
	样式声明
}

例子：

    
        ol li {
            color: red;
        }
    


    

        
我是ol 的孩子
        
我是ol 的孩子
        
我是ol 的孩子
    
    

        
我是ul 的孩子
        
我是ul 的孩子
        
我是ul 的孩子
    

(3)、子元素选择器

子元素选择器只能选择一个元素的最近的子元素。 语法：

该语法的意思是选择元素 1 元素 2 的所有直接后代（子元素）

元素1>元素2 {
	样式声明
}

例子

    
        .nav > a {
            color: red;
        }
    


    

        我是儿子
        

            我是孙子
        
    

(4)、联合选择器

联合选择器可以选择多组标签并同时为它们定义相同的样式。 通常用于集体申报。

联合选择器由英文逗号（,）连接的选择器组成。 任何形式的选择器都可以用作联合选择器的一部分。

语法：

该语法意味着选择元素 1 和元素 2

元素1,元素2 {
	样式声明
}

注意：联合选择器是竖写的，最后一个选择器不需要逗号。

例子

    
        div,
        p {
            color: red;
        }
    


    
熊大
    
熊二
    光头强
    

        
小猪佩奇
        
猪爸爸
        
猪妈妈
    

(5)、伪类选择器

伪类选择器可以为某些选择器添加特殊效果

编写伪类选择器最大的特点就是用冒号（:)来编写

链接伪类选择器

注：为了保证有效性，必须按照LVHA的顺序进行声明

    
        a:link {
            color: #333;
            text-decoration: red;
        }
        a:visited {
            color: seagreen;
        }
        a:hover {
            color: sienna;
        }
        a:active {
            color: slateblue;
        }
    


    小猪佩奇

:focus 伪类选择器

用于选择焦点表单元素

焦点是光标。 一般只能通过表单元素来获取。 语法是：

input:focus {
	background-color:yellow;
}

例子：

    
        input:focus {
            background-color: pink;
        }
    

7、元素显示方式（一）、块元素

特征：

注意：

(2)、行内元素（inline elements）

特征：

注意：

(3)、内联块元素

特征：

(4) 元素显示模式转换

转换为内联元素：

显示：内嵌；

转换为块级元素：

显示：块；

转换为内联块：

显示：内联块；

8. CSS背景（一）、背景颜色

背景颜色属性定义元素的背景颜色

background-color：颜色值

一般情况下，背景颜色的默认值是透明的。 您还可以手动将背景颜色指定为透明。

(2)、背景图片

background-image 属性描述元素的背景图像

background-image:one | url(url)

参数值：

没有任何

无背景图像（默认）

网址

使用绝对或相对地址指定图像

(3) 背景平铺

如果需要在HTML页面上平铺背景图片，可以使用backgrou-repeat属性

background-repeat:repeat | no-repeat | repeat-x | repeat-y

(4)、背景位置

使用background-position属性改变图像在背景中的位置

background-position:x y;

参数值：

长度

百分比 | 由浮点数和单位标识符组成的长度值

位置

顶部 | 中心 | 底部| 左| 中心 | 右向名词

(5)、背景固定（背景附件）

background-attachment 属性设置背景图像是固定的还是与页面的其余部分一起滚动

background-attachment:scroll | fixed

适当的价值：

滚动

背景图像随对象内容滚动

固定的

背景内容固定

(6)、背景半透明颜色

background:rgba(0,0,0,0.3);

注意：

(7)背景复合写法

background：背景颜色 背景图片地址 背景平铺背景图片 滚动背景图片位置

background:transparent url(image.jpg) repeat-y fixed top;

9.CSS特性（一）、级联关系

级联原理：

(二)继承关系

CSS 的主要特征之一是继承，它依赖于祖先-后代关系。 继承是一种机制，允许样式不仅应用于特定元素，还应用于其后代。 换句话说，继承是指设置上层（父级）的CSS样式，上层（父级）和下层（子级）都具有这个属性。

例如，为正文定义的颜色值也将应用于段落的文本。

风格定义：

body{color:blue;}

应用实例：

    
关于 css 的继承特性深入学习

继承的限制：

继承是CSS的重要组成部分。 我们甚至不需要思考为什么会这样。 然而，CSS继承也是有限的。 有些属性是不能继承的，比如border、margin、padding、background等。

样式定义定义：

div {border:1px solid #00F;}

代码如下所示：

我是border我不能被继承