超越css读书笔记 - 相关文章

【超越css读书笔记】的更多相关文章

超越css读书笔记

一.运用所有有效的css选择符 1.属性选择符(基于一个元素是否有属性名称,例如href,或者属性值) 例如:img[alt]{border:1px;} 所有包含alt属性的图像都将会有一个灰色的边框 p[class="rant"]{text-transform:uppercase;} 基于属性的内容来格式化一个元素 2.子对象选择符以给所有元素的直属子对象为目标. 由两个或者更多的以>连接符为分隔的选择符组成. 3.相邻选择符 + 它匹配与第一个元素相邻的下一个元素.同时元素…

css读书笔记4：字体和文本

字体属性网页中的字体有3个来源:1.用户机器中安装的字体:2.保存在第三方网站上的字体.可以使用link标签把它们链接到页面中:3.保存在子集的web服务器上的字体.可以使用@font-face规则随网页一起发送给浏览器. 与字体样式相关的6个属性:font-family(字体家族.一般对body元素使用,让整个网页使用同样的字体.一般需要多列出几种后备字体,以防前面的字体无效.)font-size(字体大小.)font-style(字体样式.设定字体是斜体还是整正体.)font-weight(…

css读书笔记3：定位元素

定位元素要掌握css技术,核心就是要掌握元素定位. 一般把下面这条规则作为所有css样式表的第一条,初始化所有元素的内边距和外边距都为0: * {padding:0;margin:0;} 盒模型浏览器为页面中的每个元素生成一个矩形盒子.作为该元素的容器.默认情况下,每个盒子的边框不可见,背景也是透明的,所以我们不能直接看到这些盒子. 元素盒子的3个属性:边框(border),可以设置边框的宽窄.样式和颜色:内边距(padding),盒子内容区与边框的间距:外边距(margin),盒子与相邻元素的…

css读书笔记2：css工作原理

css就是一种先选择html元素,然后设定选中元素css属性的机制.css选择符合要应用的样式构成一条css规则. 为文档添加样式的3种方法: 1.行内样式,直接写在特定标签的style属性中:2.嵌入样式,在head元素中嵌入<style type="text/css"></style>,将css规则放入<style>和</style>中:3.链接样式,在<head>元素中使用外部的样式表,如:<link href=&…

css读书笔记1：HTML标记和文档结构

块级元素和行内元素:块级元素:上下堆叠,每个块级元素都独立占一行.块级元素的盒子宽度与父元素同宽.行内元素:左右堆叠,只有在空间不足的情况下才会折到下一行显示.行内元素的盒子会收缩包裹其内容,并尽可能包紧. 文档对象模型(DOM):把HTML文档中的每个元素当成一个节点,根据元素和元素之间的关系形成一棵树.文档对象模型在CSS中的应用:通过子元素.父元素.同胞元素.祖先元素.后代元素来更方便地定位我们要操作的元素.…

CSS读书笔记（3）---清除浮动的几种方法

浮动元素容易造成页面错位现象.下面说说关于清除浮动的几种方法. 首先.先创建一个浮动导致错位的页面. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS---浮动</title> <style> .float-left{ float: left; width: 200px; height:…

CSS读书笔记（2）---简易相册和日历表的制作

一.HTML和CSS制作的简易相册相册在默认情况下是缩略图显示,而且是截取相片的某一部分显示的.当鼠标停留在某张缩略图上,相册列表中的缩略图变为大图,展示在相册的左边区域, 同时缩略图部分变成空的效果图如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS相册</title> <styl…

CSS读书笔记（1）---选择器和两列布局

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

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

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

head First HTML与CSS读书笔记

调整图片大小有滚动条的图片可给不了好的用户体验,为了让图片的大小更适合浏览器窗口.这时候就需要对图片的大小进行调整看书之前.我调整图片大小的方式是在<img>元素使用 width 和 height 属性.书中不建议这样做. 因为这样做仍然会下载完整的大图像,然后让浏览器来完成调整图片大小的工作,而且有些浏览器还不支持这个功能(比如低版本IE)→_→而且增加网页质量.最优的解决方法使用图片处理软件,比如photoshop来调整图片大小,并保存JPEG格式.为什么用JPEG格式?因为JPEG格…