样式表的基本 CSS 属性-猿码集

1. CSS基础语法

CSS（Cascading Style Sheet）是一种用于描述页面样式的语言。HTML 负责页面的语义部分，而 CSS 则通过样式来为 HTML 增添一些欧蓝辞。 CSS 语法由选择器与声明构成。选择器通常指 HTML 元素，而声明则是键值对（key-value pair），用来指定这个元素的某个样式属性以及属性值。CSS 中的注释用 "/* ... */" 包裹起来，而不是 "//"。

1.1 选择器

选择器是用来匹配 HTML 元素的一种方式。常用的选择器有：

标签选择器：通过 HTML 标签名来匹配元素。例如：pre、code、h1 等。

ID 选择器：通过 HTML 元素的 id 属性来匹配元素。例如：#myId。

类选择器：通过 HTML 元素的 class 属性来匹配元素。例如：.myClass。

属性选择器：根据 HTML 元素的属性来匹配元素。例如：input[type='text']。

后代选择器：通过元素的嵌套关系来匹配元素。例如：ul li。

伪类选择器：指元素的某种状态。例如：a:hover、.myClass:first-child。

下面这个例子展示了如何通过 ID 选择器来定义元素的样式：


#myId {
  background-color: #F00;
  color: #FFF;
}

这段 CSS 代码指定了 id 属性为 "myId" 的元素的背景色为红色、字体颜色为白色。在 HTML 中，可以这样定义一个 ID 为 "myId" 的元素：


<div id="myId">
  <p>这是一个 id 为 myId 的 div 元素。</p>
</div>

1.2 声明

在 CSS 中声明就是指样式属性和属性值，通过键值对来表示。例如：


font-size: 16px;
color: #333;

这段 CSS 代码定义了字体大小为 16px、文字颜色为黑色。要注意的是，CSS 的属性名是不区分大小写的，但是属性值是区分大小写的。

2. 常用样式属性

以下列出了一些常用的样式属性及其用法。

2.1 字体样式

字体样式是网页设计中比较常见、也比较重要的一环。下面列举了几个常用的字体样式属性：

2.1.1 font-family

font-family 属性用于设置字体。例如：


font-family: 微软雅黑, sans-serif;

这段代码指定了字体为 "微软雅黑"，如果电脑上没有安装这种字体，那么浏览器会自动根据操作系统的设置选择其他可用的字体。"sans-serif" 是一个通用的字体族名，如果第一个字体不可用，浏览器就会选择该字体族中的其他字体。

2.1.2 font-size

font-size 属性用于设置字体的大小。大小可以用像素（px）、点（pt）、em、百分比等单位指定。例如：


font-size: 16px;

这段代码指定了字体大小为 16px。

2.1.3 font-weight

font-weight 属性用于设置字体的粗细。可以取值为 normal、bold、bolder、lighter 或者数值（100~900）。例如：


font-weight: bold;

这段代码指定了字体粗细为加粗。

2.1.4 font-style

font-style 属性用于设置字体的样式。可选值为 normal、italic、oblique。例如：


font-style: italic;

这段代码指定了字体样式为斜体。

2.2 文本样式

下面列举了一些常用的文本样式属性。

2.2.1 color

color 属性用于设置文字颜色。例如：


color: #333;

这段代码指定了文字颜色为黑色。

2.2.2 text-align

text-align 属性用于设置文字对齐方式。可选值为 left、right、center、justify。例如：


text-align: center;

这段代码指定了文字居中对齐。

2.2.3 text-decoration

text-decoration 属性用于设置文本的修饰线。可选值为 none、underline、overline、line-through、blink。例如：


text-decoration: underline;

这段代码指定了下划线修饰线。

2.2.4 line-height

line-height 属性用于设置行高。例如：


line-height: 1.5;

这段代码指定了行高为 150%。

2.3 盒子模型

CSS 中的盒子模型是用于布局 HTML 页面的一种模型。每个 HTML 元素都是一个盒子，其大小、边框、外边距和内边距都可以通过 CSS 设置。盒子模型可以分为两种：W3C 标准盒模型和 IE 盒模型。

2.3.1 W3C 标准盒模型

W3C 标准盒模型是 CSS 中的默认盒模型，盒子的总宽度等于 content + padding + border。例如：


box-sizing: content-box;

这段代码指定了盒子使用 W3C 标准盒模型。

下面是一个使用 W3C 标准盒模型的例子：


.box {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 1px solid black;
}

这个代码定义了一个宽为 300 像素、高为 200 像素的 div 元素，其内边距为 20px，边框宽度为 1px。此时，这个盒子的总宽度为 300 + 2×20 + 2×1 = 342px，总高度为 200 + 2×20 + 2×1 = 242px。

2.3.2 IE 盒模型

IE 盒模型中，盒子的总宽度等于 content + border + padding。要指定 IE 盒模型，需要设置 box-sizing 为 border-box。例如：


box-sizing: border-box;

这段代码指定了盒子使用 IE 盒模型。

下面是一个使用 IE 盒模型的例子：


.box {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 1px solid black;
  box-sizing: border-box;
}

在这个例子中，这个盒子的总宽度等于 300px，总高度等于 200px。

2.4 布局样式

下面列举了一些常用的布局样式属性。

2.4.1 display

display 属性用于设置元素的显示类型。常用的值有 block、inline、none、flex。例如：


display: block;

这段代码指定了元素为块级元素。

2.4.2 position

position 属性用于设置元素的定位方式。常用的值有 static、relative、absolute、fixed。例如：


position: relative;

这段代码指定了元素相对于其默认位置进行定位。

2.4.3 top/right/bottom/left

这些属性用于调整元素在页面中的位置。可加上 px、em、百分比等单位。例如：


position: absolute;
top: 100px;
left: 50%;
transform: translateX(-50%);

这段代码指定了元素的定位方式为绝对定位，距离页面顶部 100px，左右居中。

2.4.4 float

float 属性用于设置元素的浮动方式。浮动元素可以向左或右漂浮，周围的元素会重新排列，以适应浮动元素的位置。例如：


float: left;

这段代码指定元素向左浮动。

3. 总结

CSS 是一种具有强大功能的样式表语言。开发者可以通过 CSS 设置元素的布局、字体、颜色等样式，从而为页面增添更为绚丽的装饰效果。本文介绍了 CSS 中常用的一些样式属性，包括字体样式、文本样式、盒子模型、布局样式等。

样式表的基本 CSS 属性