CSS基本的用法

 

一、css页面引入方法：
1、外联式：通过link标签，链接到外部样式表到页面中
   <link rel="stylesheet" type="text/css" href="css/main.css"/>
2、嵌入式：通过style标签，在网页上创建嵌入式的样式表
<style>
div{
   width:100px;
   height:100px;
   color:red
}
</style>

3、内嵌入式：通过标签的style属性，在标签上直接写样式
<div style=" width:100px;height:100px;color:red>......</div>

二、css文本设置
1、常用的应用文本css样式：
color:设置文本字体的颜色，如 color:red
font-size:设置文字大小，如：font-size:12px
font-family:设置文字的字体，如：font-family:"微软雅黑"
font-style:设置字体是否倾斜，如：font-style:"nomal",设置不倾斜；font-style:"italic"设置倾斜
font-weight:设置文字是否加粗，如：font-weight:bold;设置加粗，font-weight：normal;设置不加粗
line-height设置文字行高，设置行高相当于在每行文字的上下同时加间距，如：line-height:24px;
font同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写：
font：是否加粗 字号、行高字体；如：font nomal 12px/36px "微软雅黑"
text-decoration:设置文字的下划线，如：text-decoration:none,将文字下环线去掉
text-indent:设置文字首行缩进，如：text-indent：24排序，设置文字首行缩进24px
text-align:设置文字水平对齐方式，如text-align:center 设置文字水平居中

三、css颜色表示法：
1、颜色名表示：比如：red红色，gold金色
2、rgb表示：比如：rgb(255,0,0)表示红色
3、16进制数值表示：比如：#ff0000表示红色，这种可以简写#f00

四、css选择器：

1、标签选择器
标签选择器，此种选择器影响范围大，建议尽量应用在层级选择其中

举例：
*{
   margin：0;
   padding:0
}

div{
   color:red
}

2、id选择器（#）
通过ID名来选择元素，元素的ID名称不能重复，所以一个样式设置项只能应对页面上一个元素，不能复用，id名一般给程序员使用，所以不推荐使用作为id作为选择器

#box{
   color:red
}

<div id="box">......</div>

3、类选择器（ .）

通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器

.red{
   color:red
}

.big{
   font-size:20px
}

.mth10{
   margin-top:10px
}

<div class = "red">......</div>
<h1 class="red big mth10">......</h1>
<p class="red big mth10">......</p>

4、层级选择器
主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名的冲突
.box span{
   color:red
}

.box .red{
   color:pink.
}

.red{
   color:red
}

5、组选择器
多个选择器，如果有同样的样式设置，可以使用组选择器
.box1,.box2,.box3{
   witdh:100px;
   height:100px;
}

.box1{
   background:red;
}

.box2{
   background:pink;
}

.box3{
   background:gold;
}

<div class="box1">.....</div>
<div class="box2">.....</div>
<div class="box3">.....</div>

6、伪类及伪元素选择器
常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after，他们可以通过样式在元素中插入内容

.box1：hover{
   color:red;
}

.box2:before{
   content:"行首文字"
}

.box3:after{
   content:"行尾文字"
}



五、margin相关技巧：
1、设置元素水平居中：margin：X auto
2、margin负值让元素位移及边框合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距，合并后的外边距的高度等于两个发生合并的外边距的高度中较大者，解决方法如下：
1、使用这种特性
2、设置一边的外边距，一般设置margin-top
3、将元素浮动或者定位的

margin-top塌陷
在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败，解决方案如下：
1、外盒子设置一个边框
2、外部盒子设置overflow：hidden
3、使用伪元素
.clearfix:before{
   content:'';
   display:table
}



css元素溢出
   当子元素的尺寸超过父类的尺寸时，需要设置父类元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。

overflow的设置属性：
1、visible 默认值，内容不会被修剪，会呈现在元素框之类
2、hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动，清除margin-top塌陷的功能
3、scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容,显示滚动条不管是否溢出
4、auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容，溢出时才产生滚动条
5、inner 规定应该从父元素继承overflow属性的值



六、块元素，内联元素，内联块元素
元素就是标签，布局中常用的三种标签，块元素，内联元素，内联块元素
1、块元素
块元素，也可以称为行元素，布局中常用的标签：div,p,ul,li,h1-h6,dl,dd,dt等等都是快元素
他们在布局中的行为：
1、支持全部样式
2、如果没有设置宽度，默认为的宽度为父宽度100%
3、盒子占据一行，即使设置了宽度



2、内联元素：
内联元素，也可以称为行内元素，布局中常用的标签如：a,span,em,b,strong,i等等都是内联元素，
他们在布局中的行为：
1、支持部分样式（不支持宽、高、margin上下，padding上下）
2、宽高由内容决定
3、盒子并在一行
4、代码换行，盒子之间会产生间距
5、子元素是内联元素，父元素可以用text-align 属性设置水平对齐方式



