css的定义和基本使用方法

css基本标签和用途

1.css和HTML的区别：
首先两者都是网页的组成部分，html主要构成网页的整体框架，css主要描述网页的内容。————比如：html里面有个杯子，css里面就是杯子的高度，宽度等一系列的值。其次两者写代码的区域有所不同，html的内容主要写在body标签里面，css的内容主要写在head标签里面（也可以写在专门css的文件里面–比如1.css),css代码具有继承和覆盖的特点。

2.css如何使用
css的代码需要写入head标签里面，还需要style标签<style type="text/css"></style>这样css代码才可以正常运行。代码怎么写呢？
css是对html里面的对象进行表述的，所以我们先在html里面给一个标签<p>我是一个p标签对象</p>，我们可以在<style type="text/css">p{font-size=36px；}</style>

我们在html所有的标签（a,h1,div,p,form,ul等）都可以按照这样的格式写css代码，如果html出现了两个p标签对象，那么这个css代码对这两个p标签都有影响；

那么如果我需要只对一个p标签有影响该怎么办呢？
–我们可以使用css中的选择器。
2.1常用选择器有id选择器和class选择器
id选择器通常只对一个对象产生效果；前提是该标签已经被定义了
比如<p id="one">那么css的代码要想修饰这个p标签就不能用上面的单纯的一个p了，这个p标签有了名字，可以用这个#one{font-size: 36px;}#＋id名字的形式；在设置id名字时候做到看到名字就知道这个标签是什么作用–比如<div id="hands"></div>可以知道这个div标签里面内容是手。
class选择器通常对一组样式要相同的标签；在css里面以.＋名字的形式（*代表对所有标签生效）
也可以重合使用，比如#one，.onebox{}还有p，div{}实现描述多个标签。

3.css代码里面的常用标签

---

1.background-color背景颜色，使用方法是background-color：red；（red/#ccc/rgb（））三种都是颜色的表达形式。
2.text-indent文本的缩进，使用方法是text-indent: 2em;用于调整文章段落的缩进。
3.font-size字体的大小，使用方法是font-size: 36px;
4.font-family字体的样式，使用方法是font-size：Serif ；（Sans-serif ，Monospace，Cursive，Fantasy）等
5.width宽，使用方法是width：100px；（20%）等
6.heigh高，使用方法是height：100px；（30%）等
width和height是div标签的css代码是必须要有的，不然没有高和宽的div是不显示内容的。但如果div里面有文字内容，那么这个div的宽和高由文字大小决定，换句话说文字不需要定义宽和高就能显示。

7.font-weight：normal[正常]bold[粗体]
8.text-align：left[左]center[中]right[右]
9.border边框，使用方法1是border: 1px solid black;（1px边框的粗细；black黑色也可以加其他颜色和颜色的表达形式）
使用方法2border-radius: 25px; 圆角边框（25px表示圆形的弧度，越大就越圆）用方法二这个标签时，前面必须要用方法一的语句
在制作网页的时候可以使用这个标签来先确定整体布局再添加内容
4.盒子模型：首先了解一下两个标签margin: 外距（标签到网页边界距离），padding: 内边距；（标签里面的内容到标签的距离）。
margin：100px；（上下左右距离网页边界100px;）
margin:100px 50px;(上下100px距离，左右50px距离；)
margin：100px 75px 50px;(上100px,左右75px,下50px)
margin: 100px 75px 50px 25px(上右下左)
padding是一样的。
（根据css代码具有继承的性质，我们在写css前会将所有html里面的标签用margin：0；padding0；进行定位，防止用户换浏览器打开该网站可以正常整洁的显示内容。如果html中标签过多，可以使用*对所有标签生效）

如图第七行。
5.绝对定位和相对定位
绝对定位是相对网页的距离；相对定位是对自己标签的距离；
position: absolute；（绝对定位）.position: relative；(相对定位)
在css代码中需要用到定位时，必须先定义是绝对的还是相对的。定义完成之后，有四个属性top高，bottom底，left左，right右。（例如top：100px；bottom：100px；等）用定位把自己需要的标签放在网页的任一个位子。
6.float浮动
浮动是将元素浮起来（相当于楼房，第一层被占用，我们让第一层浮起来，第一层就变成第二层，原来的第一层就没有内容，下面的其他内容会填补第一层的空缺成为新的第一层，我们看网站的时候相当于从天上看楼房，这时我们只能看到浮上来的第二层，第一层的内容就被覆盖了），让下面的内容上移（重合）。div是块状元素呈竖列输出，p，a标签是内联元素呈行输出。如果让两个div横输出，需要把他变成内联元素。需要在对应的div中自定义（display：inline）
同理变为块状元素（display：block）那么如何让两个div标签横着显示呢？

7.伪类：主要描述用户在对标签进行点击等一系列操作时，标签做出的反应。格式为–标签：方法{}
拿a链接标签为例子。
a:link {color: red；} 未访问的链接
a:visited {color: green；} 已访问的链接
a:hover {color:yellow；} 鼠标移动到链接上
a:active {color: blue；} 选定的链接
（如果这标签有id，则需要#＋id名字：方法{}）
8.css3中的主要标签
—————————————————————
1.background-size背景大小，可以对图片进行拉伸，使用方法：background-size:30% 40%;
background-origin定位背景地点，让内容出现在一个位置
（content-box、padding-box border-box ）使用方法background-origin：content-box。

2.文字阴影text-shadow，可以写水平和垂直阴影，模糊程度和阴影的颜色，例如text-shadow：10px 10px 5px red。
强制换行word-wrap，使用方法word-wrap：break-word；
3.动画@keyframes 动画名字；
比如@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
这个是我们自己定义的动画，如何使用它？需要用到animation标签，使用方法是animation：动画名字 动画时间
例如：
div
{
animation: myfirst 5s;
}div这个标签实现了我们定义的动画，产生动画效果。
我们的动画时间也可以自己定义
@keyframes myfirst
{
0%{background: red;}
60%{background：green；}
100%{background: yellow;}
}定义在什么时候改变颜色。

——3.1过渡效果动画（和伪类一样，只不过呈动画变化）
首先我们需要一个伪类，比如div：hover {color：red} 鼠标移动到标签上时，div变成红色。我们可以在div标签内写入
transition-property（需要进行动画效果的标签）: width; transition-duration（动画时间）: 1s;
transition-timing-function（动画速度）: linear（匀速）;（可以没有，默认为ease两边慢中间快）
——3.2：2D动画：先了解标签transform转变，此外还有五个小标签分别是
translate() 图像的移动，translate（x，y）x=left，y=top;例如transfrom:translate(100px;50px;)
rotate() 图像的顺时针翻转，rotate（30deg）（顺时针翻转30°，可以是负的）。例如transfrom：rotate（30deg）；
scale()图像的倍数大小，scale（x,y）x是宽，y是高。scale（2，4）表示宽变为原来的两倍，高变为原来的四倍。
skew()元素的翻转，把x轴和y轴分开翻转，skew（xdeg，ydeg）。
matrix() 混合方法需要六个参数。（就是把上面所有标签里的属性放在一块用，不熟练的话不建议使用。）
———3.3：3D动画：和2D一样，唯一的不同在于小标签后面都有X或Y表示在X轴或在Y轴产生效果。例如rotateX(30deg)表示对X轴上的元素进行3D的旋转。

结尾（有问题可以留下评论·=·。）