本文共 1797 字，大约阅读时间需要 5 分钟。

CSS是一个用来为HTML元素指定样式的语言，它通过定义特定的规则来控制网页的外观设计。以下是一些基本的CSS规则和实用知识。

1. CSS选择器规则

CSS选择器用于指定CSS样式对应的HTML对象。选择器的基本规则如下：

• 单个元素选择器：用元素名称表示对应的标签。例如：p表示所有< p> 元素。
• 类选择器：用点号表示类名。例如：.mingren 表示所有<div>元素中类为mingren 的元素。
• ID选择器：用反斜杠#表示元素的ID属性。例如：#pink1 表示元素<div id='pink1'>。
• 通配符选择器*: 用星号*表示所有元素。例如：* { color: pink; }将所有元素的背景色设置为红色。
• 伪类选择器: 用冒号::后接伪类名称表示与元素特定状态相关的选择器。例如：
  • 未访问链接：:link
  • 已访问链接：:visited
  • 鼓励状态（鼠标悬停）：:hover
  • MS IE特有pseudo类：:active
• 组合选择器: 伪类可以组合使用。例如：
  • li: nth-child(2) 表示列表中第2个列表项。

2. CSS属性与值

CSS属性值的基本规则：

• 属性名：值的形式表示对特定样式属性的定义。例如：
  • color: pink;设置文本颜色为浅红色。
  • font-size: 14px;设置字体大小为14像素。
• 支持多个属性值的写法。例如：

  h3 { font-size: 50px; color: blue; }

• 默认值：CSS中许多属性有默认值。例如：
  • `font-family: Arial，默认为 Arial字体。
  • `line-height: 1.6em，默认为24个单位（通常对应行高）。

3. 主题：颜色与透明度

颜色是一个关键的布局元素。CSS支持多种颜色表示方式：

• 16进制色码：表示为#RRGGBB。

• RGB格式：rgb(r, g, b)。例如：

  .box { background-color: #FF0000; }

• 文字颜色：

  p { color: #333; }

• 文字半透明：

  h3 { color: rgba(0, 0, 0, 0.5); }

• 文字阴影：

  h1 { text-shadow: 2px 2px #333; }

4. 字体与排版

字体选择与控制：

• 字体名字的引号必须使用。例如：

  body { font-family: '微软雅黑', Arial; }

• 字体粗细（font-weight）：
  • normal：默认（400）不加粗。
  • bold：700加粗。
• 字体风格（font-style）：
  • normal：非倾斜。
  • italic：斜体。
• 行高（font-size）和字体大小：

  .big-font { font-size: 72px; }

5. 布局与结构

CSS布局是构建网页的核心。核心概念：

• 块级元素：
  • 总是从新的一行开始。
  • 可以设置宽度、高度、对齐方式等属性。
  • 常用于网页的结构布局。
• 行式元素：
  • 和相邻行式元素在一行上排列。
  • 水平方向可以设置内外边距，但垂直方向不能。
  • 常用于文本布局。
• 显示模式：
  • display: block：块级元素。
  • display: inline：行内元素。
  • display: none：隐藏元素。

6. 尤其是！实用CSS组合

以下是一些实用的CSS组合和技巧：

• 去掉默认样式：

  * {    margin: 0;    padding: 0;    box-sizing: border-box;}

• 隐藏EOL空格：

  .no-space {    white-space: nowrap;    overflow: hidden;    text-overflow: ...;}

• 单词空间控制：

  .word-space {    word-spacing: 10px;}

• 短字体预设：

  .short-text {    font: 12px Arial;    white-space: nowrap;}

7. 快捷方式：行内样式

如果没有需要复杂布局的需求，可以直接在标签中使用style属性设置样式。例如：

   
    这是一个红色文本的段落。
   

这个技巧非常适合简单的样式定义。

以上是CSS的简单复习和实用技巧。希望这些内容能帮助到你！如果有具体的需求，也可以继续深入探讨。

转载地址：http://gqyiz.baihongyu.com/