【css一些事儿】的更多相关文章

CSS知识回顾--读《CSS 那些事儿》笔记

由于之前有了解过CSS的相关知识,有了一定的基础,所以读起<CSS 那些事儿>不是很有难度,况且我现在读起来时,CSS3和HTML5比较流行,这里只是记录一些CSS知识记录,不做详细铺开,以做记录和日后翻查之用. 1.CSS的基本结构 Selector {property:value;} 由 选择符(Selector ),声明({}),属性(property),属性值(value)组成: 2.CSS的简写 颜色的简写: 有以下几种形式: #RRGGBB(16进制),RGB(125,0,255)…

CSS那些事儿-阅读随笔1（CSS简介与选择符）

最近开始详细钻研CSS有关的知识,参考资料是<CSS那些事儿>.将把在此过程中的收获进行记录,方便以后的学习. 一.CSS简介 1.什么是CSS CSS全称为Cascading Style Sheet(层叠样式表),是一种不需要编译的标记性语言,用于增强控制网页样式并允许将样式信息与网页内容分离.可以使用如何一种文本编辑器对其进行编辑. 2.CSS的作用 a.修饰页面文本.图片等元素,避免使用不必要的HTML元素. b.更有效地控制页面结构.页面布局(DIV+CSS). c.提高开发和维护效率…

CSS那些事儿-阅读随笔3（清除浮动）

浮动主要是由浮动(float)属性导致的页面错位现象,清除浮动不仅能解决页面错位的现象,还可以解决子元素浮动导致父元素背景无法自适应子元素高度的问题.在CSS样式中,主要利用clear属性中的both.left和right 3个属性值清除由浮动产生的左.右浮动效果. 一.浮动现象例子 下面举一个很简单的浮动的例子,假设一个float_box(背景色为#aff)中包含两个div,且一个是左浮动(float:left),另一个是右浮动(float:right).在float_box外再添加一个没有浮…

CSS那些事儿-阅读随笔2（选择符的组合与优先级/权重）

在知道了CSS选择符最基础的知识后,就要综合利用它们了.这里就记录几种常见的用法. 1.针对性的使用类选择符或者ID选择符 类选择符在一个页面中可能会在不同的地方应用,那么就需要有针对性地使用类选择符.如下例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css-test</title> <st…

《CSS那些事儿》读书笔记

注: 此书出版于2009年,所以有些知识...你懂得. 有些我熟悉的知识点,就没有记录下来了,所以想了解更多的细节,还是去看下此书吧. 暗灰色标记部分,是我自己的理解,有不对或要补充的地方,还请大家多多指教. 代码演示我统一放到了jsfiddle上,国内访问速度稍慢些,大家耐心点.或是大家知道国内有类似的在线调试网站,麻烦和我分享下,在此先谢了. 该笔记中只给出了部分代码演示链接,如果想看该书的完整示例代码,可到百度云:http://pan.baidu.com/s/1o64sPR0 下载,我已经…

三列布局，读《css那些事儿》

1.两列定宽,中间自适应 要点:浮动.负边距效果.mainbox增加内容div并设置margin.:after清除浮动 原理:mainbox的浮动并将其宽度设置为100%,次要内容及侧边栏设置固定宽度并浮动,mainbox中的.contentd的默认宽度设置为值(auto),margin左右所留的空白等于两列的宽度,并利用负边距原理将次要内容和侧边栏“引”到主要内容的两边. <!DOCTYPE html> <html lang="en"> <head>…

两列布局，读《css那些事儿》

两列布局: 1.两列定宽: 要点:float.width固定. :after清除浮动. 前提:两列的盒模型宽度相加不能大于父元素的宽度,否则会出现错位现象. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <!-- 要点:float.width固定. :after清除浮动. 前提:…

css那些事儿4 背景图像

background:背景颜色,图像,平铺方式,大小,位置 能够显示背景区域即为盒子模型的填充和内容部分,其中背景图像将会覆盖背景颜色.常见的水平或垂直渐变颜色背景通常使用水平或垂直渐变的背景图像在水平或垂直方向平铺,在相邻元素在设置背景进行过度 大分小:在css中的图像,如果一张图像太大会造成网络请求下载时间增加,这时候需要考虑将图像进行拆分,即大分小 小拼大:有一些小图标形式的图像被零碎的使用到页面中,这些小图像很小,单个网络请求很快,但是数量达到一定的时候会增加网络请求次数,不利于页面响应…

css那些事儿3 列表与浮动

一  列表 列表默认为行内块元素,具有宽高,当一个非块元素是无法应用宽高的,比如a 1 有序列表 有ol li组成,其中li为列表项,列表的ol子元素务必为li元素标签,li子内容支持列表任意嵌套,有序列表常常会显示1,2,3按照升序或者降序方式的序号,该序号通过list-style-type指定 2 无需列表 与有序列表差异在于有无顺序上,至于显示样式上则通过css进行相应设置 3 自定义列表 dl,dt,dd,dt常常代表一个列表项的标题,而dd代表该标题对应的详情的意思 4 列表常用语下拉…

css那些事儿2 经典两列布局

<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="css/main.css"> </head> <body> <div id="header">头部</div> <div…