css3整理--media

media语法: <link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" /> 上面的media语句表示的是:当屏幕宽度小于或等于600px,调用small.css样式表来渲染Web页面. 含义: screen:指的是一种媒体类型:还可以选择all.print.TV等. and:关键词,与其相似的还有not,only. max-widt…

CSS3 之 Media（媒体查询器）

1.响应式Media(媒体查询器) (1)<link rel=“stylesheet” media=“screen and (max-width: 600px)” href=“small.css” /> 当页面宽度小于或等于600px,调用small.css 转换成css3中的写法为: @media screen and (max-width: 600px) { 选择器 { 属性:属性值: } } 就是将small.css文件的内容放在@media 里 (2)<link rel=&quo…

控制页面打印的2种方法（css3的media媒体查询和window.print()）

在实际开发中,有时可能会有打印的需求.下面我总结了2种打印的方法,希望对各位小伙伴有所帮助. ①:直接用window.print()方法就可以打印整个页面,下面是一个小demo <!DOCTYPE HTML> <html> <head> <title>div print</title> <meta charset="UTF-8"/> </head> <body> <p>HTML…

使用CSS3的@media来实现网页自适应

如今,电脑显示器的屏幕分辨率向越来越大发展,而手机等移动设备终端的分辨率却不可能大到哪里去.越来越多的网站,开始让自己的页面自适合各种分辨率,在小分辨率下显示基本的内容,在大分辨率下显示全部功能,甚至是分多等级的多版本.作为web前端开发人员需要知道并且会用这种知识. css2的@media css2里面虽然支持@media属性,但是能实现的功能比较少,一般只用做打印的时候做特殊定义的CSS.语法: @media sMedia { sRules }说明:sMedia : 指定设备名称.请参阅附录…

使用CSS3的@media来编写响应式的页面

首先要知道,我们为什么要写自适应的页面(响应式页面) [直接看干货] 众所周知,电脑.平板.手机的屏幕是差距很大的,假如在电脑上写好了一个页面,在电脑上看起来不错,但是如果放到手机上的话,那可能就会乱的一塌糊涂,这时候怎么解决呢?以前,可以再专门为手机定制一个页面,当用户访问的时候,判断设备是手机还是电脑,如果是手机就跳转到相应的手机页面,例如百度的就是,手机访问www.baidu.com就会跳转到m.baidu.com,这样做简直就是费力不讨好的活,所以聪明的程序员开发了一种自适应写法,即一次…

css3之 media query 使用(转)

原文链接:http://www.moke8.com/article-5657-1.html 讲到响应式布局, 相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果, 设计师提出了响应式布局的设计方案.今天就和大家来讲讲响应式布局这件小事,包含什么是响应式布局.响应式布局的优点和缺点以及响应式布局该怎么设计(通过CSS3 Media Query实现响应布局). 一.什么是响应式布局? 响应式布局是Ethan…

css3整理-方便查询使用

最近详细地研究了CSS3的相关内容,并整理了这个文档,方便以后查询使用,分享给大家. 案例代码大家可以下载参考下:https://gitee.com/LIULIULIU8/CSS3 1.边框属性border-radius.box-shadow.border-image 边框圆角 border-radius:25px; -moz-border-radius:25px; /* 老的 Firefox */ 边框阴影 -moz-box-shadow: 10px 10px 5px #888888; /*…

css3之Media Queries 媒体查询

一.初步了解 Media Queries是CSS3新增加的一个模块功能,其最大的特点就是通过css3来查询媒体,然后调用对应的样式. 了解Media Queries之前需要了解媒体类型以及媒体特性: 可以通过媒体类型(Media Type)对不同的设备指定不同的样式,W3C总共列出了10种媒体类型二.媒体类型的引用方法有3种 link方法就是在<link>标签引用样式的时候,通过link标签中的media属性来指定不同的媒体类型.如下: <link rel="stylesh…

