css如何写 |取css样式值

/* 样式选择器 */
p {
color: red; /* 颜色 */
font-size: 16px; /* 字号 */
line-height: 1.5; /* 行高 */
}
/* ID选择器 */
#container {
width: 80%; /* 宽度 */
margin: 0 auto; /* 居中 */
}
/* 类选择器 */
.box {
background-color: #f0f0f0; /* 背景色 */
padding: 10px; /* 填充 */
border: 1px solid #ccc; /* 边框 */
}
/* 子元素选择器 */
ul li {
margin: 10px 0; /* 上下外边距 */
}
/* 伪类选择器 */
a:hover {
color: #ff0000; /* 鼠标悬停颜色 */
}
/* 继承 */
.parent {
color: green; /* 文字颜色 */
}
.child {
/* 继承父元素颜色 */
}
/* 层叠顺序 */
.box1 {
z-index: 1;
}
.box2 {
z-index: 2;
}
/* 响应式布局 */
@media screen and (max-width: 768px) {
/* 宽度小于768px的屏幕 */
#container {
width: 100%;
}
}
/* CSS变量 */
:root {
--color-primary: #007bff; /* 定义变量 */
}
.box {
background-color: var(--color-primary); /* 使用变量 */
}

上述代码是一些常见的CSS语法和规则。其中，样式选择器用于控制某一类型的元素，ID选择器和类选择器用于控制某一特定元素，子元素选择器和伪类选择器用于控制元素的子元素或状态。CSS还可以通过继承、层叠顺序和响应式布局等特性来实现更复杂的设计和布局。

除此之外，CSS还支持使用变量，方便大家管理和控制样式。通过定义变量，大家可以简化CSS代码，使得代码更加清晰易懂。