学习网址：【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili
HTML 教程 | 菜鸟教程 (runoob.com)
1、CSS的基本使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS的基本使用</title>
<!--
-->
<style>
/* 设置所有的h2标签的文本为红色 */
h2{
color: red;
}
</style>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<!--
CSS的基本使用
一、CSS的定义
选择器名 {
属性名：属性值；
属性名：属性值；
···
}
注意点：
1.声明需要使用{}括起来，每个声明以分号；结尾
2.一行建议一个声明
3.如果样式的属性值由多个单词组成，则用引号引起来
二、css的注释
/*注释内容*/
三、CSS的三种使用方式
1.行内样式
直接写在标签上的样式，在标签上通过style属性定义的样式
2.内部样式
定义在style标签中的样式，style标签一般设置在head标签中
3.外部样式
定义在外部的css文件中,通过link标签引入
<link rel="stylesheet" type="text/css" href="css文件的路径" />
注：当有多重样式时，优先级1>2>3(就近原则)
-->
<h2>hellow world</h2>
<h2 style="color: aqua;font-family: 楷体;">hellow world</h2>
<h2>hellow world</h2>
</body>
</html>
运行结果
2、CSS基本选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基本选择器</title>
<style type="text/css">
/* 通用选择器 * */
*{
color: #00FFFF
}
/* 元素选择器 */
div {
font-size: 30px;
}
/* ID选择器 # */
#p1 {
background-color: bisque;
color: #FF0000
}
/* 类选择器 . */
.cls1 {
font-family: "楷体";
}
/* 分组选择器 */
#p1,.cls1,font {
text-decoration: line-through;
}
</style>
</head>
<body>
<!--
CSS基本选择器
1.通用选择器 *
* {
属性名：属性值；
···
}
2.元素选择器
元素名/标签名 {
属性名：属性值；
···
}
3.ID选择器 #
#id属性值 {
属性名：属性值；
···
}
4.类选择器 .
.class属性值 {
属性名：属性值；
···
}
5.分组选择器
选择器1，选择器2，选择器3... {
属性名：属性值；
···
}
-->
<div class="cls1">这是一个div1</div>
<div>这是一个div2</div>
<p id="p1">这是一个p</p>
<span class="cls1">这是一个span</span>
<br>
<font>这是一个font</font>
</body>
</html>
3、CSS组合选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组合选择器</title>
<style type="text/css">
/* 后代选择器 */
.food li{
border: #00FFFF solid 1px;
}
/* 子代选择器 */
.food2 > li {
border: #FF0000 dotted 1px;
}
/* 相邻兄弟选择器 */
#mydiv + div {
background-color: #00FFFF;
}
/* 普通兄弟选择器 */
#mydiv2 ~ div {
background-color: #FFE4C4;
}
</style>
</head>
<body>
<!--
组合选择器
后代选择器
选择指定元素的所有指定后代元素，以空格隔开
选择器 指定元素 {
属性名：属性值；
···
}
子代选择器
选择指定元素的第一代子元素,以 > 隔开
选择器 > 指定元素 {
属性名：属性值；
···
}
相邻兄弟选择器
选择指定元素的下一个指定元素(只会找一个)，两者有相同的父元素，以 + 隔开
选择器 + 指定元素 {
属性名：属性值；
···
}
普通兄弟选择器
选择指定元素后面所有指定元素，两者有相同的父元素，以 ~ 隔开
选择器 ~ 指定元素 {
属性名：属性值；
···
}
-->
<!-- 获取class属性值时food的元素的所有对应li列表项 -->
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ul>
</li>
</ul>
<hr />
<ul class="food2">
<li>水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ul>
</li>
</ul>
<hr />
<div>相邻兄弟选择器1</div>
<div id="mydiv">相邻兄弟选择器2</div>
<div>相邻兄弟选择器3</div>
<div>相邻兄弟选择器4</div>
<hr />
<div>普通兄弟选择器1</div>
<div id="mydiv2">普通兄弟选择器2</div>
<div>普通兄弟选择器3</div>
<div>普通兄弟选择器4</div>
</body>
</html>
