仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 830|回复: 8
打印 上一主题 下一主题

[DIV+CSS] 来讲讲:CSS进门教程之CSS的语法

[复制链接]
灵魂腐蚀 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:21:22 | 只看该作者 回帖奖励 |正序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
Table布局灵活性不大,你只能遵循tabletrtd的格式。而div你可以divulli也可以olli还可以ulli……但标准语法最好有序的写。
<p/>1.基础语法
CSS的界说是由三个部分组成:选择符(selector),属性(properties)和属性的取值(value)。
基础格局以下:
selector{property:value}
(选择符{属性:值})
选择符是能够是多种情势,通常为你要界说款式的HTML标志,比方BODY、P、TABLE……,你能够经由过程此办法界说它的属性和值,属性和值要用冒号离隔:
body{color:black}
选择符body是指页面主体部分,color是把持笔墨色彩的属性,black是色彩的值,此例的效果是使页面中的笔墨为玄色。
假如属性的值是多个单词构成,必需在值上加引号,好比字体的称号常常是几个单词的组合:
p{font-family:"sansserif"}
(界说段落字体为sansserif)
假如必要对一个选择符指定多个属性时,我们利用分号将一切的属性和值分隔:
p{text-align:center;color:red}
(段落居中分列;而且段落中的笔墨为白色)
为了使你界说的款式表便利浏览,你能够接纳分行的誊写格局:
p
{
text-align:center;
color:black;
font-family:arial
}
(段落分列居中,段落中笔墨为玄色,字体是arial)
2.选择符组
你能够把不异属性和值的选择符组合起来誊写,用逗号将选择符分隔,如许能够削减款式反复界说:
h1,h2,h3,h4,h5,h6{color:green}
(这个组里包含一切的题目元素,每一个题目元素的笔墨都为绿色)
p,table{font-size:9pt}
(段落和表格里的笔墨尺寸为9号字)
效果完整等效于:
p{font-size:9pt}
table{font-size:9pt}
3.类选择符
用类选择符你可以把不异的元素分类界说分歧的款式,界说类选择符时,在自定类的称号后面加一个点号。假设你想要两个分歧的段落,一个段落向右对齐,一个段落居中,你能够先界说两个类:
p.right{text-align:right}
p.center{text-align:center}
然后用不在分歧的段落里,只需在HTML标志里到场你界说的class参数:
<pstyle="TEXT-INDENT:2em"/><pclass="right"/>这个段落向右对齐的
<pstyle="TEXT-INDENT:2em"/><p/><pstyle="TEXT-INDENT:2em"/><pclass="center"/>这个段落是居中分列的
<pstyle="TEXT-INDENT:2em"/><p/>注重:类的称号能够是恣意英文单词或以英文开首与数字的组合,一样平常以其功效和效果扼要定名。
类选择符另有一种用法,在选择符中省略HTML标志名,如许能够把几个分歧的元素界说成不异的款式:
.center{text-align:center}
(界说.center的类选择符为笔墨居中分列)
如许的类能够被使用就任何元素上。上面我们使h1元素(题目1)和p元素(段落)都回为“center”类,这使两个元素的款式都跟从“.center”这个类选择符:
<pstyle="TEXT-INDENT:2em"/><p/>这个题目是居中分列的
<pstyle="TEXT-INDENT:2em"/><pstyle="TEXT-INDENT:2em"/><pclass="center"/>这个段落也是居中分列的
<pstyle="TEXT-INDENT:2em"/>注重:这类省略HTML标志的类选择符是我们经后最经常使用的CSS办法,利用这类办法,我们能够很便利的在恣意元素上套用事后界说好的类款式。




当遇到几个选择器共享一个声明的时候,可以分组放在一起,每个选择器必须以逗号隔开。例:h1,h2,h3,h4{colorred;}选择器分组时要将每个选择器路径写全,分组结尾不能有逗号。
老尸 该用户已被删除
9#
发表于 2015-3-22 21:10:59 | 只看该作者
经过两天的学习,总算对Dreamweaver有进一步的了解了,心中不免有些激动。今天和其他几位老师交流了一下,感觉受益匪浅.
若天明 该用户已被删除
8#
发表于 2015-3-16 07:41:09 | 只看该作者
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。
乐观 该用户已被删除
7#
发表于 2015-3-8 16:28:35 | 只看该作者
还是在Dreamweaver所见即所得添加链接是,可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。
小女巫 该用户已被删除
6#
发表于 2015-2-26 17:48:27 | 只看该作者
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH,专业网页图像设计软件FIREWORKS,并称为“网页三剑客”。
5#
发表于 2015-2-9 01:28:59 | 只看该作者
在刚开始接触网页的第一堂课上,听说网页制作会是一门很无聊并且很难听懂的过程,而事实却印证了这样一个事实。
不帅 该用户已被删除
地板
发表于 2015-2-3 12:28:08 | 只看该作者
在刚开始接触网页的第一堂课上,听说网页制作会是一门很无聊并且很难听懂的过程,而事实却印证了这样一个事实。
兰色精灵 该用户已被删除
板凳
发表于 2015-1-25 17:25:44 | 只看该作者
只要我们努力,无论是怎样的艰难险阻,成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。
深爱那片海 该用户已被删除
沙发
发表于 2015-1-18 06:17:19 | 只看该作者
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心,坚持不懈的决心。在自己无法解决某些问题时,就需要虚心请教别人.
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-11-17 06:57

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表