CSS3基础篇

悠悠 2022-05-20 09:12 179阅读 0赞

### CSS3基础篇 ###

##### CSS3边框新属性： #####

·border-radius ： 边框的圆角

1、四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。  
  2、个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角  
  3、两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角  
  4、一个值： 四个圆角值相同

其子属性：   
          border-top-left-radius： 定义了左上角的弧度  
          border-top-right-radius： 定义了右上角的弧度  
          border-bottom-right-radius： 定义了右下角的弧度  
          border-bottom-left-radius： 定义了左下角的弧度

·box-shadow： 阴影，适用于盒子阴影 其参数 x（水平阴影位置） ，y（垂直阴影位置） ，blur（阴影模糊距离）  
                           color（阴影颜色）、spread（阴影的大小）、inset（外层的阴影改变内层的阴影）

·border-image： 边框图像

其五个子属性：  
      1、 border-image-url：图片文件的路径  
      2、 border-image-slice：   图片向内的偏移 其四个值分别 上 右 下 左；当第四个值没给值时默认取值与第二个值一样；  
                                                  同理第三个值为空值与第一个值一样，第二个值为空则与第一个值一样  
      3、 border-image-width：  图片的宽大小； 其四个值分别 上 右 下 左；当第四个值没给值时默认取值与第二个值一样；  
                                                   同理第三个值为空值与第一个值一样，第二个值为空则与第一个值一样  
      4、 border-image-outset： 边框外部绘制area；其四个值分别 上 右 下 左；当第四个值没给值时默认取值与第二个

值一样； 同理第三个值为空值与第一个值一样，第二个值为空则与第一个值一样  
      5、 border-image-repeat： 图片边界是否重复；值 repeat （平铺）、

round （如果无法平铺则对图像进行缩放以适应区域）  
                                                    stretch （拉伸）、space（类似repeat，如果无法完整平铺，扩展空间分布在图像周围）  
                                                    initial（默认值）、inherit（继承父该属性）

简单例子：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<style type="text/css">
    		p{
    			background-color: #5F9EA0;
    			font-size: 20px;
    			border-radius: 8px;
    			box-shadow: 10px 10px 10px silver;
    			width: 280px;
    			height: 60px;
    			line-height: 60px;
    			text-align: center;
    			border-style: dotted;
    			border-width: 20px ;
    			border-image: url(../../images/coffee_48px_1171545_easyicon.net.png);
    			border-image-slice: 50 0;
    			border-image-width:1 1;
    			border-image-outset: 0;
    			border-image-repeat: round;
    			
    		}
    	</style>
    	<body>
    		<p>世界杯</p>
    	</body>
    </html>

效果图：

![70][]

##### CSS3背景新属性： #####

·background-image：  背景图像，可多个图像文件，参数之间逗号隔开  
 ·background-size:     背景大小  
 ·background-origin： 背景图像的定位区域 如果图片attachment为固定的则该属性无效  
 ·background-clip：   背景的绘制区域  值 border-box（默认值 边框方框内）、padding-box（背景绘制在寸距方框内）

、content-box（绘制在内容方框内）

温故下旧属性：  
  。background-position ： 背景图的定位，九宫格布局  
  。background-repeat ：   背景图是否重复  
  。backgroun-attachment： 检索背景图随内容滚动还是固定  
  。bacground-color ： 背景颜色

例：

div{
    				width: 300px;
    				height: 200px;
    				line-height: 40px;
    				text-align: center;
    				background-image: url(../../images/smartphone2.png),url(../../images/smartphone3.png);
    				background-position: left top,right bottom;
    				background-repeat: no-repeat,repeat;
    				color: yellow;
    				padding: 12px;
    			}

##### CSS3渐变： #####

·线性渐变 Linear Gradients   向下/向上/向左/向右/对角方向  
 ·径向渐变 Radius Gradients   由他们的中心定义  
   
 1、线性渐变：  
 语法： background linear-gradients(diraction,start-color1,end-color2,..)

默认情况下线性渐变从上到下渐变   从左到右 direcation 为 to right   对角渐变 to bottom right

