CSS基础教程8.0

合集下载

CSS基础知识讲解

CSS基础知识讲解

选择器的分组
你可以对选择器进行分组,这样,被分组的选择器就可以分享 相同的声明。用逗号将需要分组的选择器分开。在下面的例子 中,我们对所有的标题元素进行了分组。所有的标题元素都是 绿色的。 h1,h2,h3,h4,h5,h6 { color: green; }
样式继承
<style> div { color:red; } </style> <div> <p> p中的文字继承了div中设置的颜色 </p> </div>
盒子模型
任意一个块级元素均由content(内容), padding, background(包括背景颜色和图片),border(边框),margin五 个部分组成。
margin属性 margin属性
margin: margin:包括margin-top,margin-right,margin-bottom, margin-left,控制元素之间的距离,它们是透明不可见的。 margin-top: 40px; margin-right: 40px; 等价于 margin-bottom: 40px; --margin-left: 40px; margin:40px; 或者 margin:40px 40px 40px 40px;
id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 id 选择器以 "#" 来定义。 下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第 二个定义元素的颜色为绿色: #red {color:red;} #green {color:green;} 下面的 HTML 代码中,id 属性为 red 的 p 元素显示为红色, 而 id 属性为 green 的 p 元素显示为绿色。 <p id="red">这个段落是红色。</p> <p id="green">这个段落是绿色。</p> 注意: 注意:id 属性只能在每个 HTML 文档中出现一次

css教程

css教程

css教程CSS教程CSS是一种用于设置网页样式的样式表语言。

通过CSS,您可以更改网页元素的外观、布局和交互方式。

1. 选择器选择器是CSS中用于定位一个或多个元素的模式。

以下是一些常见的选择器类型:- 元素选择器:通过标签名选择元素。

例如,`div`选择所有`<div>`元素。

- 类选择器:通过类名选择元素。

例如,`.button`选择带有`button`类的所有元素。

- ID选择器:通过ID属性选择元素。

例如,`#header`选择具有`header` ID的元素。

2. 属性CSS属性用于设置元素的样式。

以下是一些常见的CSS属性:- `color`:设置文本颜色。

- `font-size`:设置字体大小。

- `background-color`:设置背景色。

- `margin`:设置元素的外边距。

- `padding`:设置元素的内边距。

3. 盒模型盒模型是CSS中用于布局的基本概念。

每个HTML元素被看作一个盒子,包括内容、内边距、边框和外边距。

您可以使用以下属性来控制盒子的大小和位置:- `width`:设置元素的宽度。

- `height`:设置元素的高度。

- `margin`:设置外边距。

- `padding`:设置内边距。

4. 布局CSS可以用于创建各种布局。

以下是一些常见的布局技术:- 浮动:使用`float`属性将元素从普通流中移动到其容器的左侧或右侧。

- 定位:使用`position`属性将元素定位到相对于其容器的指定位置。

- 弹性盒子布局:使用`display: flex`创建灵活的布局。

5. 响应式设计响应式设计是一种使网页能够适应不同设备和屏幕尺寸的技术。

您可以使用媒体查询和弹性布局来实现响应式设计。

- 媒体查询:使用`@media`规则根据不同的媒体类型、设备特性和条件应用不同的样式。

- 弹性布局:使用弹性盒子布局和百分比单位创建自适应布局。

这只是CSS的简要概述。

CSS 基础教程

CSS 基础教程

CSS 基础语法 CSS 简介 CSS 高级语法CSS 语法CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。

selector {declaration1; declaration2; ... declarationN }选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性(property)是您希望设置的样式属性(style attribute)。

每个属性有一个值。

属性和值被冒号分 开。

selector {property: value}下面这行代码的作用是将 h1 元素内的文字颜色定义为红色,同时将字体大小设置为 14 像素。

在这个例子中,h1 是选择器,color 和 font-size 是属性,red 和 14px 是值。

h1 {color:red; font-size:14px;}下面的示意图为您展示了上面这段代码的结构:提示:请使用花括号来包围声明。

值的不同写法和单位除了英文单词 red,我们还可以使用十六进制的颜色值 #ff0000:p { color: #ff0000; }为了节约字节,我们可以使用 CSS 的缩写形式:p { color: #f00; }我们还可以通过两种方法使用 RGB 值:p { color: rgb(255,0,0); } p { color: rgb(100%,0%,0%); }请注意,当使用 RGB 百分比时,即使当值为 0 时也要写百分比符号。

但是在其他的情况下就不需要这 么做了。

比如说,当尺寸为 0 像素时,0 之后不需要使用 px 单位,因为 0 就是 0,无论单位是什么。

记得写引号提示:如果值为若干单词,则要给值加引号:p {font-family: "sans serif";}多重声明:提示:如果要定义不止一个声明,则需要用分号将每个声明分开。

下面的例子展示出如何定义一个红色文 字的居中段落。

CSS 基础—CSS基础语法、CSS引入方式、CSS选择器

CSS 基础—CSS基础语法、CSS引入方式、CSS选择器

CSS 基础——CSS基础语法、CSS引入方式、CSS选择器学习目标掌握CSS 基本语法掌握CSS 的几种引入方掌握CSS 选择器CSS 简介CSS 全称Cascading Style Sheets ,即层叠样式表。

主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等显示样式。

CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。

CSS 基础语法CSS 引入方式CSS 的引入方式即书写位置包含三种:行内、内部以及最常用的外部行内样式行内样式又被称为内联样式。

是指将CSS 代码设置在标签的style 属性之上,其基本格式如下:由于行内样式只作用于设置样式的标签及其子标签上,无法很好的进行代码复用,故行内样式最不推荐内部样式内部样式即将CSS 样式书写语HTML 文档内部,使用styel 标签包裹CSS 样式,其格式如下:<html></html>内部样式作用于当前 HTML 页面,可以在本页面进行代码复用,但无法跨页面进行复用,故也不推荐使用注意:虽然标签可以写在 HTML 文档的任何地方,但为了样式的查找方便和快速加载, 建议将 外部样式标签写在 标签内部,位于结束标签之上。

外部样式即将 CSS 样式写在单独的以CSS 链接在页面中生效,其格式如下:CSS 文件:为后缀的文件中,然后在 HTML 页面中通过 标签将HTML 文件:CSS 选择器在CSS 中,选择器可以分为四类:选择器、选择附、伪类、伪元素选择器 - 基本选择器我们常见的选择器主要包含4种:标签选择器、ID 选择器、类选择器以及通配符选择器标签选择器:在 css 中直接书写标签进行选择 html 元素<html><style></html>ID选择器:利用html 标签的class 属性进行选择元素,在CSS 中使用面只能使用一次类选择器:利用html 标签的id属性进行选择元素,在CSS中使用进行匹配,同一个ID 页进行匹配, class 可多次使用通配符选择器:选择所有html 标签,与html 标签无关,在CSS 中直接书写<html><head><style>*{}p{}.p1{ }background-color: snow; font-weight: 600;background-color: pink;background-color: skyblue;#title{background-color: slateblue;}</style></head><body><p>我是第一个段落</p><p class="p1">我是第二个段落</p><p>我是第三个个段落</p><h1 id="title">我是一级标题</h1><h2 class="p1">我是二级标题</h2><span>我是span 元素</span></body></html>选择符- 复合/组合选择器选择符是用于描述元素与元素之间的关系,主要有::表示后代关系> : 父子关系: 兄弟关系: 相邻兄弟关系: 并列关系没有符号:描述同一个标签伪类伪类的特征是其前面会有一个冒号( : ), 通常与浏览器行为和用户行为相关联,可以看做CSS 中的JavaScript。

CSS入门基础经典教程

CSS入门基础经典教程

CSS基础教程CSS教程目录................................................. 错误!未定义书签。

第一章 CSS简介.............................................. 错误!未定义书签。

第一节:什么是CSS? ...................................... 错误!未定义书签。

什么是CSS ........................................... 错误!未定义书签。

参见................................................. 错误!未定义书签。

第二节:利用CSS的优势................................... 错误!未定义书签。

第二章 CSS入门例子......................................... 错误!未定义书签。

例如................................................. 错误!未定义书签。

第三章 CSS语法............................................. 错误!未定义书签。

第一节:外部引用CSS ..................................... 错误!未定义书签。

利用 link 标签引用CSS ............................... 错误!未定义书签。

利用 @import 引用CSS ................................ 错误!未定义书签。

第二节:内部引用CSS ..................................... 错误!未定义书签。

第三节:内联引用CSS ..................................... 错误!未定义书签。

dreamweaver8.0入门图文教程

dreamweaver8.0入门图文教程

dreamweaver8.0入门图文教程:Dreamweaver 8 操作环境第一天的内容可能让你觉得枯燥乏味,不过,“工欲善其事,必先利其器”,让我们一起来了解Dreamweaver8的操作环境,完成站点的创建。

一、Dreamweaver8 的操作环境在首次启动Dreamweaver8时会出现一个“工作区设置”对话框,在对话框左侧是Dreamweaver8的设计视图,右侧是Dreamweave 8的代码视图。

Dreamweaver8设计视图布局提供了一个将全部元素置于一个窗口中的集成布局。

我们选择面向设计者的设计视图布局。

在Dreamweave 8 中首先将显示一个起始页,可以勾选这个窗口下面的“不在显示此对话框”来隐藏它。

在这个页面中包括“打开最近项目”、“创建新项目”“从范例创建”3个方便实用的项目,建议大家保留。

新建或打开一个文档,进入Dreamweaver8的标准工作界面。

Dreamweaver8的标准工作界面包括:标题显示、菜单栏、插入面板组、文档工具栏、标准工具栏、文档窗口、状态栏、属性面板和浮动面板组。

1、标题显示栏启动Macromedia Dreamweave 8后,标题栏将显示文字Macromedia Dreamweave 8.0,新建或打开一个文档后,在后面还会显示该文档所在的位置和文件名称。

2、菜单栏Dreamweave 8的菜单共有10个,即文件、编辑、视图、插入、修改、文本、命令、站点、窗口和帮助。

其中,编辑菜单里提供了对Dreamweaver菜单中[首选参数]的访问。

文件:用来管理文件。

例如新建,打开,保存,另存为,导入,输出打印等。

编辑:用来编辑文本。

例如剪切,复制,粘贴,查找,替换和参数设置等。

查看:用来切换视图模式以及显示、隐藏标尺、网格线等辅助视图功能。

插入:用来插入各种元素,例如图片、多媒体组件,表格、框架及超级链接等。

修改:具有对页面元素修改的功能,例如在表格中插入表格,拆分、合并单元格,对其对象等。

Dreamweaver-cs-基础与实例教程

