【属性选择器】

属性选择器可以根据某个属性是否存在或属性的值来寻找元素。

只有在规定了 !DOCTYPE 时,IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中,不支持属性选择。

事例:将带有 title 属性的所有元素设置样式

[title]{
color:red;
}

【盒模型】

在IE中,width中包括了内边距(padding),而在其他大多数浏览器中,width不包括内边距,所以在设置width时需注意兼容性。

当两个或者更多垂直外边距(margin)相遇时,它们将形成一个外边距,这个外边距的高度等于两个发生叠加的外边距的高度中较大者。

【定位】

CSS中有普通流、浮动和绝对定位三种基本的定位机制。除非专门所指,否则所有框都在普通流中定位。

有相对定位,绝对定位(使元素的位置与文档流无关,因此不占据空间)。

浮动:会让元素脱离文档流。

clear属性:清除浮动。

overflow属性:值为hidden或auto。也会自动的清理包含的任何浮动元素。

【背景图像效果】

不要将像素或百分数等单位与关键字混合使用。

投影方法:box-shadow(垂直和水平偏移,投影的宽度,颜色这四个值)。

【不透明度的设置】

css:opacity(除了对背景生效外,应用它的元素的内容也会继承它)。

RGBa:background-color:ragb();值为0代表完全透明,为1代表100%不透明。

PNG透明度:PNG文件支持alpha透明度。例;

.img-wrapper div{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='图片地址',sizingMethod='crop');
backgrnund:none;
}

【伪类】

伪类对元素进行分类是基于特征而不是它们的名字、属性或者内容;原则上特征是不可以从文档树上推断得到的。

实例:

//锚伪类
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */

在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。a:active 必须被置于 a:hover 之后,才是有效的。

css2::first-child伪类:表示第一个元素;:lang伪类:向带有指定 lang 属性的元素添加样式。

css3允许使用:target伪类,为目标元素设置样式。

【对链接应用样式】

突出显示不同类型的链接:使用属性选择器。

类似按钮的链接:链接应该只用于GET请求,决不要用于POST请求。

翻转:css3包含text-shadow、box-shadow和border-radius等属性。Safari 4 beta专有值-webkit-gradient,Safari还提供了一个box-reflect的专有属性。例:

