什么是CSS？
层叠样式表语言（不是编程语言，属于样式表语言）
CSS是HTML的一个化妆品，专门用来修饰HTML。
CSS是为HTML服务的，所以HTML是主体，CSS依附于HTML
如何嵌入CSS
1.内联定义 <标签 style=“样式名: 样式值；”></标签>
2. 定义内部样式块 head标签中写 < style type=“text/css”></ style>
3. 链入外部样式文件 head标签中引入< link rel=“stylesheet” type=“text/css” href=" "></ link>
在Web前端开发中，第三种方式最常用
CSS选择器
- 标签选择器
- id选择器
- class选择器
id选择器>class选择器>标签选择器
/*标签选择器，作用于所有此标签*/
div {
样式名:属性值;
样式名:属性值;
样式名:属性值;
}
/*id选择器，只作用于id这个元素，同一个网页中id不可重复*/
#id {
样式名:属性值;
样式名:属性值;
样式名:属性值;
}
/*class选择器，作用于当前网页中某一类标签*/
.class {
样式名:属性值;
样式名:属性值;
样式名:属性值;
}
常见的CSS样式
不需死记样式属性值，查阅CSS相关手册即可，随用随查
/*隐藏*/
div {
display:none;
display:block;
}
/*文本装饰样式*/
div {
text-decoration:underline
text-decoration:overline
text-decoration:line-through
text-decoration:blink;
}
/*列表*/
div {
list-style-type:none;
list-style-type:solid;
list-style-type:circle;
}
/*设置鼠标的悬停效果(hover在使用时:两边不能有空格)*/
span:hover {
color:red;
font-size:100px;
}
/*内外补丁，适用于盒子套盒子场景的盒子定位*/
/*<div id="div1">
<div id="div2">
</div>
</div> 盒子套盒子*/
#div1 {
width:300px;
height:300px;
blackground-color:#00FFFF;
border:solid 1px red;
/*padding-left:20px 打内补丁*/
}
#div2 {
width:100px;
height:100px;
blackground-color:black;
border:solid 1px red;
/*在div2这个节点顶部top打一个补丁，这个补丁高位10px*/
/*margin-top:10px 打外补丁*/
}
/*float浮动效果*/
div {
float:left;
float:right;
}
/*定位样式*/
div {
position:absolute;
top:300px;
left:300px;
}
/*光标样式*/
div {
cursor:pointer;/*变小手样式，尽量不要使用hand有浏览器兼容问题*/
}