2025年css规范写法（css的书写格式）

学习CSS是掌握前端开发不可或缺的一部分。它不仅决定了网页的样式和布局，还直接影响用户体验。

一、理解CSS的基本概念

CSS（层叠样式表）用于描述网页上各个元素的外观和布局。开始学习CSS之前，确保掌握以下基本概念：

选择器（Selectors）：用于选择HTML文档中的元素。

属性（Properties）：控制元素的样式，如颜色、大小、位置等。

值（Values）：定义属性的具体表现形式，如像素、颜色值、百分比等。

CSS 背景

CSS 背景属性用于定义HTML元素的背景。

背景方面

背景颜色

background-color 属性定义了元素的背景颜色

代码：body {background-color:#b0c4de;}

CSS中，颜色值通常以以下方式定义:

十六进制如："#ff0000"

RGB 如："rgb(255,0,0)"

颜色名称如："red"

背景图像

background-image 属性描述了元素的背景图像.

默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.

代码方面：dy {background-image:url('paper.gif');}

背景图像，水平或垂直平铺

默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。

一些图像如果在水平方向与垂直方向平铺，看起来会很不协调。

图像只在水平方向平铺, 则面背景会更好些。

背景图像，设置定位与不平铺

Remark 让背景图像不影响文本的排版

如果你不想让图像平铺，你可以使用 background-repeat 属性。

背景颜色的简写属性为 "background"

代码例如：body {background:#ffffff url('img_tree.png') no-repeat right top;}

二、Css文本方面

文本颜色

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定：

十六进制值，如: ＃FF0000

一个RGB值，如: RGB(255,0,0)

颜色的名称，如: red

代码例如：body {color:red;}

h1 {color:#00ff00;}

h2 {color:rgb(255,0,0);}

文本的对齐方式

文本排列属性是用来设置文本的水平对齐方式。

文本可居中或对齐到左或右,两端对齐

text-decoration 属性用来设置或删除文本的装饰。

从设计的角度看 text-decoration属性主要是用来删除链接的下划线。

装饰文字代码：h1 {text-decoration:overline;}

h2 {text-decoration:line-through;}

h3 {text-decoration:underline;}

文本转换属性是用来指定在一个文本中的大写和小写字母。

可用于所有字句变成大写或小写字母，或每个单词的首字母大写。

文本缩进属性是用来指定文本的第一行的缩进。

代码：p {text-indent:50px;}。

三、学习盒模型

盒模型是CSS布局的基础。每个HTML元素可以看作是一个盒子，包括内容区域、内边距、边框和外边距。理解盒模型如何影响元素的大小和位置是学习CSS的重要一步。

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

Margin(外边距) - 清除边框外的区域，外边距是透明的。

Border(边框) - 围绕在内边距和内容外的边框。

Padding(内边距) - 清除内容周围的区域，内边距是透明的。

Content(内容) - 盒子的内容，显示文本和图像。

注意：当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和外边距。

元素的总宽度为 450px代码：

div {

width: 300px;

border: 25px solid green;

padding: 25px;

margin: 25px;

}

最终元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

使用跨浏览器的解决方案指定元素的总宽度为250像素的

部分代码：

div.ex

{width:220px;

padding:10px;

border:5px solid gray;

margin:0px;

}

</style>

</head>

<body>

四、Css轮廓方面

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

CSS outline 属性规定元素轮廓的样式、颜色和宽度。

五、Css外边距

CSS margin(外边距)属性定义元素周围的空间。

margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。

margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。

在CSS中，它可以指定不同的侧面不同的边距。

代码：

margin-top:100px;

margin-bottom:100px;

margin-right:50px;

margin-left:50px;

为了缩短代码，有可能使用一个属性中margin指定的所有边距属性。这就是所谓的简写属性。

所有边距属性的简写属性是 margin。

六、Css padding

当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。

单独使用 padding 属性可以改变上下左右的填充。

代码方面：

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

所有的填充属性的简写属性是padding。

七、CSS Display(显示)与Visibility（可见性）

隐藏元素

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

CSS Display块和内联元素

块元素是一个元素，占用了全部宽度，在前后都是换行符。

内联元素只需要必要的宽度，不强制换行。

八、CSS Position(定位)

position 属性指定了元素的定位类型。

position 属性的五个值：

static

relative

fixed

absolute

sticky

元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非事先设定position属性。他们也有不同的工作方式，这取决于定位方法。

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。

静态定位的元素不会受到 top, bottom, left, right影响。

代码：div.static {

position: static;

border: 3px solid #73AD21;}

fixed 定位，元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。

relative 定位，相对定位元素的定位是相对其正常位置。

absolute 定位，绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:

sticky 定位方面

sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。

粘性定位的元素是依赖于用户的滚动，在 position:relati与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

九、Css伪类

CSS伪类是用来添加一些选择器的特殊效果。

selector:pseudo-class {property:value;}

CSS类也可以使用伪类：selector.class:pseudo-class {property:value;}

anchor伪类，在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示。

注意1：在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

注意2：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

注意3：伪类的名称不区分大小写。

十、CSS 属性选择器

CSS 属性选择器用于根据元素的属性或属性值来选择 HTML 元素。

属性选择器可以帮助你在不需要为元素添加类或 ID 的情况下对其进行样式化。

1、[attribute]选择带有指定属性的所有元素（无论属性值是什么）。

2、[attribute="value"]选择具有指定属性和值完全匹配的元素。

3、[attribute~="value"]选择属性值中包含指定词（用空格分隔的词列表之一）的元素。

4、[attribute|="value"]选择具有指定值或者以指定值开头并紧跟着连字符 - 的属性值的元素，常用于语言代码。

5、[attribute^="value"]选择属性值以指定值开头的元素。

6、[attribute$="value"]选择属性值以指定值结尾的元素。

7、[attribute*="value"]选择属性值中包含指定值的元素。

通过属性选择器，你可以轻松选择元素并基于它们的属性设置特定样式，增加了灵活性和可维护性。

属性选择器样式无需使用class或id的形式。

代码例如：

input[type="text"]

{

width:150px;

display:block;

margin-bottom:10px;

background-color:yellow;

}

input[type="button"]

{

width:120px;

margin-left:35px;

display:block;

}

十一、布局技术方面

学习不同的布局技术可以帮助你更灵活地设计网页布局。

常见的布局技术包括：

Flexbox布局：用于创建灵活的和响应式的布局结构。

Grid布局：更强大的网格系统，用于复杂的页面布局。

响应式设计：确保你的网页在不同设备上都能有良好的显示效果。

前端技术不断演变，新的CSS特性和最佳实践不断涌现。保持学习的状态，关注前端社区的动态和教程，可以帮助你跟上行业的最新发展。

学习CSS是一个渐进的过程，需要持续的实践和探索。通过掌握基本概念、布局技术和调试技能，你将能够创建出优雅且功能强大的网页样式。不断地挑战自己，保持对新技术的好奇心，将有助于你在前端开发的道路上走得更远。

2025年css规范写法（css的书写格式）

相关推荐