CSS基础知识总结 | 青训营笔记

51 阅读4分钟

1 css基础知识

1.1基础知识

1.1 概述 Css (层叠样式表)是种格式化网页的标准方式, 用于控制设置网页的样式,并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术。

1.2 优势

格式和结构分离:有利于格式的重用以及网页的修改与维护。 精确控制页面布局:对网页实现更加精确的控制,如网页的布局,字体,颜色,背景等。 实现多个网页同时更新。 1.3应用css的步骤

(1)定义css样式表

(2)将定义好的css样式在HTML文档中应用

1.2 css基本语法

CSS的定义是由三部分组成的,包括选择符( selector)、属性( properties)、属性值(value)语法如下: 选择器{ 属性1:属性值1; 属性2:属性值2; …… } 1.3 css使用方法

主要有四种方法:内嵌样式、内部样式、使用标记链接外部样式表、使用CSS的@import标记导入外部样式文件。

1.3.1 内嵌样式

内嵌样式指将CSS规则混合在HTML标记中使用的方式。CSS规则作为HTML标记style属性的属性值。例如:

淘宝

样式使用 淘宝
淘宝

1.3.2 内部样式 内嵌样式只能定义某一个标记的样式,如果要对整个网页文档的某个标记进行特定样式定义时,就需要使用内部样式。内部样式一般是在标记中并使用标记进行定义。语法格式如下所示: 选择器{ 属性:属性值; 属性:属性值; …… }

1.3.3 外部样式 外部样式是将样式表以单独的文件(文件后缀一般为.css )存放,让网站的所有网页通过标记均可引用此样式文件。

优点:

降低网站的维护成本 让网站拥有统一的风格。 2 CSS选择器 2.1 元素选择器 元素选择器最常见的是CSS选择器,又称为类型选择器。

元素选择器基本语法格式如下:

HTML元素名{ 样式属性:属性值; 样式属性:属性值; …… } 2.2 类选择器 元素选择器可以设置网页中所有相同标记的统一格式,但如果需要对相同标记中某些个别标记做其他效果设置时,使用HTML元素标记就无法实现。 类(class )选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用,也可以与其他元素结合使用。语法格式如下所示:

.类选择器名称{ 样式属性:属性值; 样式属性:属性值; …… 2.3 ID选择器 ID选择器类似于类选择器,但也有一些差别。

相同点:类选择器和ID选择器在定义和使用时都是区分大小写。

主要区别: (1)定义上ID选择器前面使用“#”号,而不是类选择器的点。

(2) ID选择器在引用时不是通过class属性, 而是使用id属性。 (3)在一个HTML文档中,ID选择器仅允许使用一次,而类选择器可以使用多次。 (4) ID选择器不能结合使用,因为ID属性不允许有以空格分隔的词列表。

ID选择器的语法格式:

#ID选择器名称{ 样式属性:属性值; 样式属性:属性值; ...... } 使用ID选择器的语法格式如下所示:

<标记名称id="ID选择器名称" > 3 CSS基本属性

3.1 字体属性

 属性	                                                      说明
font	                                              简写属性。把所有针对字体的属性设置在一个声明中
font-size	                                      设置字体的尺寸。常用单位为像素(px)
font-style                                            设置字体风格。Normal 为正常; italic 为斜体; oblique 为倾斜
font weight	                                       设置字体的粗细。Normal 为正常; lighter 为细体; bold 为粗体; bolder 为特粗体
font- family	                                      设置字体系列。当指定多种字体时,用逗号分隔,如果浏览器不支持第一个字体,则会尝试下一个字体;当字体由多个单词组成时由双引号括起来

3.2 文本属性

文本属性包括阴影效果、大小写、文本缩进、对齐方式等等。 3.3 背景属性

3.3.1 常见背景属性

CSS背景属性主要用于设置对象的背景颜色、背景图片、背景图片的重复性、背景图片的位置等。

3.3.2 css3背景渐变属性

CSS3的渐变属性可以使两个或多个指定的颜色之间显示平稳的过渡,CSS3定义两种类型的渐变:一种是线性渐变, 即向下/向上/向左/向右/对角方向;另一种是径向渐变,及由中心定义。