CSS基础

标签: css 基础 | 发表时间:2014-02-24 06:05 | 作者:qbg19881206
出处:http://blog.csdn.net

1、引入CSS的四种方式

行内样式、内嵌样式、链接样式、导入样式。

2、CSS选择器

基本选择器:标签选择器,ID选择器,类选择器,通用选择器。

通用选择器:*{css代码}。

通用选择器作用:对整个网页中所有HTML标签进行样式定义。
常见用法:定义*{margin:0;padding:0}通用样式,并置于CSS文件最顶端,用于对HTML内所有的标签进行重置以保证页面能兼容多种浏览器。
原因:每种浏览器都自带CSS文件,如果一个页面在浏览器加载后,发现没有CSS文件,浏览器就会自动将自身带的CSS样式应用到该页面元素上,而不同的浏览器自带CSS样式不一样,如果想让页面在不同浏览器显示效果相同则需要对HTML标签进行重置。由于HTML标签有近百个,使用上面的通用样式则会在页面加载CSS的时候,先对所有的标签都应用{margin:0;padding:0;},影响页面显示效率。

建议只对所用到的标签进行重置,比如下面定义的样式:

body,div,p,a,ul,li{margin:0;padding:0;}
3、盒子模型

四要素:content内容,border边框,padding内边距,margin外边距。

4、块状元素和内联元素

块状元素:一般是其他元素癿容器,可容纳内联元素和其他块状元素。块状元素排斥其他元素,不与其他元素共处一行,宽度(width)和高度(height)起作用。常见坑状元素为div 和 p。

内联元素:内联元素能容纳文本或者其他内联元素,它允讲其他内联元素和其共处一行,但宽度(width)和高度(height)不起作用,可以通过display:block将内联元素转换为块状元素。常见内联元素为“a”。

css块状和内联

5、浮动

浮动:float:left 或 float:right,用于消除块状元素不让其他元素与其共处一行的特性,常用于网站布局。对于浮动的解释存在浏览器差异,如果浮动后出现区域重叠的情况可以将float:left 或 float:right加到所有的块状元素内。IE6浏览器在下面3个条件同时满足的情况会出现双边距Bug,分别是为块状元素,且左侧浮动,还要有左外边距(margin-left),此时IE6显示的是margin-left值的两倍。一般现在浏览器都升级了,所以影响不大,需要修复的话可以在样式中加入display:inline解决。

清除浮动:clear:both,clear:left 或 clear:right,用于清除其他块状元素的float影响。对于其他块状元素的float,如果不清除的话,后续块状元素也会出现浮动。

css浮动

6、定位

定位:position,网页内每个元素都有默认的position,且属性值均为static。
绝对定位:position:absolute,默认参照浏览器的左上角,配合TOP,RIGHT,BOTTOM,LEFT(简称TRBL)进行定位。
相对定位:position:relative,默认参考父级的原始点作为原始点,配合TRBL进行定位。当父级内有padding等css属性时,当前级的原始点则参照父级内容区的原始点进行定位。此处父级为:原有盒子外面再套一层宽度和高度大于原有盒子尺寸的盒子。
总结:如果用定位来布局页面,父级元素的 position 属性必须为 relative,而定位于父级内部某个位置的元素,最好用 absolute,因为它不受父级元素的 padding 的属性影响,当然你也可以用 relative,计算的时候不要忘记计算 padding 的值。
7、CSS Hack

CSS Hack:解决页面不能很好兼容多种浏览器的技巧方法。

常用的hack如下:

!important:用来解决一些在 IE6 上显示的效果与IE7/IE8/IE9/FireFox 上的效果不一样的情况。

#content{
height:960px !important;
height:900px;
}
说明:IE7/IE8/IE9/FireFox可以识别上面附加的“!important”语句。由于“!important”语句拥有绝对优先级,所以对于这些浏览器来说,看到该语句后就不会执行第二句。 IE6 无法识别附加的“!important”语句,所以IE6会跳过该语句,直接去执行第二句“height:900px“。
*(星号):用来解决一些在IE6/IE7上显示的效果与IE8/IE9/FireFox上的不一样的情况。

#content{
height:960px;
*height:900px;
}
说明:IE8/IE9/FireFox不能识别附加有*的 CSS 属性语句,所以这些浏览器只会读取第一句而忽略第二句。IE6/IE7 可以识别附加有*的 CSS 属性语句,也就是说第一句和第二句都认识,所以它们先读第一句,将高度定为 960px,而后又读第二句“*height:900px;”,将高度从 960px 修改为 900px,即 IE 中最终显示的高度为900px。

其他hack语句可以从网上收集。

8、CSS Sprites

CSS Sprites:CSS精灵,是一种图片整合技术,将所有用到的图片放到一张大的图片中,然后通过移动像素等操作显示需要的图片。

9、首行缩进

用text-indent:2em实现文字缩进2个,em是相对单位,此属性只能加在块状元素上,内联元素不起作用。

10、简易导航条

效果: 导航条

