css
文章平均质量分 63
lovedlyl
这个作者很懒,什么都没留下…
展开
-
CSS权威指南 读书笔记 第一章 CSS和文档
第一章 CSS和文档元素每个标签都会生成一个盒子,包裹其元素内容1.替换元素和非替换元素替换元素:文档内容非最终呈现在页面上的内容,如img和input被替换成radio,button,text input和checkbox等非替换元素:除替换元素外我们常见的元素2.元素呈现方式block和inline两种block形式:如div和p元素,独立成行。注意原创 2016-01-24 00:21:34 · 355 阅读 · 0 评论 -
第十三章 用户界面样式
第十三章 用户界面样式1.系统字体和颜色系统字体:a.widget {font: caption}1.使用系统字体时,本身就是缩写形式,所以打破了font的缩写规则2.如果想使用系统字体的加粗形式,可以如a.widget {font: caption; font-weight:bold} 不过这里的顺序不能颠倒3.可以使用的关键字:caption:由标题控件使用的字原创 2016-02-20 20:14:29 · 240 阅读 · 0 评论 -
CSS3读书笔记(from imooc) 第一章 初识CSS3
第一章 初识CSS3兼容:主流浏览器chrome safari firefox opera 甚至是360都已经支持CSS3大部分功能,IE10后也全面支持。向前兼容时使用的前缀:-webkit chrome safari-moz firefox-ms IE-o opera原创 2016-02-22 13:45:46 · 328 阅读 · 0 评论 -
第二章 选择器
第二章 选择器通配符选择器 ^ $ *^ e[attr^="val"]{} 元素e的attr属性以值val字符串开始$ e[attr$="val"]{} 以值val字符串结尾* e[attr*="val"]{} val字符串包含在属性值内根元素选择器 :root:root{background:green}:root 选择器前没有任何元素选择器 相当于htm原创 2016-02-22 13:46:25 · 273 阅读 · 0 评论 -
第三章 边框
第三章 边框圆角效果 border-radius值:n 说明:1.一般使用px单位,也可使用百分数和em,不过兼容性较差。2.与border相同,可单边设置,如border-left-radius,也可缩写border-radius,同时设置4个边,也可以使用4个值,分别设置4个边。3.缩写时,4个值的顺序分别是左上角 右上角 右下角 左下角4.半圆的实现方法:设置原创 2016-02-26 09:01:16 · 338 阅读 · 0 评论 -
第四章 颜色
第四章 颜色RGBA在rgb的基础上增加了透明度, a->alphaalpha:值为0-1,不可为负数。a {background: rgba(100,20,30,0.5);}颜色渐变 linear-grandientp {background: linear-gradient(to left, red, blue, green);}各个值之间用逗号隔开最后原创 2016-02-26 09:02:07 · 321 阅读 · 0 评论 -
第五章 文本
第五章 文本用省略号(...)显示溢出文本 text-overflow值:clip ellipsisclip:裁剪溢出内容ellipsis:用省略号显示溢出内容说明:要实现ellipsis效果,还要声明overflow为hidden,如果文本本来只有一行,想在一行内显示,还需声明white-space为nowrapp {width:20px; overflow:hi原创 2016-02-26 09:02:35 · 280 阅读 · 0 评论 -
第六章 背景
第六章 背景背景图片开始位置 background-orgin值:border-box padding-box content-box默认为padding-box,即从元素内边距开始平铺border-box:从边框padding-box:从内边距content-box:从内容注意:只有背景图片设置为no-repeat时,此属性才有效适当裁剪背景图片,以适应需原创 2016-02-26 09:03:10 · 273 阅读 · 0 评论 -
第七章 变形 trnasform
第七章 变形 trnasform旋转 rotatediv {transform:rotate(45deg)};值:角度 如 20deg 44deg表示相对于原点旋转,正值顺时针旋转,负值逆时针旋转。扭曲 skewdiv {transform:skew(20px,30px);}skew(x,y):元素在X和Y轴上同时扭曲,如果只有一个值,只应用在X轴上。ske原创 2016-02-26 14:23:19 · 562 阅读 · 0 评论 -
第十二章 列表和生成元素
第十二章 列表和生成元素1.列表列表类型 list-style-type值:disc circle square decimal decimal-leading-zero upper-alphaupper-latin lower-alpha lower-latin upper-roman lower-roman lower-greek upper-greek armenia原创 2016-02-20 20:13:59 · 253 阅读 · 0 评论 -
第十一章 表布局
第十一章 表布局 定义一个表 表头 表行 单元格(具体数据)内容主体 表头 表尾 总标题1.表格式化表的视觉编排:内部表元素生成矩形框,可以有内边距和和边框,但不能有外边距,如果设置,会被忽略。编排规则:1.没一个行框包含一行单元格。因此,有多少个行元素,表正就会有多少个表格行。2.列框包含一列或多列表格单元。3.尽管单元原创 2016-02-20 20:13:05 · 302 阅读 · 0 评论 -
第十章 浮动和定位
第十章 浮动和定位1.浮动 float值:left right none inherit初始值:none继承性:无应用于:所有元素说明:1.浮动元素会从文档流中删除,但依然影响页面布局。2.一个元素浮动后,周围元素会“环绕”该元素,如img。3.浮动元素的外边距不会与周围元素的外边距发生合并。4.浮动元素内幕:(以下所称边界为内容边界,不含paddi原创 2016-02-18 16:17:37 · 303 阅读 · 0 评论 -
第二章 选择器
第二章 选择器1.元素选择器 p{color: blue;}html必须为合法标签 否则无效xml根据文档使用2.群组选择器 h1,p{color:blue;}全局选择器(*)3.类选择器 .warning{color:blue;}注意:使用多类选择器时,如p.waring.help 在IE4.ID选择器 #p{color:blue;}a. ID原创 2016-01-24 00:22:25 · 315 阅读 · 0 评论 -
第三章 结构和层叠
第三章 结构和层叠1.权重a.以0,0,0,0排列,各种选择器的权重值分别为:内联元素样式 1,0,0,0ID选择器 0,1,0,0类,伪类和属性选择器 0,0,1,0元素和伪类元素选择器 0,0,0,1全局选择器(*) 0,0,0,0 不过不同于无权重 如受inherit影响注意:1.0,0,1,0 权重大于 0,0,0,10002.ID选择器和类原创 2016-01-25 23:40:25 · 295 阅读 · 0 评论 -
第四章 单位和值
第四章 单位和值1.数字可以是:整数,分数,正数和负数2.百分值一般是相对值3.颜色a.命名颜色 h1{color:blue;}17种基本颜色:aqua fuchsia lime olive red white black gray maroon orange silveryellow blue green navy purple teal加这17种原创 2016-01-25 23:41:08 · 224 阅读 · 0 评论 -
第五章 字体
第五章 字体1.font-family 字体系列font-family 不是简单的一种字体,而是一类字体多种变形的组合。比如Times字体,就包括TimesRegular TimesBold TimesItalic TimesOblique TimesBoldItalic 和 TimesBoldObliquea.除Times Verdana Helvetica Aril这些原创 2016-01-27 11:11:42 · 338 阅读 · 0 评论 -
第六章 文本属性
第六章 文本属性1.text-intend值: inherit 可为负数初始值:0适用元素:块级元素(替换元素不行)继承性:有百分比:按照包裹元素的数值计算2.text-align值:left right center justify inherit适用于:块级元素继承性:有说明:a.与元素的区别,该元素不仅会把文本居中,元素还会居中,原创 2016-01-27 11:12:35 · 325 阅读 · 0 评论 -
第七章 基本视觉格式化
第七章 基本视觉格式化1.基本框CSS规定:无论是块级元素,还是行内元素,每个元素都可设置一个矩形框。这个框可设置border padding margin 属性。关于border:如何未设置颜色,其颜色和content颜色相同。如果border有间隙(如dotted),则间隙颜色和content背景色相同。关于padding:padding颜色也和content背景色原创 2016-02-09 22:48:11 · 352 阅读 · 0 评论 -
第八章 padding border margin
第八章 padding border margin1.基本元素框width和height 这两个属性不能应用于行内非替换元素,CSS兼容浏览器会忽略这些声明。a.width值: auto inherit初始值:auto应用于:块级元素和替换元素继承性:无百分数:相对于包含块的widthb.height值: auto inherit初始值:a原创 2016-02-09 22:49:03 · 277 阅读 · 0 评论 -
第九章 颜色和背景
第九章 颜色和背景注意:在html中使用类名时,最好根据信息类型命名,而不是希望得到的视觉效果,如sub-section而不是dkblue。1.前景颜色 color值: inherit初始值:用户代理特定的值继承性:有计算值:根据指定确定说明:(1)颜色的作用之一就是获取用户注意,但太过复杂反而不好。(2)浏览器默认背景颜色可被用户设置,所以原创 2016-02-18 16:16:27 · 302 阅读 · 0 评论 -
第八章 动画基础 过渡 transition
第八章 动画基础 过渡 transition在早期的web开发中,要实现动画效果,都是依赖JS或Flash。CSS3中引入了一个新的模板transition,可通过CSS事件触发元素外观改变,这些事件包括鼠标单击事件,获得焦点事件,被点击,对元素改变。CSS3中要实现动画过渡需要以下步骤:1.在默认样式中声明元素的初始状态。2.声明过渡元素的最终状态3.在默认样原创 2016-02-26 14:23:55 · 496 阅读 · 0 评论