a{
display: block;
width: 6.6em;
line-height: 1.4;
text-align: center;
text-decoration: none;
border:1px solid #66a300;
color: #fff;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius: 6px;
background-image: -webkit-gradient(linear,left top,left bottom,from(#abe142),to(#67a400));
background-color: #8cca12;
text-shadow: 2px 2px 2px #66a300;
-moz-box-shadow:2px 2px 2px #ccc;
-webkit-box-shadow:2px 2px 2px #ccc;
box-shadow: 2px 2px 2px #ccc;
-webkit-box-reflect:below 2px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(0.52,transparent),to(white));
}

结果如下:

纯css提示工具:用锚进行定位。

【表单及数据表格】

summary属性:应用于表格标签,用来描述表格的内容。

表格标题可以设置值为row或col的scope属性,定义他们是行标签还是列标签。

border-spacing属性可以控制单元隔之间的距离,但是IE7及以下版本不支持,所以可以用cellspacing属性。

【表单元素】

fieldset元素:用来对相关的信息块进行分组。会在周围加上一个细边框,若不要,可以设置border。

legend元素:识别每个fieldset

label标签极其重要,可以帮助添加结构和增加表单的可用性和可访问性。增加了表单对于使用辅助设备的用户的易用性。

表单控件包含name和id属性。在表单输入控件和标签之间创建关联需要id属性,而将表单数据发挥服务器需要name属性。

可以使用for属性将标签和表单控件关联起来。

标签在默认情况下是行内元素,但是,将它们的display属性设置为block会使他们产生自己的块框,迫使输入元素转到下一行。

提交按钮:可以在button标签中放一个图像,让图像成为控件。

《精通CSS》——个人总结的更多相关文章

  1. 你真的精通 CSS 了?来挑战一下 CSS 选择器测验吧

    CSS 选择器赋予 CSS 强大的 HTML 元素匹配功能.作为前端开发人员必须要掌握的一部分,可能基本的大家都知道.但是你真的精通 CSS 了吗?挑战一下 CSS 选择器测验就知道. 您可能感兴趣的 ...

  2. 系列文章--精通CSS.DIV网页样式与布局学习

    精通CSS.DIV网页样式与布局(八)——滤镜的使用 精通CSS.DIV网页样式与布局(七)——制作实用菜单 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素 精通CSS.DIV网页样式与布 ...

  3. 《精通CSS:高级Web标准解决方案》学习笔记(上)

    鉴于国产CSS书籍基本都是辣鸡的现状,我在半年前动用某工作室的购书资金采购了一些技术书籍,这本广受好评的<精通CSS>也在其中.但是在阅读过后我深深的感觉到,如果说CSS本来已经是一种很琐 ...

  4. 精通CSS+DIV网页样式与布局--图片效果

    提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过 ...

  5. 《精通CSS层叠样式表》

    书名 <精通CSS层叠样式表> 图片 时间 2017-7月 学习 感觉和ps一样对我都不友好 3天撸完

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

    最近新添16本书,目前开始看陈剑瓯翻译的<精通CSS——高级Web标准解决方案>(Andy Budd, CSS Mastery -- Advanced Web Standards Solu ...

  7. 精通CSS:高级Web标准解决方式(第2版)

    精通CSS:高级Web标准解决方式(第2版) 跳转至: 导航. 搜索 层叠重要度:(也就是说.用户!important能够覆盖inline style) !important.用户>作者.最后是 ...

  8. 朝花夕拾《精通CSS》三、对一些标签元素的使用

    一.背景 翻出我4年前看的<精通CSS>一书,可惜当初没有整理读书笔记的习惯,最近又很少写前端,遂很多东西.知识点遗忘了,恰且现在 css 也有些变化和进步,遂一起打包整理,输出成几篇 b ...

  9. 朝花夕拾《精通CSS》二、选择器 & 层叠

    一.背景 翻出我4年前看的<精通CSS>一书,可惜当初没有整理读书笔记的习惯,最近又很少写前端,遂很多东西.知识点遗忘了,恰且现在 css 也有些变化和进步,遂一起打包整理,输出成几篇 b ...

  10. 朝花夕拾《精通CSS》一、HTML & CSS 的基础

    一.背景 翻出我4年前看的<精通CSS>一书,可惜当初没有整理读书笔记的习惯,最近又很少写前端,遂很多东西.知识点遗忘了,恰且现在 css 也有些变化和进步,遂一起打包整理,输出成几篇 b ...

随机推荐

  1. Android屏幕相关设置

    锁屏设置: 1. 初始值 : <integer name="def_screen_off_timeout">60000</integer> 2. 数据库/d ...

  2. eclipse 导入 Maven 多模块项目

    右键 --> Import --> Existing Maven Projects --> 项目目录 选中所有子模块 --> Delete(一定不要勾选Delete proje ...

  3. java switch 优化

    关键字 switch 语句用于多条件判断,switch 语句的功能类似于 if-else 语句,两者的性能差不多.但是 switch 语句有性能提升空间.清单 16 所示代码演示了 Switch 与 ...

  4. Normalize.css 样式作用,及使用方法

    Normalize.css 是? Normalize.css 是一个可以定制的CSS文件,它让不同的浏览器在渲染网页元素的时候形式更统一. Normalize.css 能干什么? 保留有用的默认值,不 ...

  5. Angularjs通过$http与服务器通信

    angular是一个前端框架,实现了可交互式的页面,但是对于一个web应用,页面上进行展示的数据从哪里来,肯定需要服务端进行支持,那么angular是如何同服务端进行交互的呢? $http angul ...

  6. hdu1045

    #include<iostream> using namespace std; int count = 0, n = 0; //判断该ch[x][y]是否可以放置 bool isOk(ch ...

  7. python绝技 — 扫描蓝牙RFCOMM信道

    RFCOMM协议 RFCOMM通过蓝牙L2CAP协议模拟了RS232串口.这会与另一台设备建立一个蓝牙连接,模拟一条普通的串行线缆,使用户能够用其他设备控制这一台设备,通过蓝牙打电话,发短信,读取手机 ...

  8. Android studio使用smack连接xmpp服务器收发消息

    我使用的是ejabberd16.09的Linux版本,安装教程网上有很多,我在这里只介绍一下Android端连接.登录和收发消息的方法.文章最后附上了我写的一个demo,欢迎大家参考. ejabber ...

  9. Hololens Rest API

    通过Hololens提供的 Rest API 可以对Hololens进行远程控制和获取信息 ,可以通过第三方程序对Hololens重启或者关机,当然,还有更多更丰富的API,例如可以在PC上分流显示H ...

  10. svn 常用控制台命令解析

    参数说明 :serverPath:表示服务器的文件路径 ,  localPath:表示本地的文件路径  , num 表示数字 , edition1:表示工程已经跟新的版本1 , edition2:表示 ...