css的基本语法
CSS样式由一下组成的
| 标签 | 申明块 | 规则 |
|---|---|---|
| 选择器 | 属性和值组成，用分号隔开 | 选择器 + 声明块 |
| H1 | { color: red; } | h1{color:red;} |
示例如下图
css引入方式:外部，公共，共享样式表。
1. 内部样式
<style>h1 {color: red;border: 1px solid black;}</style>
2. 外部样式
<style>@import url(css/style.css);</style>
一般用下面LINK方式来引入
<link rel="stylesheet" href="css/style.css">
3. 行内样式
<h1 style="color:red">这是一个例子</h1>
| 总结 | |
|---|---|
| 内部样式: | 仅对当前文档的元素有效,使用 style 标签 |
| 外部样式: | 适用于所有引入了这个css样式表的html文档,使用 link 标签 |
| 行内样式: | 仅适用于当前的页面中的指定的元素,使用style属性 |
样式表的模块化
公共部分进行分离
<style>/* 导入公共页眉 */@import url(css/header.css);/* 导入公共页脚 */@import 'css/footer.css';main {min-height: 500px;background-color: lightcyan;}</style>
导入一个公共入口的css文件
<head><link rel="stylesheet" href="css/style1.css"></head><body><header>页眉</header><main>主体</main><footer>页脚</footer></body>
选择器
简单选择器
1. 标签选择器, 返回一组
li {background-color: violet;}
2. 类选择器: 返回一组
.on {background-color: violet;}
3. id选择器: 返回一个
#foo {background-color: navajowhite;}
示例如下图
<style>li {background-color: mediumslateblue;}.on {background-color: violet;}#foo {background-color: navajowhite;}</style><body><ul><li>item2</li><li id="foo">item3</li><li class="on">item4</li><li>item5</li></ul></body>
上下文选择器:
1. 空格: 所有层级
ul li {background-color: lightblue;}2. > : 父子级
body>ul>li {background-color: teal;}3. + : 相邻的兄弟
.start+li {background-color: lightgreen;}4. ~ : 所有相邻兄弟
.start~li {background-color: yellow;}
伪类选择器
-
匹配任意位置的元素: :nth-of-type(an+b)
an+b: an起点,b是偏移量, n = (0,1,2,3…)匹配第3个li
ul li:nth-of-type(3) {background-color: violet;}
选择所有元素ul li:nth-of-type(1n) {background-color: violet;}
反向获取任意位置的元素ul li:nth-last-of-type(3) {background-color: violet;}
选择所有索引为偶数的子元素, 2,4,6,8…ul li:nth-of-type(even) {background-color: violet;}
选择所有索引为奇数的子元素, 1,3,5,7,9…ul li:nth-of-type(odd) {background-color: violet;}
选择第一个子元素: :first-of-typeul li:first-of-type {background-color: violet;}
选中最后一个: :last-of-typeul li:last-of-type {background-color: violet;}
匹配父元素中唯一子元素only-of-type{background-color: violet;}