css样式表—讲座
- 格式:ppt
- 大小:3.14 MB
- 文档页数:38
第十课:CSS样式表10-1 认识CSS (1) 10-2 认识CSS (2)如果说目前在Web设计和开发技术领域,什么是非常“火”的新技术,CSS/DIV页面的布局无疑是其中之一CSS(Cascading Style Sheet),中文译为层叠样式表,是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
对于一个网页设计者来说,HTML语言一定不会感到陌生,因为它是所有网页制作的基础。
但是如果希望网页能够美观、大方,并且升级方便,维护轻松,那么仅仅HTML是不够的,CSS在这中间扮演着重要的角色。
本课从CSS的基本概念出发,介绍CSS语言的特点,以及如何在网页中引入CSS,并对CSS进行初步的体验。
(其实我们在前面的课程中已经接触到)作用:例子演示。
从CSS对标记的控制入手,讲解CSS的初步知识以及编辑方法。
希望大家能够掌握下一面几个方面的内容:①、标记的概念②、传统HTML的缺点③、CSS的引入1、传统HTML标记,在批量编辑时效率低,不够标准利用CSS样式编辑网页,可以大大挺高效率,规范网页的设计标准。
2、CSS样式代码在网页代码中的位置CSS代码style type="text/css"><!--body,td,th {font-size: 12px;color: #FF0000;}--></style>特点:1)灵活控制网页中的每个元素的样式2)把内容和格式处理相分离,提高工作效率3、CSS样式的链接10-3 编辑CSS样式(1) 10-4 编辑CSS样式(2) 如何编辑CSS样式█1) 属性面板快捷操作1、在下方的属性面板对选中的目标建立CSS规则创建的CSS规则将会应用到所有同类目标上2、建立的CSS规则代码自动添加在网页代码<head>部分中3、对建立的CSS样式修改:把鼠标光标在设计页面中放置到需要修改的内容上边,在下方的属性面板中修改,即可对所有应用了此CSS规则的目标修改█2)使用CSS样式面板打开“CSS样式”面板:全部﹤style﹥中显示的是当前网页中的所有CSS样式P表示CSS样式应用的标签的类型,下方显示的是当前CSS样式设置的属性下方修改当前CSS样式的属性修改CSS样式后将会全部应用到同类标签1、利用CSS样式给图片添加边框:选中图片,在CSS样式面板中点击“新建规则”设置“新建CSS规则”的应用属性设置成功,全部﹤style﹥中显示刚刚设置的“img”的属性2、属性的显示方式从下方的按钮中设置█3)手工输入代码10-5 CSS选择器选择器(selector)是CSS中很重要的概念,所有HTML语言中的标记都是通过不同的CSS选择器进行控制的。
CSS 简介CSS 概述• • • •CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 如何显示 样式通常存储在样式表 样式表中 样式表 把样式添加到 HTML 4.0 中,是为了解决内容与表 解决内容与表 现分离的问题• • •外部样式表可以极大提高工作效率 外部样式表 外部样式表通常存储在 CSS 文件 文件中 多个样式定义可层叠 层叠为一 层叠样式表极大地提高了工作效率 样式表定义如何显示 HTML 元素,就像 HTML 3.2 的字 体标签和颜色属性所起的作用那样。
样式通常保存在外部 的 .css 文件中。
通过仅仅编辑一个简单的 CSS 文档,外 部样式表使你有能力同时改变站点中所有页面的布局和外 观。
由于允许同时控制多重页面的样式和布局,CSS 可以称得 上 WEB 设计领域的一个突破。
作为网站开发者,你能够为 每个 HTML 元素定义样式,并将之应用于你希望的任意多的页面中。
如需进行全局的更新,只需简单地改变样式,然 后网站中的所有元素均会自动地更新。
如何创建 CSS 如何插入样式表 当读到一个样式表时, 浏览器会根据它来格式化 HTML 文 当读到一个样式表时, 档。
插入样式表的方法有三种: 插入样式表的方法有三种: 外部样式,内部样式, 外部样式,内部样式,内联样式外部样式表 当样式需要应用于很多页面时,外部样式表将是理想的选 择。
在使用外部样式表的情况下,你可以通过改变一个文件 来改变整个站点的外观。
每个页面使用 <link> 标签链接到 样式表。
<link> 标签在(文档的)头部: <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>浏览器会从文件 mystyle.css 中读到样式声明,并根据它 来格式文档。