解决内联元素间隙的方法
1、去除内联元素之间的换行
2、将内联元素的父级设置font-size为0，内联元素自身在设置font-size


3、内联块元素
内联块元素，也叫内行块元素，是新增的元素类型，现在元素没有归于此类别的，img和input元素的行为类似这种元素，但是也归类于内联元素，我们可以用display属性将块元素或者内联元素转化成这种元素，他们在布局中的表现：
1、支持全部样式
2、如果没有设置宽高，宽高由内有决定
3、盒子并在一行
4、代码换行，盒子会产生间距
5、子元素是内联块元素，父元素可以用text-align 属性设置水平对齐方式

这三种元素，可以通过display属性来相互转化，不过在实际开发中，块元素用的比较多，所以我们经常把内联元素转化为快元素，少量转化为内联元素，而要使用内联元素时，直接使用内联元素，而不用块元素转化了。

display属性：是用来设置元素的类型及隐藏的，常用属性有：
1、none 元素隐藏且不占位置
2、block 元素为块元素显示
3、inline 元素以内联元素显示
4、inline-block 元素以内联块元素显示


七、浮动
 1、浮动特性：
  1）浮动元素有左浮动（float left）和右浮动（float right）两种
  2）浮动的元素会向左或向右浮动，碰到父元素边界，其它元素才停下
  3）相邻浮动的块元素可以并在一行，超出父级宽度就换行
  4）浮动让行内元素或块元素自动转化为行内块元素（此时不会有行内块元素间隙问题）
  5）浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动元素，
形成文字饶图效果
  6）父元素如果没有设置尺寸（一般是高度不设置），父元素内整体浮动的元素无法撑开父元素，父元素需要清除浮动
  7）浮动元素之间没有垂直margin的合并

清除浮动方法：
1、父级上增加属性overflow：hidden
2、在最后一个子元素的后面加一个空div,给它样式属性clear both(不推荐)
3、使用成熟的清除浮动样式类：clearfix
.clearfix:after,.clearfix:before{
      content: "";
      display: table;
      clear:both;
}

.clearfix:after{
      clear:both;
}

.clearfix{
    zoom:1;
}



八、定位

1、文档流
文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右，先写的先排列，后写的排在后面，每个盒子都占据自己的位置

2、关于定位
我们可以使用css的position属性来设置元素的定位类型，position设置项如下：
1、relative 生成相对定位元素，元素所占据的文档流的位置保留，元素本身相对自身原位置进行偏移
2、absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位
3、fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位
4、static 默认值，没有定位，元素出现在正常的文档流中，相对于取消定位属性或者不设置定位属性。
5、inherit 从父元素继承position属性值

3、定位元素的偏移
定位的元素还需要用left，right，top或者bottom来设置相对于参照元素的偏移值

4、定位元素层级
定位元素是浮动的正常的文档流之上，可以用z-index属性来设置元素的层级

例如：
.box{

    ......

    position：absolute;  设置了绝对定位

    left:200px;相对于参照物元素左边向右偏移200px

    top:100px;相对于参照物元素顶部向下偏移100px

    z-index:10; 将元素层级设置为10

}



5、定位元素特性
绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素

background属性

background属性是css中应用比较多，且比较重要的一个属性，它是负责给盒子设置背景图片和背景颜色的，

background是一个复合属性，它可以分解成如下几个设置项：

1、background-color 设置背景颜色

2、background-image 设置背景图片地址

3、background-repeat 设置背景图片如何重复平铺

4、background-position 设置背景图片位置

5、background-attachment 设置背景图片是固定还是随着页面滚动条滚动



实际应用中，我们可以用background属性将上面所有的设置项放在一起，而且也建设这么做，这样做性能更

高，而且兼容更好。比如：“background：#000 url(bgimage.gif) no-repeat left center fixed”

这里面的#000是设置background-color；url(bgimage.gif)是设置background-image；“no-repeat”是设置

background-repeat;"left center"是设置background-position；“fixed"是设置background-attachment，

各个设置项用空格隔开，有的设置项不写也是可以的，它会使用默认值。



background-repeat属性：

  repeat-x:只平铺x轴方向

  repeat-y:只平铺y轴方向

  no-repeat:只平铺依次；

  repeat：平铺所有的



 background-position属性：

    水平方向：left center right

    垂直方向： top center bottom

    left top:左边的上面

    left center:左边的中间

    left bottom:左边下面；

    center top:中间的上面

    center center:中间的中间

    center bottom:中间下面；

    right top:右边的上面

    right center:右边的中间

    right bottom:右边下面；

    background-position: left top;

    也可以写数值：

    background-position：10px 10px



九、常用图片格式

图片格式：
1、psd
photoshop的专用格式
优点：完整保存图片的信息，包括未压缩的图像数据，图层，透明度等信息，方便图像的编辑
缺点：应用范围窄，图片容量相对较大

2、jpg
网页制作以及日常使用最普通的图像格式
优点：图像压缩效率高，图像容量相对最小
缺点：有损压缩，图像会丢失数据而失真，不支持透明度背景，不能制作成动画

