第一章: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可以根据需要灵活地控制和美化网页内容的展现形式。

相关推荐
咖啡の猫4 分钟前
Vue收集表单数据
前端·javascript·vue.js
知识分享小能手13 分钟前
uni-app 入门学习教程,从入门到精通, uni-app常用API的详细语法知识点(上)(5)
前端·javascript·vue.js·学习·微信小程序·小程序·uni-app
林恒smileZAZ20 分钟前
CSS3 超实用属性:pointer-events (可穿透图层的鼠标事件)
前端·计算机外设·css3
云中雾丽27 分钟前
flutter中 NotificationListener 详细使用指南
前端
大杯咖啡27 分钟前
一篇文章搞懂,浏览器强缓存以及协商缓存
前端·javascript
王六岁28 分钟前
# 🐍 前端开发 0 基础学 Python 入门指南: Python 元组和映射类型深入指南
前端·javascript·python
_志哥_31 分钟前
多行文本超出,中间显示省略号的终极方法(适配多语言)
前端·javascript·vue.js
王六岁32 分钟前
# 🐍 前端开发 0 基础学 Python 入门指南:常用的数据类型和列表
前端·javascript·python
1_2_3_33 分钟前
神级JS API,谁用谁好用
前端·javascript
冬至已至36 分钟前
AI 时代的自动化信息获取与整合
前端