Download presentation
Presentation is loading. Please wait.
1
本科目课程效果 会用div+css进行web前端开发
2
本科目课程效果 1，工作职位
3
本科目课程效果 2，自主就业
4
本科目课程效果 2，自主就业
5
第一章 CSS的初步体验 主 讲：龙老师
6
学习目标 第1章 CSS的初步体验 了解CSS的概念 了解CSS控制页面 初步体验CSS的写法
7
1.1 CSS的概念 CSS(Cascading Style Sheet)，中文译为层叠样式表，它是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
8
1.1 CSS的概念 1，标记的概念 (1-1.html) <html xmlns=" <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>页面标题</title> </head> <body> <h2>CSS标记</h2> <p>CSS标记的正文内容从这里开始</p> </body> </html>
9
1.1 CSS的概念 1，标记的概念
10
1.1 CSS的概念 1，标记的概念 查看其它网站的CSS代码
11
1.1 CSS的概念 2，传统HTML的缺点 (1-2.html)
<html xmlns=" <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>页面标题</title> </head> <body> <h2><font color="#0000FF" face="黑体">CSS标记1</font></h2> <p>CSS标记的正文内容1</p> <h2><font color="#0000FF" face="黑体">CSS标记2</font></h2> <p>CSS标记的正文内容2</p> <h2><font color="#0000FF" face="黑体">CSS标记3</font></h2> <p>CSS标记的正文内容3</p> <h2><font color="#0000FF" face="黑体">CSS标记4</font></h2> <p>CSS标记的正文内容4</p> </body> </html>
12
1.1 CSS的概念 2，传统HTML的缺点
13
1.1 CSS的概念 2，传统HTML的缺点 维护困难 标记不足 网页过“胖” 定位困难
14
1.1 CSS的概念 3，CSS的引入 (1-3.html)
<html xmlns=" <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>页面标题</title> <style> h2{ font-family:黑体; color:#00FF00; } </style> </head> <body> <h2>CSS标记1</h2> <p>CSS标记的正文内容1</p> <h2>CSS标记2</h2> <p>CSS标记的正文内容2</p> <h2>CSS标记3</h2> <p>CSS标记的正文内容3</p> <h2>CSS标记4</h2> <p>CSS标记的正文内容4</p> </body> </html>
15
1.1 CSS的概念 4，如何编辑CSS Dreamweaver这款专业的网页设计软件在代码模式下对HTML、CSS和JavaScript等代码有着非常好的语法着色以及语法提示功能，并且自带很多实例，对CSS的学习很有帮助。
16
1.1 CSS的概念 4，如何编辑CSS
17
1.1 CSS的概念 4，如何编辑CSS
18
1.1 CSS的概念 4，如何编辑CSS
19
1.1 CSS的概念 5，浏览器与CSS 各个浏览器之间对CSS很多细节的处理上存在差异，设计者在一种浏览器上设计的CSS效果，在其他浏览器上的显示效果很可能不一样。 主要是因为各个浏览器对CSS样式默认值的设置不同，因些可以通过对CSS文件各个细节的严格编写，使得各个浏览器之间达到其本相同的效果。
20
1.2 使用CSS控制页面 1，行内样式 2，内嵌式 3，链接式 4，导入样式 5，各种方式的优先级问题
行内样式>链接式>内嵌式>导入式
21
1.2 使用CSS控制页面 1，行内样式 (1-5.html)
<html xmlns=" <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <p style="color:#FF0000; font-size:20px; text-decoration:underline;">正文内容1</p> </body> </html>
22
1.2 使用CSS控制页面 2，内嵌式 (1-6.html)
<html xmlns=" <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> p{ color:#FF00FF; text-decoration:underline; font-weight:bold; font-size:25px; } </style> </head> <body> <p>紫色、粗体、下划线、25px的效果</p> </body> </html>
23
1.2 使用CSS控制页面 3，链接式 (1-7.html)
<html xmlns=" <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="1.css" type="text/css" rel="stylesheet" /> </head> <body> <p>紫色、粗体、下划线、25px的效果</p> </body> </html>
24
1.2 使用CSS控制页面 4，导入样式 (1-8.html)
<html xmlns=" <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> <!-- @import url(1.css); --> </style> </head> <body> <p>紫色、粗体、下划线、25px的效果</p> </body> </html>
25
1.2 使用CSS控制页面 5，各种方式的优先级问题 (1-10.html) 行内样式>链接式>内嵌式>导入式
26
1.3 体验CSS 1，从零开始 （1-11.html） <html xmlns=" <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <div>CSS简介</div> <div>级联样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。</div> </body> </html>
27
1.3 体验CSS 1，从零开始
28
1.3 体验CSS 1，从零开始 <html xmlns="http://www.w3.org/1999/xhtml">
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <div>CSS简介</div> <div> <img src="1.jpg" border="0" /> 级联样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。</div> </body> </html>
29
1.3 体验CSS 1，从零开始
30
1.3 体验CSS 2，加入CSS控制 <style> body{ padding:0px; margin:0px;
background-color:#FFFF99; } #title{ font-size:19px; font-weight:bold; text-align:center; padding:15px; background-color:#FFFFcc; border:1px solid #FFFF00; #content{ padding:6px; font-size:13px; line-height:130%; </style>
31
1.3 体验CSS 3，控制图片 img { float:left;
filter:alpha(opacity=100,finishopacity=0;style=2); }
32
1.3 体验CSS 3，控制图片
33
1.3 体验CSS 4，CSS的注释 在CSS中，注释的语句都位于”/*”与”*/”之间，其内容可以是单行也可以是多行。
/*padding:0px; margin:0px; background-color:#FFFF99;*/
Similar presentations
