CSS 3基础样式

1.边框加圆角

border-radius: 4px;

2.鼠标放上去变成手的形状

cursor: pointer

常见的一些样式

color:red; 字体颜色
font-family:arial; 字体样式
text-align:center; 文字内容居中显示，它有其它可选值left、right
background-color:red 背景色
border:1px solid green; 为元素添加边框，设置1 像素宽，实线，绿色

设置字的间距

p{letter-spacing:8px; }
<p>我想改变此行段落的字间距</p>

多出后隐藏

p{ height: 20px; width:100px; background:#ddd; overflow: hidden;}
<p>文字溢出时文本被隐藏，不信把overflow:hidden 去掉试试</p>

表格边框变为单线

border-collapse:collapse;
table{border-collapse:collapse; }
td{ border:1px solid red; } 用样式表只需要给td 加边框，但要在table 中设置collapse

文字道行缩进

text-indent

文字溢出用省略号显示

p{ white-space:nowrap; overflow:hidden; text-overflow: ellipsis;}

text-decoration 指定文字有无装饰

可选值
underline 指定文字的装饰是下划线
overline 指定文字的装饰是上划线
line-through 指定文字的装饰是贯穿线，类似于删除标签的效果

text-align 内容对齐方式，它是针对于元素的内容或行内元素（块元素，行内元素不起作用）

属性值left center right

背景相关

1.background-color 背景颜色
2.background-image 背景图片

background-image: url("../04I58PICaWv_1024.jpg"); width:100px; height:100px; background-size:100px; 需要指定宽和高。

3.background-repeat 背景图片是否重复
可选值
repeat-x 图片在横向上平铺
repeat-y 图片在纵向上平铺
no-repeat 不重复平铺
4.background-size 背景图片大小
5.background-attachment： 背景图片是否随内容滚动
fixed 背景图像相对于窗体固定，滚动条滚动图像不动，但它的容器会消失
6.background-position 背景图片位置（相对于外层容器）
可使用方位英文、百分比、确切的值进行定位
7.background 复合属性
background: url("boy.jpg") red no-repeat left top;
url是图片     red 是背景图下面的背景，no-repeat是不重复   left，top是相对父容器的距离

颜色相关

指定颜色的几种方式
颜色名称{color:green;}
RGB {color:rgb(0,0,0);} 即是代表红、绿、蓝，以这三种颜色拼出的
RGBA {color:rgba(0,0,0,.5);} 前面三位rgb 和上面一样，最后一位代表了透明度，这里是0.5 的透明度
十六进制{color:#ff0000;}
1.color 规定文本的颜色
2.opacity 设置元素颜色的透明度，它会进行继承，如果只是让背景有透明度，而不想让它里面的其它元素进行继承，可使用background:rgba();
1 为不透明，0 为完全透明

字体相关

1.font-style 指定文本的字体样式（正常、斜体）
normal 正常字体
italic 斜体字
2.font-weight 指定文字的粗细（只有粗体和正常字体）
normal 正常的字体
lighter 细体效果和normal 一样
bold 粗体，相当于number 为700
bolder 也是粗体
以数字表示粗细，范围100~900（600 以下是正常字体，600 以上是粗体）
3.font-size 指定文本字体大小
4.font-family 定义文本使用某个字体
SimSun 、SimHei、Microsoft YaHei

列表相关

设置列表项标记的图像
list-style-image

.test{list-style-image:url(skin/ico.png);} //作用于ul 而非li 上

<ul class="test">
<li>列表项一</li>
<li>列表项一</li>
<li>列表项一</li>
</ul>
去掉列表的项目符号
list-style:none;

关于边框

border-radius

border-radius 还可以分别设置四个方向的值
border-radius:0px 10px 10px 0px;
box-shadow
CSS3 中的box-shadow 属性被用来添加阴影。
书写格式
box-shadow: 水平阴影的位置、垂直阴影的位置、模糊距离、颜色;
box-shadow:10px 20px 5px blue;

CSS3 字体

以前CSS3 的版本，网页设计师不得不使用用户计算机上已经安装的字体。使用CSS3，网页设计师可以使用他/她喜欢的任何字体。当你发现您要使
用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。
使用时，在项目中建立好res 文件夹，用来放资源，把下载好的字体放入其中。
先用@font-face 定义字体名和地址，再在样式表中，像使用其它字体一样使用

@font-face{
font-family: myFirstFont; //你自定义的字体名
src: url('res/lxksf.ttf'); //字体存放的路径
}
p{
font-family:myFirstFont; //使用
font-size:50px;
}
<p>当前文本使用了你不曾见过的字体</p>

过度Transition

css 的transition 允许css 的属性值在一定的时间区间内平滑地过渡。

语法格式
transition: 属性名、时间、速度曲线、何时开始;
transition:width 2s ease-in 2s;    //一般只写一个时间就可以
2s 整个过渡效果持续的时间
ease-in 指定了过渡的动画效果
3s 过3 秒后开始执行过渡效果

Transform 转换

通常的属性包含了属性名和属性值，而CSS3 的transform 属性是用函数来定义的。
分为3d转换和2d转换

Transform 2D 最常用到的函数是rotate(30deg)
书写格式 transform: rotate(30deg);
通过rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。它以deg 为单位，代表了旋转的角度。

transform3D 相关函数

rotateX()
rotate 的翻转，好比一张纸，在根据X 轴水平的翻转，它是带有透视的。下图是从10deg 到180deg 的过程。

rotateY()
rotateY 与rotate 函数一样，只不过是通过Y 轴垂直翻转。


translate3d()
此函数用来规定指定元素在三维空间中的位移。它有三个值，x 轴,y 轴,z 轴.
语法结构:
translate3d(x,y,z)
1.x:表示在x 轴方向的位移。
2.y:表示在y 轴方向的位移。
3.z:表示在z 轴方向的位移。

动画animation

@keyframes 规则

如需在CSS3 中创建动画，需要学习@keyframes 规则。@keyframes 规则用于创建动画。在@keyframes 中规定某项CSS 样式，就能创建由当前
样式逐渐改为新样式的动画效果。
写规则时至少包含以下两个属性：
                        规定动画的时长---->就是你定义的这个动画需要多长时间完成
                        规定动画的名称---->就是你上面定义动画的名字



写好规则，再使用animation 属性来应用到某个元素
animation: myAnimation 5s;

注意：顺序一定要写好！！！！

img{
    width:100px; height: 100px; border-radius: 100%;
}
@keyframes CDturn{
    from{transform:rotate(0deg)}
    to{transform:rotate(360deg)}
}
img:hover{
    animation: 3s linear infinite CDturn;
    //分别代表  3s完成动画，一直匀速，循环，动画名称
}
<img src="img/cd.png" alt=""/>

CSS 特殊图形

制作三角型使用的是border 属性，内容区宽高值为0

span{
    display:inline-block;
    width:0px;
    height: 0px;
    border-top:50px solid red;
    border-left:50px solid blue;
    border-right:50px solid orange;
    border-bottom:50px solid green;
    }

梯形（和三角形不同的是添加了宽度）

div {
border-bottom: 80px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}

花瓣

.huxing{
    height: 100px;
    width: 100px;
    background-color: cyan;
    border-bottom-left-radius: 50%;
    border-top-left-radius: 50% 10%;
    border-top-right-radius: 50%;
}

怪异盒模型

就是平常的盒模型是宽+高+padding+border。即宽高不包含padding和border
默认的是：

 box-sizing: content-box;

怪异盒模型是指定好宽高之后，包含padding和border

 box-sizing: border-box;

响应式布局

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            background: red;

        }
        @media screen and (max-width: 700px){
            body{
                background: blue;
            }
        }
    </style>
</head>
<body>

</body>
</html>

意思是当屏幕小于700px的时候用那一套样式。

引入的css也可以这样设置
意思是当打印的时候引用这个样式

<link rel="stylesheet" href="media.css" media="print" />

img标签边距解决方法