使用角度：background: linear-gradient(angle, color-stop1, color-stop2);  angle此处为角度值，单位deg

使用透明度transparent： background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));  transparent第四个值0为完全透明，1为完全不透明

重复的线性渐变：  background: repeating-linear-gradient(red, yellow 10%, green 20%);   repeating-linear-gradients默认从上到下

2、径向渐变：  
 语法： radial-gradients(center,shape size,color1,color2); center 中心点  shape size渐变的大小

默认情况下径向渐变在中心点（center），为椭圆（ellipce），渐变的大小到最远的角落（farthest-corner）

不均匀分布 backgroung: radial-gradients(red 15%,blue 30%,green 20%);

设置形状 background: radial-gradients(circle,red,blue,green);

不同尺寸大小的关键字使用：  
  closest-side  
  farthest-seide  
  closest-corner  
  farthest-corner:(默认值)

例：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			div{
    				width: 400px;
    				height: 200px;
    				background:linear-gradient(to right,red,yellow,blue,green);
    				/*会覆盖linear-gradient*/
    				background:repeating-linear-gradient(200deg, red,yellow 20%,blue 50%);
    			}
    			p{
    				width: 400px;
    				height: 200px;
    				/*径向渐变*/
    				background:radial-gradient(circle,red,yellow, gray);
    				border-radius: 250px;
    				box-shadow: 15px 15px 10px gray;
    			}
    		</style>
    	</head>
    	<body>
    		<div></div>
    		<p></p>
    	</body>
    </html>

效果图：

![70 1][]

##### CSS文本效果： #####

·text-shadow ：    文本阴影  
 ·box-shadow ：    适用于盒子阴影，允许多个阴影  
 ·text-overflow ：  文本溢出属性指定影响用户如何显示溢出的内容 值： clip修剪文本

ellipce以省略好超出代替区域的内容 结合overflow使用  
 ·word-wrap ：      长单词换行，如果某个单词太长允许您强制换行 值normal 、 break-word  
 ·word-break：     规定非中日韩文本拆分换行规则，normal（正常）、keep-all（只能在半角格或连字符处换行） 、 break-                                all（允许在单词内换行）  
 ·text-align-last     规定如何对齐文本的最后一行，值  auto、left、right、center、justify（两端对齐）

、start（在行开头对齐）、end、initial（默认值）

了解下就好：  
 ·text-wrap：      文本的换行规则，当前主流浏览器都不支持该属性  
 ·punctuation-trim 是否对标点字符经进行修剪，当前主流浏览器都不支持该属性  
 ·hanging-punctuation 规定标点字符是否位于线框外，当前主流浏览器都不支持该属性  
 ·text-outline     文本的轮廓，当前主流浏览器都不支持该属性  
 ·text-justify     指定文本对齐设置为justify的理据  text-align：justify；仅微软浏览器支持  
 ·text-emphasis    向元素的文本应用重点标记，当前主流浏览器都不支持该属性

##### CSS3字体： #####

@font-face ：规则定义字体

语法：  
  @font-face\{ font-family：myFontName; src: url(字体文件) \}  
  select\{ font-family：myFontName; \}  
   
  字体格式文件后缀.woff、.ttf、.eot等

推荐web网页字体网站 : [www.youziku.com][]    
  有字库的CSS字体样式引用：在有字库中生成字体的Accesskey

在html文档中引入外部样式，

例：<link href='http://cdn.webfont.youziku.com/webfonts/nomal/120688/19673/5b44db43f629d91984a25231.css'  rel='stylesheet' type='text/css' />  
  在style中font-family中值为AccessKey，且字体样式只有在生成文字内容中的文本字才有

有字库的JS字体样式异步调用：  
   例：  
   <script type="text/javascript" src="https://cdn.webfont.youziku.com/wwwroot/js/wf/youziku.api.min.js"></script>  
   <script type="text/javascript">  
       $youziku.load("body", "fa9e4a401d09473b8d78dd6ca0a908de", "jdzhonyuanjian");  
       /\*$youziku.load("\#id1,.class1,h1", "fa9e4a401d09473b8d78dd6ca0a908de", "jdzhonyuanjian");\*/  
       /\*．．．\*/  
       $youziku.draw();  
   </script>

