CSS级联样式表

CSS级联样式表(1)

1.css概述

● CSS是Cascading Style Sheets（级联样式表）。

● CSS是一种样式表语言，用于为HTML文档控制外观，定义布局。例如， CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面 。

● 可将页面的内容与表现形式分离，页面内容存放在HTML文档中，而用

于定义表现形式的CSS在一个.css文件中或HTML文档的某一部分。

● CSS与HTML的关系 :

HTML是网页内容

CSS定义页面的样式

2.基本语法

1.行内样式表

行内样式表,又有人称内联样式、行间样式、内嵌样式。是通过标签的style属性来设置 元素的样式，其基本语法格式如下：

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"内容 </标签名>

2.内嵌样式表

内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义

3.外部样式表

外部样式表是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通 过link标签将外部样式表文件链接到HTML文档中

3.选择器

• 要使用CSS对HTML页面中的标签实现一

对一，一对多的控制，这就需要用到CSS选 择器。

● 常用的选择器：

标签选择器：通过标签选择器可以选择页面中的所有指定标签

语法：标签名 {}

类选择器：通过标签的class属性值选中一组标签

语法：.class属性值{} id 选择器：通过标签的id属性值选中唯一的个标签

语法： #id属性值 {}

选择器组合：通过选择器分组可以同时选中多个选择器对应的标签

语法：选择器1,选择器2,选择器N{}

通配选择器:可以用来选中页面中的所有的标签

语法：*{}

4.文本

● color：字体颜色

● font-size：字体大小

● font-family：字体

● text-align：文本对齐

● text-decoration:line-

through：定义穿过文本下的一条线

● text-decoration:underline：定义文本下的一条线

● text-decoration:none：定义标准的文本

● font-style: italic;斜体文本

● font-weight:字体粗细

● line-height:设置行高

● letter-spacing可以指定字符间距

● text-indent用来设置首行缩进

5.背景

● background-color背景颜色

● background-image背景图片

● background-repeat背景重复

● background-size背景尺寸

● background- position 背景位置

6.css列表

● CSS 列表属性可以放置、改变列表项标志，或者将图像作为列表项标志 。

● list-style-image 将图象设置为列表项标志。

● list-style-position 设置列表中列表项标志的位置。

● list-style-type 设置列表项标志的类型。

● list- style 简写属性