CSS技术详解：前端设计必备知识-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_47358951/article/details/125707194

本文详细介绍了CSS技术，包括CSS的介绍、语法规则、与HTML的结合方式、选择器的类型以及常用样式，如字体颜色、宽度、高度、背景颜色等，为前端设计提供了全面的指导。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS技术-前端设计

一、CSS 技术介绍

CSS 是「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

二、CSS 语法规则

选择器：浏览器根据“选择器”决定受 CSS 样式影响的 HTML 元素（标签）。
属性 (property) 是你要改变的样式名，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration），例如：p {color: blue}
多个声明：如果要定义不止一个声明，则需要用分号将每个声明分开。虽然最后一条声明的最后可以不加分号(但尽量在每条声明的末尾都加上分号)

p{
   
	color:red;
	font-size:30px;
}

三、CSS 和 HTML 的结合方式

1、在标签的 style 属性上设置”key:value value;”，修改标签样式。

<html lang="en"> 
	<head> 
		<meta charset="UTF-8"> 
		<title>Title</title> 
	</head> 
	<body> 
		<div style="border: 1px solid red;">div 标签 1</div> 
		<span style="border: 1px solid red;">span 标签 1</span> 

	</body> 
</html>

2、在 head 标签中，使用 style 标签来定义各种自己需要的 css 样式。

<html lang="en"> 
	<head> 
		<meta charset="UTF-8"> 
		<title>Title</title> 
		<style type="text/css"> 
			div{
   
				border: 1px solid red; 
			}
			span{
   
				border: 1px solid red; 
			}
		<