属性：  
     ·src :         字体文件的路径  
     ·font-style：  字体风格  
     ·font-size ：  字体大小  
     ·font-weight ：字体的粗细  
     ·font-family : 字体的名称  
     ·font-stretch：字体的拉伸

##### CSS3的2D、3D转换： #####

CSS3可以实现对元素进行移动、缩放、转动、拉长或拉伸

属性transform

旋转： transform： rotate(10deg);   deg角度  
 缩放： transform： scale(widthScale,heightScale), 两个参数 宽的比例尺 高的比例尺  
 倾斜： transform： skew(xDeg,yDeg); x轴即水平方向的倾斜角度，y轴即垂直方向的倾斜角度  
 平移： transform： translate(x,y);  水平左偏移，垂直下偏移，可负值

transform：matrix(rotate,scaleWidht,scaleHeight,skew,translateX,translateY); 一共六个参数包含了旋转缩放倾斜、平移,

3D的转换在2D的基础上多了一条z轴，实现了一个三维空间的概念，2D是一个二维的平面空间

旋转: rotate旋转增加了 rotateZ(deg) z轴的旋转: transform：rotate3d(rotateX,rotateY,rotateZ);  
 缩放： scale增加 scaleZ     transform：scale3d(scaleX,scaleY,scaleZ);  
 平移： translate增加translateZ   transform：translate3d(translateX,translateY,translateZ);  
 去除了倾斜新添加了透视试图 : perspective(n)  
 matrix参数变为十六个

transform-origin ： 允许改变旋转元素的位置（X，Y，Z）

##### CSS过渡： #####

过渡即添加某种效果转变为另一种的时候，无需flash、js  
 ·transition： 简写，有四个属性  
 ·transition-porperty：应用过渡的CSS属性名称  
 ·transition-duration：过渡效果花费的时间，默认值0  
 ·transition-timing-function： 国服效果的时间曲线，默认值ease  
  值： linear       规定以相同的速度开始到结束的过渡效果  
          ease         规定慢速开始，然后变快，然后慢速结束  
          ease-in      规定以慢速开始  
          ease-out     规定以慢速结束  
          ease-in-out  规定以慢速开始结束的过渡效果  
          cubic-bezier 在cubic-bezier函数定义自己的值(n,n,n,n,),可能0-1的值  
 ·transition-delay： 过渡效果的延时时间 默认为0

##### CSS3动画： #####

这里将了解@keyframes规则 属性animation

@keyframes创建动画，将它绑定到一个选择器，否则动画不会有任何效果，指定至少这两个CSS3动画属性绑定向一个选择器  
    ·动画时长  
    ·动画的名称

例：   
      @keyframes myframes\{  
       form\{background-color：red;\}  
       to\{background-color:yellow\}  
  \}  
    或@keyframes myframes\{  
        0% \{background-color:rend;\}  
        50%\{backgroun-color:yellow;\}  
       100%\{background-color:blue; \}  
  \}  
      <！--将动画绑定选择器-->  
      div\{ animation:myframes 2s; \}

animation属性的子属性：  
  ·animation-name：             动画的名称  
  ·animation-duration：         动画的时长  
  ·animation-timing-function ： 动画的速度曲线，默认ease  
  ·animation-delay ：           动画动画播放前的延时，即规定等待多久时长后动画播放  
  ·animation-iteration-count：  懂的话播放的次数，默认为1， 值 numder（自定义播放次数）、 infinite（无限播放）  
  ·animation-direction :        动画播放是否在下以周期逆向播放，默认为normal  
   值： normal ：           正常播放  
           reverse：           动画反向播放  
           alternate：         动画在奇数正向播放，在偶数反向播放  
           alternate-reverse： 动画在奇数反向播放，在偶数正向播放  
           initinal ：  该属性为他的默认值  
           inherit ： 继承父元素的该属性值

