---恢复内容开始---
选择器语法
有三个问题需要自己学习
- 组合选择，父子
个人认为使用组合选择器是要注意加英文的逗号；父子选择其注意加空格
- 颜色
16进制颜色：#ffffff每两位代表一种颜色用三种颜色进行组合（red、green、blue)三种表示
- 单位
字体样式
- font-family - 类型
- font-size - 大小
- font-style - 风格 （normal italic）
- font-weight - 粗细 (200-700)
文本样式
- color
- text-indent - 首行缩进 (em)
- text-align - 水平对齐 （center left right）
- vertical-align - 垂直对齐 （top middle bottom） 通常放在img
- text-decoration - 装饰 （underline overline line-through）
- line-height - 行高
伪类选择器
- hover的用法(鼠标放上去就会显示的链接样式)
- <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> /* .box{ color:#f00; font-style:italic; font-size:20px; text-indent:40px; background:#0f0; height:100px; 100px; transition:all 1s ease; }*/ /*.box:hover{ background:#f00; 100%; transition:all 1s ease; text-decoration:underline; }*/ .box{ font-size:20px; font-family:"行书"; font-style:italic; color:#fff; background:#ff0; transition:all ls ease; } .box:hover { color:#00ff78; background:#a18d36; transition:all 1s ease; } </style> </head> <body> <span class="box">盒子1234586</span> </body> </html>
- #a:link{color:#124578}(单击的链接样式)
- #a:viseted{color:#124578 }(已经访问后的链接样式)
- #a:active{color:#000078}(单击释放的链接样式)
背景样式
- background-color
- background-image(当用背景图片时，背景颜色会填充以外的东西)
- background-position（北京元素的位置）
- background-repeat:repeat;(:no-repeat;)
- background-attachment:scroll;(背景图片随滚动)（fixed（背景图片固定））
列表样式
去除默认的小圆点
- li {list-style:none;}(去掉无序（ul）或者有序(ol)中的标号)
- li{list-style-type:circle;}(空圆类型)
- li{list-style-image:url(路径)}（换成小图片）
盒模型
- 主体 width , height------------------------------------------- (蛋黄)
- 内边距padding:10px 20px 30px 40px;-----------------(蛋清)(top right bottom left)
- border:10px(大小) solid(dashed,dotted) #002145;---(蛋壳)
- padding:10px 52px 32px 56px;----------------------------（鸡蛋与鸡蛋的距离）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 *{ 7 margin:0; 8 padding:0; 9 } 10 div{ 11 background:#00f; 12 } 13 p{ 14 background:#ff0; 15 } 16 .box1{ 17 background:#0f0; 18 19 height:54px; 20 width:100px; 21 /*蛋黄*/ 22 23 padding:20px 30px 10px 21px; 24 /*蛋清*/ 25 border:10px dotted #f00; 26 /*蛋壳：粗细；类型：solid dashed bdotted*/ 27 margin:10px 30px 40px 30px ; 28 } 29 .box2{ 30 height:50px; 31 width:100px; 32 padding:25px 50px; 33 margin:25px 25px; 34 } 35 </style> 36 </head> 37 <body> 38 <div><p class="box1">325</p></div> 39 <p class="box2">325</p> 40 </body> 41 </html>
浮动
- float
浮动和排队一样固定前一个其余的向他看其便可，但是要先分析好整个网页的结构，再用<div></div>进行嵌套包裹这养就可以安全的使用float:left(right none)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 *{ 7 padding:0; 8 margin:0; 9 } 10 .a11 { 11 float:left; 12 } 13 .a11 img{ 14 width:350px; 15 height:350px; 16 margin-right:10px; 17 /*第一部分*/ 18 19 } 20 .a2{ 21 float:left; 22 margin-right:10px; 23 } 24 .a21 img{ 25 width:210px; 26 } 27 .a21 p{ 28 margin-bottom:10px; 29 } 30 .a22 img{ 31 width:210px; 32 } 33 /*第二部分*/ 34 </style> 35 </head> 36 <body> 37 <div class="a1"> 38 <div class="a11"> 39 <img src="http://img-cdn2.luoo.net/pics/vol/596fad994e96d.jpg!/fwfh/640x452"/> 40 <p>微视频托书关12</p> 41 </div> 42 <div class="a2"> 43 <div class="a21"> 44 <img src="http://img-cdn2.luoo.net/pics/vol/596bbdcd2e33f.jpg!/fwfh/640x452"/> 45 <p>微视频托书关12</p> 46 </div> 47 <div class="a22"> 48 <img src="http://img-cdn2.luoo.net/pics/vol/596682b4b5769.jpg!/fwfh/640x452"> 49 <p>vol.932 微小相见</p> 50 </div>
51 </div>
52 <div>
53 <img src="img/01.jpg"/> 54 </div> 55 </div> 56 </body> 57 </html>
清出浮动（clear）
img{
clear:both
}
清出左右两侧的浮动，其中包括left，right等
浮动破坏了文档流 (父级盒子的高度没有) 怎么恢复
- 只要浮动了，结尾一定要加一堵墙 清除浮动
- overflow: hidden
display
知道行内元素和块级元素的表现及特征
- 行内元素：a、img、span、b(strong)、i(em)
- 块级元素：div、h1~h6、p、ul,li
块级元素中可以包含行内元素
行内元素中间不能包含块级元素
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>定位案例</title> 5 <link href="css/position案例.css" type="text/css" rel="stylesheet" /> 6 </head> 7 <body> 8 <div class="top-box1"> 9 <p class="p-box1">我是路标大啊啊</p> 10 <img src="http://img-cdn2.luoo.net/pics/vol/5977990c12d18.jpg!/fwfh/640x452"/> 11 </div> 12 <div class="top-box2"> 13 <img src="http://img-cdn2.luoo.net/pics/vol/5977990c12d18.jpg!/fwfh/640x452"/> 14 <p class="p-box2">欢迎来到广州，请跟着路标行走</p> 15 </div> 16 17 </body> 18 </html>
overflow属性
使用方法：用在父元素
应用场景：当子元素的宽高超出父元素的大小
overflow:hidden （隐藏）
overflow:auto （超出会出现滚动条）
1 .top-box2{ 2 height: 452px; 3 640px; 4 /*图片大小*/ 5 margin: 0 auto; 6 position:relative; 7 overflow: hidden; 8 9 } 10 .top-box2 .p-box2{ 11 100%; 12 height:50px; 13 position: absolute; 14 left: 0; 15 bottom: -80px; 16 opacity: 0; 17 transition: all 2s ease; 18 background: rgba(221,88,98,.6); 19 font-family: "黑体"; 20 font-size: 20px; 21 }
position定位
-
static 默认值 没有定位
-
fixed 固定定位
-
relative 相对定位
-
absolute 绝对定位
-
sticky 浮动定位 一定要注意兼容性，很多浏览器版本不支持
样式控制里面，文件的引入先后顺序对样式也有影响，顶级的优先级就是在属性后面加 !important
1.固定定位： 相对于浏览器窗口body,html
在使用了position:fixed以后，不给位置就在原地不动
动画中，transition只能够过渡同一个属性。
2.相对定位relative 相对于自身
有些元素需要在自身周围发生一些偏移，并且不影响其他元素的位置，使用relative定位。
3.绝对定位absolute
/* 参照物的标志
position属性产生了定位，这个盒子就相当于参照物
relative absolute fixed
找参照物时，首先从父级开始，看有没有position这个属性，有就以这个父级盒子定位，没有就继续往上级找，最终都没找到，就以body定位。
定位就会涉及到层叠，我们需要指明特定的元素 它的层叠的次序（相当于书的第几页）
前提条件，一定要定位了才能用
z-index:1;
transform变换
scale 缩放、translate 移动、rotate 旋转、skew 扭曲
1 .transform1{ 2 100px; 3 background:#f00; 4 } 5 .transform1:hover{ 6 transform: scale(2); 7 } 8 .transform2{ 9 100px; 10 background:#0f0; 11 } 12 .transform2:hover{ 13 transform: translateX(50PX); 14 } 15 .transform3{ 16 100px; 17 background:#00f; 18 } 19 .transform3:hover{ 20 transform: rotate(50deg); 21 } 22 .transform4{ 23 100px; 24 background:#ff0; 25 } 26 .transform4:hover{ 27 transform: skew(50deg); 28 }
透明度（opacity）
用法：opacity:0.2;
其中内部的值为（0~1）值越小越透明
---恢复内容结束---