html中样式表的使用 -

xiaoyaolong

浏览: 28367 次
性别:
来自: 湖南

最近访客更多访客>>

lm18238818077

小俊制作

qin_ban

ailu5949

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

html中样式表的使用

HTML CSS 浏览器 JavaScript

DHTML：动态html网页技术
网页的样式不能一成不变，要给浏览者鲜活动态的感受。
产生动态效果。
DHTML由三大部分组成：
Html     内容
Css      外观
Javascript 行为
各负其责，实现数据和显示分离。
1.行内样式表
<p style=“font-size:40px; color:red; face-family=’楷书’“>
Style是属性
2.内嵌样式表
写在<head>中
<style style =”text/css”> style是标记
.类名{} 类选择器应用得最多的
P{}    标记（HTML）选择器
#ID名{}   id选择器,为某个标记量身定做，只能用在一个标记上,因为所有对象的id不能值相同。
</style>
2.1类选择器
.{}
应用 Class=”zm”
2.2标记选择器
P{ font-size:20; color:blue; text-align:center; }
应用：不需要显示调用，所有的p标记自动应用该格式
2.3 ID选择器
应用：id=”zz”
注意：同时写了class 和 id 选择器，会应用Id的格式。
先应用class，再应用id，覆盖了原来的格式。
3.外部样式表
如果有多个页面要应用同一样式，则可将样式写成一个*.css文件
应用样式表：
<head>
<style type=”text/css”>
       @import 路径/*.css;
    </style>
</head>
或者也可写成：
<link rel=”stylesheet” type=”text/css” href=”路径/*.css”>

注意：a.必须写在<head>中间
      b.分号不能省略
      c.link不能写在<style>中
常用属性
Text-align
Background-color
Border-color
Border-width
Border-style
Letter-spacing 字符间距
Line-height 行高
细边框样式
特殊选择器
A{}
A:link{} 访问前的样式
A:hover{}   表示鼠标悬停
A:active{}   被激活的样式
A:visited{} 已被访问过

样式表的优先级
同时写了多个样式时，会应用哪个样式？
1. 如果有多种样式，设置的样式没有冲突，则将所有样式叠加
内嵌样式
P{font-size:14px;color:red}
行内样式
<p style=”font-family:楷书；”>
2. 如果多种样式中有冲突，则优先顺序为行内、内嵌、外部
3. 如果同时应用内嵌样式表，优先顺序为ID选择器、类选择器、HTML选择器
<div>块级标签，可以包含其它的标记
一般用style来设置样式
常用属性：
background-color
width
height
position:absolute;绝对定位
top
left
z-index:2;层叠顺序
<span>行级标签，只能包含文字，不能包含其它标签

分享到：