Dreamweaver-cs-基础与实例教程
(1)利用“CSS样式”面板 首先选中要应用CSS样式旳对象,能够是文本、图像和
Flash等对象。然后鼠标右键单击“CSS样式”面板中 相应旳样式名称,弹出它旳快捷菜单,再单击该菜单 中旳“套用”菜单命令。 (2)利用“属性”栏 选中要应用CSS样式旳文本对象,在其“属性”栏旳“样 式”下拉列表框中选择需要旳CSS样式名称,即可将选 中旳CSS样式应用于选中旳文本对象。
(2)若要重定义特定 HTML 标签旳默认格式设置,请选择“标签” 选项,然后在“标签”文本框中输入一种 HTML 标签,或从弹出 式菜单中选择一种标签。
(3)若要为详细某个标签组合或全部涉及特定 Id 属性旳标签定 义格式设置,请选择“高级”选项,然后在“选择器”文本框中 输入一种或多种 HTML 标签,或从弹出式菜单中选择一种标签。 弹出式菜单中提供旳选择器(称作伪类选择器)涉及 a:active、 a:hover、a:link 和 a:visited。
环节3:选择定义样式旳位置: (1)若要创建外部样式表,请选择“新建样式表文件”。
(2)若要在目前文档中嵌入样式,请选择“仅对该文 档”。
环节4:单击该对话框中旳“拟定”按钮,即可退出该 对话框,弹出“CSS规则定义”对话框。
2.3.2 将外部样式表导入到目前文档
环节1:在CSS面板上,单击附加样式表按钮,打开 “链接外部样式表对话框”,单击对话框中“浏览” 按钮,浏览到外部 CSS 样式表,或者直接在“文件 /URL”框中键入该样式表旳途径。
2.1.2 插入水平线
在文档编辑区将插入点定位到所需位置,选择“插入” 菜单中旳“HTML”子菜单下旳“水平线”命令或单击 “插入”栏中旳“HTML”选项卡,在其中单击水平线 按钮即可添加水平线。初始绘制旳水平线旳格式往往 不能满足实际需要,此时可经过属性面板对其进行修 改。

css基础

css基础

CSS 的基础知识本文档讲述的CSS 基础知识,是指CSS 中的属性、选择符、伪类等相关知识的概念、内容、写法等。

具体到某个属性(或伪类)的取值、特性和使用方法等,将在以后的章节中介绍。

1.1 什么是CSSCSS 是Cascading Style Sheet 的缩写,中文译作层叠样式表(简称为样式表),是W3C 组织制定的,用于控制网页样式的一种标记性语言。

它包括CSS1 和CSS2 两部分。

其中,CSS2 是1998 年5 月发布的,包含了CSS1 的内容,也是现在通用的标准。

