下面是听了林海峰老师的视频总结与大家一起分享~
一、CSS三种引入方式
1、style标签内部直接书写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 1、style标签内部直接书写-->
<style>
h1{
color: #7a77c8;
}
</style>
</head>
<body>
<h1>你好呀！！！！</h1>
</body>
</html>2、link标签引入外部css文件（最正规的方式，解耦合）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 2、link标签引入外部css文件（最正规的方式，解耦合）-->
<link rel="stylesheet" href="CSS初识.css">
</head>
<body>
<h1>你好呀！！！！</h1>
</body>
</html>CSS初始.css文件内容如下
/*单行注释*/
/*
多行注释1
多行注释2
多行注释3
*/
h1{color: #2b99ff}3、行内式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 3、行内式-->
<h1 style="color: #1cb7fd">你好呀！！！！</h1>
</body>
</html>二、CSS基本选择器
1、id选择器2、类选择器3、元素（标签）选择器4、通用选择器
下面介绍一个小案例来介绍CSS的基本选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*id选择器*/
#d1 { /*找到id为d1的标签*/
color: #7a77c8;
}
/*类选择器*/
.c1 { /*找到class值里面包含c1的标签*/
color: #0000cc;
}
/*元素（标签）选择器*/
span {/*将找到所有的span标签*/
color: #7B7B7B;
}
/*通用选择器*/
* {/*将html页面上所有的标签全部找到*/
color: #f6c4d7;
}
</style>
</head>
<body>
<div id="d1" class="c1 c2">div
<p>div里面的p</p>
<span>div里面的span</span>
</div>
<p id="d2" class="c1 c2">pppp</p>
<span id="d3" class="c2">span1111</span>
<span id="d4" class="c4">span2222</span>
</body>
</html>注意：
样式类名不要用数字开头（有的浏览器不认）。
标签中的class属性如果有多个，要用空格分隔。
三、属性选择器
/*用于选取带有指定属性的元素。*/
p[title] {
color: red;
}
/*用于选取带有指定属性和值的元素。*/
p[title="12"] {
color: red;
就以一个简单的案例来为大家介绍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[username]{/*将所有含有属性名是username的标签背景色改为蓝色*/
background: #2b99ff;
}
[username='jason']{/*找到所有属性名是username并且属性值是jason的标签*/
color: #f6c4d7;
}
input[username='jason']{/*找到所有属性名是username并且属性值是jason的input标签*/
background: #2b99ff;
}
</style>
</head>
<body>
<input type="text" username>
<input type="text" username="jason">
<input type="text" username="kevin">
<p username="tank">tank老师</p>
<div username="egon">egon老师</div>
<span username="jason">jason老师</span>
</body>
</html>补充几个小点：
/*找到所有title属性以word开头的元素*/
[title^="word"] {
color: red;
}
/*找到所有title属性以word结尾的元素*/
[title$="word"] {
color: yellow;
}
/*找到所有title属性中包含（字符串包含）word的元素*/
[title*="word"] {
color: red;
}
/*找到所有title属性(有多个值或值以空格分割)中有一个值为word的元素：*/
[title~="word"] {
color: green;
}
四、组合选择器
<!--在前端，我们将标签的嵌套关系用亲戚关系来表述层级--> 1、后代选择器2、儿子选择器3、毗邻选择器4、弟弟选择器
以简单的案例为例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*后代选择器*/
div span {
color: #f6c4d7;
}
/*儿子选择器*/
div>span{
color: #0000cc;
}
/*毗邻选择器*/
div+span{/*同级别紧挨着的下面的第一个*/
color: #7B7B7B;
}
/*弟弟选择器*/
div~span{/*同级别下面的所有span*/
color: #cc2929;
}
</style>
</head>
<body>
<span>
span1
</span>
<span>
span2
</span>
<div>
div
<p>div p</p>
<p>div p
<span>
div p span
</span>
</p>
<span>span</span>
<span>span</span>
</div>
<span>span</span>
<span>span</span>
</body>
</html>