CSS3 基础知识[转载minsong的博客]

CSS3 基础知识 1.边框     1.1 圆角  border-radius:5px 0 0 5px;     1.2 阴影  box-shadow:2px 3px 4px 5px rgba(0,0,0,0.5);(水平、垂直、模糊、扩展)              box-shadow:inset 1px 2px 3px 4px #fff;(inset 内阴影)     1.3 边框图像 border-image 2.背景     2.1 background-size background-size:30px 30px;(背景图像宽度,背景图像高度)     2.2    background-image:linear-gradient(45deg,rgba(0,0,0,0.5) 25%,transparent 25%,transparent 50%,rgba(0,0,0,0.5) 50%,rgba(0,0,0,0.5) 75%,transparent 75%,transparent);(线性渐变,和background-size一起用)     2.3 background-attachment:(fixed|scroll|local)         fixed: 背景图像相对于窗体固定。         scroll: 背景图像相对于元素固定,也就是说当元素内容滚动时背景图像不会跟着滚动,因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。         local: 背景图像相对于元素内容固定,也就是说当元素随元素滚动时背景图像也会跟着滚动,因为背景图像总是要跟着内容。     2.4 background-position:30px 20px;(横坐标,纵坐标;是图片在动)     2.5 background-origin:(padding-box|border-box|content-box)         padding-box: 从padding区域(含padding)开始显示背景图像。         border-box: 从border区域(含border)开始显示背景图像。         content-box: 从content区域开始显示背景图像。 3.文本     3.1 文字阴影 text-shadow:5px 5px 4px #000;(水平,垂直,模糊)     3.2 换行 word-wrap:(normal|break-word)             normal: 允许内容顶开或溢出指定的容器边界。             break-word: 内容将在边界内换行。如果需要,单词内部允许断行。             white-space:(normal|pre|nowrap|pre-wrap|pre-line)             normal: 默认处理方式。             pre: 用等宽字体显示预先格式化的文本,不合并文字间的空白距离,当文字超出边界时不换行。可查阅pre对象             nowrap: 强制在同一行内显示所有文本,直到文本结束或者遭遇br对象。             pre-wrap: 用等宽字体显示预先格式化的文本,不合并文字间的空白距离,当文字碰到边界时发生换行。             pre-line: 保持文本的换行,不保留文字间的空白距离,当文字碰到边界时发生换行。     3.3 省略号   width:200px;                 overflow:hidden;                 text-overflow:hidden;                 white-space:nowrap; 4.2D变换     4.1 旋转 transform:rotate(45deg);     4.2 移动 transform:translate(45px,45px);(水平,垂直)     4.3 缩放 transform:scale(2,2);(水平,垂直)     4.4 翻转 transform:skew(20deg,40deg);(沿X轴翻转,沿Y轴翻转)     4.5 将以上四个组合在一起 matrix(),需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。         暂放 5.过渡     5.1 transition : [ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]         [ transition-property ]: 检索或设置对象中的参与过渡的属性         [ transition-duration ]: 检索或设置对象过渡的持续时间         [ transition-timing-function ]: 检索或设置对象中过渡的动画类型 ,值为linear | ease | ease-in | ease-out | ease-in-out |             linear: 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)             ease: 平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)             ease-in: 由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)             ease-out: 由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)             ease-in-out: 由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)         [ transition-delay ]: 检索或设置对象延迟过渡的时间         6.动画     6.1 animation : [[ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ]]         [ animation-name ]: 检索或设置对象所应用的动画名称             配合@keyframes使用 @key-frames animation-name{}         [ animation-duration ]: 检索或设置对象动画的持续时间         [ animation-timing-function ]: 检索或设置对象动画的过渡类型             linear: 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)             ease: 平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)             ease-in: 由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)             ease-out: 由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)             ease-in-out: 由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)         [ animation-delay ]: 检索或设置对象动画延迟的时间         [ animation-iteration-count ]: 检索或设置对象动画的循环次数             infinite: 无限循环             <number>: 指定对象动画的具体循环次数         [ animation-direction ]: 检索或设置对象动画在循环中是否反向运动             normal: 正常方向             alternate: 正常与反向交替          .one {             animation:animations 2s ease-out;         }         @-webkit-keyframes animations{             0%{-webkit-transform:translate(0);opacity:0;}             50%{-webkit-transform:translate(30px);opacity:1;}             70%{-webkit-transform:translate(35px);opacity:1;}             100%{-webkit-transform:translate(60px);opacity:0;}         } 7.媒体查询     7.1 media          1.页面小于960px时的写法             @media screen and (max-width:960px){                 body{                     background:red;                 }             }          2.页面等于960px时的写法              @media screen and (max-device-width:960px){                 body{                     background:blue;                 }             }          3.页面大于960px时的写法             @media screen and (min-width:960px){                 body{                     background:green;                 }             }          4.页面大于960px小于1200px的写法              @media screen and (min-width:960px) and (max-width:1200px){                 body{                     background:yellow;                 }             }          5. media 所有参数的解释             width:浏览器可视宽度。             height:浏览器可视高度。             device-width:设备屏幕的宽度。             device-height:设备屏幕的高度。             orientation:检测设备目前处于横向还是纵向状态。             orientation:检测设备目前处于横向还是纵向状态。             device-aspect-ratio:检测设备的宽度和高度的比例。             color:检测颜色的位数。(例如:min-color:32就会检测设备是否拥有32位颜色)             color-index:检查设备颜色索引表中的颜色,他的值不能是负数。             monochrome:检测单色楨缓冲区域中的每个像素的位数。(这个太高级,估计咱很少会用的到)             resolution:检测屏幕或打印机的分辨率。(例如:min-resolution:300dpi或min-resolution:118dpcm)。             grid:检测输出的设备是网格的还是位图设备。         6.响应式设计的核心CSS技术Media(媒体查询器)的用法             1.使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果                 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">                 width = device-width:宽度等于当前设备的宽度                 initial-scale:初始的缩放比例(默认设置为1.0)                   minimum-scale:允许用户缩放到的最小比例(默认设置为1.0)                     maximum-scale:允许用户缩放到的最大比例(默认设置为1.0)                    user-scalable:用户是否可以手动缩放(默认设置为no,因为我们不希望用户放大缩小页面)              2.IE8既不支持HTML5也不支持CSS3 Media,所以我们需要加载两个JS文件,来保证我们的代码实现兼容效果:                  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>                   <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>              3.设置IE渲染方式默认为最高                  下面这段代码来让IE的文档模式永远都是最新的:                 <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">                 这段代码后面加了一个chrome=1,这个Google Chrome Frame(谷歌内嵌浏览器框架GCF),如果有的用户电脑里面装了这个chrome的插件,就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算,无比给力,不过如果用户没装这个插件,那这段代码就会让IE以最高的文档模式展现效果。 8.函数计算     8.1 counter() 是一个函数,主要配合content一起使用,使用counter()来调用定义好的计数器标识符。         如:             <ul>                 <li>a</li>                 <li>b</li>                 <li>c</li>             </ul>           li{list-style:none;counter-increment:antzone;}            li:before{content:counter(antzone)".";}     8.2 attr() 和content一起使用         attr(title),括号里是引用的属性,但经常引用自定义属性         p:after{content:attr(title);}     8.3 calc() 任何长度值都可以使用calc()函数进行计算,支持+,-,*,/,mod运算         p{             width:-moz-calc(100% - 50px);             width:-webkit-calc(100% - 50px);             width:calc(100% - 50px);          } 9.伪对象选择符     9.1 :first-letter 设置对象内的第一个字符的样式,作用于块级元素,常配合font-size和float使用得到首字下沉效果         p:first-letter {font-size:30px;}     9.2 :first-line 设置对象内的第一行,作用于块级元素         p:first-line {color:#000;}     9.3 :before 设置在对象前发生的内容,和content一起使用         p:before {content:"";}     9.4 :after 设置在对象前发生的内容,和content一起使用         p:after {content:"";}     9.5 :selection 设置样式被选择时的样式         p:-moz-selection{color:red;}         p:selection {color:red;} 10.长度单位 px em rem     px:px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。     em:em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。        任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。        在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。        1. em的值并不是固定的;        2. em会继承父级元素的字体大小。     rem:使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子:         p {font-size:14px; font-size:.875rem;}

