CSS编程语言语法、选择器与HTML标签属性简介

文章目录

- 一、什么是CSS编程语言
- 二、CSS的语法
- - 1、CSS支持多种类型的选择器
  - - 1、元素选择器：根据 HTML 元素的类型选择元素。
    - 2、类选择器：通过元素的 class 属性选择元素。
    - 3、ID 选择器：通过元素的 id 属性选择元素。
    - 4、属性选择器：根据元素的属性选择元素。
    - 5、伪类选择器：选择处于特定状态的元素。
    - 6、后代选择器（也称为组合选择器）：选择某个元素的后代元素。
    - 7、子元素选择器：选择某个元素的直接子元素。
  - 2、CSS提供了丰富的属性来定义样式
- 三、HTML标签属性分类
- - 1、基本属性
  - 2、样式属性
  - 3、工作状态属性
  - 4、监听属性
- 四、CSS编程语言作用

一、什么是CSS编程语言

CSS（Cascading Style Sheets，层叠样式表）是一种用于描述HTML或XML（包括如SVG、MathML等衍生技术）文档样式的计算机语言。CSS描述了如何在屏幕、纸质、音频等媒介中渲染元素。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它图像效果实现更加精确的控制。

丰富的样式定义： CSS提供了丰富的样式定义，包括颜色、字体、大小、间距、边框、对齐方式等，可以精确地控制网页中每个元素的外观和布局。
层叠性： CSS允许为同一个元素指定多个样式，当多个样式发生冲突时，会根据一定的优先级规则来决定最终应用的样式，这就是CSS的层叠性。
继承性： CSS中的某些样式属性可以从父元素继承到子元素，这使得样式的定义更加灵活和高效。
分离样式和内容： CSS可以将网页的样式和内容分离，使得网页的结构更加清晰，也便于后续的维护和修改。

CSS的语法规则相对简单，主要包括选择器和声明两部分。选择器用于指定要应用样式的HTML元素，而声明则用于定义具体的样式属性和值。

CSS的应用范围非常广泛，不仅可以用于网页的样式设计，还可以用于其他基于XML的文档类型，如SVG、MathML等。同时，随着前端技术的不断发展，CSS也在不断进化，出现了许多新的特性和技术，如CSS3、Flexbox、Grid等，使得网页设计和布局更加灵活和强大。

二、CSS的语法

CSS的语法主要由两部分构成：选择器和一条或多条声明。

选择器用于指定你想要样式化的HTML元素。选择器通常是您需要改变样式的HTML元素。例如，想把所有段落文字的颜色改为蓝色，就要写这样的选择器：p。

声明则包含一个属性和一个值，中间用冒号分隔，然后整个声明以分号结束。属性和值一起描述了选择器的样式。例如，想设置段落文本的颜色为蓝色，需要在选择器后面加上这样的声明：color: blue;。

p {  
  color: blue;  
}

这条规则的含义是：选择所有的<p>元素，并将其文本颜色设置为蓝色。

1、CSS支持多种类型的选择器

CSS 支持多种类型的选择器，它们可以根据不同的条件选择并应用样式到 HTML 元素上。这些选择器提供了极大的灵活性和精确性，让开发者能够更精确地控制网页的样式。

1、元素选择器：根据 HTML 元素的类型选择元素。

p {  
  color: blue;  
}

这个选择器会选择所有的 <p> 元素，并将它们的文本颜色设置为蓝色。

2、类选择器：通过元素的 class 属性选择元素。

.my-class {  
  background-color: yellow;  
}

这个选择器会选择所有 class 属性为 my-class 的元素，并将它们的背景颜色设置为黄色。

3、ID 选择器：通过元素的 id 属性选择元素。

#my-id {  
  font-size: 20px;  
}

这个选择器会选择 id 属性为 my-id 的元素，并将它的字体大小设置为 20 像素。

4、属性选择器：根据元素的属性选择元素。

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

这个选择器会选择所有类型为 text 的 <input> 元素，并为它们设置边框。

5、伪类选择器：选择处于特定状态的元素。

a:hover {  
  color: red;  
}

这个选择器会选择鼠标悬停在其上的所有 <a> 元素，并将它们的文本颜色设置为红色。

6、后代选择器（也称为组合选择器）：选择某个元素的后代元素。

div p {  
  color: green;  
}

这个选择器会选择所有 <div> 元素内部的 <p> 元素，并将它们的文本颜色设置为绿色。

7、子元素选择器：选择某个元素的直接子元素。

div > p {  
  color: purple;  
}

这个选择器会选择所有作为 <div> 元素直接子元素的 <p> 元素，并将它们的文本颜色设置为紫色。

这些选择器可以单独使用，也可以组合使用，以创建更复杂的样式规则。通过灵活使用这些选择器，可以精确地控制网页中各个元素的样式，从而实现各种美观且功能强大的网页设计。

2、CSS提供了丰富的属性来定义样式

盒模型属性： 如width、height、margin、padding等，用于控制元素的大小和位置。
边框属性： 如border-width、border-color、border-style等，用于设置元素的边框样式。
文本属性： 如color、text-align、text-decoration等，用于设置文本的外观和格式。
定位属性： 如position、top、left、right、bottom等，用于控制元素在页面上的位置。

这些属性可以根据需要组合使用，以创建出各种复杂的样式效果。

