《CSS那些事儿》读书笔记_html/css_WEB-ITnose
注:
耐心地学习CSS,掌握好CSS的本质原理后,你将会发现原来CSS真的很好玩。
学习CSS最好的方法就是 不断地做,不断地想,不断地实践。
CSS特点:
CSS的简写:
CSS选择符:
伪类:
用来指定一个或者多个与其相关的选择符的状态( IE6/7支持部分)。其形式为:选择符:伪类 {属性:属性值;}。
如:a:link{}、a:visited{}、a:hover{}、a:active{}。
伪类可使页面增加更多交互效果,而不必去使用过多的javascript来辅助实现。
伪对象:
指在html的文档指定的信息之外,创建文档的额外信息( IE6/7支持部分)。其形式:选择符:伪对象 {属性:属性值;}。
如:p:before {content: “4月1日”}。
CSS层叠样式表的特色在于“层叠”,所谓 层叠即表示CSS样式表会根据选择符的使用而将样式相互叠加或者覆盖。
网页定义的4种样式:
CSS样式采用的优先顺序:
选择符优先级积分:
对于 !important关键字的使用一定要谨慎,切勿随便使用,避免产生不必要的问题。
内嵌样式表,一般应用在访问量比较大的页面 减少对服务器的http请求数而减少对服务器的负担。
缺点是如果需要修改,那就只能对页面进行修改, 且无法利用浏览器缓存特性。
由于浏览器最后解析@import,这样很容易导致IE6的闪屏或者在打开页面的过程中无样式,直到页面加载完毕后才会加载样式的现象出现,因此 不建议使用@import。
因为浏览器在解析html代码时是由上而下的方式逐句分析的,因此 将mainBox放在sideBox之前的主要作用是将内容区域提前展现在浏览器中。
在使用CSS样式布局页面结构时,不使用浮动那么就只能采用定位的方式进行页面布局。
两列页面布局:
要点:float、width指定、 :after清除浮动。
效果:http://jsfiddle.net/XianfaLang/tWvph/
前提:两列的盒模型宽度相加不能大于父元素的宽度,否则会出现错位现象。
要点:float、width百分比、 :after清除浮动。
效果:http://jsfiddle.net/XianfaLang/MyfXs/
要点:相对定位、负边距效果:http://jsfiddle.net/XianfaLang/U3J3X/
问题:当sideBox的内容很多时,使用绝对定位导致无法撑开父元素的高度,而且会覆盖其他元素的内容。解决方案是使用javascript重新判断父元素的高度来解决,个人觉得应该有CSS方案来解决这个问题,而不是用javascript来解决。这不,第5章就给出了一种解决方案:http://jsfiddle.net/XianfaLang/5w8MD/
4.1. 背景模拟:利用背景图片的平铺,在视觉效果上产生等高的感觉。
4.2. 负边距实现(推荐):
原理:利用左右两个方向的外边距弥补在页面中布局出现错位的现象。
要点:两容器设置margin-bottom:-9999px; padding-bottom:9999px,父元素设置overflow:hidden;
效果:http://jsfiddle.net/XianfaLang/Q5nph/
问题:如果页面使用做页面跳转,将会隐藏部分文字信息。如果将背景图片放到mainBox或者sideBox底部,将看不到背景图片。
4.3. 边框模拟:
要点:border-right:280px solid #AAAAAA; 绝对定位
效果:http://jsfiddle.net/XianfaLang/tLmTc/
4.4. JS方式:
要点:使用javascript设置两列高度相同。
效果:http://jsfiddle.net/XianfaLang/C9XcZ/
三列或多列布局:
要点:浮动、负边距、mainBox的width为100%。
效果:http://jsfiddle.net/XianfaLang/dsfKU/
要点:浮动、margin百分比、负边距。
效果:http://jsfiddle.net/XianfaLang/nB57t/
原理同两列等高类似,也有4种实现方式。这里只列举两种:
负边距实现:http://jsfiddle.net/XianfaLang/hRq2q/
边框模拟:http://jsfiddle.net/XianfaLang/EBww5/
文本相关
a. 使用text-indent/line-height 将文字“推”到容器之外。
b. visibility: hidden; 设置元素不可见,但占空间位置。
c. display: none; 设置元素不可见,不占空间位置。
图片相关
PNG优点:
PNG缺点:不支持动画效果。
PNG-8比GIF要小一点,GIF可制作动画而PNG-8无法实现动画效果。
PNG-24是色彩最丰富的图片,且支持alpha通道的透明,不像PNG-8和GIF只能支持全透明的图片。
支持alpha通道的透明,可以让图片产生半透明的效果,使页面更漂亮。
采用哪种格式的图片作为背景图的参考点:
background-position注意点:
CSS Sprite常用来合并频繁使用的图形元素。
CSS Sprite注意点:
图文混排:给设置float: left;
三种列表:
- ...
- ...
- 标题
- 内容
行内元素不具备宽高属性,只有将其转化为块级元素后才具备宽高属性。
CSS样式中能将块元素以横向排列方式排列的只有定位( position)和浮动( float)两种方式。
CSS实现表现效果,javascript实现行为效果。
CSS样式需要大家 不断去摸索,不断尝试新的内容才会使每个人自身对CSS样式的理解及处理问题的能力得到提升。
列表示例:
要点:整体宽度、一级列表宽高和浮动、二级列表绝对定位。
效果:http://jsfiddle.net/XianfaLang/4CPdG/
要点:整体宽度、浮动。
效果:http://jsfiddle.net/XianfaLang/KM7Ua/
理解、分析、总结是必须要进行的几个步骤:
在IE浏览器中,按钮与文字之间的垂直对齐关系 如同 复选框与文字之间的对齐关系,需要利用 vertical-align对其进行调整。
表格相关
border-collapse:检索或设置表格的行和单元格的边是否合并到一起。默认值:separate。合并:collapse。
可使用相邻选择符实现隔行换色。个人觉得此知识点,主要是了解相邻选择符的应用,实际应用性不大。
日历表的制作: http://jsfiddle.net/XianfaLang/Z4wVQ/2/
将table标签用于显示数据结构,而不是用于页面布局。
float是将页面中的元素在水平方向上 并排显示的,而 position却是将页面的元素以 叠加的方式显示的。
使用CSS滤镜之前,需要思考的几个问题:
使用iframe实现的“选项卡”逐渐演变为将页面内容集于一体,通过JS切换显示内容。
实现tab选项卡要把握html结构与css样式之间的微妙关系。
负边距与层叠效果的应用:怪异的导航菜单。
IE浏览器会在每个列表li之间产生几个像素的空间,可用float:left;使多余的几个像素“消失”。
分析实例最好的方法就是 将其简单化,从根本上去了解问题、分析问题。
清除浮动作用:
清除浮动的常用方法:
1. clear属性--常用clear: both;
2. 添加额外标签:
3. 使用 br标签和其自身的 html属性:
4. 父元素设置: overflow: hidden; *zoom:1; (在IE6中还需要触发 hasLayout ,例如 zoom:1)
5. 父元素设置: display: table;
6. 父元素设置 :after 伪类 (推荐):
1 |
|
结构分析是页面制作的第一步。
用户习惯于滚动条上下移动,而不是左右移动。
如果图片很大,可将其切成两张图片。
使用语义的XHTML标签优点:
分享自己的作品,对批评你作品的人表示感谢,因为他在告诉你如何才能做的更好。
怎么提高自身编写代码的能力:

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Cache kemas kini laman web akaun rasmi, perkara ini mudah dan mudah, dan ia cukup rumit untuk minum periuknya. Anda bekerja keras untuk mengemas kini artikel akaun rasmi, tetapi pengguna masih membuka versi lama. Dalam artikel ini, mari kita lihat kelainan dan bertukar di belakang ini dan bagaimana menyelesaikan masalah ini dengan anggun. Selepas membacanya, anda boleh dengan mudah menangani pelbagai masalah caching, yang membolehkan pengguna anda sentiasa mengalami kandungan segar. Mari kita bincangkan asas -asas terlebih dahulu. Untuk meletakkannya secara terang -terangan, untuk meningkatkan kelajuan akses, penyemak imbas atau pelayan menyimpan beberapa sumber statik (seperti gambar, CSS, JS) atau kandungan halaman. Kali seterusnya anda mengaksesnya, anda boleh mengambilnya secara langsung dari cache tanpa perlu memuat turunnya lagi, dan ia secara semula jadi cepat. Tetapi perkara ini juga pedang bermata dua. Versi baru dalam talian,