下面是一个网页中使用CSS 的实例,其代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS 实例页面</title><link href="style/main.css" type="text/css" rel="stylesheet" /><style><!--CSS 样式表开始-->body{margin:0;padding:0;}.content{margin:100px auto;margin:0px 0px;height:200px;width:450px;background:#cccccc url(images/background_big.gif) center no-repeat;line-height:200px;text-align:center;font-size:36px;}<!--CSS 样式表结束--></style></head><body><div class="main"> <!—元素引用样式的代码--><div class="content">使用CSS 样式的一个实例</div></div></body></html>代码中,<style>和</style>标签所包含的部分就是CSS 样式。

CSS基础知识从入门到精通

CSS基础知识从入门到精通

CSS基础知识从入门到精通CSS(Cascading Style Sheets,层叠样式表)是一种用于描述网页展示样式和格式的标记语言。

在网页开发中,CSS被广泛应用于控制页面的布局、字体、颜色、背景等方面。

本文将从CSS的基本概念、语法结构、选择器和常用属性等方面介绍CSS的基础知识,帮助读者掌握从入门到精通的技能。

一、基本概念CSS主要用于网页样式的控制,与HTML相辅相成,为页面增加丰富的样式特效。

使用CSS可以有效地对页面中的元素进行样式定义,使页面更加美观、易读。

二、语法结构1. 选择器:CSS通过选择器选取页面中的元素,并对其应用相应的样式。

常见的选择器类型有标签选择器、类选择器、ID选择器、后代选择器、群组选择器等。

2. 声明块:由大括号{}包围,用于定义元素的样式。

每个声明由属性和属性值组成,中间用冒号:连接。

3. 示例:```CSSh1 {color: red;font-size: 24px;}```以上代码通过标签选择器h1,定义了h1元素的颜色为红色,字体大小为24像素。

三、选择器选择器用于选取页面中需要应用样式的元素。

掌握不同类型的选择器,可以更精准地定位和控制元素。

1. 标签选择器:通过HTML标签名选取元素。

如:p、div、h1等。

2. 类选择器:通过指定class属性值选取元素。

以英文句点.开头,后面紧跟类名。

如:.red、.highlight等。

3. ID选择器:通过指定id属性值选取元素。

以井号#开头,后面紧跟ID名。

如:#header、#nav等。

4. 后代选择器:通过指定元素的层级关系选取元素。

以空格分隔各层级元素。

如:header h1、.menu li等。

5. 群组选择器:通过逗号分隔多个选择器,同时选取多个元素。

如:h1, h2, h3。

四、常用属性CSS提供了丰富的属性来控制元素的样式,下面介绍几个常用的属性。

1. color:用于设置文字颜色。

可以使用颜色名、RGB值、十六进制值等表示颜色。

CSS基础教程

CSS基础教程

CSS基础教程
CSS是层叠样式表(Cascading Style Sheets)的缩写,是一种用于描述网页上的元素样式的标准语言。

通过CSS,我们可以控制网页中的字体、颜色、背景等样式,使网页看起来更加美观和易读。

CSS的基本语法由选择器和声明块组成。

选择器用于指定要应用样式的HTML元素,而声明块中包含了具体的样式声明。

一个简单的CSS规则可以表示为:
选择器 {
属性: 值;
}
例如,如果我们想要将所有段落的文字颜色设置为红色,可以使用以下CSS代码:
p {
color: red;
}
在上面的代码中,p是选择器,表示要选择所有的段落元素。

而color: red;则是样式声明,表示要将文字颜色设置为红色。

除了选择器和样式声明外,CSS还支持一些特殊的属性和值,用于控制元素的布局、边框、背景等。

例如,可以使用width 属性来控制元素的宽度,使用border属性来设置边框样式,使用background属性来设置背景颜色或图片等。

为了将CSS样式应用到HTML文档中,我们可以使用<style>标签将CSS代码嵌入到HTML文件中,也可以将CSS代码保存为一个独立的CSS文件,并在HTML文件中通过<link>标签引用。

总之,CSS是一种强大的样式语言,通过使用它,我们可以轻松地控制网页的外观和布局,实现各种各样的效果。

希望这篇简介能帮助你入门CSS,开始学习和使用这个有趣的技术!。

CSS基础知识学习(含实例)PPT课件

CSS基础知识学习(含实例)PPT课件

五、CSS 的继承性
❖ 继承性是指:如果某个属性具有继承性,则属性作用在父 元素的同时,也会作用于其包含的子元素。
❖ 常用的具有继承性的属性:
▪ font-family ▪ font-size ▪ font-style ▪ line-height ▪ color ▪ text-align ▪ text-indent ▪ a:link a:visited a:hover a:active
六、层叠和特殊性
❖ 选择符的特殊性分成四个等级:
选择符 行内样式 ID选择符 类选择符、伪类选择符 类型选择符
1000 100 10 1
特殊性
▪ 用行内样式具有最高特殊性。 ▪ “ID选择符”比“类选择符”特殊。 ▪ “类选择符”比“类型选择符”特殊。
六、层叠和特殊性
❖ 练习
选择符
style=“”
二、在网页中应用 CSS
❖ 行内样式:在 HTML 标记的 style 属性中设置 CSS 样式。
例: <html> <head> <title>泡泡潜水俱乐部欢迎你</title> </head> <body> <h1>s泡tyl泡e=潜“c水olo俱r:乐#F部F<F/FhF1>F; background-color: #000080” >泡泡潜水俱乐部</h1> <P>泡泡潜水俱乐部为你量身打造一流的潜水服务,……</p> </body> </html>
例:
body { font: 0.75em/1.5 "宋体"; background: #E0E0E0 url(images/bg.gif);

CSS入门教程

CSS入门教程

CSS 入门教程CSS 入门教程一、CSS 简介 感性体验 CSS 什么是 CSS 呢?你可能急迫的想知道答案。

但是空泛的文字描述意义不大,让我们先 来一点感性体验吧。

看看这个没有添加 CSS 的 HTML 文件,是一个普普通通的网页。

然而通 过给这个文件添加的 CSS 规则,我们可以得到十分美观的网页。

这还不是全部,不改动 HTML,只是通过添加不同的 CSS 规则,我们就可以得到各种不 同样式的网页。

好了,下面我们再来回答什么是 CSS 这个问题。

什么是 CSS? CSS 是 CascadingStyleSheets(层叠样式表)的缩写。

它的作用是定义网页的外观(例 如字体,颜色等等),它也可以和 javascript 等浏览器端脚本语言合作做出许多动态的效 果。

学习 CSS 的基础 学习 CSS 之前您应该已经了解了 HTML 或者 XHTML。

需要什么特殊的软件吗? 学习 CSS 需要什么特殊的软件吗? 不。

同学习 XHTML 一样,在学习 CSS 的过程中您只需要使用 Windows 自带的记事本 (Notepad.exe)就可以了。

在未来实际制作网页的时候您可能需要用到 Dreamweaver 等专业 的网页设计软件,它们将使得为网页添加 CSS 的工作变得异常简单。

但是再次强调,在学习 CSS 的过程中,您不需要这些强大的软件。

本教程只使用记事本,目的在于练习手写 CSS 代 码的能力,也是为了方便那些还没有 Dreamweaver 之类软件的读者。

样式表的基本语法( 二、样式表的基本语法(一) 插入样式表前后的网页。

插入样式表前后的网页。

为了更好地理解样式表的作用,我们先看一个 CSS 的应用实例。

在本例子中,你很容 易对比出使用 CSS 前后两个网页的区别,当然了,现在你可能读不懂 CSS 部分的代码。

别担 心,这些代码将在少后的教程中介绍。

我们首先来看一下未加入 CSS 的页面。

css基础知识

css基础知识

前言1. 什么是CSS?1.1. 使用CSS的优势2. CSS入门例子2.1. CSS入门视频教程3. CSS语法 -- 最基本的3.1. 外部引用CSS3.1.1. 使用 link 标签引用CSS3.1.2. 使用 @import 引用CSS3.2. 内部引用CSS3.3. 内联引用CSS3.4. CSS 选择符3.5. CSS 声明3.6. CSS注释4. CSS color 属性 -- CSS前景色4.1. CSS opacity 属性5. CSS颜色 -- 五颜六色的世界5.1. CSS RGB(A) 颜色5.2. CSS HSL(A) 颜色5.3. 短16进制颜色与web安全色6. CSS背景6.1. CSS background-color 属性6.2. CSS background-image 属性6.3. CSS background-repeat 属性6.4. CSS background-position 属性6.5. CSS background-attachment 属性6.6. CSS background 属性7. CSS文本7.1. CSS letter-spacing 属性7.2. CSS word-spacing 属性7.3. CSS text-decoration 属性7.4. CSS text-transform 属性7.5. CSS text-align 属性7.6. CSS text-indent 属性7.7. CSS white-space 属性8. CSS字体8.1. CSS font-family 属性8.1.1. CSS family-name 系列性字体名称8.1.2. CSS generic-family 一般性字体名称8.2. CSS font-size 属性8.3. CSS font-style 属性8.4. CSS font-variant 属性8.5. CSS font-weight 属性8.6. CSS font 属性9. CSS列表9.1. CSS list-style-type 属性9.2. CSS list-style-image 属性9.3. CSS list-style-position 属性9.4. CSS list-style 属性10. CSS cursor 属性 -- 鼠标样式11. CSS边框11.1. CSS border-width 属性11.2. CSS border-color 属性11.3. CSS border-style 属性11.4. CSS border 属性12. CSS margin 属性 -- CSS边外补白13. CSS padding 属性 -- CSS边内补白14. CSS属性索引 -- 按字母顺序前言CSS教程,分为CSS初级教程和CSS高级教程两个阶段.CSS初级教程包括:CSS语法,CSS颜色,CSS文本与CSS字体,CSS边框,CSS列表等基础知识. CSS高级教程包括:CSS选择符,CSS相关特性,CSS盒模式,标准网页设计与页面排版,CSS伪类与伪元素等.通过梦之都的CSS教程,你将学会怎样使用CSS,怎么把CSS与XHTML有机的结合在一起,了解CSS 最新的发展情况,并且你将学会标准网页的制作.学习CSS教程之前我假定你已经学会了HTML语言,你可以通过此链接学习HTML语言教程.教程主要介绍CSS2.1的特性,同时也简单介绍了CSS3的一些特性.由于CSS3的一些特性还不被主流浏览器支持,这里只是做一个前瞻性的介绍.学习CSS之前,首先可以先准备几个浏览器测试其对CSS的兼容性.常用的浏览器有: ∙Firefox(/)∙IE(/windows/ie/)∙Opera(/)CSS是非常简单,强大的,可以把网页表现的统一,漂亮,规范,使页面更加亲切.可以减少网页制作的代码量.本教程会把所有CSS属性做一个总结,供大家以后查找参考.CSS属性索引1 . 什么是CSS?什么是CSS∙CSS是用于布局与美化网页的.∙CSS是Cascading Style Sheets的英文缩写,即层叠样式表.∙CSS语言是一种标记语言,因此不需要编译,可以直接由浏览器执行(属于浏览器解释型语言).∙CSS文件是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀.∙CSS是大小写不敏感的,CSS与css是一样的.∙CSS是由W3C的CSS工作组产生和维护的.猴子提示: 可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课.知道什么是CSS了,现在就开始学习CSS吧 CSS入门例子CSS的历史∙1996年W3C正式推出了CSS1.∙1998年W3C正式推出了CSS2.∙CSS2.1是W3C现在正在推荐使用的.∙CSS3现在还处于开发中.参考∙W3C的CSS主页/Style/CSS/∙在w3c网站上校验CSS的正确性/css-validator/1.1. 使用CSS的优势∙内容与表现分离,有了CSS,网页的内容(XHMTL)与表现就可以分开了.∙表现的统一,可以使网页的表现非常统一,并且容易修改.∙CSS可以支持多种设备,比如手机,PDA,打印机,电视机,游戏机等.∙使用CSS可以减少网页的代码量,增加网页的浏览速度,减少硬盘容量.2 . CSS入门例子2.1. CSS入门视频教程∙如果还不了解从输入域名到访问网站的过程,先看看这个吧,网络的运作方式∙看看猴子为什么学习做网页,猴子买报的故事:)你可以先通过这个链接学习一下HTML的入门例子.CSS入门例子示例 -- 可以尝试编辑∙定义文字的颜色∙定义网页的背景颜色∙定义网页的背景图片∙定义文字的对齐方式∙自定义列表样式∙定于你的鼠标样式∙定义一个带有颜色的边框好通过上面的例子有点感觉了吧?现在开始从头学习入门啦:)<1>打开记事本:点击"开始"--选择"程序"--选择"附件"--选择"记事本"(或者打开你的Notepad++编辑器)<2>输入下面代码(直接拷贝过去就可以啦)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title> 欢迎来到梦之都 </title><link rel="stylesheet" type="text/css" href="dreamdu.css" /> </head><body><h1>欢迎来到梦之都<h1><p>这是我的第一个网页,在这里<a href="/css/">尽情学习CSS</a>吧!</p></body></html>点击"文件"--选择"保存"--选择文件类型为"所有文件"--文件名输入"dreamdu.html"并选择文件保存地址.(记住一定要把文件的后缀存为.html或.htm,否则网页无法显示)<3>再新建一个文件,输入下面代码(直接拷贝过去就可以啦)/*段落样式*/p{color: purple;font-size: 12px;}/*标题样式*/h1{color: olive;text-decoration: underline;}/*链接样式*/a:link{color:#006486;}a:visited{color:#464646;}a:hover{color: #fff;background: #3080CB;}a:active{color:white;background: #3080CB ;}点击"文件"--选择"保存"--选择文件类型为"所有文件"--文件名输入"dreamdu.css"并选择文件保存地址.(记住一定要把文件的后缀存为.css,而且要和dreamdu.html在同一个目录下.)<4>现在我们可以双击dreamdu.html这个文件.看看效果吧.怎么样?五颜六色的吧:)现在解释一下上面的例子HTML文件就是一个文本文件,HTML文件要在head处加载css样式<link rel="stylesheet"type="text/css" href="dreamdu.css" />.CSS文件也是一个文本文件.p{color: purple;font-size: 12px;}代表p标签所包含的内容都是以紫红色color: purple;,12px大小font-size: 12px;的字体显示.h1{color: olive;text-decoration: underline;}代表h1标签所包含的内容都是以橄榄色color: olive;,带下划线text-decoration: underline;的字体显示.a:link{color:#006486;}a:visited{color:#464646;}a:hover{color: #fff;background: #3080CB;}a:active{color:white;background: #3080CB ;}代表了HTML链接的样式,这个有点复杂了,大家可以先看看效果,高级教程中我再分析此链接样式(梦之都就是使用的这个链接样式:)[大家可以下载梦之都的链接样式参考一下/style.css]).几个问题比如使用什么编辑器呀? 怎么显示扩展名等.大家可以参看HTML,XHTML入门例子3 . CSS语法 -- 最基本的CSS语法非常简单,组成CSS语法的元素只有CSS选择符与CSS属性.每个CSS选择符由1个或多个CSS属性组成.CSS是大小写不敏感的,在CSS语法中推荐使用小写.HTML教程中我们学习了CSS在HTML文件中的几种加载方法,在这里我还要再全面的总结一下.3.1. 外部引用CSS -- ExternalCSS外部引用使用了外接的CSS文件,一般的浏览器都带有缓存功能,所以用户不用每次都下载此CSS文件.外部引用相对于内部引用和内联引用来说是高效的是节省宽带的.外部引用是W3C推荐使用的.外部引用CSS是最好的引入CSS的方式(可以使代码量最小,表现最统一,也是标准网页设计推荐的).内联引用(直接在HTML标签中使用)虽然是一种快捷的方式(除了层叠的情况,高级教程中我会介绍层叠),但是不利于以后的统一修改和表现的一致性,所以不提倡使用. 梦之都CSS教程中的大部分示例都使用内部引用CSS -- Internal 的方式,这样大家可以比较直观的看到CSS代码.3.1.1 使用 link 标签引用CSS示例<head><link rel="stylesheet" type="text/css"href="/style.css" /></head>延伸阅读∙XHTML link 标签∙XHTML rel 属性∙XHTML href 属性∙在HTML中嵌入CSS -- 定义CSS样式∙外部引用CSS中link与@import的区别3.1.2 使用 @import 引用CSS示例<head><style type="text/css">@importurl(/style.css);</style></head>相对路径与绝对路径∙加载文件的时候可以使用相对路径或者绝对路径∙绝对路径:文件的完整路径,主页上的文件或目录在硬盘上真正的路径∙/html/default.html就是绝对路径,/html/default.html也是绝对路径,C:\winnt\system.sys也是绝对路径∙相对路径:相对于我们查看文档的路径∙../default.html或者default.html或者../../default.html都是相对路径双表法一些老式的浏览器不支持@import方法.网上流传着一种叫双表法的技术,就是利用了一些老式的浏览器不支持@import这个特性.延伸阅读∙XHTML style 标签∙在HTML中嵌入CSS -- 定义CSS样式∙外部引用CSS中link与@import的区别∙相对路径和绝对路径参考∙W3C The @import rule3.2. 内部引用CSS -- Internal可以使用style标签直接把CSS文件中的内容加载到HTML文档内部.示例<style type="text/css"><![CDATA[/* ----------文字样式开始---------- *//* 梦之都白色12象素文字 */.dreamduwhite12px{color:white;font-size:12px;}/* 梦之都黑色16象素文字 */.dreamdublack16px{color:black;font-size:16px;}/* ----------文字样式结束---------- */]]></style>猴子提示: style标签应该在head标签内部.3.3. 内联引用CSS -- Inline内联引用可以把CSS样式直接作用在HTML标签中.示例<p style="font-size: 10px; color: #FFFFFF;">使用CSS内联引用表现段落.</p>3.4. CSS 选择符 -- CSS的名字CSS选择符就是CSS样式的名字,当在HTML文档中表现一个CSS样式的时候,就要用到一个CSS.怎么用呢?这时就通过CSS选择符(CSS的名字)来指定此HTML标签使用此CSS样式. 选择符语法选择符名字{声明;}一个CSS选择符就定义了一个样式比如下面这三个例子p{font-size:12px;}.dreamdublue{color:blue;}.dreamdu18px{font-size:18px;}#dreamdured{color:red;}dreamdublue和dreamdured都是CSS的选择符,也就是CSS的名字.选择符取名规则CSS选择符可以使用英文字母的大写与小写,数字,连字号,下划线,冒号,句号.∙英文字母大写与小写 A-Z a-z∙数字 0-9∙连字号 -∙下划线 _∙冒号 :∙句号 .猴子提示: CSS 选择符只能以字母开头.常用的三种选择符(我感觉这是初级教程中最难的地方:)∙ xhtml 标签选择符,比如 p 标签选择符(代表所有的段落都使用这个CSS 样式),比如p{font-size:12px;}∙ id 选择符,唯一性选择符,比如 #dreamdured{color:red;},就是在名字前增加了一个#,id 选择符在一个页面中只能出现一次,在整个网站中也最好出现一次(这样有利于程序员控制此元素,有多个一样名称的元素,就无法分开不好控制了).∙ class 选择符,多重选择符,比如.dreamdublue{color:blue;},就是在名字前增加了一个.,class 选择符在一个页面中可以出现多次(注意下面的示例中class 选择符的用法).示例<p>梦之都xhtml 标签选择符</p><p id="dreamdured">梦之都id 选择符</p><p class="dreamdublue">梦之都class 选择符</p><p class="dreamdublue dreamdu18px">梦之都class 选择符2,出现了多次.</p>一个p 元素使用了两个class 选择符,他们之间用空格分开,而且class 选择符可以在一个页面出现多次.CSS 选择符示例 -- 可以尝试编辑o CSS 选择符示例选择符用法总结 id 与class 选择符在CSS 与HTML 中的用法总结CSS 中的写法 XHTML 中的写法xhtml 标签选择符 p{font-size:12px;} <p></p>id 选择符 #id_selector{font-size:12px;}<p id="id_selector">梦之都</p> class 选择符 .class_selector{font-size:12px;} <p class="class_selector">梦之都</p>猴子提示: CSS 选择符还有好多种变化,在CSS 高级教程中我再给大家介绍.延伸阅读o HTML id 属性o HTML class 属性3.5. CSS 声明CSS 声明是由"属性","冒号(:)","属性值"和"分号(;)"组成的.语法:属性:属性值;示例font-size:12px;∙font-size代表字体大小.∙12px字体大小的值.下面介绍两个常用的技巧1,选择符的名字一样,声明是可以组合的例如:选择符名字{声明1;}选择符名字{声明2;}选择符名字{声明3;}可以组合为:选择符名字{声明1;声明2;声明3;}示例div{color:black;}div{font-size:12px;}与下面的是等价的div{color:black;font-size:12px;}2,声明全部一样,选择符的名字也可以组合选择符名字1{声明1;声明2;}选择符名字2{声明1;声明2;}选择符名字3{声明1;声明2;}可以组合为:选择符名字1,选择符名字2,选择符名字3{声明1;声明2;}示例.dreamdudivwhite12px{color:white;font-size:12px;}h1{color:white;font-size:12px;}div{color:white;font-size:12px;}与下面的是等价的.dreamdudivwhite12px,h1,div{color:white;font-size:12px;}CSS的语法是比较简单的,声明也比较直接,难点是选择符的名字,有很多种变化,高级教程中我将详细介绍.示例h1{color:red;}p{color:black;font-size:12px;}div{color:lightblue;font-size:16px;}h1, p, div{border:1px solid black;}通过上面的示例大家可以看出选择符组合的好处,border: 1px solid black;这段代码只写了一次,就定义了三种HTML标签,这样使代码更统一,便于以后的修改,减少了代码量.CSS 声明示例 -- 可以尝试编辑CSS 声明示例3.6. CSS注释就像HTML教程中描述的一样,在CSS文档中注释也起到很重要的作用,可以帮助我们记起CSS的含义,加载在HTML文档的位置等.CSS注释的开始使用/*,结束使用*/CSS注释语法/* 注释内容 */示例/* ----------文字样式开始---------- *//* 梦之都白色12象素文字 */.dreamduwhite12px{color:white;font-size:12px;}/* 梦之都黑色16象素文字 */.dreamdublack16px{color:black;font-size:16px;}/* ----------文字样式结束---------- */延伸阅读∙HTML注释∙JavaScript注释4 . CSS color 属性 -- CSS前景色我们可以为网页上的文字赋予颜色,这就要使用到CSS的前景色.前景色(foreground color),可以使用color属性表示前景色,前景色通常使用在文字上.与前景色相对应的是CSS背景色,后面我们将介绍CSS的背景色.color -- 前景色定义文字的颜色∙取值: <color> | inherito<color>: 颜色表示法o inherit: 继承∙初始值: 依赖于用户的设备∙继承性: 是∙适用于: 所有元素∙引用网址:/css/property_color/示例p{color: black;}span{color: rgb(50,255,0);}CSS color 属性示例 -- 可以尝试编辑∙CSS color 属性示例∙CSS opacity 属性示例延伸阅读∙CSS教程中的属性取值正则表达式介绍(一)4.1. CSS opacity 属性opacity -- 不透明度∙取值: <alphavalue> | inherito<alphavalue>: 透明度取值(取值范围[0.0,1.0])o inherit: 继承∙初始值: 1(不透明)∙继承性: 是∙适用于: 所有元素∙引用网址:/css/property_opacity/∙CSS3提出opacity属性示例div{opacity: 0.5;}5 . CSS颜色 -- 五颜六色的世界前面的教程使用了下面的代码color:black;,这段代码翻译过来就是颜色(color):黑色(black).这就是CSS的一种颜色表示方式.CSS的颜色表示法 /css/css_colors/CSS预定义颜色表示法(就是使用颜色的英文):color:red;color:green;color:blue;red,green,blue都是CSS关键词,CSS关键词我将在CSS高级教程中介绍.CSS RGB颜色表示法:color:rgb(255,0,0);color:rgb(0,255,0);color:rgb(0,0,255);RGB颜色表示法就是红(R:red),绿(G:green),蓝(B:blue),这三原色混合后呈现出的颜色,其中每种颜色的取值为0~255.CSS RGB百分比颜色表示法:color:rgb(100%, 0%, 0%);color:rgb(0%, 100%, 0%);color:rgb(0%, 0%, 100%);RGB百分比颜色表示法就是利用百分比来表示RGB颜色,其中RGB中的0就代表百分比中的0%,RGB中的255就代表百分比中的100%.CSS 16进制颜色表示法:color:#ff0000;color:#00ff00;color:#1199ff;16进制颜色表示法就是使用三对十六进制数分别表示RGB中的三原色,像上面例子的最后一个color:#1199ff;,其中11代表R的颜色(十六进制的11就等于十进制中的17),其中99代表G 的颜色(十六进制的99就等于十进制中的153),其中ff代表B的颜色(十六进制的ff就等于十进制中的255),前面再加一个#号.(#1199ff;等价于rgb(17,153,255);)CSS 短16进制颜色表示法,属于web safe colors(网络安全色):color:#f00;color:#0f0;color:#00f;短16进制颜色表示法就是当16进制颜色表示法中的两个表示颜色值的数字一样的时候的简写,比如color:#ff0000;就可以简写为color:#f00;.CSS RGBA颜色表示法:color:rgba(255,0,0,1);color:rgba(0,255,0,1);color:rgba(0,0,255,1);RGBA颜色表示法就是在RGB颜色的基础上增加了Alpha通道.CSS HSL颜色表示法:color:hsl(360, 100%, 75%);color:hsl(120, 100%, 75%);color:hsl(240, 100%, 75%);HSL颜色表示法就是使用色相(hue),饱和度(saturation),亮度(lightness)表示颜色的一种方法.CSS HSLA颜色表示法:color:hsla(360, 100%, 50%, 1);color:hsla(120, 100%, 50%, 1);color:hsla(240, 100%, 50%, 1);HSLA颜色表示法就是在HSL颜色的基础上增加了Alpha通道.说明:什么是16进制?16进制是逢16进1,a代表10,f代表15,我们平时使用的10进制都是逢10进1.(16进制的ff 等于10进制的255)CSS的颜色总数是多少?从整数0到255范围内的rgb颜色表示,我们可以计算出CSS可以表示颜色的总数为,256*256*256=16777216注意:∙使用16进制表示颜色时,要使用#标记∙#rgb等价于#rrggbb,例如:#fb0等价于#ffbb00∙一个等式rgb(255,255,255) = rgb(100%,100%,100%) = #FFF = #FFFFFF∙CSS定义了大量预定义颜色(共3147种颜色),使用预定义颜色可以更直观,简单,教程的最后将会总结CSS的预定义颜色列表.5.1. CSS RGB(A) 颜色RGB颜色是我们最常使用的.它可以表现出16777216种颜色.RGBA表示方式(CSS3特有):目前还不被多数浏览器支持.示例/* 不透明度为1 */color:rgba(100%,0%,0%,1);RGBA是在RGB的基础上增加了alpha通道RGBA是什么?∙R代表红(red)∙G代表绿(green)∙B代表蓝(blue)∙A代表不透明度(alpha)的缩写引用网址:/css/color_rgba/5.2. CSS HSL(A) 颜色HSL(hue-saturation-lightness)表示方法(CSS3特有):目前还不被多数浏览器支持示例/* red */color:hsl(0, 100%, 50%);说明:∙hue取值为[0,360],0,360都为红色,120为绿色,240为蓝色∙saturation与lightness取值为[0%,100%]HSLA表示方式(CSS3特有):目前还不被多数浏览器支持示例/* 不透明度为1 */color:hsla(120, 100%, 50%, 1);HSLA是在HSL的基础上增加了alpha通道HSLA是什么?∙H代表色相(hue)∙S代表饱和度(saturation)∙L代表亮度(lightness)∙A代表不透明度(alpha)的缩写引用网址:/css/color_hsla/5.3. 短16进制颜色与web安全色短16进制颜色可以表现出256种颜色.从00,33,66,99,cc和ff(RGB值分别为0,51,102,153,204和255)中任选三个组成的六位十六进制数都代表一种Web安全色.最初的计算机(8位计算机)上只能定义256种颜色,所以当时Windows和Macintosh运行于256色,在Netscape Navigator和Microsoft Internet Explorer上共有的颜色就被称为Web安全色.web安全色可以表现216种颜色.如果颜色不在这216种颜色的范围内,计算机就有可能在显示颜色的时候产生抖动现象.(抖动就是由于操作系统为了尽可能的表现某种颜色,混合两种颜色而产生的.)由于web安全色只使用了00,33,66,99,cc,ff,所以我们可以使用短16进制颜色表示web安全色,0,3,6,9,c,f和长16进制可以使用的颜色数值是等价的.但是现在大多数常用的操作系统显示的颜色数已经远远大于256种,一些手持设备,终端设备等甚至也能表现出数量惊人的颜色.所以web安全色已经成为历史了:).6 . CSS背景背景(background),文字颜色可以使用color属性,但是包含文字的p段落,div层,page页面等的颜色与背景图片可以使用与background等属性.通常使用background-color定义背景颜色,background-image定义背景图片,background-repeat定义背景图片的重复方式,background-position定义背景图片的位置,background-attachment定义背景图片随滚动轴的移动方式.6.1. CSS background-color 属性background-color -- 背景色,定义背景的颜色∙取值: <color> | transparent | inherito<color>: 颜色表示法o transparent: 透明o inherit: 继承∙引用网址:/css/property_background-color/∙初始值: transparent∙继承性: 是∙适用于: 所有元素∙background:背景.color:颜色.背景色与前景色对应,可以定义背景的颜色.示例body{background-color:green;}定义网页的背景使用绿色.6.2. CSS background-image 属性background-image -- 定义背景图片∙取值: <uri> | none | inherito<uri>: URIo none: 无o inherit: 继承∙引用网址:/css/property_background-image/∙初始值: none∙继承性: 否∙适用于: 所有元素∙background:背景.image:图片.示例body{background-image:url('html_table.png');}p{background-image:none;}div{background-image:url('list-orange.png');}定义网页的背景图片为html_table.png,段落p不使用背景图片,div使用list-orange.png.6.3. CSS background-repeat 属性background-repeat -- 定义背景图片的重复方式∙取值: repeat | repeat-x | repeat-y | no-repeat | inherito repeat: 平铺整个页面,左右与上下o repeat-x: 在x轴上平铺,左右o repeat-y: 在y轴上平铺,上下o no-repeat: 图片不重复o inherit: 继承∙引用网址:/css/property_background_repeat/∙初始值: repeat∙继承性: 否∙适用于: 所有元素∙background:背景.repeat:重复.示例body{background-image:url('list-orange.png');background-repeat:no-repeat;}div{background-image:url('list-orange.png');background-repeat:repeat-y;background-position:right;}屏幕左上角显示一个橙色点,div的右侧显示一系列橙色点6.4. CSS background-position 属性background-position -- 定义背景图片的位置∙取值: [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherito水平▪left: 左▪center: 中▪right: 右o垂直▪top: 上▪center: 中▪bottom: 下o垂直与水平的组合▪x-% y-%▪x-pos y-poso inherit: 继承∙引用网址:/css/property_background-position/∙初始值: 0% 0%∙继承性: 否∙适用于: 所有元素∙background:背景.position:位置.示例body{background-image:url('list-orange.png');background-repeat:no-repeat;}p{background-image:url('list-orange.png');background-position:right bottom ;background-repeat:no-repeat;}div{background-image:url('list-orange.png');background-position:50% 20% ;background-repeat:no-repeat;}屏幕左上角显示一个橙色点.p段落的左下角显示一个橙色点.div中间偏上显示一个橙色点.说明background-position属性是通过平面上的x与y坐标定位的,所以通常取两个值.例如:<percentage> <percentage>左上角为0%, 0%. 右下角为100%, 100%.例如58%,56%就是从左上角算起,右移58%,下移56%. <length> <length>6cm 8cm,从左上角算起,右移6cm,下移8cm.下面是一些等式∙top left, left top 等价于 0% 0%.∙top, top center, center top 等价于 50% 0%.∙right top, top right 等价于 100% 0%.∙left, left center, center left 等价于 0% 50%.∙center, center center 等价于 50% 50%.∙right, right center, center right 等价于 100% 50%.∙bottom left, left bottom 等价于 0% 100%.∙bottom, bottom center, center bottom 等价于 50% 100%.∙bottom right, right bottom 等价于 100% 100%.6.5. CSS background-attachment 属性IE6只有body元素支持fixed属性值background-attachment -- 定义背景图片随滚动轴的移动方式∙取值: scroll | fixed | inherito scroll: 随着页面的滚动轴背景图片将移动o fixed: 随着页面的滚动轴背景图片不会移动o inherit: 继承∙引用网址:/css/property_background_attachment/∙初始值: scroll∙继承性: 否∙适用于: 所有元素∙background:背景.attachment:附着.示例body{background-image:url('list-orange.png');background-attachment:fixed;background-repeat:repeat-x;background-position:center center;}屏幕的背景图片为一条橙色线.随着滚动轴移动,橙色线的视觉位置不变.6.6. CSS background 属性background -- 五个背景属性可以全部在此定义∙取值: [<background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>] | inherito[<background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>]: 背景颜色,图像等的一个属性或多个属性o inherit: 继承∙初始值: 根据五个背景属性的默认值∙继承性: 否∙适用于: 所有元素∙引用网址:/css/property_background/说明前面的讲的五个背景属性完全可以使用background属性代替.示例body{background:transparent url('list-orange.png') repeat-x scroll center center; }使用background解决所有问题.body{background:url('list-orange.png') repeat-x scroll center center;}由于背景颜色background-color的默认值为transparent,所以可以省略,这个例子和上面的例子是等价的.body{background:url('list-orange.png') repeat-x center;}由于背景图片随滚动轴的移动方式background-attachment的默认值为scroll,所以可以省略,背景图片的位置background-position中的属性值center center等价于center,这个例子和上面的例子也是等价的.7 . CSS文本CSS文本属性用于定义文字,空格,单词,段落的表现等.通常使用letter-spacing属性控制字母之间的距离,word-spacing属性控制文字间空格的距离,text-decoration属性定义文本是否有下划线,text-transform属性控制英文的大小写,text-align属性定义文本的对齐方式,text-indent属性定义文本首行的缩进,white-space 属性定义文本与文档源代码的关系.7.1. CSS letter-spacing 属性letter-spacing -- 定义文本中字母的间距(中文为文字的间距)∙取值: normal | <length> | inherito normal: 正常(主要是根据用户所使用的浏览器等设备)o<length>: 长度表示法o inherit: 继承∙初始值: normal∙继承性: 是∙适用于: 所有元素∙letter:字母.spacing:间隔.∙引用网址:/css/property_letter_spacing/比较:∙letter-spacing定义了字与字之间的距离.∙word-spacing是控制字与字之间空格的宽度.示例.ls3px{letter-spacing:3px;}.lsn3px{letter-spacing:-3px;}正值为增大距离,负值为缩小距离.说明:∙letter-spacing属性在英文中代表字母与字母之间的距离,在中文中代表字与字之间的距离.7.2. CSS word-spacing 属性word-spacing -- 定义以空格间隔文字的间距(就是空格本身的宽度)∙取值: normal | <length> | inherito normal: 正常o<length>: 长度表示法o inherit: 继承∙初始值: normal∙继承性: 是∙适用于: 所有元素∙word:词.spacing:间隔.∙引用网址:/css/property_word_spacing/示例.ws30{word-spacing:30px;}.wsn30{word-spacing:-10px;}正值为增大距离,负值为缩小距离.比较:∙letter-spacing定义了字与字之间的距离.∙word-spacing是控制字与字之间空格的宽度.说明:∙word-spacing属性是为英文准备的,由于英文都是以空格分开的单词,所以它就代表词与词之间的距离.在中文的句子中只能使用空格隔开每个字才能表现出word-spacing属性.7.3. CSS text-decoration 属性IE6不支持blink属性text-decoration -- 定义文本是否有划线以及划线的方式∙取值:none | [ underline || overline || line-through || blink ] | inherit o none: 定义正常显示的文本o[underline || overline || line-through || blink]: 四个值中的一个或多个▪underline: 定义有下划线的文本▪overline: 定义有上划线的文本▪line-through: 定义直线穿过文本▪blink: 定义闪烁的文本o inherit: 继承∙引用网址:/css/property_text-decoration/∙初始值: none∙继承性: 否∙适用于: 所有元素∙text:文本.decoration:装饰.示例p#underline{text-decoration:underline;}p#overline{text-decoration:overline;}p#line-through{text-decoration:line-through;}p#blink{text-decoration:blink;}p#underover{text-decoration:underline overline;}p#underoverthroughblink{text-decoration:underline overline line-through blink;}说明:∙HTML的u标签定义下划线样式的文字,s标签与strike标签定义了删除线样式的文字,此标签已经被w3c抛弃.7.4. CSS text-transform 属性text-transform -- 定义文本的大小写状态,此属性对中文无意义∙取值:capitalize | uppercase | lowercase | none | inherito capitalize: 首字母大写o uppercase: 大写o lowercase: 小写o none: 正常无变化o inherit: 继承∙初始值: none∙继承性: 是∙适用于: 所有元素∙text:文本.transform:转换.∙引用网址:/css/property_text_transform/示例p#capitalize{text-transform:capitalize;}p#uppercase{text-transform:uppercase;}p#lowercase{text-transform:lowercase;}7.5. CSS text-align 属性text-align -- 定义文本的对齐方式∙取值: left | right | center | justify | inherito left: 左对齐o right: 右对齐o center: 居中o justify: 对齐每行的文字o inherit: 继承∙初始值: 如果是ltr就为left,如果是rtl就为right∙继承性: 是∙适用于: 所有元素∙text:文本.align:排列.∙引用网址:/css/property_text_align/ 示例p#left{text-align:left;}p#right{text-align:right;}p#center{text-align:center;}p#justify{text-align:justify;}7.6. CSS text-indent 属性text-indent -- 定义文本首行的缩进(在首行文字之前插入指定的长度) ∙取值: <length> | <percentage> | inherito<length>: 长度表示法o<percentage>: 百分比表示法o inherit: 继承∙初始值: 0∙继承性: 是∙适用于: 所有元素∙text:文本.indent:缩进.∙引用网址:/css/property_text_indent/。

CSS基础教程

CSS基础教程
<h2><font color="#FF0000" face="黑体">CSS标记4</font></h2> <p>CSS标记的正文内容4</p> </body>
产生的问题:代码冗余 如果要修改元素的样式,也要一个个的改,修改工作量大
没有了代码冗余 h2{ font-family:黑体; color:red; } <h2>CSS标记1</h2> <p>CSS标记的正文内容1</p> <h2>CSS标记2</h2> <p>CSS标记的正文内容2</p> <h2>CSS标记3</font></h2> <p>CSS标记的正文内容3</p> <h2>CSS标记4</font></h2> <p>CSS标记的正文内容4</p> 如果要修改,只需修改选 择器中的内容就可以了
CSS样式表由一系列样式规则组成,浏览器将
这些规则应用到相应的元素上,下面是一条样 式规则。 h1{ color: red; font-size: 25px; 声明 声明 }
h1 选择器 { color: red; 属性 值 font-size: 25px; 属性 值 }
一条CSS样式规则由选择器(selector)和声明
DW对CSS的建立和编辑有很好的支持,对CSS
的所有操作都集中在“CSS样式”面板中,一 般我们首先要点“新建CSS规则” 来新建样式, 这时会弹出如图所示的对话框:

初级入门CSS的基本语法知识分享

初级入门CSS的基本语法知识分享

初级入门CSS的基本语法知识分享
1. CSS的语法:
CSS的定义是由三个部分构成:
挑选符(selector),属性(properties)和属性的取值(value)。

语法: selector {property: value} (挑选符 {属性:值})
解释:
&middot;挑选符是可以是多种形式,普通是你要定义样式的HTML标志,例如BODY、P、TABLE,你可以通过此办法定义它的属性和值,属性和值要用冒号隔开:例子:body {color: black},此例的效果是使页面中的文字为黑色。

&middot;假如属性的值是多个单词组成,必需在值上加引号,比如字体的名称常常是几个单词的组合:
例子:p {font-family: &quot;sans serif&quot;} (定义段落字体为sans serif)
&middot; 假如需要对一个挑选符指定多个属性时,我们用法分号将全部的属性和值分开:
例子:p {text-align: center; color: red} (段落居中罗列;并且段落中的文字为红色)
第1页共8页。

CSS 基 础 教 程

CSS 基 础 教 程

CSS 基础教程2008-5-7一, CSS 概念>CSS stands for Cascading Style Sheets >Styles define how to display HTML elements >Styles are normally stored in Style Sheets >Styles were added to HTML 4.0 to solve a problem >External Style Sheets can save you a lot of work >External Style Sheets are stored in CSS files以往,要定义字的颜色,必须在HTML文件中的字所在位置加上格式限定,如果网页中有十二行标题,都需要设定为红色,就只好每行标题处都作设定. 例如: <font color= "red">This is a title.</font>样式表Style Sheets样式表Style Sheets, 就是指对网页特定的内容一次过添加格式设置. 用了样式表,就不必在每行需要格式设置的字的前后加上标签了. 你可以设定好一个样式表,把它放在HTML 文件的合适位置,这个样式表就会对整个文件要格式的相应部分起作用.例如: td{ font- color: # FF0000} 该网页中所有带<td>标签的文字,即标题字,都会变成红色了,不必逐行格式设置. 而当你想把红色改为黑色时,就直接把# FF0000改为# 000000,一次过就把所有的标题改了颜色. W3C从HTML3.2版本开始, 样式表就开始推广使用了.什么是CSS层叠样式表?CSS (Cascading Style Sheets),就是"层叠样式表".正如其名,就是将多种的格式设置象洋葱的皮一样, 一层一层地加到网页上面去, 每加一层, 整个页面就象涂上了一层新的油漆, 获得了新的格式设置.CSS的应用是网页编辑的一大革命.通过设置CSS,我们可以随意地控制网页中字体的大小,颜色等,便于统一网站的整体风格; 可以方便地为网页中的各个元素设置背景颜色和图片并进行精确的定位控制; 可以为网页中的元素设置各种滤镜,从而产生诸如阴影,辉光,模糊等只有在图像处理软件中才能实现的效果; 可以与脚本语言相结合,在网页中实现很多动态滤镜效果.CSS是网站设计必不可少的一个重要组成部分.CSS基本特性:分组,继承,层叠分组: 通常我们需要同时改变几种样式的属性, CSS允许声明通过使用分号分隔其内容的方式来进行分组. 例如:body,td,p {color:#000000;textalign:left;}CSS基本特性:分组,继承,层叠继承: 通过继承,CSS设置可以被应用到多个标识中. 绝大部分的CSS声明可以通过封闭CSS选择器中的HTML标识来被继承. 例如通过一个CSS设置来改变整个页面的字体: body { font-family: "Arial"; font-size: 14px; line-height: 18px; color: #000000} <body>标识----页面上所有元素的父标识.CSS基本特性:分组,继承,层叠层叠: Cascading描述了覆盖通用样式的局部样式的能力.在相同的方式中,一个普遍地应用到某一块文本上的CSS规则可以被其他应用到相同文本中某个更为特殊的部分的规则所覆盖.二,样式表语法HTML 语言由标志和属性构成,CSS 也是如此. 样式表基本语法:选择器{属性1:值;属性2:值;……}h3 {color: red; text-align: left; font-size: 8pt}CSS如何起作用?在HTML 页面内直接引用样式表的方法.<html> <head> <title>网页标题</title> <style>CSS样式表</style> </head> <body> 网页的内容HTML标签或类名称与上面的CSS呼应</body> </html>三,样式表的放置样式表放在不同的地方,产生作用的范围也不同.概括起来有四种方法.其中常用前三种. 方法一:内部(或嵌入式)CSS 样式表方法二:外部导入CSS 样式表方法三:外部链接CSS 样式表方法四:行间写入式CSS 样式表.方法一:内部(或嵌入式)CSS 样式表直接把CSS代码粘贴到html中. 比如我们把下面一段代码粘贴入HTML代码的< head ></ head >之间就可以了.<head> <style type="text/css"> <!-p { font-family: " 宋体" ; font-size: 12px; lineheight: 10pt; color: #000000} td { font-family: " 宋体" ; font-size: 12px; color: #000000} a:link { color: #0000FF; text-decoration: none} a:visited { color: #666666; text-decoration: none} a:active {color:green;text-decoration: none;} a:hover { color: #ff0000;backgroundcolor:#FF9900;text-decoration: underline } --> </style> </head>方法二:外部导入CSS 样式表就是将外部的*.css文件导入到所需的网页面HTML文件上, 放置于< head><style>…</style></head> 之间.好处是你可以把所有的样式都放在一起,导入的样式表成为总样式表的一部分. 但这种外部导入CSS 样式表也存在局限性,只有Internet Explorer浏览器才支持, 在Netscape Navigator 浏览器下不产生效果.外部导入CSS 样式表HTML代码导入<head> <style type="text/css"> <!-@import url(/mystyle.css); h1 {color:blue} --> </style> </head>方法三:外部链接CSS样式表链接最常用的方法就是先编写一个*.css的文件(并非HTML文件),然后将这个css文件链接到所需的页面HTML文件上. 可以把网站上所有页面都链接到同一个css 文件,一旦这个css 文件修改,那么所有的页面风格也随之改变.外部链接CSS样式表HTML代码:<head> <link rel="stylesheet" type="text/css" href="/mystyle.css" ></head>mystyle.css的内容body { line-height: 130pt} H1,H2,H3,H4,H5,H6 { color: red; textdecoration: underline; font-family: " 黑体" } b { font-style: italic; color: #FF3333; textdecoration: underline }以上方法一,二,三都可在Dreamweaver MX 2004中找到相应设定好的应用方式. 方法一:内部(或嵌入式)CSS 样式表方法二:外部导入CSS 样式表方法三:外部链接CSS 样式表方法四:行间写入式CSS 样式表就是把样式写入HTML代码需要格式化的所在行的位置.这种方法已很少使用,只是在特定需要定义的某行中才应用上.在Dreamweaver MX 2004 中已没有与之相应设定好的应用方式,若要使用这方法,只有手动写代码了. 行间写入式CSS 样式表可放置于以下二地方: <span>...</span>标签之间行间写入式CSS 样式表可放置于以下二地方:<span>...</span>标签之间<span style="background:yellow">World Enterprises</span> 现存的HTML标签内部< h1 style="color:blue;font-size:30pt">Join club!</h1> <ul style="font-family:verdana"> <li>Events <li>Meetings </ul>the四,创建CLASS以上所介绍的样式表规则,我们发现在一个HTML页中,每种HTML标志只能为其定义一种风格,然而我们有时候会碰到其他一些情况,比如:同一个HTML标志需要呈现不同的风格;有若干个不同的HTML标志采用相同的样式规则. 样式表提供了解决方法,创建类(CLASS)可以创建同一个HTML标志的多种风格.CLASS其语法为: 标签.类名{属性:值;属性:值;……属性:值} 引用方法是: < 标签CLASS="类名"> < html> < head> < title>This is a sample< /title> < style type="text/css"> < !-- p.first { text-indent: 0.5in} p.second { textindent: 1.0in} --> < /style> < /head> < body bgcolor="#FFFFFF"> …… < p class="first">这个段落将缩进0.5in< /p> < p class="second">这个段落将比上面缩进一倍距离< /p> …… < /body> < /html>此外,可以直接定义CLASS,应用于HTML页面中的各个标记.其语法只是比上面的少了一个标志: .类名{标签属性:值;标签属性:值;……标签属性:值} < style type="text/css"> < !-- .main01 { font-size: 10pt; color: blue} --> < /style> 该".main01"类可用于任何HTML标签该CLASS规定了字符的大小和颜色,当HTML文档中任何地方,无论是段落< p>,表格< table>, 需要其字体大小为10pt颜色为红色时,就可以引用这个CLASS.引用的方法和上面一样: < HTML标签CLASS="类名"> 例如要设置某单元格中的字符大小为main10所定义的风格,则可写为: < td class="main01"> 设置某一段落字符风格为main10,可写为: < p class="main01"> 我们可以在同一HTML文档中多次引用这个类,引用该类的地方都将呈现同一种风格.ID#id名{标签属性:值;标签属性:值;……标签属性:值} < style type="text/css"> < !-#001 { font-size: 10pt; color: red} #002 { font-size: 12pt; color: blue} --> < /style> 引用的方法也相同:< 标签ID="ID名">五,边框属性1,边距属性2,填充属性3,边界属性4,尺寸属性5,浮动和清除属性五,边框属性--1,边距属性左边距(margin-left) 右边距(margin-right) 上边距(margin-top) 下边距(margin-bottom) 边距(margin) 边距属性定义HTML页面中方框四边和其他元素之其他元素间的空白距离,每一个margin-side属性只影响到一条边,而margin则提供了一个同时设置四个边距的机会. 五,边框属性--2,填充属性左填充(padding-left) 右填充(padding-right) 上填充(padding-top) 下填充(padding-bottom) 填充(padding) 填充属性设置边框和内部元素的距离.它和内部元素边距属性十分相似,每个padding-side定义一个边框距离,padding则同时定义四个距离.五,边框属性--3,边界属性上边界宽(border-top-width) 右边界宽(border-right-width) 下边界宽(border-bottom-width) 左边界宽(border-left-width) 边界宽(border-width 这几个属性定义边界宽度,用thin, medium和thick分别表示细,中等和粗,或者指定具体的数值来定义边界的宽度.五,边框属性--3,边界属性边界颜色(border-color) 这个属性定义边界的颜色,可以用16种颜色名或RGB值来设置.如果指定一种颜色,则表示四个边框是一种颜色,指定两种颜色,则定义顺序为上下,左右;指定三种颜色,顺序为上,左右,下;指定四种颜色,顺序则为上,右,下, 左.16种颜色名分别为:aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow.RGB值则应表示为#RRGGBB或r%,g%,b%.五,边框属性--3,边界属性边界样式(border-style) 该属性用以定义边框的风格呈现式样.共有九种. none - 不显示边框,为缺省值dotted - 点线dashed —虚线solid - 实线double - 双线groove -凹线ridge - 凸线inset - 使整个方框凸起outset - 使整个方框凹陷上边界(border-top) 右边界(border-right) 下边界(border-bottom) 左边界(border-left)五,边框属性--3,边界属性边界(border) 这几个是简写属性,它集合了上面几种属性的特点,可使用其给边框一次性定义宽度,式样和颜色.各属性值之间用空格隔开.五,边框属性--4,尺寸属性定义方框的宽度width和高度height. 例:DIV.sample {width: 300px; height: 200px }五,边框属性--5,浮动和清除属性浮动属性是指某一对象在母体元素内的浮动位置,清除属性和浮动属性一起使用,则表示同一清除属性母体内的其他对象可以流到浮动对象的旁边. 例: .float1 { float: left; clear: right } 假如这个样式定义在表格单元中的某个对象,则该对象将浮动在单元中的左边,而同一单元格中的其他对象在它右边的周围部分.六,字体属性字体属性共分五种: 字体家族(font-family), 字体风格(font-style), 字体变体(font-variant), 字体黑度(font-weight), 字体尺寸(font-size), 此外font属性是一个总体属性,可一一指定以上各种属性和属性值.1,字体家族(font-family)通过font-family指定字体类型,其语法为: 标记{font-family: 字体类型,字体类型,字体类型}例:p {font-family: "Times New Roman", arial, serif } 假如字体类型之间有空格,就象Times New Roman,必须用引号将之括起,中文字体也须用括号括起,列出多种类型,以防浏览用户无前面的字体类型时,可以用后一种字体类型将之取代.2,字体风格(font-style)属性值:normal(普通),默认值italic(斜体), oblique(倾斜) 例:h1 {font-style: italic}3,字体变体(font-variant)属性值:normal(普通)和small-caps(小型大写字母),缺省值为normal. 字体变体属性是让字体以小型大定方式来显示.小型大写方式看起来是一般大写字母的75%-80%左右. 该变体在某些需要特殊表现的标题中比较有用.例: H1 {font-variant: small-caps}4,字体加粗(font-weight)属性值:normal, bold, lighter, bolder,以及数值100-900. 该属性用以指定字体粗细的显示,并不是所有字体都可以显示这些指定的加粗程度,因此有些情况下这些指定值会被替代,例如100到300被lighter替代,600到900则替换bolder,反之亦然.例: h1 < font-weight: lighter> p < font-weight: 800>5,字体尺寸(font-size)字体尺寸可设置绝对尺寸,相对尺寸,长度,百分比. 绝对尺寸分为xx-small, x-small, small, medium, large, xlarge, xx-large七种,它们以各种字体的medium尺寸成比例缩放, 每一级1.5倍. 相对尺寸有larger和smaller两种,根据字体原来的大小来决定缩放以后的大小. 长度是以pt, points, cm, mm, inch等度量单位用具体数值来指定字体的尺寸大小. 百分比是把字体设置成原来尺寸的百分比值,可以任意指定数值. 例如: h1 {font-size: 150%} td {font-size: 10pt} p {font-size: smaller}6,字体(font)该属性使你可以把上述字体的各种属性合并到一行代码中指定,也即提供了一个实现字体属性的快捷方式,各种属性值之间用空格隔开. 例如: td {font: italic bold 12pt "方正楷体简体 ","宋体"}七,文本属性1,文本对齐text-align 属性值:left(左), right(右), center(居中), justify(两端对齐). 例:h1 {text-align: center}2,文本缩进text-indent 该属性有效的控制了文本段落第一行的缩进,其值可以指定,是长度或段落宽度的百分比. 例: p {text-indent: 1.0 in}3,行高 line-height 该属性设置行与行之间的间距,其值可以为数值,长度或百分比,百分比以行高为基础. 例: body {line-height: 120%}4,字间距letter-spacing 字间距设置字与字之间的距离,同样可以用数值,长度或百分比来指定,百分比以字符大小为基础.例: body {letter-spacing: 0.5em} 顺便提一下,文本属性中还有一个单词间距(word-spacing),设置每个单词之间的距离,对于中文页面来讲,可能很少用到.5,文本装饰 text-decoration 属性值:underline(下划线), overline(底线), line-through(线穿过), blink(闪烁). 例: h3 {text-decoration: underline}6,垂直对齐 vertical-align 属性值:baseline(基准线), super(上标), sub(下标), top(顶部), text-top(文本顶部), middle(中), bottom(底部), text-bottom(文本底部)和百分比. 例:< p>平方值:3< font style="verticalalign:super">2< /font>< /p>7,文本变换text-transform 属性值:capitalize(首字母大写), uppercase(大写), lowercase(小写) none(无)缺省值例: p {text-transform: capitalize} 八,颜色与背景属性1,颜色属性:color 属性值:16种颜色名, 数值(#RRGGBB或是r%,g%,b%). 在< font>,< p>,< body>,< table>及其单元元素,标题等对象都可以用到color属性. 例: < style type="text/css"> a { color: green} a:hover { color: red} < /style>2,背景属性 background-color background-image background-repeat属性值:no-repeat(无重复),缺省值 repeat(重复), repeat-x(x方向重复), repeat-y(y方向重复), 指定背景图像的显示方式.该属性需与backgroundimage和background-position组合使用.background-attachment 属性值:scroll 随对象一起滚动,缺省值 fixed 固定该属性指定对象的背景图像是否与对象一起滚动,或是固定在页面上的某一个位置.这个属性与background-image组合使用.background-position 属性值: 垂直位置vertical,指定top, center, bottom 和具体数值,百分比; 水平位置horizontal,指定left, center, right和具体数值,百分比.定义背景图像的绝对或相对位置显示.Background 这是一个简写属性,可以把上述所有背景属性归纳到一行代码中定义. 这里是一个较完整的例子: body { background-image: url(abcsite/images/002.gif); background-repeat: no-repeat; background-position: 20px 50px; background-attachment: fixed} 用background属性简写为: body { background: url(abcsite /images/002.gif) no-repeat 20px 50px fixed}九,分类属性分类属性控制了浏览器的显示方式, 我们知道在HTML语言中,对于空格和换行的处理是缺陷所在,分类属性的到来使这些特性的控制成为可能. 分类属性包括显示属性,空白属性和列表属性.1,显示属性display 通过显示属性控制HTML页面中被定义对象在浏览器中的显示方法.这个属性有四个值: 块(block)――在该对象前后自动增加分行符例:text< img style="display: block" scr="photo.jpg" >text 图像前后的文字将与图像分行显示.内联(inline)――这个对象前后的元素与之在一行显示这个属性值正好相反,当需要对象与前一元素强制性在同一行时使用该值. 列表项(list-item)――加一个列表项标记, 其余同块该属性值与< LI>,< DD>,< OL>,< UL>等列表标记一起使用. 无(none)--对象不显示该属性值在某种情况下很有用,比如事先隐藏正确答案,直到经过某种操作以后才显示.2,空白属性 white space 制表符,空格和换行泛称空白, HTML页面显示时,通常根据浏览器窗口的大小自动折行,多余的空白符忽略成一个空格.< PRE>标记可以控制文本在浏览器中的显示,但该标记的限制性很大,只对一些非比例字体才有效,并且每次用到这个命令框起所有文本也相当麻烦,空白属性提供了这种方便.空白属性有三个值: 普通(normal)――该属性值保持浏览器自动换行的特性. 保持原样(pre)――这个值与使用< PRE>标记一样,告诉浏览器按照文本输入原样显示,并不自动折行. 不折行(nowrap)――这个值把文本中的回车, 换行和多个空格都显示成一个空格,换行只由< BR>标记来控制.Type3,列表属性 list-styleImageposition 1)列表-样式-类型 list-style-type该属性用以改变HTML中列表项的外形显示.它有下列值:disc(圆盘), circle(圆圈), square(正方), decimal(小数点), lower-roman(小写罗马数字), upper-roman(大写罗马数字).2)列表-样式-图像 list-style-image 这个属性用来指定图像作为列表标记, 缺省值为无,当它被设置时,list-styletype属性不显示,可使用绝对或相对位置指定图像. 例: < ul style=list-styleimage:url(/abc.gif)">3)列表-样式-位置 list-style-position 该属性决定了列表项标记放在列表项的什么位置, 值: inside(内部)列表下一行不缩进显示 outside(外部)缺省值,列表下一行缩进显示显示效果如下: 内部内部显示外部外部显示4)列表-样式 list-style 该属性提供了上述列表属性的快捷方法,其书写格式为: 元素 {list-style:[type] [position] [url] } 括号表示任选一种.THE END THANK YOU!。

300多行css代码搞定微信8.0的炸裂特效

300多行css代码搞定微信8.0的炸裂特效

300多⾏css代码搞定微信8.0的炸裂特效微信 8.0 更新的⼀⼤特⾊就是⽀持动画表情,如果发送的消息只有⼀个内置的表情图标,这个表情会有⼀段简单的动画,⼀些特殊的表情还有全屏特效,例如烟花表情有全屏放烟花的特效,炸弹表情有爆炸动画并且消息和头像也会随之震动。

本着前端⼯程师的职业精神,我就想看看能不能实现⼀个类似的特效。

折腾许久之后,做出来的效果如下:项⽬的核⼼是使⽤到了 lottie 动画库。

lottie 是 Airbnb 出品的、全平台(Web、Android、IOS、React Native)的动画库,它的特点在于能够直接播放使⽤ Adobe After Effects 制作的动画。

设计师在 After Effects 中,利⽤ Bodymovin 插件把动画导出为 JSON 格式之后,开发者就能够通过相应平台的 SDK 进⾏播放。

(项⽬地址及⽰例演⽰见⽂末)在做完这个项⽬之后我感觉到⾃⼰的前端储备⼜丰富了⼀层,在以后应对复杂特效时⼜有了新的思路,如果你也想进⼀步提升前端开发技能,可以跟着这篇⽂章实践⼀下。

本篇⽂章除了使⽤ Lottie 库之外,全部都是使⽤原⽣ HTML/CSS/JavaScript 实现的,这样⽆论你是 React、Vue 还是其它⼯程师,都可以快速掌握。

编写界⾯本来想跳过 HTML/CSS 部分,但是想到 CSS 可能是⼤部分⼈的弱项,所以我决定还是把实现界⾯的思路写⼀下,想看核⼼部分的可以直接跳到:⼆、发送普通消息部分。

1. HTML 部分⾸先看 HTML 部分,从效果图来看:上边有⼀个标题栏,显⽰与 XXX 聊天。

中间是聊天信息⾯板,包含着双⽅发送的消息,每条消息由发送者头像和消息内容组成,我发送的在右侧,对⽅发送的在左侧。

下⽅是底部信息,有表情选择按钮、编辑消息⽂本框和发送按钮。

那么根据这个结构编写的 HTML 代码如下所⽰:<main><div class="chat"><div class="titleBar">与 XXX 聊天</div><div class="panel"><div class="message mine"><img src="./me.png" alt="" /><p><span>你好</span></p></div><div class="message yours"><img class="avatar" src="./you.png" alt="" /><p><span>Hi</span></p></div><!-- 省略其它消息 --></div><footer><button class="chooseSticker"><img src="./emoji.svg" alt="" /><div class="stickers"></div></button><inputclass="messageInput"type="text"name=""id=""placeholder="请输⼊聊天信息"/><button class="send">发送</button></footer></div></main>各个元素所对应的界⾯部分为:<main />元素是⼀个整体的容器,⽤于把聊天窗⼝居中对齐<div class="chat">是聊天应⽤的容器,⽤于布局标题栏、聊天⾯板和底部发送框。

CSS入门教程

CSS入门教程

CSS入门教程CSS入门教程从本篇开始讲述如何用css实现网页的布局,即如何用css控制网页内各个元素的显示位置。

如果你是一个初学者,很可能觉得做一个网页的第一步就是布局。

其实不然,css网页的设计过程可以参考分为以下几步:平面设计—>页面切割—>布局—>细节控制平面设计是一个网页的精髓所在,读者直接面对的界面,在本站以后的文章中会涉及此方面内容。

也许你会认为在脑子里形成一个网站的大概印象就可以了,那么这种想法直接就给你贴上业余的标签。

推荐工具:Photoshop;页面切割其实可以划分到布局里,因为你的页面切割方式直接影响了布局方式,也体现了你是属于表格布局阵营还是css布局阵营。

它是布局(前)的关键步骤。

将在本章重点讲述。

推荐工具:Photoshop;如果把布局说简单点,就先得把你的网页简单化。

简单到把你的网站分为header,content,sidebar,footer四个部分。

细节控制,将header,content,sidebar,footer的表现细节化。

本章将针对页面切割讲述一些Jorux的私人观点与技术。

首先,我们要有一个被切割的对象,这里以的原始photoshop平面设计图为例。

如下(Fig.01):点击查看大图如果使用表格布局的话,你可能就想到在photoshop里把页面切割为无数个固定宽高的格子。

但用css布局的话,你首先要明确的以下几点是:你是要横着切,还是要竖着切;第一次切割,只需要把网页中的背景图片切割出来(因为背景图片是在css里声明的);切的的图片要尽量小,然后让css去做更多的事情;设计比较复杂的部分,可以不分割,从而减少css编码的难度;读者应该根据自己的能力,找出哪些效果css可以轻松实现,而哪些效果用图片更加简单而且size不大,仔细在3.4之间权衡利弊;现在我们来看Fig.01, 最靠上的部分是个黑色的尺子,遮住了“Jorux记事本”,更遭的是它居然还有黑色的投影。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

一.CSS入门1.CSS应用到(X)HTML的方法1)内联样式内联样式(inline style)通过Style属性应用于文档的特定标记。

(X)HTML 中的样式值通过name:value或property:value的形式声明。

Eg. <p style=”color: #F00”>优点:对于测试简单的CSS示例有点用。

不足:应该使(X)HTML文件中的表现信息尽可能少,将内联样式散布在(X)HTML代码中会使页面变得非常复杂。

2)内嵌样式内嵌样式(embedded style)只影响某个特定的(X)HTML模板,但是,与内联样式所不同的是,它将所有的样式定义放在一起,作为元素的一部分,位于文档的头部。

Eg. 在title元素之后,将上上下代码:<style type=”text/css”>p {color: #F00;}</style>优点:这种方式比内联样式好,它允许一次修改一个元素的所有实例而不是使用重复的内联样式。

不足:内嵌样式将表示部分加入(X)HTML文档,使得(X)HTML文档变大。

另外,这些样式需要随每个网页的加载而重复下载。

3)外部样式将CSS样式代码放入外部的CSS文件中,需要用到该CSS文件的样式的(X)HTML将该文件引入。

优点:当你考虑站点的CSS时,所需考虑的仅仅是一个外部样式表,而不再是标记,这就意味着整个网站的样式改变将仅仅需要修改某个或某几个样式表。

另外,一旦浏览器访问过该样式表,它将被缓存而无需重新下载。

不足:由于某种原因而无法获取外部CSS文件时,任何(X)HTML页面将都没有样式,但这种情况很少发生。

2.导入和组合样式通过@import规则来包括表现信息是Web标准灵活性的一个重要体现。

@import规则不是为了在(X)HTML文档中应用而设计的,但它是通过主外部样式表导入一个或多个样式表的方法。

并且通过(X)HTML导入一个外部样式表,可以使得老版本的浏览器(eg. Netscape 4.x或IE4)忽略某些特殊的样式。

Eg. 在(X)HTML文档那个的<title>元素后,通过代码<styletype=”text/css”>@import url(external.css);</style>来引入CSS文件。

3.打印样式表有时候为了不在打印时浪费太多的墨,在打印时存在更换样式的需要,可以通过如下方式做到。

Eg.<link rel=”stylesheet” media=”screen” type=”text/css”href=”screen.css” /><link rel=”stylesheet” media=”print” type=”text/css”href=”print.css” />如果一个样式表的media属性为screen,那么在页面打印时,将不会使用该样式,但是,如果没有明确说明媒体类型,则样式表显示时不使用这些样式。

注意:目前IE支持的media的声明只有all、screen、print和其他的一些声明,如projection(针对投影仪)、aural(针对语言合成器)和braille(针对盲人),这些都是在针对特殊的设备或者面向特殊的终端用户时使用的。

4.注释Eg1. /* Default styling for paragraphs */p {color: #F00;font-size: 12px;}二.CSS核心概念1.ID与类1)ID每个ID在一个页面中只能使用一次,作为某个元素的唯一标识符。

一般情况下,ID只用于页面的唯一元素,如页眉、主导航栏、页角或用户界面的其他关键部分。

Eg. <p id=”highlight”>这个段落为红色文本</p><p id=”default”>这个段落为灰色文本</p>相应的CSS通过#来标识某规则是唯一ID,#和ID名一起作为规则的起始,后面跟着属性的声明。

如下所示:/* 定义highlight文本样式*/# highlight {color: #F00;}/* 定义default文本样式*/#default {color: #333;}如何将ID与选择器结合呢?下面来看一个例子。

基本的CSS将所有的h2标题设计为深灰色,并且字号为16像素,代码如下:/* 基本的标题样式*/h2 {color: #333;font-size: 16px;}这个样式适用于大多数<h2>标题,但是,如果页面的主<h2>需要不通的颜色来突出强调时,就需要定义新的规则。

在规则中,选择器定义成element#name的形式。

/* 调整作为标题的h2的样式*/h2#title {color: #F00;}<h2 id=”title”>文章的标题</h2>但是,必须牢记title是唯一的,它不能在模板的其他地方再次使用。

使用ID的场合如下:ID应该为每个页面唯一存在并仅使用一次的元素保留,如页眉、边栏、主导航栏或者页脚等。

避免使用ID的场合如下:当有一个以上的地方需要使用同一CSS规则时,不应该使用ID,也不要在将来可能在多个地方使用到的规则中使用ID。

2)类类可以在页面中无限次地使用,因此它是应用CSS的非常灵活的方法。

下面来看个例子:<p id=”highlight”>这个段落为红色文本</p><p id=”default”>这个段落为灰色文本</p>相应的CSS通过句点(.)来标识一个规则是可重用的类。

句点和类名一起作为新规则的开始,接着便是属性说明,如下例所示:/* 定义highlight 类*/. highlight {color: #F00;}/* 定义default 类*/.default {color: #333;}下面来看一个稍微复杂点的例子,该类结合多个类的ID,如下所示:<ul id=”drinks”><li class=”alcohol”>Beer</li><li class=”alcohol”>Spirits</li><li class=”mixer”>Cola</li><li class=”mixer”>Lemonade</li><li class=”hot”>Tea</li><li class=”hot”>Coffee</li></ul>其CSS定义如下:/* Drinks list styling*/ul#drinks {color: #F00;}/* Define alcohol color*/.alcohol {color: #333;}/* Define mixer color*/.mixer {color: #999;}/* Define hot drinks color*/.hot {color: #CCC;}应用类的场合如下:类是一种应用CSS规则的灵活方法,可以在页面中重复使用。

目前我们仅仅使用类来控制属于一个组的元素,从而改善ID的行为。

避免使用类的场合:在页面的主结构元素(如页眉、主导航栏)中不推荐使用,因为这样做将降低设计的灵活性,并且不得不通过大量修改或添加另外的标签来实现用户定制。

2.使用层叠当有多个样式表时,有一个层次来定义将这些样式表应用到(X)HTML的顺序。

同时,针对不同的应用方法,同样存在一个顺序,这个顺序就是“层叠”。

对于应用CSS的不同方法——内联、内嵌、外部和导入,其层叠顺序描述如下:浏览器首先执行内联规则,然后执行所有的内嵌规则,最后再查找外部文件来完全理解所创建的CSS。

另外一种层叠的方法是使用多个外部样式表,eg.<link rel=”stylesheet” media=”screen” type=”text/css”href=”one.css” /><link rel=”stylesheet” media=”screen” type=”text/css”href=”two.css” /><link rel=”stylesheet” media=”screen” type=”text/css”href=”three.css” />浏览器认为最后一个样式表最为重要,并且优先执行它所包含的所有规则。

层次性也体现在导入样式表上。

它与样式表给定的顺序相关,eg:@import url(“default.css”)@import url(“layout.css”)@import url(“navigation.css”)@import url(“forms.css”)在该例中,forms.css在层次上是最高,default.css显然最低。

注意:如果一个样式表是通过另外一个模块化样式表使用@import导入,那么在层次上,它将自动处于较低层,简单地说,一个样式表总是比调用它的样式表级别更低。

处于层叠层次最底层的样式表是浏览器自己的默认样式表。

3.分组另一个创建具有良好组织结构CSS所需遵守的关键原则是分组。

Eg:h1, h2, h3 {font-family: Helvetica, Arial, sans-serif;line-height: 140%;color: #333;}如果想让这些标题中的某一个有点小差别的话,可用如下方法:h1 {font-style: itatic;}4.继承继承(inheritance)主要描述(X)HTML元素从它的父元素继承样式属性的情况。

如果没有为子元素定义特定的CSS,那么在某些情况下,子元素将继承赋予父元素的特定CSS值。

这些地方CSS是层叠的,因此(X)HTML可以继承。

Eg. /* Top-level heading*/h1 {color: #333;}下面来看一段对应的(X)HTML代码:<h1>Hello, <em>阿蜜果</em></h1>若没有给<em>元素定义相应的CSS规则,那么它将从<h1>元素中继承样式。

在正规的CSS设计中,主样式表都以<body>元素声明开始。

<body>元素不仅仅是结构良好的(X)HTML文件所必须的,它同时还是模板中所有可视元素的父元素。

因此,每个元素都可以从它继承相关信息。

Eg:body {margin: 10px;font-family: Helvetica, Arial, sans-serif;background: #CCC;color: #000;}如果没有特殊给定,CSS中的其他规则都将继承这些值。

相关文档
最新文档