目录
一.CSS的概念
- Cascading Style Sheet 级联样式表
- 表现HTML或XHTML文件样式的计算机语言
包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定
二.CSS基本语法结构
结构
选择器{
声明1；
声明2；
}
Style标签
<style type="text/css">
h1 {
font-size:12px;
color:#F00;
}
</style>
三.CSS样式
注：
1.行内样式
使用style属性引入CSS样式
<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>
2.内部样式表
CSS代码写在的
<style>
h1{color: green; }
</style>
3.外部样式表
CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表，有两种方式
链接式
导入式
<head>
……
<link href="style.css" rel="stylesheet" type="text/css" />
……
</head>
4.样式优先级
就近原则
三.CSS基本选择器
标签选择器
<h1>~<h6>,<p>,<img>
类选择器
.class{
color:..;
}
<标签名 class= "类名称">标签内容</标签名>
常用标签名span
ID选择器
#id { font-size:16px;}
区别
标签选择器直接应用于HTML标签
类选择器可在页面中多次使用
ID选择器在同一个页面中只能使用一次
基本选择器的优先级
ID选择器 > class类选择器 > 标签选择器
四.css高级选择器
1.层次选择器
a.后代选择器
b.子选择器
c.相邻兄弟选择器
d.通用兄弟选择器
2.结构伪类选择器
示例
使用E F:nth-child(n)和E F:nth-of-type(n)的 关键点
- E F:nth-child(n)在父级里从一个元素开始查找，不分类型
- E F:nth-of-type(n)在父级里先看类型，再看位置
3.属性选择器
示例
五.总结
扫一扫
326
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
