CSS3笔记（一）

css3笔记系列-3.css中的各种选择器详解，不看后悔系列

点击上方蓝色字体,关注我最详细的css3选择器解析选择器是什么? 比较官方的解释:在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. 最常见的 CSS 选择器是元素选择器.换句话说,文档的元素就是最基本的选择器. 看代码,元素选择器就是这个: h1作为一个元素标签,是最基本的选择器,这样可以对h1标签设置属性. 选择器有哪些? 常见的选择器:元素选择器,类选择器,ID选择器,属性选择器,派生选择器,本文的思路就是先讲讲最常用的选择器,再讲讲用得比较少的选择器.如果你觉得能学到…

【css3笔记】---- 渐变的秘密

<CSS揭秘>这本书非常不错,充满了干货和惊喜.以下主要是关于使用渐变做出来的一些效果的笔记.请用最新的现代浏览器观看. 首先要回顾下一个css语句: linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+) 这是一个线性渐变,第一参数是渐变方向,是可选的.可以是角度,angle的值是度数,比如45deg,90deg.也可以使用to…

CSS3 笔记四（Transforms/Transition/Animations）

CSS3 2D Transforms Methods translate() rotate() scale() skewX() skewY() matrix() 1> translate() The translate() method moves an element from its current position (according to the parameters given for the X-axis and the Y-axis). 2> rotate() The rota…

CSS3 笔记三（Shadow/Text/Web Fonts）

CSS3 Shadow Effects text-shadow box-shadow 1> text-shadow The text-shadow property adds shadow to text. This property accepts a comma-separated list of shadows to be applied to the text. syntax text-shadow: h-shadow v-shadow blur-radius color|none|in…

CSS3 笔记二（Gradients）

