您现在的位置是:网站首页 > CSS的基本语法结构文章详情
CSS的基本语法结构
陈川
【
CSS
】
5796人已围观
3511字
CSS的基本语法结构
CSS(层叠样式表)是一种用于描述HTML或XML文档样式的语言。它通过选择器和声明块来定义元素的样式规则,使网页内容与表现形式分离。
选择器
选择器用于指定要应用样式的HTML元素。常见的选择器类型包括:
- 元素选择器:直接使用HTML标签名
p {
color: blue;
}
- 类选择器:以点号(.)开头
.highlight {
background-color: yellow;
}
- ID选择器:以井号(#)开头
#header {
font-size: 24px;
}
- 属性选择器:根据属性匹配元素
input[type="text"] {
border: 1px solid #ccc;
}
- 伪类选择器:定义元素的特殊状态
a:hover {
text-decoration: underline;
}
声明块
声明块包含在大括号{}内,由一个或多个声明组成。每个声明由属性和值组成,用冒号(:)分隔,以分号(;)结束。
selector {
property1: value1;
property2: value2;
/* 注释 */
}
属性和值
CSS属性控制元素的具体样式表现。每个属性都有特定的值:
- 颜色值:
color: red; /* 颜色名称 */
color: #ff0000; /* 十六进制 */
color: rgb(255,0,0); /* RGB */
color: rgba(255,0,0,0.5); /* RGBA带透明度 */
- 尺寸单位:
width: 300px; /* 像素 */
padding: 2em; /* 相对于当前字体大小 */
margin: 5%; /* 百分比 */
line-height: 1.5; /* 无单位数字 */
- 字体属性:
font-family: "Arial", sans-serif;
font-size: 16px;
font-weight: bold;
font-style: italic;
注释
CSS使用/* */
语法添加注释:
/* 这是一个CSS注释 */
body {
margin: 0; /* 重置默认边距 */
}
@规则
@规则是CSS中的特殊指令,以@符号开头:
- @import:导入外部样式表
@import url("print.css") print;
- @media:媒体查询
@media (max-width: 600px) {
body {
font-size: 14px;
}
}
- @keyframes:定义动画
@keyframes slidein {
from { transform: translateX(0%); }
to { transform: translateX(100%); }
}
层叠与继承
CSS的层叠性决定了当多个规则应用于同一元素时的优先级:
- 来源顺序:后定义的规则覆盖先定义的
- 特异性:更具体的选择器优先级更高
- !important:最高优先级
p {
color: blue !important;
}
继承性使子元素继承父元素的某些样式:
body {
font-family: Arial;
}
/* 所有body内的元素都会继承Arial字体 */
盒模型
CSS盒模型是布局的基础概念:
.box {
width: 300px;
height: 200px;
padding: 20px;
border: 5px solid black;
margin: 10px;
box-sizing: border-box; /* 可选,改变宽度计算方式 */
}
布局相关属性
- display:控制元素显示方式
.inline {
display: inline;
}
.block {
display: block;
}
.flex {
display: flex;
}
- position:定位方式
.relative {
position: relative;
top: 10px;
}
.absolute {
position: absolute;
right: 0;
}
.fixed {
position: fixed;
bottom: 0;
}
响应式设计基础
使用相对单位和媒体查询实现响应式设计:
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
@media (min-width: 768px) {
.column {
float: left;
width: 50%;
}
}
CSS变量
自定义属性(变量)可以存储重复使用的值:
:root {
--primary-color: #4285f4;
--spacing-unit: 8px;
}
.button {
background-color: var(--primary-color);
padding: var(--spacing-unit) calc(var(--spacing-unit) * 2);
}
预处理器的语法扩展
虽然不属于原生CSS,但预处理器如SASS/LESS扩展了CSS语法:
// SASS示例
$primary-color: #333;
body {
font: 100% $font-stack;
.container {
width: 80%;
margin: 0 auto;
&:hover {
background: lighten($primary-color, 20%);
}
}
}
浏览器前缀
某些CSS属性需要供应商前缀:
.box {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
CSS模块化
现代CSS开发提倡模块化组织:
/* buttons.css */
.btn {
display: inline-block;
padding: 6px 12px;
}
.btn-primary {
background: blue;
color: white;
}
/* forms.css */
.input {
border: 1px solid #ddd;
padding: 8px;
}
性能优化考虑
高效的CSS编写方式:
/* 避免过度具体的选择器 */
nav ul li a {} /* 不推荐 */
.nav-link {} /* 推荐 */
/* 减少不必要的重绘 */
.animate {
will-change: transform;
}
上一篇: CSS的发展历史
下一篇: CSS的三种引入方式