除了基本的语法和属性，CSS还支持许多高级特性，如过渡效果、动画效果、响应式设计等，这些特性使得CSS在网页设计和开发中发挥着越来越重要的作用。

三、HTML标签属性分类

1、基本属性

大多数HTML标签都拥有属性，是一个非常庞大群体比如id属性，相当于身份证编号，用于区分HTML标签。

<input type="text" id="one"/>

<input type="text" id="two"/>

// 比如name属性，相当于人名字，允许一组标签拥有相同name；

<input type="text" id="one" name="myText"/>

<input type="text" id="two" name="myText"/>

2、样式属性

样式属性是一个非常庞大群体，通知浏览器将HTML标签中数据在浏览器中以指定形态展示。

<div sty1e="background-color: red; color: green; width: 300px; height: 200px"></div>

换做CSS语言：

<div className="css-style"></div>

.css-style {
	background-color: red;
	color: green;
	width: 300px;
	height: 200px;
}

3、工作状态属性

只存在于【表单域标签】中，用于表示【表单域标签】状态

cheaked：存在于radio与checkbox中，表示标签是否被选中。
disabled：表示标签处于不可用状态。
readOnly：表示标签处于只读状态。
selected：存在option标签，表示标签是否被选中。

4、监听属性

监听属性用户与HTML标签之间进行通信通道，监听属性用于监听用户在何时对当前标签进行何种操作，当指定操作产生时，监听属性将会通知浏览器调用对应JavaScript方法处理当前请求。

HTML标签本身并不直接包含监听属性，但HTML元素可以与JavaScript结合使用，通过JavaScript为HTML元素添加事件监听器，以便在用户与页面交互时执行特定的函数或代码。这些事件监听器可以响应诸如点击、鼠标移动、键盘输入等各种事件。

虽然HTML5引入了一些新的事件属性（如onclick、onload等），这些属性可以直接在HTML标签中使用，但它们实际上是内联JavaScript代码的快捷方式，而不是真正的监听属性。

onclick：当用户点击元素时触发。
onload：当页面或图片加载完成时触发。
onmouseover 和 onmouseout：当鼠标指针进入或离开元素时触发。
onfocus 和 onblur：当元素获得或失去焦点时触发。
onsubmit：当表单提交时触发。
onchange：当元素的值发生变化时触发（如输入框的内容改变）。

这些事件属性通常用于添加简单的交互效果或行为，但在复杂的Web应用中，通常建议使用JavaScript来添加事件监听器，因为这样可以更好地控制事件处理流程，并允许更复杂的逻辑处理。

使用JavaScript添加事件监听器的示例：

html
<!DOCTYPE html>  
<html lang="en">  
<head>  
	<meta charset="UTF-8">  
	<title>Event Listener Example</title>  
</head>  
<body>  
	<button id="myButton">Click me!</button>   
	<script>  
		// 获取按钮元素  
		var button = document.getElementById('myButton');  
	  	// 为按钮添加点击事件监听器  
		button.addEventListener('click', function() {  
  			alert('Button was clicked!');  
		});  
	</script>  
</body>  
</html>

使用addEventListener方法为ID为myButton的按钮添加了一个点击事件监听器。当用户点击这个按钮时，会弹出一个警告框显示“Button was clicked!”。这种方法比直接在HTML标签中使用onclick属性更灵活和可维护。

注意：由于网页经常出现大量的HTML标签拥有相同的样式属性设置，因此导致前端工程师进行大量重复性开发操作。或者当用户修改需求时，导致前端工程师进行大量重复维护工作

四、CSS编程语言作用

统一定位： 通知浏器将所有满足定位条件的HTML标签进行统一定位。
集中统一赋值管理： 通知浏览器对已经定位HTML标签中样式属性进行集中统一赋值管理。
样式定义与分离： CSS允许开发者为HTML元素定义丰富的样式，包括颜色、字体、大小、间距、边框、背景、布局等。通过将样式和内容分离，CSS使得HTML文档更加清晰、易于维护，并提高了网站的可访问性和可重用性。
页面布局控制： CSS提供了多种布局模型，如流式布局、弹性盒模型（Flexbox）和网格布局（Grid）等，能够灵活地控制网页中元素的排列和对齐方式，实现复杂的页面布局和设计。
响应式设计： 通过CSS媒体查询（Media Queries），可以根据不同的设备特性（如屏幕尺寸、分辨率等）应用不同的样式规则，从而实现响应式设计。这使得网站能够在不同设备上呈现出最佳的用户体验。
动画与过渡效果： CSS支持创建各种动画和过渡效果，如渐变、滑动、旋转等。这些效果可以增强用户的交互体验，使网页更加生动和有趣。
继承与层叠： CSS具有继承性和层叠性，使得样式规则能够在元素之间传递和覆盖。这能够更高效地管理样式，避免重复定义，并实现对样式的精细控制。
提高网站性能： 通过优化CSS的使用，可以减少网页的加载时间和带宽消耗，从而提高网站的性能。例如，使用CSS Sprites技术可以将多个小图标合并成一个图像文件，减少HTTP请求次数；使用CSS压缩工具可以减小样式文件的大小，加快加载速度。

CSS编程语言在网页设计和开发中扮演着至关重要的角色。它使得开发者能够灵活地控制网页的样式和布局，提高用户体验和网站性能。