一,css的使用
<!--
一,css的定义
选择器名{
属性名:属性值;
属性名:属性值;
...
}
注意点:
1.声明用{}括起来,每个声明以分号结尾
2.一行建议一个声明
3.如果样式的属性值由多个单词组成,则用引号引起来
二,css的注释
/*注释内容*/
三,css的三种使用方式:
1.行内使用
直接写在标签上的样式,在标签上通过style属性定义的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>Hello world</h2>
<h2 style="color: aquamarine;font-family:楷体;">Hello world</h2>
<h2>Hello world</h2>
</body>
</html>
2.内部样式
定义在style标签中的样式,style标签一般设置在head标签中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*设置所有的h2标签的文本为红色*/
h2{
color: red;
font-family: "arial black";
}
</style>
</head>
<body>
<h1>Hello world</h2>
<h2>Hello world</h2>
<h2>Hello world</h2>
</body>
</html>
3.外部样式
<link rel="stylesheet" type="text/css" href="css的文件路径"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/p.css"/>
</head>
<body>
<h1>Hello world</h2>
<h2>Hello world</h2>
<h2>Hello world</h2>
</body>
</html>
注:当出现多重样式时,越精准越优先
-->
二,css基本选择器(放在head里)
<!--
css基本选择器 放在head里
1.通用选择器
*{
属性名:属性值;
...
}
2.元素选择器
元素名/标签名{
属性名:属性值;
...
}
3.ID选择器(标签后加id=“ ”)
#id属性值{
属性名:属性值;
...
}
4.类选择器(标签后加class=“ ”)
.class属性值{
属性名:属性值;
...
}
5.分组选择器
选择器1,选择器2,x选择器3...{
属性名:属性值;
...
}
css样式的优先级,是根据选择器的精确度/权重来决定的,常见的权重如下,权重越大,优先级越高
元素选择器:1
类选择器:10
id选择器:100
内联样式:1000
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*通用选择器*/
*{
color: blueviolet;
}
/*元素选择器*/
div{
font-size: 15px;
}
/*ID选择器*/
#p1{
background-color: aquamarine;
}
/*类选择器*/
.cls1{
font-family: 楷体;);
}
/*分组选择器*/
#p1,.cls1,font{
text-decoration: line-through;
}
</style>
</head>
<body>
<div class="cls1">这是一个div1</div>
<div>这是一个div2</div>
<p id="p1">这是一个p</p>
<span class="cls1">这是一个span</span><br>
<font>这是一个font</font>
</body>
</html>
三,css的组合选择器
<!--
css的组合选择器
1.后代选择器
选择指定元素的所有所有指定后代,以空格隔开
选择器 指定元素{
属性名:属性值;
...
}
2.子代选择器
选择指定元素的第一代元素,以> 隔开
选择器 > 指定元素 {
属性名:属性值;
...
}
3.相邻兄弟选择器
选择指定元素的下一代元素(只找一个),两者有相同的父元素,以加号+ 隔开
选择器 + 指定元素 {
属性名:属性值;
...
}
2.普通兄弟选择器
选择指定元素后面的所有元素,两者有相同的父元素,以 ~ 隔开
选择器 ~ 指定元素 {
属性名:属性值;
...
}
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*组合选择器*/
.food li{
border: orangered solid 1px;
}
/*子代选择器*/
.food2 > li{
border: red dotted 1px;
}
/*相邻兄弟选择器*/
#mydiv + div{
background-color: #7FFFD4;
}
/*普通兄弟选择器*/
#mydiv2 ~ div{
background-color: antiquewhite;
}
</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>
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</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>
<div>相邻兄弟选择器5</div>
<hr >
<div>普通兄弟选择器1</div>
<div id="mydiv2">普通兄弟选择器2</div>
<div>普通兄弟选择器3</div>
<div>普通兄弟选择器4</div>
<div>普通兄弟选择器5</div>
</body>
</html>