Artikel ini membincangkan menggunakan atribut pengesahan bentuk HTML5 seperti had, corak, min, max, dan panjang untuk mengesahkan input pengguna secara langsung dalam penyemak imbas.

Artikel membincangkan amalan terbaik untuk memastikan keserasian silang pelayar HTML5, memberi tumpuan kepada pengesanan ciri, peningkatan progresif, dan kaedah ujian.

Artikel ini menunjukkan penambahan sempadan PNG yang cekap ke halaman web menggunakan CSS. Ia berpendapat bahawa CSS menawarkan prestasi unggul berbanding dengan JavaScript atau perpustakaan, memperincikan cara menyesuaikan lebar sempadan, gaya, dan warna untuk kesan halus atau menonjol

Artikel ini membincangkan html & lt; datalist & gt; elemen, yang meningkatkan bentuk dengan menyediakan cadangan autokomplete, meningkatkan pengalaman pengguna dan mengurangkan kesilapan. Kira -kira: 159

Artikel ini membincangkan html & lt; kemajuan & gt; elemen, tujuan, gaya, dan perbezaan dari & lt; meter & gt; elemen. Tumpuan utama adalah menggunakan & lt; kemajuan & gt; untuk menyelesaikan tugas dan & lt; meter & gt; untuk stati

Artikel ini menerangkan html5 & lt; time & gt; elemen untuk perwakilan tarikh/masa semantik. Ia menekankan pentingnya atribut DateTime untuk pembacaan mesin (format ISO 8601) bersama teks yang boleh dibaca manusia, meningkatkan aksesibilit

Artikel ini membincangkan html & lt; meter & gt; elemen, digunakan untuk memaparkan nilai skalar atau pecahan dalam julat, dan aplikasi umum dalam pembangunan web. Ia membezakan & lt; meter & gt; dari & lt; kemajuan & gt; dan Ex
