1.选择p标签中的第一个字符 p:first-letter{ color:red; font-size:25px; } 2.选择p标签中的第一行 p:first-line{ color:red; font-size:25px; } 3.在p的前面和后面添加伪类 p:before/after{ content:"': 设置属性样式 } 4.设置input在得到焦点.可以被修改.不能被修改.选中时的样式 input:focus/enabled/disabled/cheked{ background:…

CSS3新增了嗯- -21个选择器,脚本通过控制台在这里运行; ~: p ~ p { color : red;/*此条规则将用于p后边所有的p...就是除了第一个p的所有p,规则同p:not(:nth-of-type(1)),但是权重要低于后者*/ } [attribute^=value]: 选择该属性以特定值开头的元素 [attribute$=value]: 选择该属性以特定值结尾的元素 [attribute*=value]: 选择该属性中出现了特定值的元素 上边三个是可以组合使用的,方法如…

博客地址:https://ainyi.com/52 H5 新特性 语义化标签:header.footer.section.nav.aside.article 增强型表单:input 的多个 type 新增表单元素:datalist.keygen.output 新增表单属性:placehoder.required.min 和 max 音频视频:audio.video canvas 地理定位 拖拽 本地存储:localStorage - 没有时间限制的数据存储:sessionStorage - 针对…

自己学css的时候比较乱,这次趁着复习把css3的新特性选择器和css2以前不怎么用的选择器做一个总结 <div id="parent"> <p>I'm a example</p> <p id="one">I'm a example</p> <p>I'm a example</p> <p>I'm a example</p> <p>I'm a exa…

Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap & Text-overflow 样式9 Word-wrap9 Text-overflow10 文字渲染(Text-decoration) 描边12 CSS3 的多列布局(multi-column layout)13 边框和颜色(color, border)14 CSS3 的渐变效果(Gradient)1…

Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap & Text-overflow 样式9 Word-wrap9 Text-overflow10 文字渲染(Text-decoration) 描边12 CSS3 的多列布局(multi-column layout)13 边框和颜色(color, border)14 CSS3 的渐变效果(Gradient)1…

1. 移动端开发课程概述 移动互联网的兴起,让移动端的开发迅速蹿红.对于前端开发者来说,移动端的开发已经占据了他们大部分工作时间.接下来老马带大家一起学习移动端开发的相关前端开发技术. 这边课程内容包括: CSS3新特性 新选择器 边框.背景升级.圆角.阴影 新的盒模型 渐变.动画.2D3D转换 伸缩布局.多列布局 新单位 在线字体图标 前缀应用.浏览器兼容.渐进增强 媒体查询 移动端适配开发方案 响应式布局开发方案 移动端js.触屏事件 zepto.js\bootstrap\iScroll.j…

简介 CSS 即层叠样式表(Cascading Stylesheet).Web 开发中采用 CSS 技术,可以有效地控制页面的布局.字体.颜色.背景和其它效果.只需要一些简单的修改,就可以改变网页的外观和格式.CSS3 是 CSS 的升级版本,这套新标准提供了更加丰富且实用的规范,如:盒子模型.列表模块.超链接方式.语言模块.背景和边框.文字特效.多栏布局等等,目前有很多浏览器已经相继支持这项升级的规范,如:Firefox.Chrome.Safari.Opera 等等.在 Web 开发中采用 C…

1.HTML5新标签和属性 1.1 兼容性前缀与语义化 兼容低版本的写法.比较新的浏览器,可以直接写.兼容性前缀,是每个浏览器私有的. 内核 兼容性前缀 浏览器 Gecko -moz- Firefox Webkit -webkit- Chrome.Safari Presto -o- Opera Trident -ms- IE 语义化:根据页面的结构,选择合适的标签,这就是语义化.如标题使用h1-h6 1.2 新增的标签 浏览器要求,最新的浏览器 ie9:包含ie9 ie8以下都不支持,包括ie8…

CSS3与页面布局学习总结(六)--CSS3新特性(阴影.动画.渐变.变形.伪元素等)   目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原点 三.伪元素 3.1.before 3.2.after 3.3.清除浮动 四.圆角与边框 4.1.border-radius 圆角 4.2.边框图片border-image 五.变形 transform 5.1.rotate()2D旋转 5.2.设置原点 transform-origin 5.3.…

深入了解css3新特性:http://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/…

一.什么是css3 css用于控制网页的样式和布局,css3是css的升级版本,受浏览器限制,跨浏览器开发有点复杂.css3完全向后兼容 二.css3新特性 1.边框 css3的边框有如下属性: (1).border-radius:圆角边框,示例如下: 效果如下所示: (2).box-shadow:边框阴影,示例如下: 效果如下所示: (3).border-image:边框图片,示例如下: 效果如下所示: 2.背景 (1).background-size css3中规定背景图片的尺寸,可以设置重…

css  css3新特性 一.css3是什么? 我不喜欢把已有的概念从一个地方抄到另一个地方,还是喜欢如下方式. 参考百度百科: http://baike.baidu.com/link?url=z2VMay9efpFDoQYBR5WuQ_hVP7SWsNltmlm7Qna3yxfA6P0VtrpcI6HjamwbLrQTbcbvyxuuJEsy2c7JBXemyq 参考w3school: http://www.w3school.com.cn 二.css3新特性: 1.兼容各大浏览器(重中之重)…

css3新特性 border属性(border-radius.border-image.box-shadow)详解 1.border-radius  圆角 支持:IE9+ 用法: border-radius:25px 25px 25px 25px 有四个值,分别表示 top-left.top-right.bottom-right.bottom-left div { border:2px solid; border-radius:25px 25px 25px 25px; /*可简写为 border…

跳转到该链接 新特性汇总版: https://www.cnblogs.com/donve/p/10697745.html HTML5和CSS3的新特性(浓缩好记版) https://blog.csdn.net/m0_37631322/article/details/81945113 前端的入门现在基本是由hml和css组合写静态页面开始,w3school官方已经推出Hhtml5和css3新特性了,让前端开发者书写起来比较容易.简单,不过作为一个好的前端开发者更要遵循w3c官方标准去开发. htt…

CSS3新的选择器 ele[att^="val"] /*属性att的值以val开头的元素*/ ele[att$="val"] /*属性att的值以val结尾的元素*/ ele[att*="val"] /*属性att包含val字符串的元素*/…

HTML5 1.HTML5 新元素 HTML5提供了新的元素来创建更好的页面结构: 标签 描述 <article> 定义页面独立的内容区域. <aside> 定义页面的侧边栏内容. <bdi> 允许您设置一段文本,使其脱离其父元素的文本方向设置. <command> 定义命令按钮,比如单选按钮.复选框或按钮 <details> 用于描述文档或文档某个部分的细节 <dialog> 定义对话框,比如提示框 <summary>…

伴随着今年10月底HTML5标准版的发布,未来使用H5的场景会越来越多,这是令web开发者欢欣鼓舞的事情.然而有一个现实我们不得不看清,那就是IE系列浏览器还占有一大部分市场份额,以IE8.9为主,windows8.1的用户已经用上了IE10/11,而考虑我国的国情,IE6.7依然存留不少.在我们放手用HTML5开发的时候,新特性支持度检测就是必不可少的了.一种方式是用navigator.userAgent或navigator.appName来检测浏览器类型和版本,不过这种方式不是很可靠,浏览器…

接触CSS3这么久了,总是到要用的时候直接拿来用,却没有好好地总结归纳一下,那就在这里好好梳理一下吧. CSS3边框: 圆角边框: 关键:border-radius <!DOCTYPE html> <html> <head> <style> div { text-align:center; border:2px solid #a1a1a1; padding:10px 40px; width:350px; border-radius:25px; -moz-bo…

1.HTML5最新规范(HTML5是HTML.XHTML以及HTML.DOM的新标准) ①用于绘画canvas元素 ②用于媒介回放的video和audio元素 ③对本地离线存储的更好支持 ④新的特俗内容元素.如:article.section.footer.nav.header ⑤新的表单控件,比如:calendar.date.time.email.URL.search 2.css3新的特性 ①选择器(如类选择器,id选择器.伪类选择器) ②盒模型 ③背景和边框(border-radius.ba…

随着CSS3标准的发布,越来越多的浏览器开始支持最新的CSS标准,虽然还有些新特性支持的不够完美,但相信未来的浏览器一定会完全支持CSS3的,毕竟这代表着大趋势!下面l列出来一些CSS3中出现的新特性,仅供大家参考. 1: CSS3选择器部分 E[att^="val"] 匹配具有att属性.且值以val开头的E元素 E[att$="val"] 匹配具有att属性.且值以val结尾的E元素 E[att*="val"] 匹配具有att属性.且值中含有…

CSS3的新特性(个人总结)如下 过度(transiton) 动画(animation) 形状转换 transform:适用于2D或3D转换的元素 transform-origin:转换元素的位置(围绕那个点进行转换).默认(x,y,z):(50%,50%,0)) 选择器 参考 http://www.w3school.com.cn/cssref/css_selectors.asp (w3c参考) 阴影(box-shadow) 边框(box-border) border-radius(边框圆角)…

HTML5新特性 (1)语意化更好的内容元素,比如 article.footer.header.nav.section (2)本地存储.sessionStorage.localStorage和indexedDB加强本地存储.使用之前应该先判断支持情况 if(window.sessionStorage){ //浏览器支持sessionStorage } if(window.localStorage){ //浏览器支持localStorage } localStorage和sessionStorag…

HTML5 1.HTML5 新元素 HTML5提供了新的元素来创建更好的页面结构: 标签 描述 <article> 定义页面独立的内容区域. <aside> 定义页面的侧边栏内容. <bdi> 允许您设置一段文本,使其脱离其父元素的文本方向设置. <command> 定义命令按钮,比如单选按钮.复选框或按钮 <details> 用于描述文档或文档某个部分的细节 <dialog> 定义对话框,比如提示框 <summary>…

CSS3的新特性大致分为以下六类 1.CSS3选择器 2.CSS3边框与圆角 3.CSS3背景与渐变 4.CSS3过渡 5.CSS3变换 6.CSS3动画 下面分别说一说以上六类都有哪些内容 CSS3选择器 1.基本选择器 基本选择器又分为 子选择器 相邻兄弟选择器 通用兄弟选择器 群组选择器 2.属性选择器 1.element[attribute] 为带有attribute属性的元素设置样式 2.element[attribute='value'] 为attribute='value'属性的元…

本系列主要总结Css3一些新特性的认识,来源于<css揭秘>书. 一.半透明边框 css3最好用hsla,而不是rgba,hsla是:h:颜色值(0~360):s:饱合度(0%~100%):l:亮度(0%~100%):a:透明度(0~1) background-clip:裁剪背景颜色,默认为border-box(背景颜色扩散到border):padding-box(背景颜色扩散到padding):content-box(背景颜色扩展到content) 示例代码: width:200px; he…

颜色: CSS3新增加了hsl(), hsla(), rgb(),rgba()四个函数来创建color值; hsl(): hsl函数:h(色调),s(饱和度),l(亮度); 色调:为0-360之间的数值[经实验,可以为小数]; 饱和度与亮度:均为百分比; 下图截自http://www.w3.org/wiki/CSS/Properties/color/HSL 当亮度为100%时为白色,当亮度为0%为黑色; 饱和度100%以及亮度50%时生成的颜色均为web安全色 rgb(): rgb函数:r(re…

转载地址:http://www.cnblogs.com/TomXu/archive/2011/11/18/detecting-html5-css3-features-using-modernizr.html HTML5, CSS3以及相关技术(例如canvas和web sockets)带来了非常有用的特性,可以让我们的web程序提升一个新的level.这些新技术允许我们只用HTML,CSS和JavaScript就可以构建包括在平板和移动设备上能够运行的多样化表单页面.HTML5虽然提供了很多新特…

[转] HTML5, CSS3以及相关技术(例如canvas和web sockets)带来了非常有用的特性,可以让我们的web程序提升一个新的level.这些新技术允许我们只用HTML,CSS和JavaScript就可以构建包括在平板和移动设备上能够运行的多样化表单页面.HTML5虽然提供了很多新特性,但是如果我们不考虑旧版本的浏览器就是用这些新技术也不太现实,老版本浏览器已经使用了很多年,我们依然需要考虑这些版本的兼容性问题.本文要解决的问题就是:在我们使用HTML5/CSS3技术的时候,如何…

一.自适应内部元素 利用width的新特性min-content实现 width新特性值介绍: fill-available,自动填充盒子模型中剩余的宽度,包含margin.padding.border尺寸,他让非block元素也可实现宽度100%; max-content:假设容器有足够的宽度,足够的空间,此时,所占据的宽度就是max-content,与display为inline不一样,max-content就像white-space:nowrap一样,不会换行的. min-content:…