第一章:CSS基础入门

1. CSS简介 CSS,全称为Cascading Style Sheets(层叠样式表),是一种样式表语言,专门用于描述HTML或其他XML文档(例如SVG、MathML)的展示和格式化。CSS负责定义网页元素的布局、颜色、字体、尺寸、间距、透明度、显示模式等各种视觉和布局特性。CSS的核心价值在于它实现了内容与表现的分离,使得开发者可以独立修改网页的样式而不影响内容结构,提高了网站的可维护性和可扩展性。

2. CSS语法基础

  • 选择器 :CSS选择器是用于指定HTML元素的样式规则的关键部分。它可以是元素名称(如p代表段落元素)、类名(.class)、ID名(#id)、属性选择器(如 [href][target="_blank"])以及其他更复杂的组合选择器(如后代选择器 div .content、子代选择器 div > p 和相邻兄弟选择器 h1 + p 等)。

  • 属性与值 :在CSS规则中,每个选择器后面跟随一对或多对属性和值,属性和值之间用冒号:分隔,每对属性值之间则以分号;结束。例如:

Css

css 复制代码
p {
  color: red; /* 设置文字颜色为红色 */
  font-size: 16px; /* 设置字体大小为16像素 */
  margin: 0 auto; /* 设置外边距使段落居中 */
}
  • 注释 :CSS注释与大多数编程语言类似,使用/* 注释内容 */格式,例如:

Css

css 复制代码
/* 这是一个CSS注释,不会被浏览器解析 */
body {
  background-color: #f0f0f0; /* 设置页面背景色 */
}

3. 链接与引入CSS 在HTML文档中应用CSS有三种主要方式:

  • 内联样式 :直接在HTML元素的style属性中定义样式,仅对该元素生效。

Html

html 复制代码
<p style="color: blue;">这段文字是蓝色的。</p>
  • 内部样式表:在HTML文档<head>部分使用<style>标签定义样式,这些样式适用于整个文档。

Html

html 复制代码
<head>
  <style>
    body {
      background-color: lightgrey;
    }
    h1 {
      color: darkblue;
    }
  </style>
</head>
  • 外部样式表:创建一个单独的.css文件,并在HTML文档中通过<link>标签链接至该文件,这种方式便于集中管理和复用样式,提高效率。

Html

html 复制代码
<head>
  <link rel="stylesheet" href="styles.css">
</head>

在外部样式表styles.css中:

Css

css 复制代码
body {
  background-color: lightgrey;
}
​
h1 {
  color: darkblue;
}

通过上述方式,CSS可以根据需要灵活地控制和美化网页内容的展现形式。

相关推荐
前端小巷子5 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹8 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器15 分钟前
指定阿里镜像原理
前端
枷锁—sha19 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha21 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜37 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20156 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss