当前位置:  编程技术>WEB前端

CSS使用学习总结

    来源: 互联网  发布时间:2014-10-04

    本文导语:  尽量少使用类,因为可以层叠识别,如: .News h3而不必在h3上加类 3. 没有现有元素区分的情况下再用div Home About Us 可以改为 Home About Us 4.选择器 p a h1 类型选择器 Li a {text-decoration:none} 后代选择器 *{ padding:0;} 通用选择器,页...

尽量少使用类,因为可以层叠识别,如: .News h3而不必在h3上加类





3. 没有现有元素区分的情况下再用div


  • Home

  • About Us



可以改为

  • Home

  • About Us


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
隐式方式: email
显示方式:
email

是否在表单中使用段落是有争议的。
12. 让设计剧中
方法一:



#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, 几栏时




Nav需要区分颜色且显示高100%,可以做一图片,宽度等于Nav, main上设背景图像,在垂直方向平铺。

    
 
 

您可能感兴趣的文章:

  • css 通配符用法总结
  • jsp页面中插入css样式的三种方法总结
  • 非常漂亮的css星级效果总结第1/2页
  • css font缩写总结附实例
  • CSS优化2-(常用CSS缩写语法总结)
  • 网页编辑中CSS样式表技巧总结
  • CSS样式表规划与管理的经验总结
  • 布局用CSS+DIV的优点总结
  • 常用CSS缩写语法总结
  • 学习WEB标准总结的一些CSS/XHTML知识小结第1/3页
  • 指定网页的doctype解决CSS Hacking方法总结
  • 提高CSS文件可维护性的五种方法总结
  • XHTML下css+div布局总结 超强推荐
  • CSS对Web页面载入效率的影响分析总结
  • 在div中使用css让文字底部对齐的方法
  • css ie6 ie7 ff的CSS hack使用技巧
  • HTML如何使用各种CSS 样式
  • 不要使用CSS Expression的原因分析
  • CSS解析器 CSS Parser iis7站长之家
  • 巧妙地使用CSS选择器
  • CSS属性 - white-space 空白属性使用说明
  • css display:none使用注意事项小结
  • 用css实现图片垂直居中的使用技巧
  • CSS学习笔记Padding 属性中参数的定义与使用
  • 使用CSS不用程序实现文字自动截断 用省略号代替
  • DIV+CSS布局中不推荐使用的标签集合Dont Use These Tags
  • 使用CSS解决文字环绕图片问题的代码
  • CSS整体布局声明的一些使用技巧
  • CSS的color颜色使用说明
  • 使用CSS框架布局的缺点和优点小结
  • 不同版本IE使用不同css(css条件注释语句用法)
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • 学习CSS的10大理由
  • Class与ID区别 margin和padding区别 CSS学习笔记
  • 惊现学习CSS应该注意的方法
  • 学习Xhtml+CSS2的一些心得体会
  • Jquery与CSS模拟超链接的用户单击事件的代码学习
  • 学习样式表CSS参考-常用的CSS知识
  • DIV+CSS网页制作布局技巧学习
  • CSS基础学习
  • java命名空间javax.swing.text.html类css的类成员方法: css定义及介绍
  • <!--@import"css/cssset/.css-->,css/cssset/.css是什么意思?
  • java命名空间javax.swing.text.html类css的类成员方法: getattribute定义及介绍
  • CSS预处理器 Less CSS
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: font定义及介绍
  • css强制换行 css强制不换行的css方法
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: margin定义及介绍
  • CSS代码格式化 CSS Beautify
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: padding定义及介绍
  • jquery css类用法(添加、修改与删除css)
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: border定义及介绍
  • CSS 框架 Simpl.css
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: clear定义及介绍
  • CSS解析器 CSS Parser
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: height定义及介绍
  • CSS压缩器 Css Compressor
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: color定义及介绍
  • Eclipse的CSS编辑插件 CSS Editor
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: display定义及介绍
  • jQuery添加/改变/移除CSS类及判断是否已经存在CSS
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: float定义及介绍
  • CSS代码检查工具 CSS Lint


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3