仓酷云

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

[DIV+CSS] 来谈谈:CSS基础语法及用法进门

[复制链接]
再见西城 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:14:25 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

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

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

x
CSS非常容易编写。你可以象写html代码一样轻松地编写CSS。
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参数:
<pclass="right">
这个段落向右对齐的
</p>
<pclass="center">
这个段落是居中分列的
</p>
注重:类的称号能够是恣意英文单词或以英文开首与数字的组合,一样平常以其功效和效果扼要定名。
类选择符另有一种用法,在选择符中省略HTML标志名,如许能够把几个分歧的元素界说成不异的款式:
.center{text-align:center}
(界说.center的类选择符为笔墨居中分列)
如许的类能够被使用就任何元素上。上面我们使h1元素(题目1)和p元素(段落)都回为“center”类,这使两个元素的款式都跟从“.center”这个类选择符:
<h1class="center">
这个题目是居中分列的
</h1>
<pclass="center">
这个段落也是居中分列的
</p>
注重:这类省略HTML标志的类选择符是我们经后最经常使用的CSS办法,利用这类办法,我们能够很便利的在恣意元素上套用事后界说好的类款式
4.ID选择符

在HTML页面中ID参数指定了某个单一元素,ID选择符是用来对这个单一元素界说独自的款式。
ID选择符的使用和类选择符相似,只需把CLASS换成ID便可。将上例中类用ID替换:
<pid="intro">
这个段落向右对齐
</p>
界说ID选择符要在ID称号前加上一个“#”号。和类选择符不异,界说ID选择符的属性也有两种办法。上面这个例子,ID属性将婚配一切id="intro"的元素:
#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}
(字体尺寸为默许尺寸的110%;粗体;蓝色;背景色彩通明)
上面这个例子,ID属性只婚配id="intro"的段落元素:
p#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}
注重:ID选择符范围性很年夜,只能独自界说某个元素的款式,一样平常只在特别情形下利用。
5.包括选择符
能够独自对某种元素包括干系界说的款式表,元素1里包括元素2,这类体例只对在元素1里的元素2界说,对独自的元素1或元素2无界说,比方:
tablea
{
font-size:12px
}
在表格内的链接改动了款式,笔墨巨细为12象素,而表分外的链接的笔墨仍为默许巨细。
6.款式表的层叠性
层叠性就是承继性,款式表的承继划定规矩是内部的元素款式会保存上去承继给这个元素所包括的其他元素。现实上,一切在元素中嵌套的元素城市承继外层元素指定的属性值,偶然会把良多层嵌套的款式叠加在一同,除非别的变动。比方在DIV标志中嵌套P标志:
div{color:red;font-size:9pt}
……
<div>
<p>
这个段落的笔墨为白色9号字
</p>
</div>
(P元素里的内容会承继DIV界说的属性)
注重:有些情形下外部选择符不承继四周选择符的值,但实际上这些都是特别的。比方,上界限属性值是不会承继的,直觉上,一个段落不会同文档BODY一样的上界限值。
别的,当款式表承继碰到抵触时,老是以最初界说的款式为准。假如上例中界说了P的色彩:
div{color:red;font-size:9pt}
p{color:blue}
……
<div>
<p>
这个段落的笔墨为蓝色9号字
</p>
</div>
我们能够看到段落里的笔墨巨细为9号字是承继div属性的,而color属性则按照最初界说的。
分歧的选择符界说不异的元素时,要思索到分歧的选择符之间的优先级。ID选择符,类选择符和HTML标志选择符,由于ID选择符是最初加上元素上的,以是优先级最高,其次是类选择符。假如想超出这三者之间的干系,能够用!important提拔款式表的优先权,比方:
p{color:#FF0000!important}
.blue{color:#0000FF}
#id1{color:#FFFF00}
我们同时对页面中的一个段落加上这三种款式,它最初会按照被!important声名的HTML标志选择符款式为白色笔墨。假如往失落!important,则按照优先权最高的ID选择符为黄色笔墨。
7.正文
你能够在CSS中拔出正文来讲明你代码的意义,正文有益于你或他人今后编纂和变动代码时了解代码的寄义。在扫瞄器中,正文是不显现的。CSS正文以"/*"开首,以"*/"开头,以下:
/*界说段落款式表*/
p
{
text-align:center;/*文本居中分列*/
color:black;/*笔墨为玄色*/
font-family:arial/*字体为arial*/
}
</p>
属性值就追加上去,重复的属性值就以最后一个为准。这里要注意的是,样式的先后不是根据页面上应用的名字顺序,而是样式表里的样式顺序。
爱飞 该用户已被删除
沙发
发表于 2015-1-18 05:46:49 | 只看该作者
还可以在Dreamweaver常用工具中选择超级链接,完成相应的填写即可。
飘灵儿 该用户已被删除
板凳
发表于 2015-1-25 07:33:59 来自手机 | 只看该作者
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。
地板
发表于 2015-2-8 05:28:55 | 只看该作者
还是在Dreamweaver所见即所得添加链接是,可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。
分手快乐 该用户已被删除
5#
发表于 2015-2-24 19:18:14 | 只看该作者
学Dreamweaver技术的过程其实是一个增加信心的过程。
精灵巫婆 该用户已被删除
6#
发表于 2015-3-7 13:50:54 | 只看该作者
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。
小妖女 该用户已被删除
7#
发表于 2015-3-15 07:44:52 | 只看该作者
滚动条)层属性--溢出(visible/hidden/scroll/auto)
金色的骷髅 该用户已被删除
8#
发表于 2015-3-22 00:08:04 | 只看该作者
只要我们努力,无论是怎样的艰难险阻,成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-12-23 06:40

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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