那时归纳的是CSS3的自学文本

一、CSS概要

CSS3是CSS控制技术的升级换代版，CSS即竹节式样表(Cascading StyleSheet)。CSS3词汇是向着组件化产业发展的，把它还原成小的组件，因此重新加入更多捷伊组件进去：

箱子数学模型文字特效前面板梯形动画电影卡代纳产业布局界面转动蓝紫色 …

二、CSS3的应用领域

2.1.DT示例

CSS示例：采用CSS对html网页中的原素同时实现单对单，两对多或是多对一的掌控：

示例 { 式样 }

1.特性示例

在CSS3中新增了四个示例:[att*=val];[att^=val];[att$=val]–>att则表示为特性，val则表示为特性的特性值。

[att*=val]:假如原素用att则表示的特性的值中包涵val选定的字符串，所以该原素采用那个式样。

[att$=val]:如果原素用att则表示的特性的特性值的结尾字符串用val选定的字符串，所以该原素采用那个式样。

[att^=val]:假如原素用att则表示的特性的特性值的结尾字符串杜博韦val选定的字符串，所以该原素采用那个式样。

注意： /假如A43EI235E位数的这时候该式样不能表明获得成功，须要用\相连与位数前段时间的记号特别注意！多于’-‘的字符串须要加’\’/

<head> <meta charset=“UTF-8”> <title>css3中的特性选择器</title> <style> /*1.[att*=val] 此时多于id=section1A的div会拥有该式样*/ [id*= section1]{ background-color: blueviolet; }/*2.[att^=val] 此时多于id=footer的div会拥有该式样*/ [id^= f]{ background-color: blue; } /*3.[att$=val] 此时多于id=sectionB的div会拥有该式样*/ [id$= B]{ background-color: chartreuse; } /*特别注意！*/ [id$= \-1]{ background-color: crimson; } </style> </head> <body> <h1>CSS3中的特性示例</h1> <div id=“section1A”>section1A</div> <div id=“sectionB”>sectionB</div> <div id=“section2-1”>section2-1</div> <div id=“footer”>footer</div> </body>

2.结构性伪类示例

(1)类示例

采用类示例把相同的原素定义成不同的式样，伪类示例是已经定义好的不可以随便起名。p.right{ color:red; }p.left{ colot:blue; }

(2)伪类示例—-最常见的伪类示例：a（采用顺序为：未，已，悬，停）

