CSS总结

最新推荐文章于 2025-07-18 17:54:29 发布

c_afield

最新推荐文章于 2025-07-18 17:54:29 发布

阅读量274

点赞数

CC 4.0 BY-SA版权

文章标签： css

本文链接：https://blog.youkuaiyun.com/c_afield/article/details/117899116

CSS学习总结

CSS简介

CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。CSS可以对各种各样的标签进行美化和格式规范与限制。在互联网早期，几乎所有的样式都由html控制，一旦项目工程足够庞大，就会显现出令人烦恼的问题，显得代码太复杂混淆。因此CSS被人们开发出来，进行样式的装饰。

基本语法

一条CSS样式规则由两个主要的部分构成：选择器，以{}包裹的声明。

选择器 ：选择器除了基础的元素选择器之外，还有id选择器和class类选择器，其中class类选择器使用最多也最受欢迎，值得注意的是当使用class类选择器时，前面需要加一个标点符号（.）；
声明：声明以花括号{}包裹起来，里面可以有一条或多条声明，有多条声明时用分号（;）分割；
一条声明由属性和值 构成，格式为属性：值，例如color:red，即将该标签内的元素颜色设置为红色。

生效方式

CSS有三种生效方式：

方式	说明
外部样式表	<link rel=“stylesheet” type=“text/css” href=“mycss.css”>
内部样式表	直接html的在<head>元素中引入了<style>标签，放入了样式
内联样式	<h3 style=“color:green;”>I am a heading</h3>

级联优先级

1.内联样式
2.内部样式表或外部样式表
3.浏览器缺省样式
即哪个样式定义离元素的距离近，哪个就生效。

盒子模型

盒子模型是CSS最常用到的模型，即一个HTML元素都可以看出一个盒子，对这个盒子进行构造，下图即是盒子模型示例：
在这里插入图片描述
说明：
Content ：盒子的内容，如文本、图片等；
Padding ：填充，也叫内边距，即内容和边框之间的区域；
Border ：边框，默认不显示；
Margin ：外边距，边框以外与其它元素的区域。