CSS3 Gradients Two types of gradients: Linear Gradients (goes down/up/left/right/diagonally) Radial Gradients (defined by their center) Linear Gradients syntax background: linear-gradient(direction, color-stop1, color-stop2, ...); 1> Top to Bottom (t…

CSS3 笔记一（Rounded Corners/Border Images/Backgrounds）

CSS3 Rounded Corners The border-radius property is a shorthand property for setting the four border-*-radius properties. syntax border-radius: 1-4 length|% / 1-4 length|%|initial|inherit; Property Description border-radius A shorthand property for se…

CSS3笔记

CSS/CSS3在线手册:http://www.css119.com/book/css/ CSS3实现水平垂直居中:http://bbs.html5cn.org/thread-87300-1-1.html http://www.w3cplus.com/css/centering-css-complete-guide.html CSS魔法:http://www.cssmagic.net/ 你很熟悉CSS,却没掌握这些CSS技巧:http://www.html5cn.org/art…

最开始的时候 CSS3产生的一个新属性是一个浏览器的私有的,然后W3C 可能会拿来采用做个标准,再没公布标准之前就只能用私有属性(加前缀)来表达各自厂商的实现,主要是CSS3刚出现那会儿,它暗示该CSS属性或规则尚未成为W3C标准的一部分,尽管现代浏览器已经支持了众多的CSS3属性,但CSS3目前还没得到全面的支持,所以我们需要使用一些特定的声明来提升兼容性,遗憾的是IE8及以下浏览器目前均不支持CSS3. 1.CSS3标准为加强浏览器兼容性,在使用CSS3属性时尽量使用以下特定声明: * …

CSS3笔记之第四天

CSS3 2D 转换了解2D变换方法: translate() rotate() scale() skew() matrix() translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动. transform:translate(100px,100px); -ms-transform:translate(10px,100px); /* IE 9 */ -webkit-transform:translate(100px,100px); /* Safari and…

CSS3笔记之第三天

CSS浮动 float:right 伪类: a:link {color:#FF0000;} /* 未访问链接*/ a:visited {color:#00FF00;} /* 已访问链接 */ a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */ a:active {color:#0000FF;} /* 鼠标点击时 */ :first-child:匹配第一个元素 i:first-child:匹lang(no)配第一个x元素的i元素 :lang(no) :f…

CSS3笔记之第一天

通过展示实例来初步学习CSS3 1.背景设置背景色:background-color:#b0c4de; 设置背景图片:background-image:url('paper.gif'); 设置背景图片重复策略:background-repeat:repeat-x;(no-repeat),repeat-y 设置背景图片位置:background-position:right top;(left bottom) 设置背景的全部属性:background:#ffffff url('img_tree.…

CSS3笔记4

1.CSS3盒子模型 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div:first-child { width: 200px; height: 200px; background-color: pink; box-sizing: cont…

前端CSS3笔记

第1章CSS3简介如同人类的的进化一样,CSS3是CSS2的“进化”版本,在CSS2基础上,增强或新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷. 1.1 CSS3的现状 1.浏览器支持程度差,需要添加私有前缀 2.移动端支持优于PC端 3.不断改进中 4.应用相对广泛 1.2 如何对待 1.坚持渐进增强原则 2.考虑用户群体 3.遵照产品的方案 4.听Boss的第2章准备工作 2.1 统一环境由于CSS3兼容性问题的普遍存在,为了避免因兼容性…

CSS3笔记-加强版

属性选择器: E[attr]只使用属性名,但没有确定任何属性值 E[attr="value"]指定属性名,并指定了该属性的属性值 E[attr~="value"]指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词,而且等号前面的“〜”不能不写 E[attr^="value"]指定了属性名,并且有属性值,属性值是以value开头的 E[attr$="value"]指定了属性名…

css3 笔记

1.元字符使用: []: 全部可选项 ||:并列 |:多选一 ?: 0个或者一个 *:0个或者多个 {}: 范围 2.CSS3属性选择器: E[attr]:存在attr属性即可: E[attr=val]:属性值完全等于val E[attr*=val]:属性值里包含val字符并且在“任意”位置 E[attr^=val]:属性值里包含val字符并且在“开始”位置 E[attr$=val]:属性值里包含val字符并且在“结束”位置 3.CSS3伪类选择器: P:first-child:P元素的父元素的…

CSS3 笔记五（Buttons）

Some examples 1> Input width animation Search: Code <!DOCTYPE html> <html> <head> <style> input[type=text] { width: 100px; -webkit-transition: ease-in-out, width .35s ease-in-out; transition: ease-in-out,width .35s ease-in-out;…

CSS3笔记之第二天

1.CSS盒模型指定元素的宽度和高度width,height 2.CSS边框 border-style:solid; border-width:5px; border-top-width:15px; border-bottom-width:15px; border-right-width:15px; border-left-width:15px; 一个边框的全部属性:border:5px solid red; 四个边的顶边:border-top:thick double #ff0000; 四个…

Css3 笔记动画和定位属性

transform 变形属性属性:translate 平移,rotate 旋转, scale 缩放,skew 倾斜 ◆ translate :指定对象的2D平移第一个参数对应X轴,第二参数对应Y轴:如果第二个参数未提供,则默认为0:translate(10px,10px)X轴往左边移动对应第一个参数的值就是正数值.Y轴往下面移动对应第二个参数的值就是正数值. ◆ rotate :控制对象的2D旋转,需要先定义transform-origin属性:列:Rotate(90deg),tra…

css3 笔记背景

.div1 { height: 80px; background: linear-gradient( 135deg, transparent 0, transparent 49.5%, green 49.5%, green 50.5%, transparent 50.5%, transparent 100%), linear-gradient( 45deg, transparent 0, transparent 49.5%, red 49.5%, red 50.5%, transparent 5…

CSS3笔记2

1.CSS样式表分类 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*type类型,css为本*/ div { color: pink; } </style> </hea…

CSS3笔记1

1.CSS字体设置 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> h4 { font: italic bold 14px "微软雅黑"; /*italic为倾斜 font综合写法,更简洁. 有顺序,不能乱调位置*/ col…

CSS3笔记3

1.CSS的层叠性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { color: skyblue; font-size: 12px; } div { color: hotpink; } </style> </hea…

vue 自学项目笔记

感觉小青推荐的学习网课, 利用vue 仿制一个去哪网, 学习的东西很多, 在食用之前,需要先确保js 和css 过关 js https://www.bilibili.com/video/av30099487 140 集大礼包, 22小时 es6 https://www.bilibili.com/video/av47304735 台湾小姐姐的es 6 声音很好听 4 小时阮一峰的 es 6 教程 http://es6.ruanyifeng.com/ css3+html https…

CSS3与页面布局学习笔记（八）——浏览器兼容性问题与前端性能优化方案

一.浏览器兼容 1.1.概要世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运行平台还存在差异.屏幕分辨率不一样,大小不一样,比例不一样.兼容性主要可以分类为: 1).CSS兼容2).JavaScript兼容3).HTML兼容这三类也是前端的主要组成部分,都存在一定的兼容性问题,知己知彼,百战百胜,我们先了解浏览器的发动机—内核. 多年前我们一直为IE6兼容烦恼,为它没少加…

CSS3学习笔记1-选择器和新增属性

前言:之前自学了一些关于CSS3的知识,在学习过程中也遇到过坑,不过总算磕磕绊绊的学习完了关于CSS3的相关知识,于是最近把之前的笔记和代码整理了一下,也算是一个对CSS3知识的回顾复习吧,也希望能够对想学这方面知识的小白有所帮助.因为是各种渠道找的资料,学习的不算系统,所以知识点涵盖的不甚全面,望各位看官不吝指正批评. CSS3简介 CSS3是CSS2的"进化"版本,在CSS2基础上,增强或新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷. css3现…

《css3实战》读书笔记第一章基于CSS需求而编写的HTML.

笔记说明 <CSS3实战手册第3版(影印版)>可以消除Web设计工作的痛苦,并且带给你:HTML--重新入门.如果你是HTML新手,你会学到如何以CSS友好的方式进行基本页面构造.若你是HTML高手,你将学会如何像CSS设计者那样思考. 全书共18章,五大部分600来页. 可能是出版方认为本书英文很好懂,所以就不找译者翻译了. 本来为作为一个行外人及英语渣,看这书会是很艰难的过程.但读过之后发现,相比一些拙劣的中文翻译书,居然觉得轻松了很多. 不同于一般CSS书枯燥的"选择器-盒模型…

CSS3秘笈第三版涵盖HTML5学习笔记6~8章

第二部分----CSS实用技术第6章,文本格式化指定备用字体: font-family:Arial,Helvetica,sans-serif; 当访问者没有安装第一种字体时,浏览器会在列表中继续往下搜寻,直到找到备用字体. 若字体名称中包含多个单词,则必须用双引号将它们括起来 font-family:"Times New Roman",Times,serif; sans-serif字体 sans-serif字体看起来干净而简洁,所以常被用于标题.sans-serif字体包括Aria…

CSS3秘笈第三版涵盖HTML5学习笔记1~5章

第一部分----CSS基础知识第1章,CSS需要的HTML HTML越简单,对搜索引擎越友好 div是块级元素,span是行内元素 <section>标签包含一组相关的内容,就像一本书中的章节一样 <aside>标签包含与其周边的内容相关的内容,如纸质杂志上的侧边栏一样 <footer>标签包含通常放在网页底部的一些信息,如版权声明.法律信息.一些网站的导航链接,等等 <nav>标签用来包含重要的导航链接 <figure>标签用于说明图让IE…

《CSS3使用指南》读书笔记

一.CSS3的来龙去脉 1.CSS3的新特性: 1)不依赖图片的视觉效果 2)盒容器变形 3)独一无二的字体 4)强大的选择器 5)过渡与动画 6)媒体信息查询 7)多列布局 2.CSS标准发布分5个阶段,所有特性的目前所处阶段可以在这里查看:www.w3.org/Style/CSS/current-work,一般处于第3阶段时,我们就可以使用它了 3.CSS3对你的网站到底意义几何,是由你的项目和用户所决定的,而不是根据浏览器的份额来.应该支持IE6,但不应该花很多精力在上面 4.渐进增强:在…

《HTML5与CSS3基础教程》笔记

以下笔记摘要页码基于人民邮电出版社 2013年1月第1版英文书名:HMTL5 and CSS3 Visual Quickstart Guide (Seven Edition) 前言 P2: 渐进增强:一种最佳实践第1章网页的构造块 P1: 第一步要让内容对所有用户都是可访问的. P3: 无论如何,页面一定要包含 DOCTYPE. P5: HTML 核心观念:只负责描述内容的含义,而非表现. 无论是使用从 HTML 这门语言诞生起就存在的元素,还是使用 HTML5 的新元素,目标都应该是一…

【CSS3笔记（一）】的更多相关文章