·animation-fill-mode :  当动画不播放时（当动画完成时，或当动画有一个延时为播放时）应用到元素的样式  
   值： none      动画执行前执行后不会应用到任何样式到目标元素  
          forwards  动画结束后，动画将引用该属性的值  
          backwards 动画应用在animation-delay定义期间启动动画的第一个迭代的关键帧中定义的属性值  
          both      动画遵循forwards和backwards的规则  
          initial   默认值  
          inherit   继承分元素该属性的值  
  ·animation-paly-state：   规定动画是否运行或暂停  
  ·animation：  简写，八个参数顺序对应其上，name、duration、timing-function、iteration-count、

direction、delay、fill-mode、play-state

#####    CSS3多列： #####

·column-count ：        指定需要分列的数量  
 ·column-gap ：           指定列之间的间隙  
 ·column-width：         指定列的宽度  
 ·column-span ：         指定元素要跨都少列  
 ·column-fill ：             指定如何填充  
 ·column-rule-style ：  指定列于列之间的边框样式  
 ·column-rule-width ：指定两列的边框厚度  
 ·column-rule-color ： 指定两列的边框颜色  
 ·column-rule ：           简写，三个参数依次 width ， style ，color  
 ·columns ：                 设置column-width和column-count的简写

##### CSS用户界面： #####

·resize：          指定一个元素是否由用户调整大小,支持该元素的浏览器chrome、safari、firefox  
 ·box-sizing ： 允许以适应区域而用某种方式定义元素    
  值 ： border-box  -  指定宽高肚饿请边框box，对元素指定宽高包括填充padding跟边框border的指定，

内容的宽高和高度减去各自双方该边框和填充的高宽从指定的宽高属性计算  
          context-box -  css2.1指定宽高的行为，指定元素宽高适用于box的宽高，元素的填充和边框布局和绘制指定宽高除外

·outline-offset ： 轮廓的偏移，即里边框的距离

·appearance ：    允许您使用一个元素的外观像一个标准的用户界面元素  值： button、field、window、icon

兼容浏览器chrome、safari  
   
 //目前只有Oprea浏览器支持以下五个属性  
 ·nav-top       指定在何处使用左侧的箭头导航键进行导航  
 ·nav-right  
 ·nav-bottom  
 ·nav-left  
 ·nav-index 指定一个元素的Tab的顺序

##### CSS图片 #####

img图片： 可利用边框的圆角属性制作圆角图片  border-radius  
                    也可利用border属性制作缩略图

响应式图片：  
  img\{width:100%; height:auto;\}  可根据屏幕的分辨率做出适配的调整

滤镜（filter）：  
    值： blur（px） 、brightness（%） 、 contrast（%） 、 graysale（%） 、 hue-rotate（deg） 、 invert（%）  
            opacity（%）、saturate（number） 、 sepia（%） 、drop-shadow（x，y，blur，color）

CSS按钮：

利用CSS样式美化按钮

##### CSS3边框box-sizing #####

没有使用box-sizing  
  实际宽 = width（宽） + padding （内边距） + border （边框）  
  实际高 = height（高） + padding （内边距） + border (边框)

使用了box-sizing：border-box  
  实际的宽、高包含了边框和内边距

##### CSS3弹性盒子flex box： #####

设置弹性盒子通过设置属性： display ： flex   或  inline-flex  
    弹性盒子定义弹性容器里的弹性子元素，且在默认情况下所有的弹性子元素在弹性盒子里显示在一行，容器只有一行

·flex-direction ： 设置弹性子元素的排列方式  
          值： row ：          横向从左到右    默认值  
                  row-reverse ：  反转横向排列  
                  column ：       纵向排列  
                  column-reverse：反转纵向排列

·justify-content：内容对齐，把弹性项沿着言行容器的主轴线（横向）对齐  
          值： flex-start ：         向行头紧挨填充  
                  flex-end   ：        向行尾紧挨填充  
                  center     ：         居中紧挨填充  
                  space-between：平均分布，各项之间留间隔  
                  space-around ： 平均分布，开头结尾有空隙，各项之间留间隔

