【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS的基本使用</title>
<style>
h2{color:red;}
div{font-size:30px;}
#p1{background-color: red;}
.cls1{font-family: 楷体;}
#p1,.cls1,font{text-decoration: line-through;}
</style>
<style type="text/css">
.food li{
border: #FF0000 solid 1px;
}
.food2>li{border:palegoldenrod dotted 1px}
#mydiv+div{background-color: #FF0000;}
#mydiv2~div{background-color:green ;}
</style>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<!--css定义
选择器名{属性名：属性值
属性名：属性值
}声明需要用{}括起来，一行一个声明
-->
<!--css的基本使用
一。css的三种基本使用方式
1，行内样式：直接写在标签中的样式
2，内部样式：定义在style标签中的样式，style一般设置在head标签中
3，外部样式：定义在外部的css文件中，通过link标签引入
越精准，越优先
-->
、<h2>Hello world</h2>
<h2 style="font-family:楷体">Hello world</h2>
<div class="cls1">这是一个div1</div>
<div>这是一个div2</div>
<p id=p1>这是一个</p>
<span class="cls1">这是一个</span><br>
<font>这是一个font</font>
<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>
05-21
972
972
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
