css语法规范

100人浏览 2024-12-15 10:46:24

CSS（层叠样式表）是用于 HTML 和 CSS 的样式表格式语言，用于控制网页元素的外观和行为。以下是一些CSS 语法规范：

行内样式表

行内样式表（内联样式表）是在元素标签内部的style属性中设定CSS样式。
行内样式表由于书写繁琐，没有体现结构与表现相分离的思想，只适合于修改简单的样式，不推荐大量使用。

/*CSS的注释写法*/
<div style="color: red; font-size:12px; ">青春不常在，抓紧谈恋爱</div>

内部样式表

内部样式表（内嵌样式表）是将所有的CSS代码抽取出来，单独放到一个style标签中，写到html页面内部。
style标签理论上可放在html的任何位置，但通常放在head标签中。
内部样式表也没有实现结构与表现的完全分离，推荐在练习时使用.

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            color: red;
            font-size: 12px;
        }
    </style>
</head>
<body>
	<div>青春不常在，抓紧谈恋爱</div>
</body>

外部样式表

外部样式表是将样式单独写到CSS文件中，然后把CSS文件引入到html页面中使用，开发推荐。

新建一个后缀名为.css的样式文件，所有的CSS代码都放到此文件中。
在html页面，使用link标签引入.css文件。

/*style.css：*/
/*只有样式，没有标签*/
div {    
  color: red;    
  font-size: 12px;
}

/**
* html：
**/
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div>青春不常在，抓紧谈恋爱</div>
    </body>
</html>

书写顺序

建议遵循以下顺序：

布局定位属性：display、position、float、clear、visibility、overflow（建议display第一个写，毕竟关系到模式）
自身属性：width、height、margin、padding、border、background
文本属性：color、font、text-decoration、text-align、vertical-align、white-space、break-word
其他属性：content、cursor、border-radius、box-shadow、text-shadow、background:linear-gradient

选择器

选择器是用于匹配元素的标签或属性的字符串。CSS 选择器由 selector 开头，后跟一个或多个属性名称，以分号（;）结尾。属性名称之间使用 = 分隔。例如：

selector {  
  property1: value1;  
  property2: value2;  
  property3: value3;  
}

属性：

属性是用于设置元素的样式或行为的值。属性名称之间使用 : （冒号）分隔，后跟属性名称和属性值。例如：

selector {  
  color: red;  
  background-color: blue;  
}

值：

值是用于设置元素的样式或行为的值。值可以是任何有效的 CSS 属性或值。例如：

selector {  
  font-size: 16px;  
  font-weight: bold;  
}

空格：

在属性值和选择器之间添加空格可以使代码更易读。例如：

selector {  
  font-size: 16px;  
  font-weight: bold;  
}

注释：

在 CSS 中添加注释可以使代码更易读和理解。注释可以在选择器、属性和值之间添加。例如：

selector {  
  font-size: 16px;  
  font-weight: bold;  
  margin-top: 20px;  
}

兼容性：

在编写 CSS 时，应该考虑与其他浏览器和框架的兼容性。使用浏览器前缀可以使代码在不同浏览器中兼容。例如：

body {  
  font-family: Arial, sans-serif;  
}  
  
h1 {  
  font-size: 24px;  
}  
  
.button {  
  padding: 10px;  
  border: 1px solid #ccc;  
  border-radius: 5px;  
  cursor: pointer;  
  color: #333;  
}  
  
button[type="submit"] {  
  background-color: #f00;  
}