·align-items： 设置弹性盒子在侧轴（纵向）方向上的对齐方式  
          值： flex-start ：   向侧轴头部紧挨填充  
                  flex-end   ：  向侧轴尾部紧挨填充  
                  center     ：   居中紧挨填充  
                  baseline   ：  如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。与基线对齐  
                  stretch    ：   如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所  
                                       在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。

·flex-wrap ： 用于指定弹性盒子的子元素换行方式  
          值： nowrap ：      默认值 单行  
                  wrap   ：        弹性容器为多行，溢出的部分放置新的一行  
                  wrap-revers：反转wrap排列、

·align-center： 用于修改flex-wrap的属性行为  
          值：stretch                - 默认，各行将会伸展以占用剩余的空间  
                 flex-start            - 各行向弹性盒子的起始位置堆叠  
                 flex-end             - 各行向弹性盒子的结束位置堆叠  
                 center                - 各行向弹性盒子的中间位置堆叠  
                 space-between  -各行在容器中均匀分布  
                 space-around    -各行在容器中均匀分布，两端保留子元素之间间距的一半

弹性子元素的属性：  
  ·order :      用整数来定义排列顺序，数值小的排列在前面，可以为负值  
  ·对齐  :      margin:auto;自动获取弹性容器剩余的空间  
  ·align-self ：用于设置言行元素在纵轴方向上的对齐方式，值与元素flex的一样  
  ·flex  ：     用于指定弹性子元素如何分配空间

##### CSS3多媒体查询 #####

多媒体查询由多媒体组成，可以包含一个或者多个表达式，如果指定的多媒体类型匹配则查询结果返回true，文档问调用以内的样式

操作符：·not ： 用来排除某些特定的某提类型，例 ：@media not print（非打印机设备）  
              ·only： 用来顶某种特别的内体类型，对于支持Media Queries的移动设备会忽略only直接进入样式  
                           对于不支持Media Queries的移动设备则会忽略不进入样式  
              ·all ： 所有设备

多媒体类型：  
  ·all ： 所有设备  
  ·print：打印机  
  ·screen：用于电脑、平板、智能手机等  
  ·speech：用于屏幕阅读器

方向（横屏或竖屏）：  
  结合CSS媒体查询可创建适应不同设备方向的布局  
  orientation ： portrait（竖屏）、landscape（横屏）

例： @media only screen and (orientation:portrait)\{  
   ........  
  \}

meta设置Viewport（用户网页的可是区域）<meta name="viewport" content="width="device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />  
  ·width ： 控制viewport的大小，device-width设备的宽度  
  ·initial-scale ： 缩放比例  
  ·maximum-scale ： 允许用户最大的缩放比  
  ·minimum-scale ： 允许用户最小的缩放比  
  ·user-scalable ： 用户是否可以手动缩放

网格视图通常时12列，宽度为100%，在浏览器的窗口大小调整时会自动收缩

为移动端优先设计

响应式图片，视屏  
  在图像img、视屏vedio的样式中  width 与 max-width 的区别  
   width ： 图片的宽度会根据上下范围实现响应功能改变图片的大小  
      max-width ： 图片永远不会大于其原始大小

响应式的背景图的三种方式：

1、background-size ： 设置值为contain，背景图将按比例自适内容区域，图片保持比例不变  
  2、background-size ： 设置为 "100% 100%"，背景图将延展覆盖整个区域  
  3、background-size ： 设置为 "cover",则会把背景图扩展至足够大，以使背景图完全覆盖整个区域，  
                                        保持了图像比例因此图像的某些部分无法显示在背景定位区域中  
 H5的<picture>元素:  
  picture ： 可以设置多张图片   类似vedio audio  
    
  例： <picture>  
           <source srcset="图片路径"></source>  
           <source srcset="图片路径"></source>  
           <img src="图片路径" />  
       </picture>

[70]: /images/20220520/37725f0a70084d3591d9122711864b96.png
[70 1]: /images/20220520/32f0b54d2edf417db0350dfe8bad76e3.png
[www.youziku.com]: http://www.youziku.com