07-19
1.文本设置
<!--
text-align:文本对齐方式
left 左对齐
right 右对齐
center 文本居中
letter-spacing:字间距
text-transform:英文的大小写
capitalize 首字母大写
uppercase 全部大写
lowercase 全部小写
text-indent:首行缩进
vertical-align:垂直居中 若不是行内元素还要设置display:table-cell
middle
-->
我是一段文字
it is just a noob!
我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字
我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字
2.文本装饰
<!--
text-decoration文本装饰
text-decoration:装饰的种类 装饰的样式 装饰的颜色;
种类：
none去除下划线
underline下划线
overline上划线
line-through管穿线
样式：
solid实线
dashed虚线
dotted点线状
double双实线
wavy波浪线
list-style列表样式
none去除列表小圆点
-->
点击
1
2
3
3.文字阴影
<!--
text-shadow 文字阴影
text-shadow: x偏移量 y偏移量 模糊程度 阴影颜色;
-->
我是一个没有感情的影子
4.边框
div{
width: 100px;
height: 100px;
margin-top: 10px;
}
div:nth-of-type(1){
background-color: aquamarine;
border: 10px solid blue;
}
div:nth-of-type(2){
background-color: violet;
border: 10px dotted black;
}
div:nth-of-type(3){
background-color: greenyellow;
border: 10px dashed black;
}
div:nth-of-type(4){
background-color: pink;
border-left: 10px solid yellow;
}
div:nth-of-type(5){
background-color: #ff00fa;
border-right: 5px solid yellow;
}
div:nth-of-type(6){
width: 0;
height: 0;
/* background-color: #ff00fa; */
border-right: 100px solid transparent;
border-top: 100px solid transparent;
border-left: 100px solid transparent;
border-bottom: 100px solid blueviolet;
}
<!--
border边框
border-width边框宽度
border-style边框样式
solid实线
dashed虚线
dotted点线状
double双实线
border-color边框颜色 默认为黑色
边框分为四个方向：top right bottom left
复合写法： border:宽度 样式 颜色;
-->
5.背景
<!--
背景:background
background-color 设置背景颜色
background-image 设置背景图片,通过url引入
background-repeat 设置图片是否重复
repeat重复
repeat-x x轴重复
repeat-y y轴重复
no-repeat 不重复
background-position 设置背景图片的位置(x,y) top left right bottom center
background-size 设置图像的大小 单位:百分比 像素
注意:背景颜色和背景图片不能同时设置
复合写法
background:image repeat position size;
background:url('images/2.jpeg') no-repeat center center/500px 300px;
-->
6.背景图像固定
<!--
background-attachment设置背景固定样式
fixed:背景图以文档为参照物,文档移动才移动
scroll(默认):图片以文字窗口为定位,图片固定,文字移动
local:图片以覆盖的文字为定位,跟随滑轮滚动图片也滑动
-->
7.背景图像两侧裁剪
.demo{
width: 500px;
height: 500px;
margin: 0 auto;
background-image: url('http://pic41.nipic.com/20140508/18609517_112216473140_2.jpg');
background: url('http://pic41.nipic.com/20140508/18609517_112216473140_2.jpg') no-repeat center center/100% 100%;
}
<!--
图片裁剪,当窗口缩小时,背景图片只会向两侧减小或者增加,不会改变原始比例尺寸
-->
8.外补白.html
<!--
外补白:margin
一个参数:同时作用于四个方向
两个参数:上下 左右 常见margin:0 auto;
四个参数:上 下 左 右
-->
9.内补白.html
<!--
内补白padding
一个参数：同时作用于四个方向
两个参数：上下 左右
四个参数：上 右 下 左
分为四个方向:top bottom left right
-->
10.网页常见样式
*{
margin:0;
padding:0;
}
a{
text-decoration:none;
}
ul{
list-style:none;
}
div{
width:100%;
height:200px;
background:orange;