3-Javaweb学习-CSS层叠样式表
1、CSS(Cascading Style Sheet):层叠样式表
（1）作用：
①美化界面
②在一定制度上解决了浏览器兼容性的问题
（2）选择器
①标签(元素、内联)选择器:选择器名称与标签同名，同名标签将会适应此样式效果。
代码：选择器名{
属性:属性值;
属性:属性值;
属性:属性值;
……
}
②Class选择器: 定义时前面加. 名称自定义。元素如果要适应此样式，需要给元素添加class属性。
代码：选择器名{
属性:属性值;
属性:属性值;
属性:属性值;
……
}
③ID选择器: 定义前面加# 选择器名称与某一个元素的id值同值，这个元素就会适应这个样式。
代码：选择器名{
属性:属性值;
属性:属性值;
属性:属性值;
……
}
④伪类选择器
a:link{
color: red;
}
a:hover{
color: green;
}
a:active{
color: blueviolet;
}
a:visited{
color: #FFA500;
}
解释：
:link 未被访问状态
: hover 鼠标悬停状态
:acitve 激活状态
: visited 访问过后状态
⑤通用选择器
*{
属性:属性值;
属性:属性值;
属性:属性值;
……
}
⑥后代选择器
div span{
color: #FF0000;
font-size: 20px;
}
.mydiv .myps{
color: orange;
font-size: 30px;
}
<style type="text/css">
div span{
color: #FF0000;
font-size: 20px;
}
</style>
<div>
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li><span>列表项</span></li>
</ul>
<p>北冥有鱼<span>其名为鲲</span>！</p>
<span>北冥有鱼</span>
</div>
<span>北冥有鱼</span>
⑦子选择器
div>span{
color: #FF0000;
font-size: 20px;
}
.mydiv>.myps{
color: orange;
font-size: 30px;
}
<style type="text/css">
div>span{
color: #FF0000;
font-size: 20px;
}
</style>
<div>
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li><span>列表项</span></li>
</ul>
<p>北冥有鱼<span>其名为鲲</span>！</p>
<span>北冥有鱼</span>
</div>
<span>北冥有鱼</span>⑧组合选择器
div,.myps,#myspan,span{
color: red;
font-size: 40px;
}（3）样式属性
①文字属性
font-size:15px; 字体大小
color:#FF0000; 字体颜色
font-weight:700; 100—900 bold bolder 加粗
font-family: “宋体”; 字体
text-decoration: underline; 文字修饰 underline下划线 overline 上划线 none 没有修饰 line-through 删除线
text-align: center; 文字方向 center居中 left 左边 right 右边
letter-spacing: 2px; 文字间距
line-height:行高
text-indent:首行字的缩进
text-shadow: 3px 4px 2px #CCC;
投影效果、 3px 向X轴偏移值、4px 向Y轴偏移值、2px 乳化值
#CCC 投影颜色
②盒子模型
盒子模型具有的四个属性：
content: width和height
border: 边框
padding:内填充值(内边界)
margin:外边界
元素实际宽度=width + padding+border+margin
元素实际高度=height+padding+border+margin
盒子模型三个属性可以分四个方向去设置：
/border 四个方向/
border-top: 15px groove #8A2BE2;
border-right:10px double orange;
border-bottom: 2px dashed #FF0000;
border-left: 20px dotted black;
/*padding 四个方向*/
padding-top: 10px;
padding-right: 15px;
padding-bottom: 20px;
padding-left: 25px;
/*padding 设置2个值 上下 左右*/
padding: 25px 35px;
/*padding 设置四个值 上右下左 顺时针*/
padding: 5px 10px 15px 20px;
/*margin 四个方向*/
margin: 60px; /*四个方向一个值*/
margin-top:20px;
margin-right: 30px;
margin-bottom: 40px;
margin-left: 50px;
/*margin 设置四个值 上右下左 顺时针*/
margin: 20px 30px 40px 50px;
/*margin 设置2个值 上下 左右**/
/*流式布局*/
margin: 50px 60px;
/*水平居中*/
margin: 0px auto;
③Float:浮动,可以让块元素呈现行级元素的特征，并且会保持块元素的高和宽。原理：脱离文档流。
（4）样式属性
①修饰背景属性
background-color：背景颜色
background-image: url(img/back.jpg);背景图片(覆盖背景颜色)
background-repeat: no-repeat;背景重复方向 repeat repeat-x repeat-y
background-position: left center;背景位置的方位(水平靠左，垂直居中)
background-position: -183px -66px; 背景位置用像素控制，特点精准。
background-size: 100% 100%; 背景图片的大小
background-size: cover;保证把背景铺满，图片等比缩放
background-attachment: fixed;固定背景图片
②列表属性
list-style
list-style:none; 没有点的呈现
list-style: disc; 呈现圆点
list-style: circle; 空心圆
list-style: square;正方块
③块元素属性
width:200px; 宽度
height:100px; 高度
④display的属性
display:inline 行级元素
display:inline-block 呈现行级元素排版，保持块元素特征（宽、高）
display:none 元素不显示,不占位
display:block 块级元素
visibility: hidden; 元素不显示，占位
⑤透明度
/属性值 [0-1] 0：完全透明 1：不透明/
opacity: 0.8;
/*用rgba模式：可以达到底色透明，文字不透明*/
background-color: rgba(125,100,80,0.3);
⑥CSS3 效果
border-radius:10px; border半径
box-shadow:投影
动画：
.gooddiv{
width: 280px;
height: 270px;
background-color: #3385FF;
text-align: center;
padding-top: 10px;
cursor: pointer;
/*注意一定要写*/
transition: all 0.5s;
}
.gooddiv:hover{
/*css3*/
/*X轴 Y轴 平移 */
/*transform: translate(5px,5px);*/
/*旋转 deg度数单位*/
/*transform: rotateZ(180deg);*/
/*放大*/
/*transform: scale(1.2);*/
/*一边放大，一边旋转*/
transform: rotate(360deg) sscale(1.5);
}
（5）特效标签
①H5智能标签
音频：<audio src="file/陈奕迅 - 红玫瑰 (《白玫瑰》国语版).mp3" controls="controls"></audio>
视频：<video src="video/2.mp4" controls="controls" width="300" autoplay="autoplay" muted="muted" poster="video/2.jpg"></video>
②滚动
<marquee direction="up" scrollamount="3" width="300" height="300"onmouseover="stop()" onmouseout="start()">
北冥有鱼
<img src="img/banner_2.png" />
<img src="img/banner_3.png" />
</marquee>
（6）Float和display:inline-block的区别
Float脱离文档流，悬浮到页面上，文字会一环绕显示。
display:inline-block，没有脱离文档流，占行内位置。
（7）鼠标效果
cursor: pointer;鼠标效果 手型
cursor: url(img/menghuan.ico),auto; 鼠标效果 图片样子
（8）其他属性
Overflow:visible 显示
hidden 隐藏
atuo 自动
scroll 滑动
（9）postion:位置属性
①absolute 生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。
元素的位置通过"left", “top”, “right” 以及 “bottom” 属性进行规定。absolute 脱离文档流。
②fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。fixed 脱离文档流。
③relative 生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的LEFT 位置添加 20 像素。
它没有脱离文档流，相对原来文档流位置做相对的偏移。
④static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者z-index 声明）。
⑤inherit 规定应该从父元素继承 position 属性的值。
⑦static：静态定位是position的默认值，元素框正常生成，也就是没有定位时的正常显示。
