您现在的位置是:网站首页 > CSS的基本语法结构文章详情

CSS的基本语法结构

CSS的基本语法结构

CSS(层叠样式表)是一种用于描述HTML或XML文档样式的语言。它通过选择器和声明块来定义元素的样式规则,使网页内容与表现形式分离。

选择器

选择器用于指定要应用样式的HTML元素。常见的选择器类型包括:

  1. 元素选择器:直接使用HTML标签名
p {
  color: blue;
}
  1. 类选择器:以点号(.)开头
.highlight {
  background-color: yellow;
}
  1. ID选择器:以井号(#)开头
#header {
  font-size: 24px;
}
  1. 属性选择器:根据属性匹配元素
input[type="text"] {
  border: 1px solid #ccc;
}
  1. 伪类选择器:定义元素的特殊状态
a:hover {
  text-decoration: underline;
}

声明块

声明块包含在大括号{}内,由一个或多个声明组成。每个声明由属性和值组成,用冒号(:)分隔,以分号(;)结束。

selector {
  property1: value1;
  property2: value2;
  /* 注释 */
}

属性和值

CSS属性控制元素的具体样式表现。每个属性都有特定的值:

  1. 颜色值
color: red;            /* 颜色名称 */
color: #ff0000;        /* 十六进制 */
color: rgb(255,0,0);   /* RGB */
color: rgba(255,0,0,0.5); /* RGBA带透明度 */
  1. 尺寸单位
width: 300px;          /* 像素 */
padding: 2em;          /* 相对于当前字体大小 */
margin: 5%;            /* 百分比 */
line-height: 1.5;      /* 无单位数字 */
  1. 字体属性
font-family: "Arial", sans-serif;
font-size: 16px;
font-weight: bold;
font-style: italic;

注释

CSS使用/* */语法添加注释:

/* 这是一个CSS注释 */
body {
  margin: 0; /* 重置默认边距 */
}

@规则

@规则是CSS中的特殊指令,以@符号开头:

  1. @import:导入外部样式表
@import url("print.css") print;
  1. @media:媒体查询
@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
}
  1. @keyframes:定义动画
@keyframes slidein {
  from { transform: translateX(0%); }
  to { transform: translateX(100%); }
}

层叠与继承

CSS的层叠性决定了当多个规则应用于同一元素时的优先级:

  1. 来源顺序:后定义的规则覆盖先定义的
  2. 特异性:更具体的选择器优先级更高
  3. !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; /* 可选,改变宽度计算方式 */
}

布局相关属性

  1. display:控制元素显示方式
.inline {
  display: inline;
}
.block {
  display: block;
}
.flex {
  display: flex;
}
  1. 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;
}

我的名片

网名:~川~

岗位:console.log 调试员

坐标:重庆市-九龙坡区

邮箱:cc@qdcc.cn

沙漏人生

站点信息

  • 建站时间:2013/03/16
  • 本站运行
  • 文章数量
  • 总访问量
微信公众号
每次关注
都是向财富自由迈进的一步