精彩绝伦的CSS-读书笔记

Chapter 3:提示

  主要内容:属性值排序的重要性,正确使用无单位的值,隐藏元素的几种方式,控制边框样式的方法,列表技巧。

3.2:调整字体值的顺序。

font:<font-size><font-family>;必须按这样的顺序书写,如果颠倒,或者漏掉,浏览器会完全忽略这条声明。其他的关键字,必须放到这两个必备值得前面,顺序可以改变。

### 3.3 玩转行高
font:120%/2 Helvetica,sans-serif;
### 3.4无单位的行高值
- line-height:1em;那么子元素的行高是继承的父元素字体大小的行高值。
- line-height:1;子元素的行高是根据自己的字体大小值计算的

### 3.5 让元素消失
- display:none 
- js:添加可以隐藏元素的类,想显示的时候,取消就可以了
- visibility:hidden.
- 移出屏幕外 涉及到定位问题了

font:120%/2 Helvetica,sans-serif;

时间: 2024-10-11 19:17:02

精彩绝伦的CSS-读书笔记的相关文章

CSS——读书笔记

<精通CSS 高级web标准解决方案(第2版)> 目录: 基础知识(设计代码的结构) 为样式找到应用目标(选择器及样式表维护) 可视化格式模型(盒子模型及定位) 背景图像效果(背景.边框及图像) 对链接应用样式(链接) 对列表应用样式和创建导航条(列表样式及导航菜单) 对表单和数据表格应用样式(表单和数据表格) 布局(实现浮动等各种布局) bug和修复bug(bug定位及解决方法) 实例研究——Roma Italia 实例研究——Climb the Mountains 第一章:基础知识 1.设

精通css读书笔记

1.伪类的顺序:link->visited->hover(focus)->active. 2.选择器的特殊性:a.行内样式; b.id选择器; c.类.伪类.属性选择器(例:class属性); d.类型选择器和伪元素选择器的数量(例:p标签).abcd越大,优先级越高. 3.相对定位占据原来的空间,绝对定位与固定定位不占据原来的空间. 4.清除浮动的方式: a.<div class="class"></div> .clear{clear:bot

【精通css读书笔记】 第八章 布局

学习了css布局的基础后又来翻阅<精通css>这本经典书籍,对布局有了进一步的认识. 基于浮动的布局 两列的布局仍然是使用一个元素向左浮动,一个元素向右浮动,值得注意的是要加入display:inline 用来防止IE中的双外边距浮动产生的bug. 三列布局与昨天的使用了不同的方法,全部依靠浮动来实现,与两列布局一样先实现主内容与次内容的左右浮动,然后对主内容中的主div与次div在分别浮动. 不要忘记因为元素的浮动需要对父元素清理浮动的处理 overflow:hidden 但是三列布局的时候

CSS读书笔记(1)

(1)CSS选择器优先权选择. 优先权从大到小的选择如下: 标有!important关键字声明的属性 HTML中的CSS样式属性 <div style="color:red"></div> 作者编写的CSS文件 <link href='xx.css'> 用户浏览网页在浏览器中设置的样式 浏览器默认的样式 对于ID选择器.类选择器等,其优先级从大到小分别是: 直接在标签中写入样式<div style="color:red"&g

CSS——读书笔记-07-表单&amp;数据表格-1

第七章 对表单和数据表格应用样式-1 1.对数据表格应用样式 1>表格特有的元素 >>summary & caption caption: 表格的标题 summary: 表格标签,用来描述表格的内容 <table class="cal" summary="A calendar style date picker"> <caption> <a href="cal.php?month=dec08"

CSS读书笔记:布局

一.outline与border的异同 相同点:都显示边框. 不同点:1.outline不参与布局:border参与布局 2.outline必然是环绕着元素,元素要么有轮廓,要么没有,不可单独设置四边中的某一侧的样式:border则可设置四边中的某一侧样式 备注:outline可用于检测页面元素占用的空间位置 下面举例说明一下不同点,有如下html: <body> <div> 1 The Broncos, who landed in San Jose at 4:45 p.m. PT

CSS——读书笔记-04

第四章 背景图像效果 1.基础 默认情况下,浏览器水平和垂直地重复显示背景图像,让图像平铺在整个页面上. body { background-image:url(/img/pattern.fig); } 可以选择水平.垂直.不平铺:repeat-x.repeat-y.no-repeat body { background-image: url(/img/pattern.gif); background-repeat: repeat-x; } 可以设置背图位置 如: 元素左边,垂直居中.(也可以使

《CSS那些事儿》读书笔记

书虽然是5年前出的,但是里面的内容在现在依然适用,有大量的实例,很值得晚辈们去学习. 其中的作者重在思维拓展,循循善诱. 另外截取:2个非常有用的实例 1.两列布局中:单列定宽单列自适应 2.三列布局中:两列定宽中间自适应 <CSS那些事儿>读书笔记,布布扣,bubuko.com

《CSS mastery》 读书笔记

又翻了一下之前的读书笔记,再重温了忘掉的细节.最近一年的工作,由于有重构岗位的同学负责CSS的编写,虽说还是接触到,但毕竟不写好久了,有些东西还是忘记了,例如选择器的权重计算细节.这个笔记只是部分,后半部分快速浏览了,没写笔记. 1.元素命名规则 类名或者ID以元素是做什么的来命名,不要以元素的外观表现来命名. 类名或者ID全部小写,并用连字符号或许下划线分隔.(.add-class)2.伪类 链接伪类: :link和:visited 动态为例: :hover :active :focus 设置

《精通CSS》读书笔记(一)

最近新添16本书,目前开始看陈剑瓯翻译的<精通CSS——高级Web标准解决方案>(Andy Budd, CSS Mastery -- Advanced Web Standards Solutions). 以下是读书笔记. 首先,挺遗憾的是,除了封面上译者名字外,就完全看不到跟译者有关的东西,没有译者简介,没有译者序,没有后记……一点也没有(难道是我没找到?) 第1章 关于“有意义的标签”,这是css编程的前提.第4页上只是罗列了一些html标签,但是并没有详述他们的意义和用法.当然这是一本cs