基本使用
CSS三种使用方式
声明需要用花括号,并用分号隔开(最好一个声明一行)
1.行内样式:直接写在标签上的样式,在标签上通过style属性定义的样式
<h3>你好</h3>
<h3 style="color:red;font-family:楷体;">你好</h3>
2.内部样式:定义在style标签中的样式,style标签一般设置在head标签中
<style>
h3{
color:palevioletred
}/*设置所有h3标签的文本为粉色*/
</style>
<h3>你好</h3>
<h3>请问你叫什么名字</h3>
3.外部样式:定义在外部的CSS文件中,通过link标签引入
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<h3>你好</h3>
<h3>请问你叫什么名字</h3>
h3{
font-size: 10px;
color: #550000;
}
基本选择器
1.通用选择器:选择所有
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*通用选择器*/
*{
color: #FFA500;
}
</style>
</head>
<body>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<h3>标题1</h3>
<h3>标题2</h3>
<h2>标题3</h2>
<p>段落</p>
<div>这是一个标签</div>
<span>zheyeshi标签</span>
<br>
<font>font</font>
</body>
2.元素选择器
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*元素选择器*/
h3{
color: aquamarine;
font-size: 20px;
}
</style>
</head>
<body>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<h3>标题1</h3>
<h3>标题2</h3>
<h2>标题3</h2>
<p>段落</p>
<div>这是一个标签</div>
<span>zheyeshi标签</span>
<br>
<font>font</font>
3.ID选择器(更加精准)
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*ID选择器*/
#p1{
color: brown;
font-size: larger;
}
</style>
</head>
<body>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<h3>标题1</h3>
<h3>标题2</h3>
<h2>标题3</h2>
<p id="p1">段落</p>
<div>这是一个标签</div>
<span>zheyeshi标签</span>
<br>
<font>font</font>
</body>
4.类选择器
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*类选择器*/
.cls1{
font-family: "楷体";
}
</style>
</head>
<body>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<h3>标题1</h3>
<h3>标题2</h3>
<h2>标题3</h2>
<p id="p1">段落</p>
<div>这是一个标签</div>
<div class="cls1">这是另一个标签</div>
<span class="cls1">zheyeshi标签</span>
<br>
<font>font</font>
</body>
5.分组选择器
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*分组选择器*/
#p1,.cls1,font {
color: #55ff7f;
}
</style>
</head>
<body>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<h3>标题1</h3>
<h3>标题2</h3>
<h2>标题3</h2>
<p id="p1">段落</p>
<div>这是一个标签</div>
<div class="cls1">这是另一个标签</div>
<span class="cls1">zheyeshi标签</span>
<br>
<font>font</font>
</body>
组合选择器
1.后代选择器(原生选择器):选择指定元素的所有指定后代元素,以空格隔开
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*后代选择器*/
.food li{
border: #7FFFD4 solid 1px;
/*设置边框颜色以及实心线*/
}
</style>
</head>
<body>
<ul class="food">
<li>水果
<ul>
<li>葡萄</li>
<li>橘子</li>
<li>香蕉</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>西兰花</li>
<li>上海青</li>
<li>生菜</li>
</ul>
</li>
</ul>
</body>
2.子元素选择器选择指定元素的第一代子元素,以大于号隔开
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*子代选择器*/
.food2>li{
border: #A52A2A dotted 1px;
}
</style>
</head>
<body>
<ul class="food1">
<li>水果
<ul>
<li>葡萄</li>
<li>橘子</li>
<li>香蕉</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>西兰花</li>
<li>上海青</li>
<li>生菜</li>
</ul>
</li>
</ul>
<ul class="food2">
<li>水果
<ul>
<li>葡萄</li>
<li>橘子</li>
<li>香蕉</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>西兰花</li>
<li>上海青</li>
<li>生菜</li>
</ul>
</li>
</ul>
</body>
3.相邻兄弟选择器:选择指定元素的下一个指定元素,两者有相同的元素,以加号隔开
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*相邻兄弟选择器*/
#mydiv+div{
background-color: aquamarine;
}
</style>
</head>
<body>
<div>相邻兄弟选择器 1 </div>
<div id=mydiv>相邻兄弟选择器 2 </div>
<div>相邻兄弟选择器 3 </div>
<div>相邻兄弟选择器 4 </div>
<div>相邻兄弟选择器 5 </div>
</body>
4.普通兄弟选择器:选择指定元素后面的所有指定元素,两者有相同的父元素,以波浪线隔开
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*普通兄弟选择器*/
#mydiv~div{
background-color: antiquewhite;
}
</style>
</head>
<body>
<div>普通兄弟选择器 1 </div>
<div id=mydiv>普通兄弟选择器 2 </div>
<div>普通兄弟选择器 3 </div>
<div>普通兄弟选择器 4 </div>
<div>普通兄弟选择器 5 </div>
</body>