CSS3 基础知识

热度 4已有 428 次阅读2015-12-11 11:33 |个人分类:CSS3|系统分类:HTML5/CSS3| CSS3 基础知识媒体查询长度单位px em rem

CSS3 基础知识 1.边框     1.1 圆角  border-radius:5px 0 0 5px;     1.2 阴影  box-shadow:2px 3px 4px 5px rgba(0,0,0,0.5);(水平、垂直、模糊、扩展)              box-shadow:inset 1px 2px 3px 4px #fff;(inset 内阴影)     1.3 边框图像 border-image 2.背景     2.1 background-size background-size:30px 30px;(背景图像宽度,背景图像高度)     2.2    background-image:linear-gradient(45deg,rgba(0,0,0,0.5) 25%,transparent 25%,transparent 50%,rgba(0,0,0,0.5) 50%,rgba(0,0,0,0.5) 75%,transparent 75%,transparent);(线性渐变,和background-size一起用)     2.3 background-attachment:(fixed|scroll|local)         fixed: 背景图像相对于窗体固定。         scroll: 背景图像相对于元素固定,也就是说当元素内容滚动时背景图像不会跟着滚动,因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。         local: 背景图像相对于元素内容固定,也就是说当元素随元素滚动时背景图像也会跟着滚动,因为背景图像总是要跟着内容。     2.4 background-position:30px 20px;(横坐标,纵坐标;是图片在动)     2.5 background-origin:(padding-box|border-box|content-box)         padding-box: 从padding区域(含padding)开始显示背景图像。         border-box: 从border区域(含border)开始显示背景图像。         content-box: 从content区域开始显示背景图像。 3.文本     3.1 文字阴影 text-shadow:5px 5px 4px #000;(水平,垂直,模糊)     3.2 换行 word-wrap:(normal|break-word)             normal: 允许内容顶开或溢出指定的容器边界。             break-word: 内容将在边界内换行。如果需要,单词内部允许断行。             white-space:(normal|pre|nowrap|pre-wrap|pre-line)             normal: 默认处理方式。             pre: 用等宽字体显示预先格式化的文本,不合并文字间的空白距离,当文字超出边界时不换行。可查阅pre对象             nowrap: 强制在同一行内显示所有文本,直到文本结束或者遭遇br对象。             pre-wrap: 用等宽字体显示预先格式化的文本,不合并文字间的空白距离,当文字碰到边界时发生换行。             pre-line: 保持文本的换行,不保留文字间的空白距离,当文字碰到边界时发生换行。     3.3 省略号   width:200px;                 overflow:hidden;                 text-overflow:hidden;                 white-space:nowrap; 4.2D变换     4.1 旋转 transform:rotate(45deg);     4.2 移动 transform:translate(45px,45px);(水平,垂直)     4.3 缩放 transform:scale(2,2);(水平,垂直)     4.4 翻转 transform:skew(20deg,40deg);(沿X轴翻转,沿Y轴翻转)     4.5 将以上四个组合在一起 matrix(),需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。         暂放 5.过渡     5.1 transition : [ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]         [ transition-property ]: 检索或设置对象中的参与过渡的属性         [ transition-duration ]: 检索或设置对象过渡的持续时间         [ transition-timing-function ]: 检索或设置对象中过渡的动画类型 ,值为linear | ease | ease-in | ease-out | ease-in-out |             linear: 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)             ease: 平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)             ease-in: 由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)             ease-out: 由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)             ease-in-out: 由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)         [ transition-delay ]: 检索或设置对象延迟过渡的时间         6.动画     6.1 animation : [[ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ]]         [ animation-name ]: 检索或设置对象所应用的动画名称             配合@keyframes使用 @key-frames animation-name{}         [ animation-duration ]: 检索或设置对象动画的持续时间         [ animation-timing-function ]: 检索或设置对象动画的过渡类型             linear: 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)             ease: 平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)             ease-in: 由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)             ease-out: 由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)             ease-in-out: 由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)         [ animation-delay ]: 检索或设置对象动画延迟的时间         [ animation-iteration-count ]: 检索或设置对象动画的循环次数             infinite: 无限循环             <number>: 指定对象动画的具体循环次数         [ animation-direction ]: 检索或设置对象动画在循环中是否反向运动             normal: 正常方向             alternate: 正常与反向交替          .one {             animation:animations 2s ease-out;         }         @-webkit-keyframes animations{             0%{-webkit-transform:translate(0);opacity:0;}             50%{-webkit-transform:translate(30px);opacity:1;}             70%{-webkit-transform:translate(35px);opacity:1;}             100%{-webkit-transform:translate(60px);opacity:0;}         } 7.媒体查询     7.1 media          1.页面小于960px时的写法             @media screen and (max-width:960px){                 body{                     background:red;                 }             }          2.页面等于960px时的写法              @media screen and (max-device-width:960px){                 body{                     background:blue;                 }             }          3.页面大于960px时的写法             @media screen and (min-width:960px){                 body{                     background:green;                 }             }          4.页面大于960px小于1200px的写法              @media screen and (min-width:960px) and (max-width:1200px){                 body{                     background:yellow;                 }             }          5. media 所有参数的解释             width:浏览器可视宽度。             height:浏览器可视高度。             device-width:设备屏幕的宽度。             device-height:设备屏幕的高度。             orientation:检测设备目前处于横向还是纵向状态。             orientation:检测设备目前处于横向还是纵向状态。             device-aspect-ratio:检测设备的宽度和高度的比例。             color:检测颜色的位数。(例如:min-color:32就会检测设备是否拥有32位颜色)             color-index:检查设备颜色索引表中的颜色,他的值不能是负数。             monochrome:检测单色楨缓冲区域中的每个像素的位数。(这个太高级,估计咱很少会用的到)             resolution:检测屏幕或打印机的分辨率。(例如:min-resolution:300dpi或min-resolution:118dpcm)。             grid:检测输出的设备是网格的还是位图设备。         6.响应式设计的核心CSS技术Media(媒体查询器)的用法             1.使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果                 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">                 width = device-width:宽度等于当前设备的宽度                 initial-scale:初始的缩放比例(默认设置为1.0)                   minimum-scale:允许用户缩放到的最小比例(默认设置为1.0)                     maximum-scale:允许用户缩放到的最大比例(默认设置为1.0)                    user-scalable:用户是否可以手动缩放(默认设置为no,因为我们不希望用户放大缩小页面)              2.IE8既不支持HTML5也不支持CSS3 Media,所以我们需要加载两个JS文件,来保证我们的代码实现兼容效果:                  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>                   <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>              3.设置IE渲染方式默认为最高                  下面这段代码来让IE的文档模式永远都是最新的:                 <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">                 这段代码后面加了一个chrome=1,这个Google Chrome Frame(谷歌内嵌浏览器框架GCF),如果有的用户电脑里面装了这个chrome的插件,就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算,无比给力,不过如果用户没装这个插件,那这段代码就会让IE以最高的文档模式展现效果。 8.函数计算     8.1 counter() 是一个函数,主要配合content一起使用,使用counter()来调用定义好的计数器标识符。         如:             <ul>                 <li>a</li>                 <li>b</li>                 <li>c</li>             </ul>           li{list-style:none;counter-increment:antzone;}            li:before{content:counter(antzone)".";}     8.2 attr() 和content一起使用         attr(title),括号里是引用的属性,但经常引用自定义属性         p:after{content:attr(title);}     8.3 calc() 任何长度值都可以使用calc()函数进行计算,支持+,-,*,/,mod运算         p{             width:-moz-calc(100% - 50px);             width:-webkit-calc(100% - 50px);             width:calc(100% - 50px);          } 9.伪对象选择符     9.1 :first-letter 设置对象内的第一个字符的样式,作用于块级元素,常配合font-size和float使用得到首字下沉效果         p:first-letter {font-size:30px;}     9.2 :first-line 设置对象内的第一行,作用于块级元素         p:first-line {color:#000;}     9.3 :before 设置在对象前发生的内容,和content一起使用         p:before {content:"";}     9.4 :after 设置在对象前发生的内容,和content一起使用         p:after {content:"";}     9.5 :selection 设置样式被选择时的样式         p:-moz-selection{color:red;}         p:selection {color:red;} 10.长度单位 px em rem     px:px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。     em:em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。        任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。        在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。        1. em的值并不是固定的;        2. em会继承父级元素的字体大小。     rem:使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子:         p {font-size:14px; font-size:.875rem;}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏tkokof 的技术,小趣及杂念

