1.css引入
任何元素如果想引入到html文档中,必须要使用一个适当的标签,css也不例外
- 引入方法:
1.外部样式:适用于所有文档。使用:使用link标签,或者@import url();
2.内部样式:仅适用当前文档。使用:使用style标签在文档内编写。
3.行内样式:只对当前行起效。使用:在当前标签内用style属性直接编写。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>css的基本语法</title>
<!-- 内部样式 -->
<style>
h1 {
color: violet;
border: 1px solid #000;
}
</style>
<!-- 外部样式 -->
<link rel="stylesheet" href="">
</head>
<body>
<!-- 行内样式 -->
<h1 style="color: #000;">php.cn</h1>
</body>
</html>
2.简单选择器
- 标签选择器
根据元素标签名称进行匹配,返回一组。比如:
h1 {…} - 类选择器
根据元素class属性进行匹配,返回一组。比如:
li[class:”on”] {…} 。 可简化class为“ . ”比如:li.on - id选择器
根据元素id属性进行匹配,返回一个。比如:
li[id:”foo”]。可简化id为#,比如:#foo
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>选择器1: 简单选择器</title>
<style>
/* 1. 标签选择器, 返回一组 */
li {
background-color: violet;
}
/* 2. 类选择器: 返回一组 */
.on {
background-color: violet;
}
/* 3. id选择器: 返回一个 */
#foo {
background-color: violet;
}
</style>
</head>
<body>
<ul>
<li id="foo">item1</li>
<li class="on">item2</li>
<li id="foo">item3</li>
<li class="on">item4</li>
<li class="on">item5</li>
</ul>
</body>
</html>
3.上下文选择器
- 后代选择器:选择标签下所有此元素。
使用:空格。 - 子元素选择器:只选择所有子元素,不管其他级别元素。
使用: > - 同级相邻选择器:仅选中与之相邻的第一个兄弟元素。
使用:+ 同级所有选择器:选择与之相邻后面的所有兄弟元素。
使用:~<head>
<meta charset="UTF-8">
<title>上下文选择器</title>
<style>
ul li {
background-color: lightblue;
}
body>ul>li {
background-color: teal;
}
.start+li {
background-color: lightgreen;
}
.start~li {
background-color: yellow;
}
</style>
</head>
<body>
<ul>
<li>item1</li>
<li class="start">item2</li>
<li>item3</li>
<li>item4
<ul>
<li>item4-1</li>
<li>item4-2</li>
<li>item4-3</li>
</ul>
</li>
<li>item5</li>
</ul>
</body>
4.伪类选择器
匹配任意位置的元素:(:nth-of-type(an+b))
an+b: an起点,b是偏移量, n = (0,1,2,3…)
匹配单个元素:匹配第三个li,(0n+3)可简化为(3),直接写偏移量就好。ul li:nth-of-type(0n+3) {
background-color: violet;
}
匹配所有元素::nth-of-type(1n)
ul li:nth-of-type(1n) {
background-color: violet;
}
匹配某位元素后面所有元素::nth-of-type(1n+某位)
ul li:nth-of-type(n+3) {
background-color: violet;
}
- 反向获取任意位置的元素:(:nth-last-of-type(an+b))
ul li:nth-last-of-type(-n+3) {
background-color: violet;
}
- 选择所有为偶数的子元素:(:nth-of-type(2n))或:nth-of-type(even)
- 选择所有为奇数的子元素:(:nth-of-type(2n-1))或:nth-of-type(2n+1)或:nth-of-type(odd)
- 选取第一个元素的快捷方式:(:first-of-type)
-选取最后一个元素的快捷方式:(:last-of-type) - 匹配父元素唯一子元素:(:only-of-type)