CSS初步体验.pptVIP

CSS的概念 CSS是Cascading Style Sheets（级联样式表）的缩写。 可以用CSS做什么？ CSS是一种样式表语言，用于为HTML文档定义布局。例如，CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。 HTML可以用于为网站添加布局效果，但有可能被误用。而CSS则提供了更多选择，而且更为精确、完善。现在所有浏览器都支持CSS。 CSS跟HTML的区别在哪里？ HTML用于结构化内容；CSS用于格式化结构化的内容。 也就是CSS是装饰HTML的 CSS的好处 通过单个样式表控制多个文档的布局； 更精确的布局控制； 为不同的媒体类型（屏幕、打印等）采取不同的布局； 无数高级、先进的技巧。 可以灵活的更换网页风格 HTML的缺陷（css-101.html） CSS的引入（css-102.html） 应用CSS方式 为HTML文档应用CSS，有三种方法可供选择。下面对这三种方法进行了概括。我们建议你对第三种方法（即外部样式表）予以关注。 行内样式表（style属性） 为HTML应用CSS的一种方法是使用HTML属性style。 行内样式（css-103.html） 内嵌式样式表（style元素） 为HTML应用CSS的另一种方法是采用HTML元素style。 内嵌式 （css-104.html） 外部样式表（引用一个样式表文件） 外部样式表就是一个扩展名为css的文本文件。跟其他文件一样，你可以把样式表文件放在Web服务器上或者本地硬盘 上。例如，样式表文件名为style.css，它通常被存放于名为style的目录中。 外部样式表(css-105.html) 基本的CSS语法 CSS 语法由三部分构成：选择器、属性和值： 选择器 (selector) 通常是你希望定义的 HTML 元素或标签，属性 (property) 是你希望改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明 选择器有三种：标记选择器、类选择、ID选择器 选择器的集体声明 如果多个选择器的风格是完全相同的，或者部分相同，可以使用集体声明的方式同时声明。 选择器的集体：css-108.html 使用全局声明符号*：css-109.html CSS文字效果 主要属性 font-family font-size font-weight font-style font 字体-font-family 字体族[font-family] CSS属性font-family的作用是设置一组按优先级排序的字体列表，如果该列表中的第一个字体未在访问者计算机上安装，那么就尝试列表中的下一个字体，依此类推，直到列表中的某个字体是已安装的。 下面是一个按优先级排列的字体列表的例子： h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: Times New Roman, serif;} h1标题将采用Arial字体显示。如果访问者的计算机未安装Arial，那么就使用Verdana字体。假如Verdana字体也没安装的话，那么将采用一个属于sans-serif族类的字体来显示这个h1标题。 注意我们为“Times New Roman”采用的写法：因为其中包含空格，所以我们用引号将它括起来。 CSS字体：css-110.html 字体-font-size 字体大小[font-size] 字体大小可通过多种不同单位（比如像素或百分比等）来设置。在本教程中，我们将关注于最常用和最合适的单位。比如： h1 {font-size: 30px;} h2 {font-size: 12pt;} p {font-size: 1em;} 上面四种单位有着本质的区别。‘px’和‘pt’将字体设置为固定大小 字体-font-size:css-111.html 字体颜色：color属性 在CSS中文字颜色是使用color设置的。 字体颜色：css-112.html 文字粗细：font-weight CSS中使用font-weight属性进行文字粗细的细致划分，并且可以讲本身是粗体显示的文字变成正常粗细。 文字粗细：css-113.html 字体样式：font-style属性 CSS属性font-style定义所选字体的显示样式：normal（正常）、italic（斜体）或oblique（倾斜）。在下例中，所有h2标题都将显示为斜体。 字体样式：css-114.html 文字下划线、顶划线等 给文字加上下划线、顶划线和删除线，CSS中是通过text-decoration属性实现的， 文字下划线：css-115.html 英文字母大小写 使用