CSS使用学习总结
尽量少使用类,因为可以层叠识别,如: .News h3而不必在h3上加类
<div class=”News”>
<h3></h3>
<h2></h2>
<p></p>
</div>
3. 没有现有元素区分的情况下再用div
<div id=”mainNav”>
<ul>
<li>Home</li>
<li>About Us</li>
</ul>
</div>
可以改为
<ul id=”mainNav”>
<li>Home</li>
<li>About Us</li>
</ul>
4.选择器
p a h1 类型选择器
Li a {text-decoration:none} 后代选择器
*{ padding:0;} 通用选择器，页面所有元素。
5. 定位
相对定位是相对他本来应该出现的位置
绝对定位是相对与最近的已定位的祖先元素（实验发现，祖先元素需要设置相对定位）
浮动的框可以左右移动，直到它的边缘碰到包含框或另一个包含框的边缘，因为浮动框不在文档的普通流中，所以文档的普通流中的方块表现得就像浮动框不存在一样。
总结：如果让一个div是浮动的，下一个div会当第一个不存在。知道碰到浮动的或包含框。
Clear: right 浮动框的右边可用
Clear: left 浮动框的左边可用
Clear: both 浮动框两边都不可用
应用值为hidden或auto的overflow属性会自动地清理包含的任何浮动元素。
6. 渐变背景
创建一个很高但是很窄的渐变图像，水平平铺
Body
{
Background: #ccc url (gradient.gif) repeat-x;
}
但是很难预料图像页面又多高，所以可以结合背景颜色，当图像结束时，颜色就出来了，如果两者色差很近，就看不出转换了。
例：在每个标题上添加一个图标
H1
{
Padding-left:30px;
Background: url(/images/bullet.gif) no-repeat left center;
}
7. 突出显示不同类型的链接
如：链接到外部站点，邮件，下载等
.external
{
Background: url (/images/externalLink.gif) no-repeat right top;
Padding-right:10px;
}
8. 表格特有的元素
1） Summary 和Caption
Summary属性可以应用于表格的标签，描述表格的内容
Caption 表格的标题
2）thead tbody tfoot
I.e 可以将所有列标题放到thead元素中，如果选择使用thead或tfoot元素，那么必须至少使用一个tbody元素，一个表格只能使用一个thead和tfoot，但可以使用多个tbody.
9.表格的边框模型
1）单独模型：各个单元格周围都有边框
2) 叠加模型： 单元格共享边框
10. 表单布局
Fieldset 关闭边框，低版本不支持，但可以使用
Filedset
{
Border: solid 0 transparent;
}
11. 表单标签label
隐式方式： <label>email <input name=”email” type=”text”/></label>
显示方式：
<label for=”email”>email</label>
<input name=”email” id=”email” type=”text”/>
是否在表单中使用段落是有争议的。
12. 让设计剧中
方法一:
<body>
<div id=”wrapper”></div>
<body>
#wrapper
{
Width:720px;
Margin:0 auto;
}
但是这种方式IE6及一下不正常
方法二(需要根据两个个元素联合)：使用自动空白
Body
{
Text-align:center;
Min-width: 760;
}
#wrapper
{
Width:720px;
Margin: 0 auto;
Text-align: left;
}
方法三： 使用定位和负值空白变
#wrapper
{
Width:720px;
Position: relative;
Left: 50%;
Margin-left: -360;
}
13: 流体布局： 尺寸全部用百分数而不是像素设置
优点： 随着浏览器大小宽度变化。
缺点： 变小时，行变窄。
解决： 设置以像素和em为单位的min-width
14: 弹性布局： 字号变化时，行变化(单位以em)
弹性布局相对于字号来设置元素的宽度。
1em=10px;
大多浏览器默认字号是16px,10相当于16像素的62.5%.
Body
{
Font-size:62.5%;
}
#wrapper
{
Width:72em;
Margin:0 auto;
Text-align: left;
}
#mainNav
{
Width:18em;
Float:right;
}
15. 弹性流体布局：以em设置宽度，用百分数设置最大宽度。
#wrapper
{
Width:72em;
Max-width: 100%;
Margin:0 auto;
Text-align: left;
}
16: 流体和弹性图像
图像变形问题： 尽量放在背景里
17． 星号HTML招数
* html a:hover
{
Body-style: solid
}
只有IE6或之下有用
18： !import和下划线招数
#nav
{
Position: fixed !important;
Position : static;
}
或者
#nav
{
Position: fixed;
_Position : static;
}
19, 几栏时
<div id=”main”>
<div id=”Nav”></div>
<div id=”Content”></div>
</div>
Nav需要区分颜色且显示高100%,可以做一图片，宽度等于Nav, main上设背景图像，在垂直方向平铺。
CSS使用学习总结的更多相关文章
- CSS入门级学习
css入门学习1:认识CSS 1.1:css简介,css全称是层叠样式表,Cascading style sheets 1.2:css的作用,主要是用于定义html内容在浏览器内的显示样式,如文字大小 ...
- css居中学习笔记
css居中学习笔记 一.水平居中 以下面的代码为例: <body> <div class="parent"> <div class="chi ...
- HTML&CSS基础学习笔记—创建列表
创建一张表格 很多时候我们需要在网页上展示一些数据,使用表格可以很好的来展示数据. 在HTML中<table>标签定义 表格. <table> </table> 添 ...
- CSS 3 学习笔记
css 3 学习笔记 文本: word-wrap : normal | break-word取值:normal: 控制连续文本换行.break-word: 内容将在边界内换行.如果需要,词 ...
- （2）《Head First HTML与CSS》学习笔记---img与基于标准的HTML5
1.浏览器处理图像的过程: 1.服务器获取文件,显示出文本结构,以及预留默认的大小给<img>(如果该<img>有width-1值和height-1值,则根据这个值提前设好页面 ...
- （6）《Head First HTML与CSS》学习笔记---结尾、《HTML5权威指南》读书笔记
1.内联元素的外边距.内边距与块元素稍有不同. 如果一个内联元素四周都增加外边距,只能看到左边和右边会增加空间:你也可以对内联元素的上下增加内边距,不过这个内边距不会影响包围它的其他内联元素的间距—— ...
- 前端学习：CSS的学习总结(图解）
前端学习:CSS的学习总结(图解) CSS代码笔记 CSS简介 css的引入方式和书写规范 CSS选择器 CSS属性 CSS盒子模型 CSS的定位
- 11种常用css样式学习大结局滚动条与显示隐藏
滚动条展示 overflow-x: hidden;/*是否对内容的左/右边缘进行裁剪*/overflow-y: hidden;/*是否对内容的上/下边缘进行裁剪*/overflow:scroll;/* ...
- 关于Html+css阶段学习总结
一.学习经历 进入大学不久,就加入了社团,从而对前端有了一个初步的了解,之后也做过一些学校的官网,积累了一些微小的经验. 到了大二的时候,学校开设了专门的html+css课程,从中也学到许多新的htm ...
- CSS项目学习总结
1.我过去在HTML和CSS阶段是如何学习的? 我一开始学HTML和CSS,更多的是通过看视频.书籍,一个知识点一个知识点地去学习,很少把他们串联起来,看代码多于敲代码. 然而,通过现在这几个项目的实 ...
随机推荐
- modelsim常见错误
1. Error: (vlog-7) Failed to open design unit file "D:/Xilinx/verilog/src/glbl.v" in read ...
- [na][QoS]cisco3560限速配置案例-收集于网工泡泡
网络中常用到这些:CISCO和H3C-MAC过滤+端口限速+端口镜像+端口隔离 不同的方式不同的思想:嘎嘎 其他各个厂商的限速链接:http://pan.baidu.com/s/1hrIMoSG 密码 ...
- 【Android】3.25 示例25--调启百度地图
分类:C#.Android.VS2015.百度地图应用: 创建日期:2016-02-04 一.简介 调启百度地图是指:利用SDK接口,可直接在本地打开百度地图客户端或WebApp实现地图功能. 目前支 ...
- WPF中DependencyObject与DependencyProperty的源代码简单剖析
Windbg调试WPF的依赖属性中提到了wpf的DependencyObject中DependencyProperty是怎样调试查看的. 从中我们看出DO(DependencyObject)与 DP( ...
- Linux下NDK的配置
vim ~/.bashrc 在文件末尾添加如图两行代码 写下来方便复制export NDKROOT=/usr/ndk/android-ndk-r12bexport PATH=$NDKROOT:$PAT ...
- json格式详解
一.Json的简单介绍 从结构上看,所有的数据最终都可以分成三种类型: 第一种类型是scalar(标准变量),也就是一个单独的string(字符串)或数字(numbers),比如“北京”这个单独的 ...
- SQL中AND与OR的优先级
突然发现,把基础给忘了,AND的优先级大于OR,试验如下: Oracle --Y ; --Y ) ; --No value ); 附,Oracle文档: http://docs.oracle.com/ ...
- shell echo -n md5sum使用方法
#!/bin/bash MYSQL='mysql -u*** -p*** -hws5 account' tmp="tmp" resultsource="resultsou ...
- 在eclipse中执行sql
只要你配置好了你的database(在Data Source Explorer中,可以通过window->show view打开) 写好你的sql script,然后配置好profile 右键, ...
- 【Qt Tips】QLineEdit内容过滤之setValidator和setInputMask浅析
1.QValidator分析 2.InputMask格式 3.测试代码和用例 项目路径: GitHub: https://github.com/Qunero/NeoQtTestDemo/tree/ma ...