`
- 浏览:
259614 次
- 性别:
- 来自:
未定
-
1.一个标准的HTML文件框架:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test</title>
<link rel='stylesheet' type='text/css' href='media/css/blueprint/screen.css'/>
<script type="text/javascript" src="media/js/basic.js"></script>
<script type="text/javascript">
//内嵌式javascript,一般用于测试
</script>
<style type="text/css">
//内嵌式CSS定义, 一般用于测试
</style>
</head>
<body>
</body>
</html>
2.CSS样式的两个元素:
(1).选择器:确定页面哪些元素需要样式设置.
(2).声明块:实际的格式化命令
标准的一个CSS样式: selector{ declaration block }
3.CSS选择器
(1).标签选择器,如： p, h1, span ...
(2).类选择器(以'.'号打头), 如: .last, .top ...
(3).ID选择器(以'#'号打头), 如: #last, #footer
(4).派生选择器: h1 strong{color:red;}, li a{} p.intro a{color:red;}
(5).群选择器(用','分隔各个选择器): h1, p, .copy, #banner{color:red;}
(6).a的两个主要伪类: a:visited, a:hover
4.样式的层叠
如果多个样式应用到同一个页面元素, 定义重叠了,也就是冲突了, 需要决定哪个定义是有效的: 行内样式 > ID选择器 > 类选择器 > 标签选择器
5.Margin, Padding and Border
1).理解盒模型: 浏览器把所有的html标签元素都当成一个小盒子
2).盒模型图片:
3).边距碰撞:
当元素的下边距碰到了另一个元素的上边距时, 浏览器并不是把两个边距相加,而是应用两个边距中较大的那个.
4).负边距去除空格:
css的度量值一般为正值, 但是负边距可能会让你产生许多想象力.
负边距不会在元素之间增加空间, 而是移除空间
5).行内元素和块级元素
行内元素: 如: span, a, img, strong ...
块级元素, 如: p, table, form, h1, div ...
行内元素的top/bottom margin 无法增加值, img除外, 但是padding经测试是可以增加的.
在行内元素和块级元素之间转换:
display: inline; / display:block;
display: none; //隐藏元素
6).计算一个方框的实际宽度和高度
浏览器显示的宽度 ＝ 宽度属性(width) + 左右填充 + 左右边框 + 左右边距
高度类似
7).用Overflow属性控制溢出文本,
如果标签里的内容比样式定义的宽度和高度更大时, IE6会使方框扩大到适合的高度,
但是IE7和其他浏览器则让内容溢出方框,可以使用overflow来控制
visible是默认做法
scroll添加滚动条,但是滚动条一直会出现
auto只在需要时添加滚动条
hidden隐藏任何超出方框的内容
6.表格的边框
给table应用border属性,只是给表格而不是任何其他单元格画上轮廓.
给单元格td应用border, 在单元格之间会留下一条可视的间隙,这需要做一些工作
<table cellspacing="10px">表示在单元格之间插入10px空间
cellspacing=0时就完全去除这个空间,这时应该使用
table { border-collapse: collapse}
7.关于布局
CSS布局有两种风格－－绝对定位和浮动
浮动布局主要是使用float属性
克服浮动问题:
1).清除浮动: clear:both;
2).如果一个浮动元素比容器本身更高的话,就会溢出它的包含<div>
解决方法:
a.在包含div的底部添加一个清除元素
在关闭</div>前面<br class="clear" />
br.clear{clear:both}
b.只浮动也包含浮动元素的<div> //不理解
3).处理IE6 bug
a.双边距: 有时会把已经应用到浮动元素上的一个边距尺寸翻倍. 只有当边距与浮动在同一个方向时才会出现这个问题--向左浮动的元素上的一个左边或者向右浮动的元素上的一个右边距. 而且边距翻倍只有当元素的边距碰到它包含块的边沿时才会发生.
解决方法是给浮动元素添加display:inline;(浮动元素始终是块级元素)
b.3px的间隙: IE6在一个浮动的列和一个非浮动的列之间插入一个额外的3px的空间.
如果非浮动的列没有固定宽度或高度, 给这个列加上
* html #mainColumn {height:1px;}
如果非浮动的列有一个固定的宽度或高度
首先消除非浮动的列的左边距
* html #mainColumn {margin-left:0;}
然后設定浮动列的右边距为－3px
* html #sidebar {margin-right: -3px;}
分享到：
相关推荐
CSS笔记 CSS（Cascading Style Sheets），即层叠样式表，是一种用于描述网页样式的语言。CSS的出现拯救了混乱的HTML，让HTML专注于结构呈现，而样式交给CSS处理。 一、CSS简介 1.1 CSS的发展历程 从HTML被发明...
CSS 笔记 CSS（Cascading Style Sheets）是一种用来表现 HTML 或 XML 等文件样式的计算机语言。它可以静态地美化网页，也可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行...
HTML与CSS笔记 HTML（HyperText Markup Language，超文本标记语言）是构成网页内容的骨架，用于创建网页的结构，并通过不同的标签来描述网页的各个部分。CSS（Cascading Style Sheets，层叠样式表）则负责网页的...
这份"史上最经典的HTML+CSS笔记"无疑是学习这两门技术的重要参考资料。以下将根据标题、描述以及可能包含的子文件内容，对HTML和CSS的基础知识进行详细阐述。 HTML是网页内容的结构语言，用于定义网页的各个元素...
css笔记整理（精简） 初识CSS CSS语法 CSS样式引入 css选择器 CSS中的块级元素与行内元素 background 背景(集合样式) font 文字(集合样式) border 边框(复合样式，集合样式) CSS 框模型概述
**CSS笔记一** 在网页设计领域，CSS（Cascading Style Sheets）是不可或缺的一部分，它负责定义HTML或XML（包括SVG、MathML等各种XML方言）文档的呈现方式。本笔记将深入探讨CSS的基础知识，包括选择器、盒模型、...
总结，"黑马前端css笔记.zip"包含了CSS3的重要知识点，如选择器扩展、媒体查询、响应式设计、渐变效果、布局技术（Flexbox和Grid）以及动画过渡等。这些内容对于前端开发人员深入理解和运用CSS3至关重要，能帮助他们...
- **网站**：《Webstandards Solutions》、《网站重构》、《CSS禅意花园》、《点石成金》，都是优秀的在线资源，涵盖了从标准规范到设计美学的广泛内容。 - **名人与网站**：了解万维网的创始人Tim Berners-Lee，...
### HTML CSS 笔记知识点详解 #### 页面自动刷新 页面自动刷新是指网页可以在设定的时间间隔后自动重新加载，实现页面内容的更新。这种技术在早期的网页开发中较为常见，通常用于实现简单的内容轮播或者定时获取...
在网页设计中，`div+css`是一种常见的布局技术，用于实现网页的结构化和美化。`div`是HTML中的一个通用容器元素，用于组织和包裹其他HTML元素，而`css`则是层叠样式表，用来定义网页的样式、布局和视觉效果。`div+...
**CSS（层叠样式表）全面手册** 在网页设计领域，CSS（Cascading Style Sheets）是不可或缺的一部分，它用于定义HTML或XML（包括SVG、XHTML等）文档的呈现方式。通过使用CSS，我们可以控制网页元素的颜色、字体、...
- 外部 CSS：通过 `<link>` 标签引用一个外部的 CSS 文件，如 `<link href="my.css" type="text/css" rel="stylesheet"/>`，这种方式有利于样式复用和代码组织。 - 内部 CSS：将 CSS 代码写在 HTML 的 `<style>` ...
### CSS 笔记：滤镜、阴影与圆角 #### 一、CSS滤镜(Filter) 在Web开发过程中，为了使页面更加美观或者实现特定的视觉效果，开发者常常需要使用到CSS滤镜。CSS滤镜是一种可以对元素进行颜色或图像处理的效果工具。...
html和css基础总结，适合入门web和初学者
这份"naofantian HTML_CSS笔记"提供了作者naofantian在进行毕业设计时积累的知识点和经验分享。 首先，HTML（HyperText Markup Language）是用于创建网页内容的标记语言。它通过各种标签来定义网页的结构，如`...
这本“css笔记”是对CSS技术的深入理解和实践的总结，旨在帮助开发者巩固基础知识，提升技能水平。 **基本概念** 1. **选择器**：CSS通过选择器来定位HTML元素，如标签选择器（`p`）、类选择器（`.myClass`）、ID...
CSS笔记主要涵盖了如何定义和应用CSS样式，以及常见的样式属性。 **一、CSS引入方式** 1. 内联样式：在HTML元素的`style`属性中直接写CSS样式，例如`;">文本</p>`。 2. 内部样式表：将CSS写在HTML文档的`<head>`...
这个名为“CSS_Demo”的压缩包文件是与一篇名为《CSS笔记》的文章配套的代码示例，文章作者通过CSDN平台分享了关于CSS的学习心得和实践案例。这篇文章的链接是：...