CSS基础
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
主讲：王军 西北大学软件职业技术学院
CSS样式 样式
• Web标准的好处 标准的好处 2、对网站所有者的好处： 更少的代码和组件，容易维护。 带宽要求降低（代码更简洁），成本降低。 更容易被搜寻引擎搜索到。 改版方便，不需要变动页面内容 提供打印版本而不需要复制内容 提高网站易用性。
主讲：王军 西北大学软件职业技术学院
CSS CSS CSS 网页 1
主讲：王军
body 2
西北大学软件职业技术学院
CSS样式 样式
• CSS的概念 的概念
CSS
网页 3
网页
网页
网页
主讲：王军
西北大学软件职业技术学院
CSS样式 样式
CSS插入HTML文档中的位置 CSS插入HTML文档中的位置 插入HTML
1、嵌入在HTML标签中的样式表(嵌入式)
<HTML标记 style="CSS样式标记:值">
2、嵌入在Head中的样式表（内联式）
<style type="text/css"> <!-CSS样式 --> </style>
3、链接样式表(外联式)
<link href="style.css" rel="stylesheet" type="text/css">
主讲：王军
西北大学软件职业技术学院
Css样式 样式
常用CSS样式中有关文字的标签： 样式中有关文字的标签： 常用 样式中有关文字的标签
字号 font-size:# #=值 值的单位：pt 点 px 像素 in 英寸 cm 厘米 mm 毫米 pc 打字机字号 颜色：color:# #=颜色的名称，颜色的代码 字体样式：font-family:# 字体变形: text-transform:# #=uppercase 全大写 capitalize 第一个字母大写 lowercase 全小写 字母间距：letter-spacing:# 行高：line-height:# 修饰线：text-decoration:# #=underline 下划线 overline 上划线 line-through 删除线 none 无修饰线 a:link 未访问 a:hover 鼠标悬停 a:active 点击时 a:visited 访问后
主讲：王军 西北大学软件职业技术学院
Css样式 样式
CSS样式的语法结构 样式的语法结构 记得写引号:如果值为若干单词，则要给值加引号。 记得写引号 例：p {font-family: "sans serif";} 多重声明：如果要定义不止一个声明，用分号将每个声明 多重声明 分开。 例：p {text-align:center; color:red;} 空格和大小写：空格不会影响 CSS 在浏览器的工作效果， 空格和大小写 与 XHTML 不同，CSS 对大小写不敏感。如果涉及到与 HTML文档一起工作的话，class和id名称对大小写是敏感 的。
• Web标准的构成 标准的构成 结构：对网页中用到的信息进行整理和分类（用 结构 HTML、XML、XHTML进行结构化设计） 表现：即对已被结构化的信息进行显示上的控制。 表现 它包含版式、颜色、大小等形式控制。 行为：是指对整个文档内容的一个模型定义及交 行为 互行为的编写。用于编写用户可进行交互式操作 的文档（标准有：DOM文档对象模型、 ECMAScript：JavaScript扩展脚本语言）
CSS层叠样式表 层叠样式表
主讲：王军
西北大学软件职业技术学院
CSS样式 样式
• Web标准 是由W3C（Worle Wode Web Consortium 万维网联盟）和其他标准化组织制定的一 套规范集合，Web标准不是某一个标准， 而是一系列标准的集合。
主讲：王军
西北大学软件职业技术学院
CSS样式 样式
主讲：王军
西北大学软件职业技术学院
Css样式 样式
CSS选择符的格式： 选择符的格式： 选择符的格式 4、伪类选择符 A:link{font-size:9pt;color:#ff0000} A:visited {text-decoration: none; color: #FF9900} A:active {text-decoration: none; color: #FF0000} A:hover {text-decoration: underline; color:#FF0000}
主讲：王军
Biblioteka Baidu
西北大学软件职业技术学院
Css样式 样式
CSS样式的语法结构 样式的语法结构
值的不同写法和单位
p { color: #ff0000; } 十六进制颜色值 p { color: #f00; } 缩写形式 p { color: rgb(255,0,0); } RGB值 p { color: rgb(100%,0%,0%); } RBG百分比值 p { color: red; } 颜色名称 请注意，当使用 RGB 百分比时，即使当值为0时也要写百 分比符号。但是在其他的情况下就不需要这么做了。比如 说，当尺寸为0像素时，0之后不需要使用px单位，因为0 就是0，无论单位是什么。
主讲：王军 西北大学软件职业技术学院
CSS样式 样式
• Web标准的好处 标准的好处 1、对网站浏览者的好处： 文件下载与页面显示速度更快。 内容能被更多的用户所访问（包括失明、视弱、 色盲等残障人士）。 内容能被更广泛的设备所访问（屏幕阅读机、手 持设备、搜索机器人、打印机、电冰箱等）。 用户能够通过样式选定定制自己的表现界面。 所有页面都能提供适于打印的版本。
主讲：王军 西北大学软件职业技术学院
Css样式 样式
作业练习： 作业练习：
作业要求： 1、依左图效果完成网页文件 一个。 2、所有文字效果均要求用内 联式样式表定义。 3、图下方的链接点要求鼠标 放上去时，文字会变大或者缩 小。鼠标离开时，恢复原样。
主讲：王军
西北大学软件职业技术学院
主讲：王军 西北大学软件职业技术学院
Css样式 样式
CSS选择符的格式： 选择符的格式： 选择符的格式 1、html选择符 HTML标签{CSS样式属性:值}
主讲：王军
西北大学软件职业技术学院
Css样式 样式
CSS选择符的格式： 选择符的格式： 选择符的格式 2、类选择符 .name{CSS样式属性:值} 应用：class="name“ 类选择符就是一种自定义的样式声明。是以英文的句号为 开始，再加上自己随意定义的名称。在HTML中可以反复 应用，应用时在需要定义的HTML标签中写入：“class” 等于你自定义的名称即可。
4、导入在Head中的样式表（导入式）
<style type="text/css"> <!-@import style.css; @import url(“style.css”); --> </style>
主讲：王军 西北大学软件职业技术学院
Css样式 样式
CSS样式的语法结构 样式的语法结构 选择符｛属性： 选择符｛属性：值｝ 选择符：指这组编码所要针对的对象。 属性：CSS样式属性 值：属性的值 例：body{background-color:blue} 每个属性都有一个值。属性和值用冒号分开，并由花括号 包围，这样就组成了一个完整的样式声明。
类名的第一个字符不能使用数字！
主讲：王军
西北大学软件职业技术学院
Css样式 样式
CSS选择符的格式： 选择符的格式： 选择符的格式 3、ID选择符 #name{CSS样式属性:值} 应用：id="name“
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 id 选择器以 “#” 来定义。 id 属性只能在每个 HTML 文档中出现一次。
CSS样式 样式
• XHTML简介 简介 Dreamweaver8.0以上版本默认生成的网页格式。 是The Extensible HyperText Markup Language 可扩展标示语言的缩写。它是HTML到XML的过 渡。XHTML比HTML语法要求更严格，主要体现 XHTML HTML 在以下几个方面： 1、属性名必须小写。 2、属性值必须使用双引号。 3、不允许使用属性简写。 4、使用id替代Name。 5、必须使用结束标签。
主讲：王军 西北大学软件职业技术学院
CSS样式 样式
• 什么是CSS? Casccading Style Sheets(层叠样式表)的缩 写，它可以与HTML或XHTML超文本标签 语言配合来定义网页外观。
主讲：王军
西北大学软件职业技术学院
CSS样式 样式
• CSS的概念 的概念
head CSS head
CSS样式 样式
• Web标准的好处 标准的好处 2、对网站所有者的好处： 更少的代码和组件，容易维护。 带宽要求降低（代码更简洁），成本降低。 更容易被搜寻引擎搜索到。 改版方便，不需要变动页面内容 提供打印版本而不需要复制内容 提高网站易用性。
主讲：王军 西北大学软件职业技术学院
CSS CSS CSS 网页 1
主讲：王军
body 2
西北大学软件职业技术学院
CSS样式 样式
• CSS的概念 的概念
CSS
网页 3
网页
网页
网页
主讲：王军
西北大学软件职业技术学院
CSS样式 样式
CSS插入HTML文档中的位置 CSS插入HTML文档中的位置 插入HTML
1、嵌入在HTML标签中的样式表(嵌入式)
<HTML标记 style="CSS样式标记:值">
2、嵌入在Head中的样式表（内联式）
<style type="text/css"> <!-CSS样式 --> </style>
3、链接样式表(外联式)
<link href="style.css" rel="stylesheet" type="text/css">
主讲：王军
西北大学软件职业技术学院
Css样式 样式
常用CSS样式中有关文字的标签： 样式中有关文字的标签： 常用 样式中有关文字的标签
字号 font-size:# #=值 值的单位：pt 点 px 像素 in 英寸 cm 厘米 mm 毫米 pc 打字机字号 颜色：color:# #=颜色的名称，颜色的代码 字体样式：font-family:# 字体变形: text-transform:# #=uppercase 全大写 capitalize 第一个字母大写 lowercase 全小写 字母间距：letter-spacing:# 行高：line-height:# 修饰线：text-decoration:# #=underline 下划线 overline 上划线 line-through 删除线 none 无修饰线 a:link 未访问 a:hover 鼠标悬停 a:active 点击时 a:visited 访问后
主讲：王军 西北大学软件职业技术学院
Css样式 样式
CSS样式的语法结构 样式的语法结构 记得写引号:如果值为若干单词，则要给值加引号。 记得写引号 例：p {font-family: "sans serif";} 多重声明：如果要定义不止一个声明，用分号将每个声明 多重声明 分开。 例：p {text-align:center; color:red;} 空格和大小写：空格不会影响 CSS 在浏览器的工作效果， 空格和大小写 与 XHTML 不同，CSS 对大小写不敏感。如果涉及到与 HTML文档一起工作的话，class和id名称对大小写是敏感 的。
• Web标准的构成 标准的构成 结构：对网页中用到的信息进行整理和分类（用 结构 HTML、XML、XHTML进行结构化设计） 表现：即对已被结构化的信息进行显示上的控制。 表现 它包含版式、颜色、大小等形式控制。 行为：是指对整个文档内容的一个模型定义及交 行为 互行为的编写。用于编写用户可进行交互式操作 的文档（标准有：DOM文档对象模型、 ECMAScript：JavaScript扩展脚本语言）
CSS层叠样式表 层叠样式表
主讲：王军
西北大学软件职业技术学院
CSS样式 样式
• Web标准 是由W3C（Worle Wode Web Consortium 万维网联盟）和其他标准化组织制定的一 套规范集合，Web标准不是某一个标准， 而是一系列标准的集合。
主讲：王军
西北大学软件职业技术学院
CSS样式 样式
主讲：王军
西北大学软件职业技术学院
Css样式 样式
CSS选择符的格式： 选择符的格式： 选择符的格式 4、伪类选择符 A:link{font-size:9pt;color:#ff0000} A:visited {text-decoration: none; color: #FF9900} A:active {text-decoration: none; color: #FF0000} A:hover {text-decoration: underline; color:#FF0000}
主讲：王军
Biblioteka Baidu
西北大学软件职业技术学院
Css样式 样式
CSS样式的语法结构 样式的语法结构
值的不同写法和单位
p { color: #ff0000; } 十六进制颜色值 p { color: #f00; } 缩写形式 p { color: rgb(255,0,0); } RGB值 p { color: rgb(100%,0%,0%); } RBG百分比值 p { color: red; } 颜色名称 请注意，当使用 RGB 百分比时，即使当值为0时也要写百 分比符号。但是在其他的情况下就不需要这么做了。比如 说，当尺寸为0像素时，0之后不需要使用px单位，因为0 就是0，无论单位是什么。
主讲：王军 西北大学软件职业技术学院
CSS样式 样式
• Web标准的好处 标准的好处 1、对网站浏览者的好处： 文件下载与页面显示速度更快。 内容能被更多的用户所访问（包括失明、视弱、 色盲等残障人士）。 内容能被更广泛的设备所访问（屏幕阅读机、手 持设备、搜索机器人、打印机、电冰箱等）。 用户能够通过样式选定定制自己的表现界面。 所有页面都能提供适于打印的版本。
主讲：王军 西北大学软件职业技术学院
Css样式 样式
作业练习： 作业练习：
作业要求： 1、依左图效果完成网页文件 一个。 2、所有文字效果均要求用内 联式样式表定义。 3、图下方的链接点要求鼠标 放上去时，文字会变大或者缩 小。鼠标离开时，恢复原样。
主讲：王军
西北大学软件职业技术学院
主讲：王军 西北大学软件职业技术学院
Css样式 样式
CSS选择符的格式： 选择符的格式： 选择符的格式 1、html选择符 HTML标签{CSS样式属性:值}
主讲：王军
西北大学软件职业技术学院
Css样式 样式
CSS选择符的格式： 选择符的格式： 选择符的格式 2、类选择符 .name{CSS样式属性:值} 应用：class="name“ 类选择符就是一种自定义的样式声明。是以英文的句号为 开始，再加上自己随意定义的名称。在HTML中可以反复 应用，应用时在需要定义的HTML标签中写入：“class” 等于你自定义的名称即可。
4、导入在Head中的样式表（导入式）
<style type="text/css"> <!-@import style.css; @import url(“style.css”); --> </style>
主讲：王军 西北大学软件职业技术学院
Css样式 样式
CSS样式的语法结构 样式的语法结构 选择符｛属性： 选择符｛属性：值｝ 选择符：指这组编码所要针对的对象。 属性：CSS样式属性 值：属性的值 例：body{background-color:blue} 每个属性都有一个值。属性和值用冒号分开，并由花括号 包围，这样就组成了一个完整的样式声明。
类名的第一个字符不能使用数字！
主讲：王军
西北大学软件职业技术学院
Css样式 样式
CSS选择符的格式： 选择符的格式： 选择符的格式 3、ID选择符 #name{CSS样式属性:值} 应用：id="name“
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 id 选择器以 “#” 来定义。 id 属性只能在每个 HTML 文档中出现一次。
CSS样式 样式
• XHTML简介 简介 Dreamweaver8.0以上版本默认生成的网页格式。 是The Extensible HyperText Markup Language 可扩展标示语言的缩写。它是HTML到XML的过 渡。XHTML比HTML语法要求更严格，主要体现 XHTML HTML 在以下几个方面： 1、属性名必须小写。 2、属性值必须使用双引号。 3、不允许使用属性简写。 4、使用id替代Name。 5、必须使用结束标签。
主讲：王军 西北大学软件职业技术学院
CSS样式 样式
• 什么是CSS? Casccading Style Sheets(层叠样式表)的缩 写，它可以与HTML或XHTML超文本标签 语言配合来定义网页外观。
主讲：王军
西北大学软件职业技术学院
CSS样式 样式
• CSS的概念 的概念
head CSS head