html中样式表的使用

最新推荐文章于 2022-08-06 09:49:41 发布

xiaoyaolong520

最新推荐文章于 2022-08-06 09:49:41 发布

阅读量218

点赞数

文章标签： HTML CSS 浏览器 JavaScript ViewUI

本文链接：https://blog.csdn.net/xiaoyaolong520/article/details/83813968

版权

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>行级标签，只能包含文字，不能包含其它标签

xiaoyaolong520

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html中样式表的使用

DHTML：动态html网页技术网页的样式不能一成不变，要给浏览者鲜活动态的感受。产生动态效果。DHTML由三大部分组成：Html 内容Css 外观Javascript 行为各负其责，实现数据和显示分离。1.行内样式表Style是属性2.内嵌样式表写在中 style是标记.类名{} 类选择器应用得最多的P{} ...
复制链接

扫一扫