HGE系列之九 管中窥豹(精灵动画)

这次的HGE之旅,让我们来看看精灵及动画的实现,毕竟对于一款2D游戏引擎来说,恐怕精灵和动画不是最重要的,也可算是最重要之一了吧:)

942
来自专栏前端知识分享

第100天:CSS3中animation动画详解

CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation;

1992
来自专栏Keegan小钢

Android样式的开发:shape篇

一个应用,应该保持一套统一的样式,包括Button、EditText、ProgressBar、Toast、Checkbox等各种控件的样式,还包括控件间隔、文字...

1742
来自专栏菜鸟计划

CSS基础语法(三) CSS的6种特性

样式表常用写法及特性(组合、继承、关联性、权值性、层叠性、重要性) 1.样式的组合:把具有相同声明定义的选择符组合在一起,并用逗号隔开。-例如:段落元素p、单元...

3424
来自专栏林德熙的博客

WPF 等距布局

实际做的效果很简单,因为在开发我容易就用到了等距的控件。等距控件就是在指定的宽度下,平均把控件放在水平的地方,这样相等于 StackPanel 的水平,但是没有...

931
来自专栏Android开发经验

Android自定义View-记录一个简单却又常见的效果实现

代码 简单列下主要代码,完整代码地址放在了文字末尾。 1.为了更加灵活,我这里提供了很多属性用于用户自己来设置:

722
来自专栏前端知识分享

第167天:canvas绘制柱状图

2413
来自专栏非典型技术宅

OC绘制基本图形1. UIKit中封装了一些最常用的绘图方法2. 贝塞尔路径常用方法列表(BezierPath)3. 保存屏幕截图,并存储至相册

1374
来自专栏cnblogs

深入理解和应用display属性(二)

四、inline-block 此类元素是inline + block的合体 1) margin和padding都有效;width和height都有效; .inl...

2156
来自专栏天天

框架设计续集(三)

1053

扫码关注云+社区

领取腾讯云代金券