JavaScript程序设计之级联样式表

2021-08-23 13:57:49

1.CSS样式中有三种选择符
（1）HTML选择符就是HTML的标记符，例如P,BODY,A等，定义方法：
tag{property:value}
（2）Class选择符分为两种，一种与Class选择符有关，一种与HTML标记有关
语法格式：
Tag.Classname{property:value}
注：“.”与“class”标记相对应，例：
<style>
.setColor{color:red}
</style>
<h2 class="setColor">good</h2>
其中good用的是setColor的样式
（3）ID选择符，与Class选择符功能相似，语法格式：
#IDname{property:value}
注："#"与"id"标记相对应，例：
<style>
#setColor{color:red}
</style>
<p id="setColor">good</p>
其中good用的是setColor的样式
2.样式的使用方法
（1）嵌入样式表
可以用<style>标记将样式表嵌入到HTML文件的头部，<style>标记的
type指明样式表的类别
（2）链接外部样式表
把一个独立定义的CSS样式表文件在HTML文件头部用<link>标记进行链
接
例：
<link rel="stylesheet" href="style1.css" type="text/css">
（3）在<style>和</style>标记之间，使用@import声明引入外部样式表
<style>
@import URL("外部样式表明");
...
</style>
（4）内联样式表
在HTML标记中，将定义的样式规则作为标记style属性的属性值，样式
定义的作用范围仅限于此标记：
<meta http-equiv="Content-Type" content="text/css>//此表语
言声明是必要的
...
<body style="color:read">
3.CSS优先级
（1）内联样式中所定义的样式优先级最高
（2）其他样式在HTML被引用的顺序遵循就近原则，越靠近文本优先级越高
（3）选择符的优先级，上下文优先级>类选择符>ID选择符
（4）未在任何文本定义的样式，遵从浏览器的默认样式
（5）一个属性值如果不想被其他样式定义的相同属性所定义的值覆盖，可用
特定的参数!import
例：p{color:res,font-size:24px !import}
4.style对象
（1）Text属性及说明
color 设置文本的颜色
font 在一行设置所有的字体属性
fontFamily 设置元素的字体系列。
fontSize 设置元素的字体大小。
fontSizeAdjust 设置/调整文本的尺寸
fontStretch 设置如何紧缩或伸展字体
fontStyle 设置元素的字体样式
fontVariant 用小型大写字母字体来显示文本
fontWeight 设置字体的粗细
letterSpacing 设置字符间距
lineHeight 设置行间距
quotes 设置在文本中使用哪种引号
textAlign 排列文本
textDecoration 设置文本的修饰
textIndent 缩紧首行的文本
textShadow 设置文本的阴影效果
textTransform 对文本设置大写效果
unicodeBidi
whiteSpace 设置如何设置文本中的折行和空白符
wordSpacing 设置文本中的词间距
（2）Scrollbar属性及说明
scrollbar3dLightColor 设置箭头和滚动条左侧和顶边的颜色
scrollbarArrowColor 设置滚动条上的箭头颜色
scrollbarBaseColor 设置滚动条的底色
scrollbarDarkShadowColor 设置箭头和滚动条右侧和底边的颜色
scrollbarFaceColor 设置滚动条的表色
scrollbarHighlightColor 设置箭头和滚动条左侧和顶边的颜色，以及滚动条的背景
scrollbarShadowColor 设置箭头和滚动条右侧和底边的颜色
scrollbarTrackColor 设置滚动条的背景色
（3）Background属性及说明
background 在一行中设置所有的背景属性
backgroundAttachment 设置背景图像是否固定或随页面滚动
backgroundColor 设置元素的背景颜色
backgroundImage 设置元素的背景图像
backgroundPosition 设置背景图像的起始位置
backgroundPositionX 设置backgroundPosition属性的X坐标
backgroundPositionY 设置backgroundPosition属性的Y坐标
backgroundRepeat 设置是否及如何重复背景图像

JavaScript程序设计之级联样式表,布布扣,bubuko.com

码农公寓

相关文章