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定义两种类型的渐变:一种是线性渐变, 即向下/向上/向左/向右/对角方向;另一种是径向渐变,及由中心定义。