a:link{ color: #ff6600; } a:visited{ color: blueviolet; } a:hover{ color: aqua; } /*鼠标点击时*/ a:active{ color: darkblue; }

(3)伪原素示例

针对于CSS中已经定义好的伪原素采用的示例(first-line;first-letter;before;after)。示例:伪原素{ 特性:值; } 示例.类名:伪原素{ 特性:值; }

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年自学的web前端自学干货，各种框架都有整理，送给每一位前端小伙伴，想

first-line伪原素示例：向某个原素中的第一行文字采用式样。

first-letter伪类示例：向某个原素中的文字的首字母或是第一个文字采用式样。

before：在某个原素之前插入一些文本。

after：在某个原素之后插入一些文本。

可以采用before和after伪原素在网页中插入文字，图像，项目编号等。

插入文字：E:before/after

排除一些不须要插入文本的原素：E:none：before/after

插入图像

插入项目编号

a.在多个标题前加上编号：counter特性对项目新增编号

原素:before{ content:counter(计数器); } 原素{ counter-increment:content特性值中所选定的计数器名称； } b.对编号中添加文字 c.选定编号的式样 d.指定编号的种类：list-style-type e.编号嵌套，重置编号要对哪一个原素进行重置，所以就在该原素的父原素上进行设置reset。 f.中编号中嵌入大编号 h2:before{ content:counter(大编号计数器)–conter(中编号计数器); g.在字符串串两边嵌套文字符串号:open-quoter&close-quoter<head> <meta charset=“UTF-8”> <title>伪原素示例</title> <style> p:first-line{ color: blueviolet; } p:first-letter{ color: aqua; }li:before{ content: “~~~”; color: #000; } li:after{ content: “~~~”; color: darkred; }</style> </head> <body> <h1>CSS中主要有四个伪类示例</h1> <p> CSS中主要有四个伪类示例<br />first-line伪原素示例：向某个原素中的第一行文字采用式样</p> <p> first-letter伪类示例：向某个原素中的文字的首字母或是第一个文字采用式样 </p> <h4>befor&after</h4> <ul> <li><a href=“first.html”>balabala</a></li> </ul> </body>

(4)结构性伪类示例

root示例：将式样绑定到网页的根原素中。not示例：只对某个结构原素采用式样，但该原素下面的子结构原素不采用该式样。empty示例：选定当原素中文本为空白时表明的式样。<head> <style> /*empty示例*/ :empty{ background-color: darkviolet; }</style> </head> <body> <table border=“1” cellpadding=“0” cellspacing=“0” width=“100%”> <tr> <td>1</td> <td>2</td> <td>3</td> <td></td> </tr> </table> </body>target示例：在用户点击了超链接并转到target原素后，对网页中某个target原素选定式样。<head> <style> /*target示例*/ :target{ background-color: blanchedalmond; color: brown; } </style> </head> <body> <h2>target示例</h2> <a href=“#A”>A</a> <a href=“#B”>B</a> <div id=“A”> <h2>A标题</h2> <p>文本</p> </div> <div id=“B”> <h2>B标题</h2> <p>文本</p> </div> </body>

first-child：单独选定第一个子原素的式样。

last-child：单独选定最后一个子原素的式样。

nth-child：示例匹配正数下来的第N个子原素，nth-child(odd)为第奇数个子原素，nth-child(even)为第偶数个子原素。

nth-last-child(n)：匹配倒数数下来第n个子原素。

nth-of-type：正数，当选定原素为标题加文本的这时候，假如采用上面的方法会导致真正的选定原素不被获得成功选定，因此须要采用nth-first-type方法进行选定。

nth-last-type：倒数，同nth-first-type。

循环采用式样：nth-child(An+B)–A 则表示每次循环中共包括几种式样，B则表示选定的式样在循环中所处的位置。

only-child：只对一个原素起作用。

<head> <meta charset=“UTF-8”> <title>结构性伪类示例</title> <style> /* 示例first-child；last-child；nth-child;nth-last-child*/ li:first-child{ background-color: darkviolet; } li:last-child{ background-color: chartreuse; }li:nth-child(3){ background-color: cadetblue; } li:nth-child(odd){ background-color: aquamarine; } li:nth-child(even){ background-color: cornflowerblue; } li:nth-last-child(3){ background-color: darkgrey; } /*循环*/ li:nth-child(4n+1){ background-color: aquamarine; }li:nth-child(4n+2){ background-color: indianred; } /*唯一的*/ li:only-child{ background-color: hotpink; } /*存在的问题*/ h2:nth-child(2){ background-color: darkgoldenrod; } h2:nth-child(odd){ background-color: darkgoldenrod; } h2:nth-child(even){ background-color: darkgoldenrod; }h2:nth-of-type(odd){ background-color: chartreuse; } h2:nth-of-type(even){ background-color: aquamarine; } </style> </head> <body> <h1>示例first-child；last-child；nth-child;nth-last-child</h1> <ul> <li>No.1</li><li>No.2</li><li>No.3</li><li>No.4</li> <li>No.5</li><li>No.6</li><li>No.7</li><li>No.8</li> <li>No.9</li><li>No.10</li> <li>No.11</li><li>No.12</li> </ul> <h1>唯一的</h1> <ul> <li>唯一,多加一个就没有啦</li> </ul> <div id=“A”> <h2>A标题</h2><p>文本</p> <h2>B标题</h2><p>文本</p> </div> </body>

3.UI原素状态伪类示例

选定的式样多于在原素处于某种状态下才起作用，在默认状态下不起作用！示例:伪原素{ 特性:值; } 示例.类名:伪原素{ 特性:值; }

first-line伪原素示例：向某个原素中的第一行文字采用式样。

first-letter伪类示例：向某个原素中的文字的首字母或是第一个文字采用式样。

before：在某个原素之前插入一些文本。

after：在某个原素之后插入一些文本。

可以采用before和after伪原素在网页中插入文字，图像，项目编号等。

插入文字：E:before/after

排除一些不须要插入文本的原素：E:none：before/after

插入图像

插入项目编号

a.在多个标题前加上编号：counter特性对项目新增编号

原素:before{ content:counter(计数器); } 原素{ counter-increment:content特性值中所选定的计数器名称； } b.对编号中添加文字 c.选定编号的式样 d.选定编号的种类：list-style-type e.编号嵌套，重置编号要对哪一个原素进行重置，所以就在该原素的父原素上进行设置reset。 f.中编号中嵌入大编号h2:before{ content:counter(大编号计数器)–conter(中编号计数器); g.在字符串串两边嵌套文字符串号:open-quoter&close-quoter <head> <meta charset=“UTF-8”> <title>伪原素示例</title> <style> p:first-line{ color: blueviolet; }p:first-letter{ color: aqua; } li:before{ content: “~~~”; color: #000; } li:after{ content: “~~~”; color: darkred; } </style> </head> <body> <h1>CSS中主要有四个伪类示例</h1> <p>CSS中主要有四个伪类示例<br /> first-line伪原素示例：向某个原素中的第一行文字采用式样 </p> <p> first-letter伪类示例：向某个原素中的文字的首字母或是第一个文字采用式样 </p> <h4>befor&after</h4> <ul> <li><a href=“first.html”>balabala</a></li> </ul> </body>

(4)结构性伪类示例

root示例：将式样绑定到页面的根原素中。not示例：只对某个结构原素采用式样，但该原素下面的子结构原素不采用该式样。empty示例：选定当原素中文本为空白时表明的式样。<head> <style> /*empty示例*/ :empty{ background-color: darkviolet; } </style> </head> <body> <table border=“1” cellpadding=“0” cellspacing=“0” width=“100%”> <tr> <td>1</td> <td>2</td> <td>3</td> <td></td> </tr> </table> </body>target示例：在用户点击了超链接并转到target原素后，对网页中某个target原素选定式样。<head> <style> /*target示例*/ :target{ background-color: blanchedalmond;color: brown; } </style> </head> <body> <h2>target示例</h2> <a href=“#A”>A</a> <a href=“#B”>B</a> <div id=“A”> <h2>A标题</h2> <p>文本</p> </div> <div id=“B”> <h2>B标题</h2> <p>文本</p> </div> </body>

first-child：单独选定第一个子原素的式样。

last-child：单独选定最后一个子原素的式样。

nth-child：示例匹配正数下来的第N个子原素，nth-child(odd)为第奇数个子原素，nth-child(even)为第偶数个子原素。

nth-last-child(n)：匹配倒数数下来第n个子原素。

nth-last-type：倒数，同nth-first-type。

循环采用式样：nth-child(An+B)–A 则表示每次循环中共包括几种式样，B表示选定的式样在循环中所处的位置。

only-child：只对一个原素起作用。

<head> <meta charset=“UTF-8”> <title>结构性伪类示例</title> <style> /* 示例first-child；last-child；nth-child;nth-last-child*/ li:first-child{ background-color: darkviolet; }li:last-child{ background-color: chartreuse; } li:nth-child(3){ background-color: cadetblue; }li:nth-child(odd){ background-color: aquamarine; } li:nth-child(even){ background-color: cornflowerblue; } li:nth-last-child(3){ background-color: darkgrey; } /*循环*/ li:nth-child(4n+1){ background-color: aquamarine; } li:nth-child(4n+2){ background-color: indianred; }/*唯一的*/ li:only-child{ background-color: hotpink; } /*存在的问题*/ h2:nth-child(2){ background-color: darkgoldenrod; } h2:nth-child(odd){ background-color: darkgoldenrod; } h2:nth-child(even){ background-color: darkgoldenrod; } h2:nth-of-type(odd){ background-color: chartreuse; }h2:nth-of-type(even){ background-color: aquamarine; } </style> </head> <body> <h1>示例first-child；last-child；nth-child;nth-last-child</h1> <ul> <li>No.1</li><li>No.2</li><li>No.3</li><li>No.4</li> <li>No.5</li><li>No.6</li><li>No.7</li><li>No.8</li> <li>No.9</li><li>No.10</li> <li>No.11</li><li>No.12</li> </ul> <h1>唯一的</h1> <ul> <li>唯一,多加一个就没有啦</li> </ul> <div id=“A”> <h2>A标题</h2><p>文本</p> <h2>B标题</h2><p>文本</p> </div> </body>

3.UI原素状态伪类示例

选定的式样多于在原素处于某种状态下才起作用，在默认状态下不起作用！

4.兄弟原素示例

用来选定位于同一父原素之中的某个原素之后的所有其他某个种类的兄弟原素所采用的式样。一定要是之后的兄弟原素！<子原素>~<子原素之后的同级兄弟原素> { 式样 }

2.2.文字阴影与自动换行

1.text-shadowp{ text-shadow：length(阴影离开文字的横方向距离) length(阴影离开文字的纵方向距离) length(阴影模糊半径) color(阴影颜色) }

位移距离：前两个参数代表的阴影离开文字的横(纵)方向距离，不可省略。

第四个参数代表模糊半径，代表阴影向外模糊这时候的范围，数值越大越模糊。

当没有选定颜色值时，会采用默认文字的颜色。

选定多个阴影，因此可以针对每个阴影用逗号分隔。

2.word-break：浏览器文本自动换行。

3.word-wrap：长单词与URL地址自动换行。

4.服务器端字体和@font-face特性

定义斜体或粗体：在定义字体的这时候，可以把字体定义成斜体或是粗体，在采用服务器服务器端字体的这时候，须要根据斜体还是粗体采用不同的汉字。

表明客户端字体：首先将font-family设置为本地的字体名，然后将src特性设置为local(‘字体’)。

font-variant：设置文本是否大小写。

font-weight：设置文本的粗细。

font-stretch：设置文本是否横向的拉伸变形。

2.3.盒数学模型

1.各种盒数学模型

inline-block类型

采用inline-block类型来执行分列表明

<head> <style> div.div1{ background-color: #ff6600; width: 300px; height: 150px; float: left; } div.div2{ background-color: #21fffc; width: 200px; height: 100px; float: left; } div.div3{ background-color: #ef23ff; width: 500px; height: 100px; clear: both; } /*inline-block*/ div.div4{ background-color: #ff6600; display: inline-block; width: 300px; } div.div5{ background-color: #21fffc; vertical-align: top; display: inline-block; width: 200px; } div.div6{ background-color: #ef23ff; width: 500px; height: 100px; } </style> </head> <body> <h1>采用inline-block类型来执行分列表明-1.传统方式</h1> <div class=“div1”>div1</div> <div class=“div2”>div2</div> <div class=“div3”>div3</div> <hr color=“darkred”> <h1>采用inline-block类型来执行分列表明-1.inline-block方式</h1> <div class=“div4”>div1div1div1div1div1div1div1 div1div1div1div1div1div1div1div1 div1div1div1div1div1div1div1div1</div><div class=“div5”>div2div2div2div2div2div2div2 div2div2div2div2div2div2div2div2</div> <div class=“div6”> div3 </div> </body>采用inline-block类型来表明水平菜单<head> <style> ul.ul1 li{ float: left; list-style: none; padding:5px 20px; text-align: center; border-right:1px solid darkviolet; width: 200px; color: wheat; background-color: mediumvioletred; } ul.ul2 li{ list-style: none; display: inline-block; padding:5px 20px; text-align: center; border-right: 1pxsolid darkviolet;width: 200px; color: wheat; background-color: mediumvioletred; } </style> </head> <body> <h1>使用inline-block类型来表明水平菜单-inline-block</h1> <ul class=“ul2”> <li>A</li><li>B</li><li>C</li><li>D</li> </ul> </body> 采用inline-block类型来表明水平菜单<head> <style> ul.ul1 li{ float: left; list-style: none; padding:5px 20px; text-align: center; border-right: 1px solid darkviolet; width: 200px; color: wheat; background-color: mediumvioletred; }ul.ul2 li{ list-style: none; display: inline-block; padding:5px 20px; text-align: center;border-right: 1px solid darkviolet; width: 200px; color: wheat; background-color: mediumvioletred; }</style> </head> <body> <h1>采用inline-block类型来表明水平菜单-inline-block</h1> <ul class=“ul2”> <li>A</li><li>B</li><li>C</li><li>D</li> </ul> </body> inline-table类型<head> <style> table{ display: inline-table; vertical-align: bottom; border: 2px solid blueviolet; width: 400px; height: 200px; color: darkviolet; } td{ border: 2px solid violet; } </style> </head> <body> <h1>采用inline-table类型-一个表格前后都有文字将其环绕</h1> 巴拉巴拉 <table cellspacing=“0” cellpadding=“0”> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>1</td> <td>2</td> </tr> </table>巴拉巴拉</body>

list-item类型

可以将多个原素作为列表表明，同时在原素的结尾加上列表的标记。

run-in类型和compact类型

none类型

当原素被选定none后，该原素不能表明

2.表明不下的文本

overflow特性：选定对箱子中容纳不下的文本的表明办法

overflow-x特性与overflow-y特性

textoverflow：在箱子的末尾表明代表省略记号的‘…’，但是该特性只在文本在水平位置上超出时表明。

3.箱子阴影

box-shadow:让盒在表明的这时候产生阴影的效果

对盒内子原素设置阴影

对一个文字或第一行设置阴影：通过first-line或是first-letter

对表格和对单元格使用阴影

4.box-sizing宽高计算

选定针对原素的宽度和高度的计算方法

(content)border-box:特性值则表示原素的宽高度(不)包括内补白区域及前面板的宽度高度<head> <style> div.a,div.b{ width: 300px; padding: 30px; margin: 20px auto; border: 30px solid darkviolet; background-color: violet; }div.a{ box-sizing: border-box; } div.b{ box-sizing: content-box; } </style> </head> <body> <h2>box-sizing：content&border-box</h2> <div class=“ab”> <div class=“a”>box-sizing：border-box代表宽度和高度包涵内补白宽度高度，即虽然有padding和border，最终仍然为300px</div> <div class=“b”>box-sizing：content-box:代表不包涵宽高度内补白区域，即最后为300px+30px+30px</div> </div> </body>

2.4.前面板和背景式样

1.新增的背景特性

background-clip:选定背景的表明范围

border-box：从前面板开始

padding-box：从内前面板开始

content-box：从文本开始

background-orgin:选定绘制背景图像的起点

可以选定绘制时的起始位置，默认为padding，可以为border或是content左上角开始绘制。

background-size:选定背景中图像的尺寸

auto

length

percentage：以父原素的百分比设置背景图像的宽高度。

cover：全覆盖。

contain ：与cover相反，主要将背景图片缩小，来适合布满整个容器。

2.表明多个背景特性：第一个图像在最上面

3.梯形前面板：border-radius

选定两个半径：左上右下+左下右上

当不表明前面板的这时候，浏览器会把四个角绘制成梯形

修改前面板种类。

绘制四个不同半径的前面板

4.图像前面板：border-image

可以让原素的长度或宽度处于随时变化时，变化状态的前面板统一采用一个图像文件来进行绘制。

2.5.CSS3变形功能

1.利用transform同时实现文字或图像的转动，缩放，倾斜移动这四种类型的变形处理。

转动：totate(角度)

缩放：scale(值):0.5即为缩放到50%

倾斜:skew(值),值为角度

移动：translate(值)

对一个原素采用多个方法

transform：方法1 方法2 方法 3 方法4

改变原素基点

transform-origin:

2.6.CSS3的动功能

1.transition功能：支持从一个特性值平滑到另外一个特性值

允许CSS特性值在一定的时间内平滑的过度，这种效果可以在单击，获得焦点，被点击或对原素任何改变中触发，并圆滑的以动画电影效果改变CSS特性值。

(1)执行变换的特性：transition-property：过渡即将开始

none：没有特性会获得过渡效果

all:所以特性会获得过渡效果

property：定义应用领域过渡效果的CSS特性名称列表，以逗号分隔

(2)变换延续时间：transition-duration：规定完成过渡须要花费的时间，默认值零没有效果。

(3)在延续时间段，变换速率的变化：

transition-timing-function。

(4)变换延迟时间：transition-delay：选定一个动画电影开始执行的时间，也就是当改变原素特性值后多长时间开始执行过渡效果。

<head> <meta charset=“UTF-8”> <title>CSS3中的动画电影效果</title> <style> div.transition1{ width: 200px; height: 200px; background-color: blueviolet; -webkit-transition:all1s linear 1s; } </style> </head> <body> <h2>transition</h2> <div class=“transition1”></div> </body>

2.Animations功能：支持通过关键帧的选定来在网页上产生更复杂的动画电影现象。

name：选定合集名称duration：整个动画电影执行完成所需时间timing-function：同时实现动画电影方法iteration-count：重复播放次数<head> <style> div.animation{ width: 20px; height: 20px; background-color: #ef23ff; }/*关键帧的封装*/ @-webkit-keyframes myan{ 0%{ background-color: violet; width: 50px; } 10%{background-color: palevioletred; width: 100px; } 30%{ background-color: mediumvioletred;width: 200px; } 50%{ background-color: blueviolet; width: 40px; } 70%{background-color: darkviolet; width: 400px; } 90%{ background-color: #7300a4; width: 600px; } 100%{ background-color: #4a0068; width: 800px; } } </style> </head> <body> <h2>animation</h2> <div class=“animation”></div> </body>

2.7.CSS3的分页

1.点击及鼠标悬停分页式样

2.鼠标悬停过渡效果：transition: background-color .9s;

3.梯形式样：border-radius

4.前面板：border:2px solid darkviolet;

2.8.产业布局相关式样

1.多栏产业布局

column-count特性：将一个原素中的文本分成多栏进行表明，要将原素的宽度设置成多个栏目的总宽度

column-width特性：选定栏目的宽度来生成分栏

column-gap特性：选定栏目之间的距离

column-rule:栏目之间添加分隔线

2.盒产业布局：多栏产业布局的栏目宽度必须相等，选定栏目的宽度的这时候也只能统一选定，但是栏目的宽度不可能全部都一样，所以多栏产业布局比较适合在文字文本网页表明，比如新闻。并不适合整个网页编排时采用。而盒产业布局就相对比较随意一些，可以定义成不同的网页。

3.弹性箱子产业布局

(1)box-flex：使得箱子产业布局变成弹性产业布局：可以自适应窗口

(2)box-ordinal-group：改变元素的表明顺序

(3)box-orient：改变原素排列方向

horizontal:在水平行中从左向右排列子原素

vertical：从上向下垂直排列子原素

(4)原素的高度宽度自适应：就是原素的高度和宽度可以根据排列的方向改变而改变。

(5)采用弹性产业布局来消除空白：方法就是给子div中重新加入一个box-flex特性。<style> .center1{ display: -webkit-box;/*盒数学模型表明*/ border: 5px solid darkviolet; -webkit-box-orient: horizontal;/*水平表明*/ width: 600px; height: 400px; } .d1{ background-color: #ff99e1; -webkit-box-flex: 2; } .d2{ background-color: #962fff; -webkit-box-flex: 3; } .d3{ background-color: #ef23ff; -webkit-box-flex: 4; } .d1,.d2,.d3{ -webkit-box-sizing: border-box; } </style>