认识css

1. 认识css

CSS 通常称为 CSS 样式表或层叠样式表（级联样式表），主要用于设置 HTML 页

面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边

距等）以及版面的布局等外观显示样式。

CSS 以 HTML 为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排

版等，而且还可以针对不同的浏览器设置不同的样式。

HTML 超文本标记/标签语言 结构层

CSS 层叠样式表 美化/表出

javascript 行为层

2.CSS 样式规则

1.选择器用于指定 CSS 样式作用的 HTML 对象，花括号内是对该对象设置的具体样式。

2.属性和属性值以“键值对”的形式出现。

3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。

4.属性和属性值之间用英文“:”连接。

5.多个“键值对”之间用英文“;”进行区分。

3.css 字体样式属性

font-size:字号大小

em 相对与当前对象文本的字体尺寸 px像素值

font-family:字体

p{ font-family:"微软雅黑";}

可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则

会尝试下一个，直到找到合适的字体。

CSS Unicode 字体

宋体 5b8b/4f53

font-weight:字体粗细

font-weight 属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lig hter、100~900（100 的整数倍）。

font-style:字体风格

font-style 属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值

如下：

normal：默认值，浏览器会显示标准的字体样式。

italic：浏览器会显示斜体的字体样式。

oblique：浏览器会显示倾斜的字体样式。

font:综合设置字体样式 (重点)

font 属性用于对字体样式进行综合设置，其基本语法格式如下：

选择器{font: font-style font-weight font-size/line-height font-famil

y;}

4.选择器（重点）

要想将 CSS 样式应用于特定的 HTML 元素，首先需要找到该目标元素。在 CSS 中，

执行这一任务的样式规则部分被称为选择器（选择符）。

标签选择器（元素选择器）

标签选择器是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一

类标签指定统一的 CSS 样式。其基本语法格式如下：

标签名{属性 1:属性值 1; 属性 2:属性值 2; 属性 3:属性值 3; } 或者

元素名{属性 1:属性值 1; 属性 2:属性值 2; 属性 3:属性值 3; }

类选择器

类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：

.类名{属性 1:属性值 1; 属性 2:属性值 2; 属性 3:属性值 3; }

标签调用的时候用 class=“类名”

多类名选择器

我们可以给标签指定多个类名，从而达到更多的选择目的。

注意：

\1. 样式显示效果跟 HTML 元素中的类名先后顺序没有关系,受 CSS 样式书写的上下顺序有

关。

\2. 各个类名中间用空格隔开。

多类名选择器在后期布局比较复杂的情况下，还是较多使用的。

class="pink fontWeight font20">亚瑟

class="font20">刘备

class="font14 pink">安其拉

class="font14">貂蝉