`
cumtheima
  • 浏览: 255975 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

css样式归纳(二)——之总结

阅读更多

 

 

1、选择器声明
选择器集体声明用逗号隔开(例如:h1,h2,p,#one{});全局声明用*;选择器嵌套用空格隔开(例如:p b{}意思是p下的b样式,.mycss li{}意思是class值是mycss下的li,#idcss li{}意思是id的值是idcss里面的li)注意:p.mycss和p mycss的区别,一个是p中class值为mycss,最后的是p包含的元素中class的值为mycss

 

2、CSS继承
CSS一直贯穿整个CSS设计的始终,每个标记都遵守继承

3、段落水平对齐使用text-align(有左对齐,右对齐,两端对齐,居中对齐),垂直对齐使用vertical-align(注意不能对块级元素起作用);行间距使用line-height,letter-spacing是字间距,图片对齐使用其父元素的对齐方式

4、边框重叠使用border-collapse:collapse;去掉a标签链接的文字下划线使用text-decoration:none;a:link是正常状态a的样式,a:visited是访问过,a:hover是鼠标经过,a:active是单击时(平时不用这个状态)  注释:如果设置了a标签中有display:block那么这样鼠标进入该块的任何区域都可以点击连接

5、项目列表使用ol或者ul,其中list-style-type(可以取值disc实心圆、circle空心圆、square正方形、decimal数字、upper-alpha大写字母、lower-alpha小写字母、upper-roman罗马数字、lower-roman小写罗马数字、none不显示任何符号),可使用list-style-image来设置图片符号(浏览器兼容性有问题,建议使用list-style-type设置为none然后增加li的背景图设置padding-left的值来调整图片和文字的间隔),如果需要li水平显示需要li设置float:left即可。

6、定位
div和span的区别在于div是块级标记可以包含span但是span不可以包含div,span是行内元素
float定位:可以向左靠紧float:left、float:right向右靠紧、float:none默认不浮动,注意子块设置成左浮动那么距离左边的距离就是父块的padding-left+自己的margin-left
position定位:如果需要设置absolute需要设定一个参照物就是把那个块的div设置成relative
z-index:空间定位,z-index值大的在小的上面

7、CSS控制盒子模型
所有的div都可以看成盒子,其中内容(content)、边框(border)、间隙(padding,内容与边框的距离)、间隔(margin块和块的距离)

注意:设置的width和height的大小都指的是width+padding的值,IE不支持border-style,而且设置背景ie影响的是内容和间隙,而有的还带上了边框。注意margin如果设置行内元素就是相加,如果块级元素就是最大值,还有就是子块的margin将以父块的内容做参考就是实际大小就成了父块的padding加上子块的margin。

8、设计和编辑div+CSS心得
根据设计的ps图,先把页面划分成几个板块(越少越好),然后几个板块的关系以及margin和padding和边框都设计好(做到心中有图,胸有成竹),继续写成对的div进行命名和声明和注释(解决div不成对和注释少的问题),确定每个块的名字和样式(精确到大小和颜色),最后写代码调试(每个浏览器的方法不一样编写的css可能有不同的样式,需要进行深入研究)

9、 浏览器兼容问题

  对于IE6来说,不使用盒模型Hack。如果只针对流行浏览器的话,只需要很少的Hack就能实现同样的效果。

  我注意了一下网易新版主页的CSS,其中竟然 一个!important或者Hack都没有,可是在FF和IE里面显示效果都很好。合理的使用CSS可以避免Hack。当然,调试的时间会多一些。

  包含浮动 元素所有在容器 内的内容都应该被设计 为和容器保持一致。如果过大的话就会滑动到错误位置。使用负值margin调整到容器外同样会导致滑动。

  理解 Overflow如果页面中有两个浮动元素,在左容器内输出过多内容的话就会导致右侧容器跑到下面。这也就是说你的margin、宽度或者padding 设置混乱了,不过在FF里面体现不出来。使用overflow:hidden或者overflow:scroll可以避免IE允许内容冲出容器。

2
0
分享到:
评论

相关推荐

    CSS设计彻底研究PPT课件

    9. 对不同布局形式进行归纳总结,提供全面的案例分析。 10. 以CSS禅意花园的作品为参考,指导读者制作自己的作品,实战中掌握整体页面布局技巧。 课件还推荐了一些学习资源,如即将出版的《CSS设计彻底研究》和...

    HTML-CSS学习总结

    本次总结主要围绕CSS样式定义中的一个细节——分号的使用来进行探讨。 #### 分号的使用规则 在CSS中,分号起到了重要的作用,它作为声明之间的分隔符,确保了各条样式声明的清晰与独立。根据题目描述,我们可以将...

    《网页设计与制作(HTML+CSS)(第2版)》全册教案教学设计.doc

    * 使学生熟悉网页制作的入门技术,能够归纳总结这些技术的特点。 * 使学生了解网页的展示平台——浏览器,能够说出各主流浏览器的特点。 * 使学生掌握 Dreamweaver 工具的使用,能够运用 Dreamweaver 工具搭建一个...

    CSS设计彻底研究(PPT课件)

    3. 深入解析CSS的核心机制——盒子模型,这是理解CSS布局的关键。 4. 讲解CSS布局的两大重点:浮动和定位,这两点是创建复杂网页布局的基础。 5. 介绍文字和图像的排版技巧,提升页面美观度。 6. 讨论链接和导航的...

    2021-2022计算机二级等级考试试题及答案No.12367.docx

    根据提供的文件信息,我们可以归纳出一系列重要的IT知识点,主要涉及计算机二级等级考试的相关内容,包括编程语言基础、数据库原理、Web开发技术等。下面将详细解释这些知识点。 ### 1. 引用调用概念 - **知识点...

    SeaJS入门教程系列之完整示例(三)

    一个完整的例子上文说了那么多,知识点比较分散,所以最后我打算用一个完整的SeaJS例子把这些知识点串起来,方便朋友们归纳回顾。...6.style.css——CSS样式表,作为style模块由init载入。7.sea.js和jquery.

    2021-2022计算机二级等级考试试题及答案No.3593.docx

    ### CSS样式规则 - **知识点:** CSS(层叠样式表)用于定义HTML元素的外观和布局。正确的CSS规则定义格式是 `selector {property: value;}`。因此,正确答案是 C —— body {color: black;}。 ### 关系模型中的...

    ASP毕业设计——ASP汽车销售系统BtoC电子商务网站(源代码+论文+开题报告+外文翻译+文献综述+答辩PPT).zip

    ASP可以结合HTML、CSS和JavaScript来实现页面布局、样式控制以及前端交互效果。考虑到汽车销售的特点,界面可能包括汽车分类、搜索功能、详细车型介绍、评价系统等。 5. 安全性与性能优化: 对于电子商务网站,...

    jquery基础教程高清版PDF.part5.rar

     5.6 DOM操作方法的简单归纳   5.7 小结  第6章 AJAX——让网站与时俱进   6.1 基于请求加载数据   6.1.1 追加HTML   6.1.2 操作JavaScript对象   6.1.3 加载XML 文档   6.2 选择数据格式  ...

    2. 三年后,人工智能将彻底改变前端开发1

    但也有反对声音,指出尽管此工具能处理布局和样式,前端开发的核心——JavaScript编程——仍然是不可或缺的。 在实现自动化前端开发的过程中,面临的主要挑战是计算能力的限制。然而,随着深度学习算法的发展和训练...

    李炎恢jQuery EasyUI讲义代码

    接下来,我们将围绕这份讲义的核心内容——jQuery EasyUI,进行深入的解析和知识点的归纳。 ### jQuery EasyUI简介 jQuery EasyUI 是一个基于 jQuery 的简单用户界面插件集合。它提供了一系列丰富的 UI 组件,如...

    2021-2022计算机二级等级考试试题及答案No.12319.docx

    根据提供的文档内容,我们可以归纳出一系列与计算机二级等级考试相关的知识点。这些知识点涵盖了程序设计、数据库管理、软件工程原理以及操作系统的基本概念等多个方面。下面是基于文档内容的具体知识点解析: ### ...

    手机wrap网站仿禾文阿思触屏版html5手机wap购物网站模板(超炫)

    根据提供的文件信息,我们可以归纳出以下相关知识点: ### 一、HTML5技术在移动设备上的应用 1. **HTML5简介**:HTML5是万维网的核心语言——超文本标记语言(HTML)的一个版本,它引入了许多新特性,旨在简化网页...

    手机wrap网站仿北京东方博大妇科移动版手机wap医院网站模板

    - **CSS3**:负责页面样式的设计,包括布局、颜色等。 - **JavaScript**:实现网页的动态效果和交互逻辑。 #### 后端支持 - **服务器配置**:选择合适的服务器以支撑网站运行。 - **数据库管理**:用于存储用户数据...

Global site tag (gtag.js) - Google Analytics