很多朋友对于css样式效果大全和css样式库不太懂，今天就由小编来为大家分享，希望可以帮助到大家，下面一起来看看吧！
一、CSS常用样式二
实际应用，更多的使用italic属性值
实际应用中，行高的数值通过设计图获取，量取数值时需要使用一些辅助软件工具
选中文字工具，属性选中：不消除锯齿
字体、字号、行高、加粗、斜体都是font综合属性的单一属性。
font属性五个单一属性的值可以进行合写，属性值可以有2到多个，值之间用空格进行分隔。
font进行综合书写时，必须有字号和字体参与，而且必须字号在前，字体在后，不能颠倒顺序。
font属性经常对字体、字号、行高进行合写，书写顺序必须是字号、行高、字体，字号和行高之间必须用/进行分隔
如果font属性需要设置加粗和斜体，两个属性值只能写在最前面，两个值之间可以互换位置。后面的字号、行高、字体不能更改位置
作用：设置文本整体是否有线条的装饰效果
作用：设置段落首行是否进行缩进
属性值区分正负，正数表示向右缩进，负数表示向左缩进
作用：设置可以添加元素内容的区域的宽度。
作用：设置可以添加元素内容的区域的高度。
如果一个元素不添加 height属性，默认属性值为auto，浏览器会自动计算出实际高度，也就是是内部元素内容自动撑开的高度。元素的高度自适应内部内容的高度。
书写四个方向单一属性时，一般是按照顺时针规律书写：上、右、下、左
设置四个属性值，分配方向上、右、下、左。
设置三个值分配给上、左右、下。
设置两个值，分配给上下、左右。
设置属性值只有一个，四边的值相同。
属性值：颜色名或颜色值，整体类似 padding综合属性写法。
每个单一属性都必须与复合属性 border一致，设置三个属性值。
书写四个方向单一属性时，一般是按照顺时针规律书写：上、右、下、左
设置四个属性值，分配方向上、右、下、左。
设置三个值分配给上、左右、下。
设置两个值，分配给上下、左右。
设置属性值只有一个，四边的值相同。
给<body>标签设置整体文字样式，让大部分后代标签全部去继承
设计图中盒子高度占位是固定的，后面同级元素在高度下面加载。多余内容会溢出盒子。
设置了高度的盒子，如果内部元素的加载高度超过父级，会溢出。可以通过一个溢出的属性 overflow，进行溢出部分内容的显示效果设置。
要求盒子高度必须自适应内部内容的高度。
或者设置height的属性值是自动的。
一个元素内部嵌套的子元素，在父元素中居中。
针对类似<div>样式上必须独占一行的盒子，如果子盒子宽度低于父盒子宽度，可以设置子盒子的 margin值，水平方向的值都设置为 auto。
原因： auto只在水平方向有作用，水平方向的 margin如果设置为 auto，边距会自动无限增大，直到撑满整个父元素除了子元素宽度之外剩余的区域，如果两个水平方向都是 auto，两边都要无限大，只能达到一个平衡，两边距离相同，导致盒子居中。
一般情况下，一个父元素内部可以放一个或多个子元素，而且多个子元素要排成一行显示，必须保证父元素的宽度一定要足够（不考虑溢出情况），需要遵循一个设置尺寸的规律：所有子元素的宽度加在一起不能大于父元素的宽度 width。父元素的width≥所有子元素width+ padding+ border+ margin
如果不满足条件：要么多余的子元素掉下来不能在一排，要么溢出父元素
父子盒模型中，只有一个子元素，且子元素是类似<div>标签必须占一行的。不设置子元素的 width属性，子元素的 width属性值会自动加载父级元素的 width。如果同时设置了子元素水平方向的 padding和 border、 margin，不需要手动去进行内减，子元素的 width会自动收缩尺寸。
子元素所有的水平方向的位置所有属性的加和等于父元素的 width。
在垂直方向如果有两个元素的外边距有相遇的，浏览器中加载的真正的外边距不是两个间距的加和，而是两个边距中值较大的，边距值小的塌陷到了边距值大的值内部。
上面的元素有下边距，下面的元素有上边距，两个边距相遇，真正的盒子间距离是较大的那个值
父子元素之间也会出现 margin塌陷，父元素和子元素都设置了同方向的margin-top值，两个属性之间没有其他的内容进行隔离，导致两个属性相遇，发生margin塌陷。
本身父元素与上一个元素的距离是0，子元素如果设置了垂直方向的上边距，会带着父级一起掉下来。
水平方向的 margin没有塌陷现象。
在标准流中，大部分元素是区分等级的，习惯将元素划分为几种常见的加载级别：块级元素、行内元素、行内块元素等。
大部分容器级标签包括p标签都是块级元素，比如<div>、<h1>等。
大部分的文本级标签，比如<span>、<a>、<b>等。
比如<img>、<input>等。
可以通过 display属性更改一个标签的显示模式。
属性值：元素根据属性值不同，可以加载对应元素等级的显示模式的特点。
display属性更改的显示模式并没有改变标准流本质性质，页面还是只能从上往下加载，存在空白折叠现象等微观性质。要想实现更多的界面布局效果需要脱离标准流的限制。
标签元素脱离标准流的方法包括：浮动、绝对定位、固定定位。
margin塌陷现象出现在标准流中的，浮动元素已经脱离标准流，不再具有 margin塌陷现象。
与前面压盖效果结构类似，同级元素中前面的元素浮动，后面的元素不浮动，不浮动的元素内部还有一些文字，浮动的蓝盒子会压盖住粉盒子的一部分，但是文字内容不会被盖住，粉盒子中的文字会让开蓝盒子位置，围绕它进行加载。这种效果称为字围现象。
可以利用字围现象制作一些特殊的图文混排布局效果
给标准流的父元素强制给一个合适的高度
作用：清除标签元素自身受到的前面的浮动元素的影响。
给标准流父元素添加 clear属性，父元素不受前面浮动影响，不会再占有浮动让出的位置。
给内部有浮动子元素的父元素添加溢出隐藏 overflow: hidden;属性，可以解决浮动的所有问题。
父元素有了高度后，可以管理住内部所有的浮动元素，不会延伸到后面标签中影响贴边。
<a>标签可以根据用户行为不同，划分为四种状态，通过<a>标签的伪类可以将四种状态选中设置为不同的样式效果，用户触发对应行为，就可以加载对应的样式。
一般会将访问前和访问后状态设置为一样的效果，保证了页面的统一性，可以选择性的设置鼠标移上和鼠标点击状态。
<a>标签任何普通的选择器，可以同时选中四种状态，可以将四种状态设置为相同的样式，属性可以设置所有的<a>默认显示样式的属性，包括盒模型、文字等。
a:hover伪类选择器：设置鼠标移上时不一样的样式属性。
属性值都是使用代表方向的单词进行书写。
使用像素值作为背景定位的属性值。
百分比表示法使用百分比数字作为属性值。
background属性可以将五个单一属性的值进行合写。
属性值：可以有 1-5个属性值，值之间用空格进行分隔，背景定位的两个属性值算作一个属性值，不能被分开也不能颠倒顺序。五个属性值之间可以互换位置。
在<h1>标签是权重最高的标签，一般会在内部书写最重要的内容，比如 logo图片、最大的标题等。
另外<h1>内部的文字，可以帮助提高 SEO搜索排名。
在设置的是 logo图片时，如果使用插入图，就不能书写搜索关键字。
如果想解决 SEO问题，可以将 HTML结构中，插入图换成搜索关键字，然后使用 css添加背景图给<a>标签或<h1>标签。
在一个盒子中有背景图部分，而且有文字内容，文字会让开背景图区域进行加载，
背景区域应该使用 padding挤出位置。
四个方向的 padding都可能用于添加背景图。
当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次求才能展现给用户。
然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了 CSS精灵技术（也称 CSS Sprites、 CSS雪碧）。
CSS精灵是一种处理网页背景图像的方式。
它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。
通常情况下，这个由很多小的背景图像合成的大图被称为精灵图。
CSS3支持背景半透明的写法，颜色值增加了一种 rgba模式。
rgba模式：在 rgb基础上增加了一个不透明度的设置，不透明度 alpha取值范围在0-1之间， 0表示完全透明， 1表示完全不透明， 0.5表示半透明。
书写方式： rgba(红色，绿色，蓝色，不透明度)
注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响。
通过 background-size设置背景图片的尺寸，就像我们设置<img>的尺寸一样，在移动 Web开发中做屏幕适配应用非常广泛。
CSS3中规定，一个盒子上，可以添加多个背景图片。
background-image的属性值书写时，以逗号分隔多背景的 URL路径地址。
注意：背景加载时，先写的背景压盖后写的背景图片。
作用：设置定位的元素，它需要根据某个参考元素发生位置的偏移。
定位的元素要想发生位置的移动，必须搭配偏移量属性进行设置。
属性值：常用 px为单位的数值，或者百分比。
属性值： absolute，绝对的意思。
参考元素：参考的是距离最近的有定位的祖先元素，如果祖先都没有定位，参考<body>。必须搭配偏移量属性才会发生位置移动。
性质：绝对定位的元素脱离标准流，会让出标准流位置，可以设置宽高，也可以随时定义位置，绝对定位的元素不设置宽高只能被内容撑开。
注意1：绝对定位的参考元素是不固定的，不同的参考元素以及不同的偏移量组合，会导致绝对定位元素的参考点不同，具体位移效果不同。
注意2：在绝对定位中，由于参考点不同， left正值不再等价于 right的负值。
以<body>为参考元素时，参考点的确定与偏移量方向有关
第一，如果有 top参与的定位，参考点就是<body>页面的左上顶点和右上顶点。自身的对比点是盒子的所有盒模型属性最外面的左上角或右上角。
第二，如果有 bottom参与的绝对定位，参考点是<body>页面首屏的左下顶点或右下顶点。对比点是盒子的所有盒模型属性最外面的左下角或右下角。
实际应用中，如果以<body>为参考元素，不同分辨率的浏览器中，绝对定位的元素位置是不同的，所以较少使用<body>作为参考元素。
如果祖先级中有定位的元素，就不会去参考<body>。
参考元素：参考的是祖先元素中有任意定位的，在 HTML结构中距离目标最近的祖先。
如果绝对定位的参考元素是某个祖先级，参考点是盒子 border以内的四个顶点，组合方向决定了参考点。绝对定位的元素只关心对比点和参考点之间的距离，会忽视参考元素的 padding区域。
所有的定位类型都可以实现压盖效果。
由于绝对定位的元素脱标，不占标准流位置，压盖效果更彻底，实际工作中，常见的是绝对定位制作压盖。
定位的元素不区分定位类型，都会去压盖标准流或浮动的元素。
如果都是定位的元素，在 HTML中后写定位压盖先写的定位。
更改定位的元素的压盖顺序，设置一个 z-index属性。
二、CSS的样式有哪些
1、层叠样式表（CascadingStyleSheet，CSS）是一系列样式或格式规格的集合，用于控制网页样式并允许将样式与网页内容分离的一种标记性语言。它是W3C组织用于改善HTML在显示网页方面的缺陷。虽然HTML在发布时已经制定了各种网页样式标签和各种页面修饰属性，但是随着网页容纳的信息越来越多，这种把信息显示内容与信息显示样式混在一起的方法，已经无法满足人们对网络信息的快速搜索需求，更不能适应大数据时代的展示数据的要求。
2、CSS的每一个样式表都是由相对应的样式规则组成的，使用HTML中的标签可以将样式表规则加入到HTML。标签位于HTML的head部分，其中也包含网页的样式规划，如图1所示。CSS语句可以内嵌在HTML中，所以编写CSS样式规则和编写HTML的方法相同。CSS语言不需要编译，也不需要特殊处理。用户只要把它们放在标签之间或者编写为一个单独的文件，然后将文件的扩展名保存为.css，利用标签链接或者导入到网页中即可。
3、使用CSS样式可以对多个文档的样式进行控制，当CSS样式更新后，所有应用该CSS样式的页面都会自动更新。CSS样式可以页面元素进行定位、特殊效果和超链接效果等独特的HTML属性，可以充分地弥补HTML的不足，简化网页的源代码，避免重复劳动，减轻工作量。CSS具有以下优势：
4、CSS符合Web标准。W3C组织推荐CSS技术将替代HTML的表格标签、标签、标签以及其他用于表现的HTLM元素。
5、提高页面的浏览速度。使用CSS样式比传统的Web设计方法至少节约50%以上的文件大小。
6、缩短网站改版周期。只需要修改相应CSS文件就可以重新设计一个有成百上千页面的站点。
7、强大的字体控制和排版能力。Font标签对于字体控制能力远没有CSS对于字体的控制能力强，使用CSS样式后不需要在使用font标签来控制文章标题、字体颜色以及字体样式等。
8、CSS易于编写。Dreamweaver提供了CSS编写辅助工具。
9、CSS具有良好的兼容性。只要浏览器能够识别CSS样式都可以很好的应用它。
10、表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中，让多个网页文件共同使用它，省去在每一个网页文件中都要重复设定样式的麻烦。
11、CSS的语法结构由3部分构成：选择器、属性和值。
12、选择器{样式属性:取值;样式属性:取值;样式属性:取值;……}选择器（Selector）通常是指用户希望定义的HTML元素或标签，如body、h1；也可以是自定义的id或class的标签，如#main选择器表示选择，即一个被指定了main为id的对象。浏览器将对CSS选择器进行严格的解析，每一组样式均会被浏览器应用到对应的对象上。
13、属性（Property）是用户希望改变的属性，并且每个属性都有一个值。对于每一个HTML中的标签，CSS都提供了丰富的样式属性，如颜色、大小、位置以及浮动方式等。
14、值（Value）指属性的值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）。属性值有两种形式：一种是指定范围的值，如float属性的取值为left、right和none；另一种为数值，如height属性取值为0~9999px或者通过其他数学单位来指定。
15、例如，定义一个网页字体大小为12像素、加粗，段落首行缩进2字符，则可以设置样式如下：无标题文档
层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
16、层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
17、CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。
18、Body{font-size:12px;font-weight:bold;text-indent:2em;}p{backgroundcolor:#FF00FF;}由于CSS语言自动忽略空格（除了选择器内部的空格），因此可以利用空格和换行符来美化CSS样式源代码，上面的代码可以进行如下美化：
19、Body{font-size:12px;font-weight:bold;text-indent:2em;}p{background-color:#FF00FF;}经过美化的CSS源代码看上去一目了然，既方便阅读，也便于修改。
20、CSS源代码有时候需要通过一些注释来标注，CSS代码表示什么意思。在HTML中注释标记使用“”，CSS中注释标记使用“/*注释内容*/”。例如，可以对上面的代码进行注释：
21、Body{/*页面的基本属性*/font-size:12px;font-weight:bold;text-indent:2em;}/*设置段落的背景颜色为紫色*/p{background-color:#FF00FF;}添加CSS的方法
22、在HTML中添加CSS的方法主要有4种，分别为链接内嵌样式、内部样式表、链接外部样式表和导入外部样式表。
23、内嵌样式表是混合在HTML标记里使用的，该方法可以很简单地对某个元素单独定义样式，主要是在body内实现。
24、内嵌样式表的使用是直接在HTML标记里加入style参数，而style参数的内容就是CSS的属性和值，在style引号里的内容相当于在样式表的大括号里的内容，其格式如下：
三、5、CSS样式之动画效果
阴影:通过合理添加阴影可以使平面网页内容显示出立体的效果
(1)阴影在x轴方向的偏移,正右负左
(2)阴影在y轴方向的偏移,正下负上
(3)阴影的模糊度,数值越大,阴影越模糊
(4)阴影的范围,数值越大,阴影越大
(6)阴影位置,默认outset盒子外阴影, inset盒子内阴影
文字阴影不能像盒子阴影一样叠加阴影。
可以通过渐变为标签设置一定梯度变化的背景色
渐变色只能给标签的background-image样式赋值。
1、线性渐变：-webkit-linear-gradient
1)线性的角度或方向,默认从上到下渐变
(1) left/ right/ top/ bottom设置渐变的开始方向
(2)角度的设置,单位deg, 0deg在3点钟方向,正角度逆时针旋转,负角度顺时针旋转。
2)渐变的颜色和阶段,如果不设置阶段,各个自动平分
2、径向渐变,以圆心向四周沿着半径方向渐变：-webkit-radial-gradient
(1)设置圆的类型,默认椭圆,可以设置circle
倒影：通过-webkit-box-reflect来为标签设置倒影
倒影目前只在 Chrome和 Safari浏览器生效
过渡动画效果:将标签的样式变化以连续平滑的方式显示,类似于动画。
1）transition-property:设置过渡需要表现表现的样式属性,通常使用 all来设置所有样式变化都用过渡显示。
2）transition-duration:设置过渡的持续时间。
3）transition-delay:设置过渡效果的延迟时间。
4）transition-timing-function:设置过渡的速度曲线。
过渡效果，可以简写，用空格可空开过渡样式的各个值，不分先后，当存在两个时间时，第一个为过渡持续时间，第二个为过渡延迟时间。
通过 transform来为标签设置变换
translateX():设置标签沿着x轴移动的距离
translateY():设置标签沿着y轴移动的距离
translate():设置标签沿着xy轴的移动距离，第一个值表示x轴平移，第二个值表示y轴平移
x轴水平向右为正方向，y轴向下为正方向
平移会保留标签原本位置，相对自身原本位置平移
默认旋转点在标签的正中心，正角度使标签沿着顺时针旋转，负角度使标签沿着逆时针旋转。
旋转点又是标签变换的坐标系原点
缩放变换，放大缩小的是标签坐标系的比例，例如，放大2倍，坐标系中1px就变成了2px；注意，一旦坐标系比例发生变化，会影响其他变换，例如：平移变换100px在2倍坐标系下，就会平移200px。
transform-origin设置标签变换参照点位置:
（1）left/right/top/bottom/center来设置特殊位置
第一个值表示x轴方向对参照点位置的设置
第二个值表示y轴方向对参照点位置的设置
注意，一旦为标签更改变换参照点，那么变换参照点的基准就变成了标签左上角为原点。
（1）默认变换参照点在标签的正中心，x轴为穿过参照点水平轴，向右为正，y轴是穿过参照点竖直轴，向下为正。
（2）平移、旋转、缩放都会改变标签坐标系的状态。
（3）变换都是参照标签初始位置进行变换。
（1）和2d变换相似，只是在2d变换平面的基础上，多出了一条，垂直于标签平面并默认向外为正的z轴。
（2）3d变换需要为变换标签的父标签设置变换类型为3d，相当于在该标签下生成了一块3d空间。
（3）3d变换下，只有平移和旋转变换，没有缩放。
（4）3d变换中,可以通过改变标签变换参照点位置来改变XYZ轴的位置
1、 animation动画，配合@keyframes来为标签设置关键帧动画
1）animation-name：动画名称，用于为动画绑定关键帧
2）animation-duration：动画播放时间
3）animation-delay：动画延迟时间
4）animation-timing-function：动画缓动效果
5）animation-direction：设置动画方向
alternate，当播放次数大于一，返向播放
6）animation-iteration-count：设置动画播放次数
7）animation-fill-mode：设置动画结束位置
注意： animation同样存在简写，将样式值以空格隔开，不区分先后，两个时间同时出现，第一个为播放时间，第二个为延迟时间。
一些css3样式只在部分浏览器生效,可以通过添加兼容前缀的形式来对部分低版本浏览器兼容
例如: transition: all 1s linear;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
nimation、transition、transform、gradient等css3样式都应添加前缀进行多类型多版本浏览器兼容。
关于css样式效果大全，css样式库的介绍到此结束，希望对大家有所帮助。
