CSS3: The missing manual 《css3秘笈》笔记+布局、设计优秀资源整理

最近一直在搞css，也没回学校，希望别把Js和算法的东西统统忘掉了。。。然后一直在实习，感觉还可以吧，就是一直捞不着有技术含量的活儿干，有时候挺心塞的。
长话短说，今天的任务是看完《css3： the missing maunal》，译作《css3秘笈》。这本书由浅入深，由于CSS算是系统学过一遍，所以有些东西可能就一带而过了，笔记以补充为主，整理了一些零碎的知识点，和好的网站，资源。

1、如何选择适当的语义化标签?

参考网站html5doctor

2、类和名的命名规则
字母，数字，-和_
必须以字母开头
区分大小写

3、一种趋势：多用类选择器，少用id选择器

4、伪类用:，伪元素用::
但如果继续用:，有利于ie8以下的浏览器识别。
::selection只有双冒号的版本，而且只能修改color和backgroud-color。
可以增加前缀使浏览器识别，如-moz-selection

5、: not() 的限制，只能用简单选择器，不能连用多个。

6、serif字体适用于长篇文字，包括times new roman,georgia,times
sans-serif字体适用于标题，包括arial, verdana, geneva, tahoma, trebuchet MS, century gothic
monospaced字体适用于计算机代码，每个字母都是等宽。courier new, lucida console, copperplate light, marker felt

arial black 和 impact字体只有一种形式，font-weight和font-style设置为normal

7、
@font-face

@font-face{font-family: "League Gothic";src: url("fonts.league_asdfhgothic.ttf")
}

8、shadow的例子：
https://webexpedition18.com/articles/css3-text-shadow-property
真是漂亮！
这个网站值得一看

9、数字可以直接表示行高。
line-height: 1.5;
等于150% 或者 1.5em;

10、通常用负的text-indent和正的margin值，使负文本缩进不会突出页面或者边沿。若设定为百分比值，以父元素的宽度为基准。

11、 font 属性必须包含font-size和font-family选项，且必须放在最后写。
指定行高加一个正斜杠 1.5em/150%
font-size/line-height

12、list-style-position 属性，设为outside时更突出列表的每一项，设为inside时则使列表宽度最大。利用padding-left属性可以调整项目符号与其文本见的距离。

13、免费图表和项目符号
css2还提供了counting scope, counting increment.
这个功能很强大啊！
（dl 下面有 dt dd，ol 下面有 li）
给父元素counter-reset，后面还可以跟个整数（integer），来表示从哪儿开始（integer + 1）。

ol{ counter-reset: li;}
ol > li:before{
content:counter(li);
counter-increment:li;
}

dl{
counter-reset:my-counter;
}
dl dt:before{
content:counter(my-counter);
counter-increment:my-counter;
position:absolite;
}

demo1
demo2
list-style-image无法定位，所以应当换用background-image

14、margin padding 若设宽度，都是以父元素的宽度为基准衡量的。上下的top bottom的margin会发生折叠，两个碰在一起时，只有大的那个生效。左右边距则不会折叠，定位的也不会折叠。
padding 必须是正值，但margin可以不是。

15、行内元素的top bottom margin会失效，左右可以加空格

16、使用border时通常会添加padding

17、border-radius可以用百分比设定，也可以用40px/20px（即水平半径/垂直半径）设定，这两种都易导致椭圆形的圆角，浏览器会用元素宽度的百分比来算水平半径，高度的百分比来算垂直半径。

18、box-shadow的glow效果是通过在第三个值和颜色值之间加入阴影尺寸（speard）来达到的。会将阴影扩展指定的量。

div
{
width:100px;
height:75px;
background-color:lightyellow;
border:1px solid black;
box-shadow:inset 2px 2px 12px 4px yellow
}

似乎黑白看得更清楚诶：

接下来不计数了，因为太难记了。

–width height 与 margin，padding不同，是以父元素的宽对宽，高对高为基准的。

–float两个各占屏幕50%的元素，采用box-sizing:border-box选项。让width中包含了padding， border。默认是content-box, 还有一个不常用的选项是padding-box。

–max-width和min-width
通常的做法是，用百分比设定了width/height，再用绝对值比如px设定了max-width/min-width

盒子模型宽度 = width > min-width ? width : min-width= width >max-width ? max-width : width

–float不能完全用display:flex来代替，比如很多很多文字配两张图片的那种，仍然需要把图片左右float来达到文字包裹图片的效果。

–除了图片之外，所有标签的浮动元素都要设置宽度。编写html要注意浮动元素必须出现在任何包围浮动元素的内容之前。

–背景和边框如何在碰到Float元素时停下来？可以在有背景、边框的元素上设置overflow:hidden，或者在浮动元素的周围添加足够粗的，与背景色一致的边框。

–background的巨大威力：
http://www.csszengarden.com/219/ 这个做的不错，有空可以扒一扒

– 如何选取不同的图片：gif会失真，如果不需要用到动画，那稍后讲到的png8会更好更快；jpeg颜色算法好，但文字和大块纯色区会有光斑，适用于照片；png综合特性强，png24/32高质量但大，png32 支持 alpha透明