css3的@media媒体查询

css3新功能,根据屏幕大小进行识别. 参考: http://www.runoob.com/cssref/css3-pr-mediaquery.html…

[CSS3] CSS Media Queries

Using CSS media queries allows you to design responsive layout in your web apps and website. We will go over the media query basics in this lesson. body{ background-color: limegreen; } /* @media not|only mediatype and (expression) CSS-Code */ @media…

css3的@media

都知道bootstrap响应式布局很酷,但是是怎么实现的呢?其官网首页有提到这一切的功劳都是来自于CSS 媒体查询(Media Query). 使用 @media 查询,你可以针对不同的媒体类型定义不同的样式. @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的. 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面. 一.media的几种引用方式 1.直接在head中引用这也是我们很常见的引用方式,只不过很多…

[CSS3] Use media query to split css files and Dark mode (prefers-color-scheme: dark)

Dark Mode: :root { --text-color: #000; --background-color: #fff; } body { color: var(--text-color); background-color: var(--background-color) } @media (prefers-color-scheme: dark) { :root { --text-color: #fff; --background-color: #000; } } If our app…

css3整理--filter

只在chrome的少数版本的浏览器中有实现,兼容性差,不适宜应用. filter语法: elm { filter: none | <filter-function > [ <filter-function> ]* } 取值说明: filter-function:有以下值可选 grayscale灰度 sepia褐色(求专业指点翻译) saturate饱和度 hue-rotate色相旋转 invert反色 opacity透明度 brightness亮度 contrast对比度 blur…

css3整理--clip

clip语法: .selector { clip: rect | auto | inherit } 注意:clip属性只能在元素设置了“position:absolute”或者“position:fixed”属性起作用取值: rect:通过设置四个点来进行裁切,语法下面介绍 auto:默认,和不进行裁切的效果一致 inherit:继承父元素的裁切属性 clip: rect(<top>, <right>, <bottom>, <left>); 通过设置距离上…

css3整理--::selection

::selection作用: 当使用鼠标选择文本时,改版被选中文本的背景色和前景色.(默认情况下,window中背景色是深蓝色,前景色是白色.) ::selection语法: /*Mozilla Firefox*/ ::-moz-selection { background: 颜色值: color:颜色值: } /*Webkit,Opera9.5+,Ie9+*/ ::selection { background: 颜色值: color:颜色值: } 注意:::selection只能设置backg…

css3整理--calc()

calc()语法: elem{ width:calc( 50% -2px ); } 取值说明: calc是计算的缩写,上句含义是:计算elem父元素的50%再减2px,并将结果赋值给elem的width属性 calc()能做什么: calc()可以通过动态的计算来得到元素的宽度或者高度. 例如:width:calc(50% - 2px).当为元素设置了2px的边框时,通过这样的计算就可以避免因超出而折行. 可以使用 + - * / 等运算符来进行计算注意:表达式中有“+”和“-”时,其前后必须…

css3整理--box-sizing

box-sizing语法: box-sizing : content-box || border-box || inherit 参数取值: content-box:此值为其默认值,其让元素维持W3C的标准Box Model,也就是说元素的宽度/高度(width/height)等于元素边框宽度(border)加上元素内边距(padding)加上元素内容宽度 /高度(content width/height)即:Element Width/Height = border+padding+conten…

css3整理--background-image

background-image语法: background-image: url1,url2,...,urlN; 通过“,”分隔N张背景图片,background的所有其它属性需要配合该属性进行设置,如下: background-repeat: repeat1,repeat2,...,repeatN; background-position: position1,position2,...,positionN; background-size: size1,size2,...,sizeN; b…

css3整理--background-origin

background-origin语法: background-origin: padding-box || border-box || content-box 参数取值: padding-box(padding):此值为background-origin的默认值,决定background-position起始位置从padding的外边缘(border的内边缘)开始显示背景图片: border-box(border):此值决定background-position起始位置从border的外边缘开…

css3整理--background-clip

background-clip语法: background-clip : border-box || padding-box || content-box 参数取值: border-box:此值为默认值,背景从border区域向外裁剪,也就是超出部分将被裁剪掉: padding-box:背景从padding区域向外裁剪,超过padding区域的背景将被裁剪掉: context-box:背景从content区域向外裁剪,超过context区域的背景将被裁剪掉:…

css3整理--background-size

background-size语法: /*Mozilla*/ -moz-background-size: auto || <length> || <percentage> || cover || contain /*Webkit*/ -webkit-background-size: auto || <length> || <percentage> || cover || contain /*Presto*/ -o-background-size: auto…

css3整理--Animation

animation语法: 1.动画的定义 @keyframes IDENT { from { Properties:Properties value; } Percentage { Properties:Properties value; } to { Properties:Properties value; } } 或者全部写成百分比的形式: @keyframes IDENT { 0% { Properties:Properties value; } Percentage { Properti…

css3整理--transition

transition语法: transition : [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-f…

css3整理--transform

css3整理--gradient

gradient语法: -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* ) // chrome的新版写法和FF的一致,只要改版前缀即可第一个参数:指定渐变方向.例如:top,从上向下渐变:left,从左向右渐变: left top,从左上向右下渐变第二个参数:指定起始点的颜色值第三个参数:指定结束点的颜色值还可以加参数,如: backgrou…

css3整理--rgba

rgba语法: rgba(0, 0, 0,0.5); 第一个参数:R 红色(0-255) 第二个参数:G 绿色(0-255) 第三个参数:B 蓝色(0-255) 第四个参数:透明度(0-1)使用rgba指定颜色的好处是:任何位置的颜色,使用rgba指定,都可以通过设置第四个参数来调整透明度.不仅仅可以设置背景色的透明度.使用rgba指定背景透明和使用opacity指定背景颜色的透明度的区别: 1.使用opacity指定背景颜色的透明度时,其内容也一起被设置透明度,导致内容模糊.如果不想内容模糊,…

css3整理--word-wrap/word-break/white-space

word-wrap语法: word-wrap : normal | break-word normal : 默认值,单词如果单词超长,会冲出边界(单个单词超长,在当前行显示) break-word : 将内容在边界内换行,当单词在当前行放不下时,会自动切换到下一行(单个单词超长,在下一行显示) word-break语法: word-break:normal | break-all | keep-all normal:如果设置为默认值时中文则到边界处的汉字换行,如果是英文整个单词换行,如果出现某个…

css3整理--text-overflow

text-overflow语法: text-overflow : clip | ellipsis clip:表示不显示省略标记(...),而只是简单的裁切,需要在一定的高度范围内配合overflow:hidden属性使用,如果不配合的话将无任何效果: 和单独使用overflow:hidden;效果一致. ellipsis:对象文本溢出时将显示省略标记(...),需要配合overflow:hidden:white-space:nowrap一起使用才会有效果. 小知识点: /**这是firefox特…

css3整理--text-shadow

text-shadow语法: text-shadow:[颜色(Color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)],[颜色(color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)]... 或者 text-shadow:[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)],[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)]... 第一个参数:…

css3整理--box-shadow

box-shadow语法:(想法:用阴影来做边框,就不会出现动态改变边框宽度而产生的重排问题) 对象选择器{box-shadow:投影方式 X轴偏移量 Y轴偏移量阴影模糊半径阴影扩展半径阴影颜色} 第一参数: 阴影类型:此参数是一个可选值,如果不设值,其默认的投影方式是外阴影:如果取其唯一值“inset”,就是将外阴影变成内阴影, 也就是说设置阴影类型为“inset”时,其投影就是内阴影: X轴偏移量:是指阴影水平偏移量其值可以是正负值可以取正负值,如果值为正值,则阴影在对象的右边,反之其…

【css3整理--media】的更多相关文章