CSS
选择器 ：找到想控制的标签
操作 ：渲染 和 布局 （属性）
css的引入方式：层叠样式表
<!--css的引入方式1--> 行内式
<p style="background: gray;color: red">这是一个p标签</p>
<!--css的引入方式2--> 在文件头 head里面加style 嵌入式
<style>
div {
color: lightseagreen;
font-size: 32px;
}
</style>
<!--css的引入方式3--> 链接式
<link rel="stylesheet" href="cxn.css"> #在文件头 head里面
标签样式放在cxn.css 里面引入
4 导入式 主要使用链接式<styletype="text/css">
@import"mystyle.css"; 此处要注意.css文件的路径 </style> 选择器：
基本选择器：
/*标签选择器*/
p{
color: red;
}
/*id选择器*/ id=p3
#p3{
background: green;
}
/*class（类）选择器*/ class=c1
class可以拥有多个值，每个值以空格隔开，如<span class="d1 d2">span</span> 则既可以拥有d1的样式，又可以拥有d2的样式
.c1{
font-size: 32px;
}
/*通配选择器,所有标签 */
*{
background-color: lightseagreen;
}
层级选择器：
/*后代选择器 空格表示后代（子孙等等）*/
<style>
.c1 .c3{
color: #1cb7fd;
}
</style>
/*子代选择器 用>表示 c1下边的儿子叫c3的*/
<style>
.c1>.c3{
color: gray;
}
</style>
/*毗邻选择器 （紧挨着）以+表示*/
<style>
.c1+p{
color: yellow;
}
</style>
/*兄弟选择器(不需要紧挨着)以~表示 */
<style>
.c1~p{
color: red;
}
</style>
<style>
span{
color: red;
}
</style>
/*多元素选择器 span标签，且class=d1*/
<style>
span.d1{
color: green;
}
</style>
属性选择器
[]属性选择器语法 如下：span标签里属性 egon=egg 的标签
^='e' 以e开头
<!-- *='e' 包含e
<style>
span[egon^='egg']{
color: red;
}
</style>
</head>
<body>
<div egon="egg">egg</div>
<span egon="egg">egg span</span>
<div egon="egg1">egg1</div>
<div alex="32">alex</div>
hover应用
<style>
span{
color: royalblue;
}
/*span标签悬浮的时候变红色*/
span:hover{
color: red;
}
.s1,.s2{
100px;
height: 100px;
}
.s1{
background-color: gray;
}
.s2{
background-color: #33bb00;
}
.s2:hover{
background-color: white;
}
.outter{
border: 1px solid red;
}
.outter:hover .s1{
background-color:blue;
}
.outter:before{
content: 'helloword';
color: red;
}
</style>
<span>hello word</span>
<div class="outter">
<div class="s1"> </div>
<div class="s2"></div>