–background-image的url地址，如果是相对地址，则是相对于样式表的，而不是html。

–URL的三种方式
绝对路径：适用于不在一个服务器上的文件
相对根目录的路径：用/开头的表示网站的根文件夹，适用于存放在自己网站上的突破
相对路径：都挺好的，就是最好不要随便改变外部样式表的的存储路径，否则容易出错。

–可以用background:center center来控制水平居中一张背景图片。对repeat的图片来说，会调整其开始重复的起点位置。关键字还有 left right top bottom

–background通常不会被打印出来。如果计划让访问者打印网页，比如网站地图，logo，< img>还是要用啊。

–如果背景图片的size中有一个是px有一个是auto 图片会被拉缩到对应的px然后保持原始比例。

–线性渐变，径向渐变
http://lea.verou.me/css3patterns 参考网站
实际控制的是background-image
记得一定要加浏览器前缀！！！！一定要加！！
实际做的时候多试几次就知道咋回事了。

background-image:-webkit-radial-gradient(20% 40%,circle farthest-side,red,blue);
//20% 40% 指的是元素左边20%处，上方40%处开始渐变，就是圆心的位置，circle可以去掉，那样的话就是一个椭圆形的渐变，circle则是一个正圆形的渐变，cloest-side是渐变从中心延伸到离中心点最近的那一边，同理cloest-corner,farthest-side,farthest-corner。
径向渐变也可以repeating-radial-gradient(circle,red 20px,orange 30px,yellow 40px,red 50px)background-image:-webkit-repeating-linear-gradient(bottom left,#900 20px,#fc0 30px, #900 40px);
// 第一个定义角度，或者说是从哪里开始指向。角度和position不同，比如45deg就是过元素中心的点，但角度是45deg,左侧是0，右侧是180，上是270deg，下是90deg，自己推算吧。然后可以插多个颜色，并以%或px定义宽度。注意宽度是递增的，从该角度其多少px是某一颜色，而不是某一颜色占的单独的宽度。

一个径向渐变重复的实例，很丑。。。

web将渐变都当做图片image处理，因此可以结合其他属性比如background-size/position等等。

鼎鼎有名的css渐变生成器
colorzilla

CSS3: The missing manual 《css3秘笈》笔记+布局、设计优秀资源整理相关推荐

最新《动手学习深度学习》配套课程视频、笔记、ppt等资源整理分享
<动手学习深度学习>是李沐老师(AWS 资深首席科学家,美国卡内基梅隆大学计算机系博士)主讲的一系列深度学习视频.本项目收集了我们在寒假期间学习<动手学习深度学习>过程中详细的 ...
基于ArcGIS的Python编程秘笈笔记（三）：自动化地图制图和打印
引言本篇博客介绍如何使用arcpy.mapping模块来实现多个与地图生产和打印有关的地理处理任务. ArcGIS10推出的arcpy.mapping模块提供了许多与自动化地图生产相关的功能. ar ...
CSS3秘笈第三版涵盖HTML5学习笔记6~8章
第二部分----CSS实用技术第6章,文本格式化指定备用字体: font-family:Arial,Helvetica,sans-serif; 当访问者没有安装第一种字体时,浏览器会在列表中继续往 ...
CSS3秘笈第三版涵盖HTML5学习笔记13~17章
第13章,构建基于浮动的布局使用的是float(浮动)属性注:float:none值将取消所有浮动,通常只用来取消元素中已经应用的浮动. 切记:不需要给正文的div设计宽度,即使设计成固定宽度也不 ...
读书笔记：《点石成金访客至上的Web和移动可用性设计秘笈》
<点石成金访客至上的Web和移动可用性设计秘笈> 第3版美 Setve Krug 著蒋芳译 Don't Make Me Think A Common Sense Approa ...
android ui秘笈,看图说话_Android_UI_设计秘笈.pdf
March 14 2011 看图说话看图说话 Android UI 设计秘笈设计秘笈 Part II Android 的官方开发者博客发了一份幻灯片介绍了一些 Android UI 设计的小贴士整 ...
《黑客秘笈——渗透测试实用指南》—第2章2.4节Web应用程序的扫描
本节书摘来自异步社区<黑客秘笈--渗透测试实用指南>一书中的第2章2.4节Web应用程序的扫描,作者[美]Peter Kim(彼得基姆),更多章节内容可以访问云栖社区"异步社区 ...
原 CSS3中的过渡,css3之过渡
CSS3的过渡和转换 CSS3的过渡和转换 1.过渡什么是过渡呢?过渡通俗的来说就是从一个样式到另一个样式的逐渐转换改变的效果. 过渡的属性: 属性描述 css transition 简写属性,用 ...
数据科学竞赛经验分享：你从未见过的究极进化秘笈
作者: David K(来自知乎) 排版:杰少,kaggle竞赛宝典小编 "听过很多道理,却依然过不好一生:看过很多分享,却依然做不好比赛." 如今,数据科学竞赛(大数据竞赛,机器 ...

CSS3: The missing manual 《css3秘笈》笔记+布局、设计优秀资源整理

CSS3: The missing manual 《css3秘笈》笔记+布局、设计优秀资源整理相关推荐

最新文章

热门文章