CSS入门笔记：盒模型与样式添加方法

需积分: 9 105 浏览量更新于2024-08-04 收藏 823B MD 举报

"前端学习的产物，css的笔记" 在前端开发中，CSS（层叠样式表）是不可或缺的一部分，用于定义HTML或XML（包括SVG、XHTML等）文档的呈现。CSS不仅控制着网页的布局，还负责文本、颜色、背景、边距、边框等多种视觉效果。本笔记主要涵盖了CSS的基础知识，包括样式表的引入方式、颜色设置、盒模型以及居中对齐等核心概念。 1. CSS的引入方式： - **外部样式表**：这是最常见的使用方式，将CSS代码写入单独的`.css`文件中，然后通过`<link>`标签在HTML文件中引用，如`<link rel="stylesheet" href="styles.css">`。这种方式便于代码管理和维护，同时可以实现多个页面共享样式。 - **内部样式表**：将CSS代码置于HTML文档的`<head>`部分的`<style>`标签内，只对当前页面生效，适用于小规模或特定页面的样式调整。 - **内联样式**：直接在HTML元素的`style`属性中写入CSS，如`<div style="color:red;">文本</div>`，这种方式灵活性最高，但不推荐大量使用，因为不利于代码复用和维护。 2. 颜色设置： - CSS中的颜色可以通过颜色名称（如`red`、`green`）、十六进制值（如`#FF0000`、`#00FF00`）、RGB（`rgb(255, 0, 0)`）、RGBA（带有透明度，如`rgba(255, 0, 0, 0.5)`）或HSL（色相、饱和度、亮度，如`hsl(0, 100%, 50%)`）等方式来定义。例如，将文字颜色设为红色，背景颜色设为绿色，字体大小设为16像素，正常字重，无衬线字体，且首字母大写： ```css color: red; background-color: green; font-size: 16px; font-weight: normal; font-family: Arial, Helvetica, sans-serif; text-decoration: uppercase; ``` 3. 盒模型： - **标准盒模型**：宽度和高度只包含内容区域，不包括边框和内填充。在CSS3中，默认采用标准盒模型，可以用`box-sizing`属性设置为`content-box`来保持一致性。例如： ```css div { box-sizing: content-box; width: 100px; /* 包含内容的宽度 */ padding: 10px; /* 内填充 */ border: 1px solid black; /* 边框 */ } ``` - **怪异盒模型**：宽度和高度包含了内容、内填充和边框。在IE5及更早版本的浏览器中默认采用，现代浏览器可以通过`box-sizing`属性设置为`border-box`来模拟。例如： ```css div { box-sizing: border-box; width: 100px; /* 包含内容、内填充和边框的总宽度 */ padding: 10px; border: 1px solid black; } ``` 4. 居中对齐： - `text-align`属性用于设置文本内容的水平对齐，将`text-align`设为`center`可以使文本在容器内居中显示： ```css div { text-align: center; } ``` - 对于块级元素的水平居中，可以使用`margin: auto`，但这需要元素的宽度是固定的。例如： ```css div { width: 200px; margin: 0 auto; } ``` - 垂直居中通常较为复杂，可以使用Flexbox或Grid布局来实现，或者对于单行文本，可以结合`line-height`和`vertical-align`。这些只是CSS基础的冰山一角，随着学习深入，还会涉及选择器、布局模式、响应式设计、过渡和动画、自定义属性（CSS变量）等更多内容。持续学习和实践，你将能掌握这个强大的样式语言，打造出富有表现力和功能性的网页。

混子~~

粉丝: 3
资源: 1

CSS入门笔记：盒模型与样式添加方法

这是一个关于前端socket开发的笔记记录！！！！.zip

李兴华我的智囊团项目笔记

javascript 基础学习笔记.pdf

React框架JavaWeb-开发笔记

卡通星球行星CSS3图形特效.zip

express-notetaker:这个程序允许用户创建和存储笔记

多人协同云笔记项目源码：前端技术模拟有道云笔记

毕业设计云笔记网站设计与实现

GitHub笔记应用搭建教程与HTML实践

响应式网站开发实战：HTML/CSS源码解析与应用

最新资源