3、gif
制作网页小动画的常用图像格式
优点：无损压缩，图像容量小，可以制作成动画，支持透明度
缺点：图像色彩范围最多只有255色，不能保持色彩丰富多彩的图像，不支持半透明，透明图像边缘有锯齿

4、png
网页制作及日常使用比较普遍的图像格式
优点：无损压缩，图像容量小，支持透明背景和半透明色彩，透明图像的边缘光滑
缺点:不能制作动画

5、webp
将取代jpg图像格式
优点：同jpg格式，容量相对jpg还要小
缺点：同jpg格式，目前不支持所有的浏览器

位图和矢量图格式（svg,flash)

位图也叫点阵图，是由一个个的方形的像素点排列在一起拼接而成的，位图在放大，图像会失真，

上面5种图像格式都属于位图

矢量图和位图组成图像的原理不同，它的图像轮廓是由函数曲线生成的，当放大图像时，实际的原理就是将曲线乘以一个背书

图像就可以轻易地放大，而且不会出现像素块，图像边缘也不会出现锯齿

svg
目前首选的网页矢量图格式
优点：图像容量小，图像放大不失真，支持透明背景和半透明色彩，图像边缘光滑

flsh
退出历史的重量级网页矢量图格式
优点：图像容量小图像放大不失真，支持透明背景和半透明色彩，图像边缘光滑，还可以制作动画，可编写交互
缺点：不支持搜索引擎，运行慢，浏览器需要安装插件才可以使用



总结：

在网页制作中，如何选择合适的图片格式？

1、在使用大幅度图片时，如果要使用不透明背景图片，就可以使用jpg图片；如果要使用透明或者半透明背景图片，就是用png

2、使用小幅度图片或者图标图片时，如果图片含多种颜色，可以使用GIF或png；

如果图片时单色，而且要求技术有很好的显示效果，可以使用svg;如果是图片时动画的，可以使用gif

 

十、css3圆角
设置某一个角的圆角，比如设置左上角的圆角：
  border-top-left-radius 30px 60px;
分别同时设置四个角：

border-radius：30px 60px 120px 150px
设置四个角相同时：
   border-radius：50%

十一、rgba(新增颜色表示法)
1、盒子透明度
   .box{
         opacity:0.1;
         <!-- 兼容IE -->
        filter:alpha(opacity=10)

}
2、rgba(0,0,0,0.1)前三个数值表示颜色，第四个数值表示颜色的透明度


十二、transform变换
1、translate(x,y)设置盒子的位移
2、scale（x,y)设置盒子的缩放
3、rotate(deg) 设置盒子的旋转
4、skew(x-angle,y-angle)设置盒子斜切
5、perspective 设置透视距离,理想值perspective（800px）
6、transform-style  flat|preserve-3d  设置盒子是否按3d空间显示
7、translateX，translateY，translateZ设置三维移动
8、rotateX，rotateY,rotateZ设置三维旋转
9、scaleX,scaleY,scaleZ设置三维缩放
10、tranform-origin 设置变形中心
11、backface-visibility 设置盒子背面是否可见
补充：
旋转的轴向
  x轴：从左往右
  y轴：从上往下
  z轴：从屏幕内往外
判断旋转的方向：让轴向对着自己，顺时针方向

十三、transition动画
1、transition-property:设置过度属性，比如：width，height，background-color
2、transition-duration：设置过度时间，比如1s 500ms
3、transition-timing-function 设置过度的运动方式，常用有
line(匀速)，ease（缓冲运动）
4、transition-delay设置动画的延迟
5、transition：property duration timing-function delay

十四、animation动画
1、@keyframes 定义关键帧动画
2、animation-name 动画名称
3、animation-duration 动画时间
4、animation-timing-function 动画曲线 linear（匀速） ease(缓冲) step(步数)
5、animation-delay 动画延迟
6、animation-iteration-count 动画播放次数 n |infinite
7、animation-direction 动画结束后是否反向还原 normal | Altermate
8、animation-play-state 动画状态 pause（停finite止） | running（运动）
9、animation-fill-mode 动画前后的状态 none(缺省）| forwards（结束时停留在最后一帧）|
backwards(开始时停留在定义的开始帧)| both(前后都应用)
10、animation:name duration timing-function delay iteration-count direction ;同时设置
十五、css 权重
css权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对于元素起作用，权重相同的，后写的样式会覆盖前面写的样式

权重的等级
可以把样式的应用方式分为几个等级，按照等级来计算权重
1、imporant ,加在样式属性值后，权重值为10000
2、内联样式，如：style=“”，权重值为1000
3、ID选择器，如：#content，权重值为100
4、类，伪类和属性选择器，如：content，:hover权重值为10
5、标签选择器和伪元素选择器，如：div,p,:before权重值为1
6、通用选择器（*），子选择器（>),相邻选择器（+），同胞选择器（-），权重值为0