CSS 入门指南：轻松掌握网页布局与样式设计的艺术
什么是CSS？
CSS（Cascading Style Sheets，层叠样式表）是一种用于为HTML元素添加样式的语言。CSS决定了页面上元素的外观：颜色、字体、布局等。
核心概念：CSS = 样式定义，就像编程是"输入 -> 函数处理 -> 输出"。 CSS的过程是： HTML元素 -> CSS规则处理 -> 呈现出样式。
CSS的基本语法
CSS规则由选择器和声明块组成，css代码写在 <style>标签中：
<style>
选择器 {
属性: 值;
}
</style>
- 选择器：指定要应用样式的HTML元素。
- 属性：定义要修改的样式特性（如颜色、大小等），它就是css的“基础函数”。
- 值：给属性赋予具体的值。
示例：
<p>This is a paragraph.</p>
<style>
p {
color: blue;
font-size: 16px;
}
</style>
效果：这个CSS规则将段落（
<p>元素）设置为蓝色字体，大小为16像素。
CSS基础知识点
选择器（重点）
CSS选择器用于选择想要应用样式的HTML元素。常用的选择器有：
标签选择器：应用到所有指定标签的元素。
例：p { color: red; } （所有<p>标签文字变红）
【重点】类选择器：应用到具有指定类名的元素。类选择器前加.。
例：.highlight { color: yellow; } （类名为highlight的元素文字变黄）
ID选择器：应用到具有指定ID的元素，ID选择器前加#。
例：#main-title { font-size: 24px; } （ID为main-title的元素字体大小为24px）
组合选择器：
- 后代选择器：选择某元素内的子元素。
divp {color: blue;} - 并集选择器：同时对多个元素应用相同的样式。
h1, h2, p {font-family: Arial;}
【重点】hover 选择器：在鼠标移到对应的标签时添加的特殊样式。
a:hover
{
background-color:yellow;
}
- 示例：鼠标移动到标签时，背景变成黄色。
盒模型(重点)
每个HTML元素都可以看作一个矩形盒子。盒模型包括内容、内边距（padding）、边框（border）和外边距（margin）。
img
padding: 内容与边框之间的距离。 例：padding: 10px;border: 设置边框样式、颜色和宽度。 例：border: 1px solid black;margin: 元素与其他元素之间的距离。- margin:10px 5px 15px 20px;
- margin:10px 5px 15px;
- margin:10px 5px;
- margin:10px;
- 上边距是 10px
- 右边距是 5px
- 下边距是 15px
- 左边距是 20px
- 上边距是 10px
- 右边距和左边距是 5px
- 下边距是 15px
- 上边距和下边距是 10px
- 右边距和左边距是 5px
- 所有四个边距都是 10px
- margin简写属性在一个声明中设置所有外边距属性（padding也是一样）。该属性可以有1到4个值。实例:
示例：
<div class="father-box">
<div class="box-1">This is a box1.</div>
</div>
<div class="father-box2">
<div class="box2">This is a box2.</div>
</div>
<style>
.father-box {
padding-top: 1px;
background-color: black;
height: 200px;
}
.father-box2 {
margin-top: 50px;
padding-top: 1px;
background-color: blue;
height: 300px;
}
.box-1 {
width: 200px;
padding: 20px;
border: 5px solid red;
margin: 10px;
background-color: green;
}
.box2 {
width: 20px;
padding: 40px;
border: 10px solid red;
margin: 50px;
background-color: green;
}
</style>
效果：box-1 盒子有200px宽，内边距20px，红色边框，外边距10px。
image-20240923234522756
布局（重点）
display: 决定元素如何显示。常见值包括none（隐藏）、block（块级）、inline（行内）和flex（弹性布局）。 例：display: flex;（弹性布局）position: 设置元素的定位方式。常见值有static（默认，即没有定位）、relative（相对定位）、absolute（绝对定位）和fixed（固定定位）。 例：position: relative; top: 10px;（相对当前位置下移10px）
示例：
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
</div>
<style>
.container {
display: flex;
}
.item {
margin: 10px;
padding: 10px;
border: 1px solid black;
}
</style>
效果：两个项目在一个水平行中，并且每个项目都有内边距和边框。
对齐元素（重点）
align-items、align-content 和 text-align 是 CSS 中用于对齐元素的属性，但它们应用于不同的场景和布局上下文。下面详细介绍这三个属性的使用场景和区别。
align-items 属性
- 作用对象：作用在 Flexbox 或 Grid 容器中的单行/单列的每个子项。
- 作用轴：用于调整 子元素在交叉轴（通常是垂直方向）上的对齐。
- 使用场景：容器中的子元素在单行/单列的情况下如何对齐。
- 典型值：
flex-start：子元素与交叉轴起点对齐。flex-end：子元素与交叉轴终点对齐。center：子元素在交叉轴居中对齐。stretch：子元素在交叉轴上拉伸以填满容器（默认值）。
示例：
.container {
display: flex;
height: 300px;
align-items: center;
}
在这个例子中，.container 内部的子元素将会在交叉轴（垂直方向）居中对齐。
align-content 属性
- 应用场景：
align-content主要用于 Flexbox 和 Grid 布局中，作用是当有多行或多列内容时，定义这些行或列在容器的交叉轴上的对齐方式。它仅在容器有多行/多列时生效，单行/单列时不影响布局。 - 作用对象：对齐的是 多行或多列的内容。
- 典型值：
flex-start：行或列与交叉轴起点对齐。flex-end：行或列与交叉轴终点对齐。center：行或列在交叉轴上居中对齐。space-between：行或列之间均匀分布，首行与尾行紧贴容器边缘。space-around：行或列之间均匀分布，周围留有空白。stretch：行或列在交叉轴上拉伸以填满容器（默认值）。
示例：
.container {
display: flex;
flex-wrap: wrap; /* 容器内容可以换行 */
height: 500px;
align-content: space-between;
}
在这个例子中，容器内的多行内容会均匀分布，首行和尾行会紧贴容器边缘。
text-align 属性
- 应用场景：
text-align主要用于文本对齐，它决定了 行内元素 或 块级元素中的文本 如何在水平方向对齐。text-align适用于块级元素的文本内容，而不是用于整个容器内的子元素对齐。 - 作用对象：对齐的是 文本或行内元素，例如文本、图片、按钮等。
- 典型值：
left：文本或行内元素左对齐（默认）。right：文本或行内元素右对齐。center：文本或行内元素居中对齐。justify：文本两端对齐，通过调整单词或字母间的空白来填满行宽。
示例：
p {
text-align: center;
}
在这个例子中，所有 <p> 标签中的文本会在水平方向上居中对齐。
区别总结
align-items：用于 Flexbox/Grid 容器的子元素在交叉轴（垂直方向）上的对齐，针对每个子元素。align-content：用于 Flexbox/Grid 容器内多行或多列内容在交叉轴（垂直方向）上的对齐，仅在多行/多列时生效。text-align：用于 文本或行内元素的水平方向对齐，一般适用于块级元素中的文本内容，而不是布局中的子元素。
示例对比：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Align Example</title>
<style>
/* 使用 align-items 进行垂直对齐 */
.flex-container {
display: flex;
height: 200px;
align-items: center; /* 子元素在垂直方向居中 */
background-color: lightgray;
}
/* 使用 align-content 进行多行对齐 */
.multi-line {
display: flex;
flex-wrap: wrap;
align-content: center; /* 多行内容均匀分布 */
height: 200px;
background-color: black;
}
/* 使用 text-align 进行文本水平对齐 */
p {
text-align: center; /* 文本在段落内水平居中 */
}
</style>
</head>
<body>
<div class="flex-container">
<div style="width: 100px; height: 100px; background: red;">Item 1</div>
<div style="width: 100px; height: 100px; background: blue;">Item 2</div>
<div style="width: 100px; height: 100px; background: green;">Item 3</div>
<div style="width: 100px; height: 100px; background: yellow;">Item 4</div>
</div>
<div class="multi-line">
<div style="width: 100px; height: 100px; background: red;">Item 1</div>
<div style="width: 100px; height: 100px; background: blue;">Item 2</div>
<div style="width: 100px; height: 100px; background: green;">Item 3</div>
<div style="width: 100px; height: 100px; background: yellow;">Item 4</div>
</div>
<p>这是一个居中对齐的段落。</p>
</body>
</html>
这个示例演示了 align-items 用于垂直居中，align-content 用于多行内容的均匀分布，text-align 用于段落文本的水平居中。
image-20240923225942366
image-20240923230006512
光标 cursor
在 CSS 中，cursor 属性用于指定当鼠标悬停在元素上时，显示的光标样式。可以通过 cursor 属性为不同元素设置不同的鼠标光标，帮助用户理解元素的交互性。
**default**：默认箭头光标。
cursor: default;
**pointer**：手型光标，常用于按钮或可点击的元素。
cursor: pointer;
**text**：文本光标，表示可以进行文本选择。
cursor: text;
**move**：移动光标，表示元素可以被移动。
cursor: move;
**not-allowed**：禁止光标，表示操作不可用。
cursor: not-allowed;
**help**：帮助光标，通常表示有帮助信息。
cursor: help;
**wait**：等待光标，表示操作正在进行。
cursor: wait;
**crosshair**：十字光标，常用于图像编辑或选择区域的场景。
cursor: crosshair;
resize 系列：表示元素可调整大小的光标，常用于可拖动改变尺寸的元素：
cursor: n-resize;
cursor: se-resize;
n-resize：向北（上）调整大小。e-resize：向东（右）调整大小。s-resize：向南（下）调整大小。w-resize：向西（左）调整大小。ne-resize、nw-resize、se-resize、sw-resize：表示对角方向调整大小。
**none**：隐藏光标。
cursor: none;
示例：为一个按钮元素设置 pointer 光标：
<button style="cursor: pointer;">点击我</button>
通过设置不同的 cursor 样式，用户可以更直观地理解元素的交互状态。
颜色与背景
color: 设置文本颜色。 例：color: red;或color: #ff0000;background-color: 设置元素背景颜色。 例：background-color: lightblue;
示例：
<div class="highlight">This text is highlighted.</div>
<style>
.highlight {
background-color: yellow;
color: black;
}
</style>
效果：该段文字背景为黄色，字体颜色为黑色。
字体与文本
font-size: 设置字体大小。 例：font-size: 20px;font-family: 设置字体类型。 例：font-family: Arial, sans-serif;text-align: 设置文本对齐方式。 例：text-align: center;（文本居中对齐）overflow属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。 值描述visible默认值。内容不会被修剪，会呈现在元素框之外。hidden内容会被修剪，并且其余内容是不可见的。scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。inherit规定应该从父元素继承 overflow 属性的值。 注意: overflow 属性只工作于指定高度的块元素上。- overflow属性有以下值：
层叠性
当多个样式规则同时作用于同一元素时，CSS遵循“层叠”原则。优先级为：内联样式 > ID选择器 > 类选择器 > 标签选择器。
响应式设计
通过使用媒体查询，可以根据屏幕尺寸调整布局，创建自适应设计。
@media (max-width: 600px) {
body {
background-color: lightgray;
}
}
效果：当屏幕宽度小于600px时，背景颜色变为浅灰色。
完整示例：创建一个博客首页
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>方才coding</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
/* 导航栏样式 */
nav {
background-color: #333;
padding: 1em;
text-align: center;
}
nav a {
color: white;
margin: 0 15px;
text-decoration: none;
font-weight: bold;
}
nav a:hover {
color: #ff9900;
}
/* 主容器样式 */
.container {
max-width: 800px;
margin: 20px auto;
background-color: white;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/* 文章标题样式 */
.article-title {
font-size: 24px;
color: #333;
}
.article:hover {
cursor: pointer;
.article-title {
color: #ff9900;
}
}
/* 文章内容样式 */
.article-content {
font-size: 16px;
color: #666;
line-height: 1.6;
margin-top: 10px;
}
/* 发布信息样式 */
.article-info {
font-size: 12px;
color: #999;
margin-top: 5px;
}
/* 文章互动区样式 */
.interaction {
margin-top: 15px;
font-size: 14px;
color: #333;
}
.interaction span {
margin-right: 20px;
color: #555;
}
/* 响应式设计 */
@media (max-width: 600px) {
nav {
text-align: left;
}
.container {
padding: 15px;
}
.article-title {
font-size: 20px;
}
}
</style>
</head>
<body>
<!-- 导航栏 -->
<nav>
<a href="#">首页</a>
<a href="#">文章</a>
<a href="#">关于</a>
<a href="#">联系</a>
</nav>
<!-- 主容器 -->
<div class="container">
<!-- 文章 1 -->
<div class="article">
<h2 class="article-title">HTML入门</h2>
<p class="article-content">
HTML也遵循该思想：我们通过定义结构化的输入（标签和内容），由浏览器进行处理，输出一个可视化的网页。
<strong>HTML标签就是程序中的基础函数</strong>，而我们编写HTML代码的过程，就是不断组合这些基础函数去构建更加复杂的页面。
</p>
<p class="article-info">发布于 2024-09-21 15:12:33</p>
<div class="interaction">
<span>27 评论</span>
<span>666 点赞</span>
</div>
</div>
<hr>
<!-- 文章 2 -->
<div class="article">
<h2 class="article-title">Idea 开发工具安装</h2>
<p class="article-content">
在进入正式的编程学习之前，还是需要先安装一个好用的编程工具的。个人推荐两款：JetBrains IntelliJ IDEA 和 Visual
Studio Code (VS Code)。
<strong>我这边使用的是 JetBrains IntelliJ IDEA 2023.3 版本的</strong>，因为后续会同时涉及到前端代码和后端java代码，直接使用
idea 就可以完全搞定了。
PS：一般前端开发用VS code 比较多，但个人已经用习惯了idea，<strong>工具而已，用着舒服就好！</strong>
</p>
<p class="article-info">发布于 2024-09-21 15:12:39</p>
<div class="interaction">
<span>37 评论</span>
<span>666 点赞</span>
</div>
</div>
<hr>
<!-- 文章 3 -->
<div class="article">
<h2 class="article-title">编程是个啥？我该怎么学？</h2>
<p class="article-content">
在输出具体的编程知识之前，我想和大家聊聊，我对编程的认识，以及应该怎么去学！
<strong>为什么学？</strong> 这个重要，但也不重要，不管是因为什么原因，只要你有这个想法，愿意去学就足够了！
哪怕是三分钟热情也是没有关系的，至少也会有三分钟的收获！至于能学多久，学到什么程度，一开始不用去纠结，先学起来！
</p>
<p class="article-info">发布于 2024-09-21 15:13:00</p>
<div class="interaction">
<span>42 评论</span>
<span>888 点赞</span>
</div>
</div>
</div>
</body>
</html>
- 效果截图
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2024-09-24，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
