CSS(Cascading Style Sheets层叠样式表)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
1.基本使用语法
样式类别-方向-特征 : 值;
设置颜色:
color : red;
设置字体大小
font-size : 10px;
字体描述
text-decoration : overline;
2. CSS分类(如何使用CSS)
行内样式
直接给元素添加 style="" 属性
内嵌样式
直接给元素添加一个ID或一个class属性,在head标签中(不一定)写上
<style type="text/css">
</style>
在里面写上样式的语法,并与对应的元素挂钩
外部样式
在htm文件外有一个css文件,样式写在css文件中,在html页中将这个样式文件加载进来
<link href="css路径" rel="stylesheet" type="text/css" />
3.选择器(selecter)
id选择器
#id {
/* 样式 */
}
类选择器
.className {
/* 样式 */
}
标签选择器
tagName {
/* 样式 */
}
三个样式同时使用,如果没有样式冲突,都应用
如果有冲突,同级的就近原则
如果不是同级的,ID>类>标签(专一的优先级最大)
类选择器可以使用 class="c1 c2 c3 c4" 的语法将多个类选择器作用与元素上
不规范用法:
在CSS使用中,id选择器与类选择器可以同样的作用与多个元素
id在规范中就是表示唯一,浏览器允许这么使用,但是在js执行中会出现问题
复合选择器
标签类选择器
标签.类名 { /* 样式 */ }
后面兄弟选择器
选择器+* {
/* 选中前面元素选择器的后一个元素 */
}
(+号不能省略)
后代选择器
将包含在某个元素中的元素都称为其后代
<div id="dv1">
<p>123</p>
<div id="dv2">
<span id="span1"></span>
</div>
<p>456</p>
</div>
祖代选择器 后代选择器 {
/* 样式 */
}
子代选择器
父带选择器>子代选择器 {
/* 样式 */
}
组合选择器
选择器1, 选择器2, 选择器3, ..., 选择器N {
/* 这些选择器的元素都具有这个样式 */
}
4.常用样式
文本
color
font-size
font-family
font-weight
边框
border-color
border-style
border-width
背景
background-color
布局
其他