代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>CSS学习-导航条制作</title>
		<style type="text/css">
			body,div,ul,li{
				margin: 0px;
				padding: 0px;
			}
			#nav{
				width: 960px;
				height:35px;
				margin:0 auto;
				margin-top:30px;
				background-color: #CCC;
			}
			#nav ul{
				width:960px;
				height:35px;
				list-style: none;
			}
			#nav ul li{
				float:left;
				line-height:35px;
				text-align:center;
			}
			#nav ul li a{
				height:35px;
				display:block;
				font-size: 12px;
				color:#333;
				text-decoration: none;
				float:left;
				padding:0 10px;
			}
			#nav ul li a:hover{
				color:#fff;
				text-decoration: underline;
				background-color: #000;
			}
		</style>
	</head>
	<body>
		<div id="nav">
			<ul>
				<li><a href="#">公司首页</a></li>
				<li><a href="#">公司介绍</a></li>
				<li><a href="#">诚聘英才</a></li>
				<li><a href="#">联系我们</a></li>
				<li><a href="#">疑难解析</a></li>
			</ul>
		</div>
	</body>
</html>

作者:qbg19881206 发表于2014-2-23 22:05:45 原文链接
阅读:72 评论:0 查看评论

相关 [css 基础] 推荐:

CSS基础

- - CSDN博客Web前端推荐文章
1、引入CSS的四种方式. 行内样式、内嵌样式、链接样式、导入样式. 基本选择器:标签选择器,ID选择器,类选择器,通用选择器. 通用选择器:*{css代码}. 通用选择器作用:对整个网页中所有HTML标签进行样式定义. 常见用法:定义*{margin:0;padding:0}通用样式,并置于CSS文件最顶端,用于对HTML内所有的标签进行重置以保证页面能兼容多种浏览器.

css基础入门

- - CSDN博客推荐文章
css是Cascading Style Sheets的缩写,是一种用于为Html文档定义布局的样式表语言. Css是一种样式表语言,用于为html定义布局. Css弥补了Html对标记属性控制的不足. Css将网页内容与样式实现分离,使得网页设计更加明了、简洁. Css可以精确控制网页布局,如行间距、字间距、段落缩进和图片定位等.

CSS基础学习

- - CSDN博客推荐文章
1.    CSS基础介绍:. (1)      CSS的作用:兼容、实现了将页面内容与页面表现相分离. (2)      当文档中的某一元素被多处样式定义时,究竟会使用那个样式呢.                 内联样式--->内部样式表--->外部样式表--->浏览器缺省设置. 2.    CSS基础语法与高级语法:.

[来自异次元] 学习网站开发必备推荐!30天学会HTML和CSS基础入门视频教程 (免费精品课程)

- youyizi - 异次元软件世界
很多人都对制作网站很有兴趣,我们之前就有介绍过一些傻瓜式的建站工具如 Tap.cn,也有介绍过一些诸如 WordPress 的视频教程. 不过前者对于想学习的人来说作用不大,后者入门门槛又稍高. 于是今天给大家介绍一套HTML+CSS的入门视频教程. 一直以来很多朋友来信询问我如何学习网站开发,我的建议总是必须先学扎实的 HTML+CSS基础,毕竟它们是构成网页的根本.

CSS图形

- GLORY - 酷壳 - CoolShell.cn
下面的示例展示了使用纯CSS制作的各种图形,你可以自由地修改文中的CSS代码. 经测试,IE9, Chrome, FF, Safari都可以正常显示. 五角星形 via Kit MacAllister. 心形 via Nicolas Gallagher. 无穷大 via Nicolas Gallagher.

用 Compass 寫 CSS

- Jay - Blog.XDite.net
最近在開發一個新產品,整體來說應該是接近寫完了,不過越接近完工,抓 IE 系列的 bug 就越是挫折. 朋友 @evenwu 就來洗我要不要換成 Compass,說這東西超神奇,超好用,還可以把 IE bug 殺光光. 其實之前就久仰 Compass 大名了,只是文件實在看起來太他媽的眼花繚亂,因為專案進度一直在跑,不太敢貿然換掉寫 CSS 的方式.

CSS 入门

- - 博客 - 伯乐在线
级联样式表非常简单,也就是 (X)HTML 网页之上的分层设计. 使样式表 “级联”,这样您就可以跨站点应用它 — 也就是说,将样式应用到网站,它就会自行应用到每个网页的每个元素. ●XHTML:可扩展 HTML. 对于网站,将数据与设计分离是一个重要的概念:数据使用 (X)HTML 发送到 浏览器,而设计使用 CSS 应用到该数据.

css 圆角

- - CSDN博客推荐文章
作者:kangquan2008 发表于2012-2-20 22:32:24 原文链接. 阅读:6 评论:0 查看评论.

CSS架构

- - 博客 - 伯乐在线
英文原文: CSS Architecture,编译: CSDN-张红月. Philip Walton 在AppFolio担任前端工程师,他在Santa Barbara on Rails的聚会上提出了CSS架构和一些最佳实践,并且在工作中一直沿用. 擅长CSS的Web开发人员不仅可以从视觉上复制实物原型,还可以用代码进行完美的呈现.

CSS总结

- - CSDN博客Web前端推荐文章
         接触过一段CSS,为简单理解,将CSS说成两步,一步是你做个“记号”,另一步是根据记号设置样式.      网页的内容和样式是分开的. “记号”便是能标识网页中某部分内容的关键字词(选择器),而根据记号设置样式呢,就是按图索骥根据记号设置标识的那部分内容的样式.     这段时间练习的每个CSS小例子,或是用id做记号,或是用name,或是用class,只有有了这些所谓的记号,CSS设定的样式才有用,.