北大青鸟内部学习资料,网络工程师课程,Benet3.0,北大青鸟内部PPT。
BENET3.0第一学期课程 BENET3.0第一学期课程
第三章 使用 使用CSS制作页面样式 制作页面样式—— 理论部分
北大青鸟内部学习资料,网络工程师课程,Benet3.0,北大青鸟内部PPT。
课程回顾实现用户登录，需要在页面中添加哪些元素？ 实现用户登录，需要在页面中添加哪些元素？ 常用的网页布局方式有哪些？ 常用的网页布局方式有哪些？ 创建层的两种方式是什么？ 创建层的两种方式是什么？ 如何设置超链接的样式？ 如何设置超链接的样式？
北大青鸟内部学习资料,网络工程师课程,Benet3.0,北大青鸟内部PPT。
技能展示会看懂CSS代码 会看懂CSS代码 CSS 会创建统一外观的字体文本 会创建个性化的表格 会创建个性化的表单 会创建各种超链接样式
北大青鸟内部学习资料,网络工程师课程,Benet3.0,北大青鸟内部PPT。
本章结构CSS样式分类 样式分类 CSS样式表简介 样式表简介 内部CSS样式的创建 样式的创建 内部 外部CSS样式的创建 样式的创建 外部 文本样式美化 使用CSS制 制 使用 作页面样式 CSS的应用 的应用 用CSS美化淘宝登录页面 美化淘宝登录页面 CSS设置背景和边框样式 设置背景和边框样式
淘宝网首页宝 贝类目的美化
北大青鸟内部学习资料,网络工程师课程,Benet3.0,北大青鸟内部PPT。
CSS样式表简介 样式表简介层叠样式表CSS:Cascading Style Sheet :
CSS样式分类 样式分类内部样式表 外部样式表
内部CSS样式的创建 样式的创建 内部 外部CSS样式的创建 样式的创建 外部
北大青鸟内部学习资料,网络工程师课程,Benet3.0,北大青鸟内部PPT。
内部样式表行内样式<td style="font-weight:bold">封面回顾 封面回顾</td> 封面回顾 <div style="border:1px #FF9900 solid; width:800px; ">Div 标签的内容 标签的内容</div>设置DIV边框的宽度、颜色、样式 边框的宽度 颜色、 设置 边框的宽
北大青鸟内部学习资料,网络工程师课程,Benet3.0,北大青鸟内部PPT。
内部样式表嵌入样式<style type="text/css"> td { font-size: 12px; color: #0066FF; } body { margin: 0; } div { font-size: 18px; color: #FF0000; } </style>7
北大青鸟内部学习资料,网络工程师课程,Benet3.0,北大青鸟内部PPT。
外部样式表单独的一个CSS文件 文件 单独的一个 控制网站的整体风格 页面可以通过链接的方式把CSS文件中的样式应用 页面可以通过链接的方式把CSS文件中的样式应用 CSS 到页面中<link href="style.css" rel="stylesheet" type="text/css" />
北大青鸟内部学习资料,网络工程师课程,Benet3.0,北大青鸟内部PPT。
内部样式表的创建可视化操作创建内部样式
选择新建CSS规则按钮 选择新建CSS规则按钮 CSS
新建CSS样式 新建CSS样式 CSS
北大青鸟内部学习资料,网络工程师课程,Benet3.0,北大青鸟内部PPT。
新建CSS规则 规则 新建由类生成的样式前面带一个“.”,例 由类生成的样式前面带一个 ， 如.btn,可用于任何文本、表格、背 ，可用于任何文本、表格、 景等网页元素
改变HTML标记中的默认形式，例如 标记中的默认形式， 改变 标记中的默认形式 <body>、<td>标记中的字体大小、 、 标记中的字体大小、 标记中的字体大小 字体颜色等 伪类选择器控制超链接文本样式， 伪类选择器控制超链接文本样式，例 如a:link、a:visited、a:hover和 、 、 和 A:active。ID选择器生成的样式前面 。 选择器生成的样式前面 带有一个“ ” 例如#main,控 带有一个“#”号，例
如 ， 制页面中ID为 制页面中 为main的页面元素样式 的页面元素样式10
北大青鸟内部学习资料,网络工程师课程,Benet3.0,北大青鸟内部PPT。
设置CSS规则定义 规则定义——类型 设置 规则定义 类型类型、背景、区块、方框、边框、列表、定位、 类型、背景、区块、方框、边框、列表、定位、扩展字体大小
字体粗细 行距 文字修饰线 字体颜色
.btn { font-size: 12px; line-height: 20px; }11
北大青鸟内部学习资料,网络工程师课程,Benet3.0,北大青鸟内部PPT。
设置CSS规则定义 规则定义——背景 设置 规则定义 背景背景图像地址
背景图像重复形式 背景图像的位置
.btn { background-image: url(images/top.jpg); background-repeat: no-repeat; background-position: center center; }12
北大青鸟内部学习资料,网络工程师课程,Benet3.0,北大青鸟内部PPT。
设置CSS规则定义 规则定义——边框 设置 规则定义 边框边框宽度
边框颜色 边框样式
.btn { border-top-width: 1px; border-left-width: 1px; border-top-style: dashed; border-left-style: solid; border-top-color: #FF3300; border-left-color: #3366CC; }13
北大青鸟内部学习资料,网络工程师课程,Benet3.0,北大青鸟内部PPT。
外部CSS样式的创建 样式的创建 外部外部样式表的创建方法方法一：选择菜单“文件” →“新建” 新建” 方法一：选择菜单“文件” →“新建 方法二：创建样式的同时新建CSS文件 方法二：创建样式的同时新建CSS文件 CSSCSS页面类型 页面类型
CSS文件名称 文件名称 新建样式表文件
北大青鸟内部学习资料,网络工程师课程,Benet3.0,北大青鸟 …… 此处隐藏：876字，全部文档内容请下载后查看。喜欢就下载吧 ……
，请把【付款记录详情】截图给客服，同时把您购买的文章【网址】发给客服。客服会在24小时内把文档发送给您。
