CSS 快速上手（一）

lyqidao · 发表于 2013-2-7 14:55:49

（一）层叠样式优先级：
1. 内联样式（在 HTML 元素内部）
2. 内部样式表（位于 <head> 标签内部）
3. 外部样式表
4. 浏览器缺省设置

（二）CSS基本结构：
选择符{属性：属性值}

（三）引入或编写CSS的几种形式：
1. 把CSS文档放到<head>文档中（内部样式） <style type=“text/css”> …… </style>
2. CSS样式表写在HTML的行内(HTML元素内行内样式) <p style=“font-size：14pt；color：blue”>蓝色14号文字</p>
3. 外部样式引用常用方式<link rel=stylesheet href=“style.css”>
例：Link
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
Import
<head>
<style type="text/css">@import url(style.css);</style>
</head>

（四）CSS属性

1.字体

2.背景

background属性的书写格式：
　　属性：background 属性值：<background-color>||<background-image>|| 　　　　<background-repeat>||<background-attacement>||<background-position>

3. 文本属性

4. 超级连接样式

<style>
　　　
</style>

5.※Marigin边距的使用

　body{margin：1em 2em 3em 4em}
　　//*定义文本的上、右、下、左的边距分别为1、2、3、4em*//

　如果在margin里有缺失的属性，则按照顺序依次排列。比如：
　　body{margin：1em 3em} 上面这段代码的含义是：body的上、右边距为1、3em。

6.※填充距的使用

　padding：1em 2em 3em 4em

7.边框的属性

8. 图文混编

例：
图片左上环绕
<html>
　　　<head>
　　　<style>
　 <title>margin css</title>
　　　
　　　</style>
　　　</head>
　　　<body>
　　　<p class=“p2” style=“line-height：17pt”>
　　　<img src=“logo.gif” alt=“floating” > 　　
　　　　　我公司是一家以软件开发及销售为主业的高新技术企业。位于高科技产业
　　　　密集的清华大学东门，拥有近4000平米的独立办公楼，全体员工年轻勤奋而富
　　　　有创造力，极具挑战性和竞争性。</p>
　　　</body>
　　　</html>

9. 分级

例：
　<html>
　　<head>
　　<title> fenji css </title>
　　<style type=“text/css”>//*定义CSS*//
　　
　　</style>
　　</head>
　　<body>
　　 <p><em>sample</em>text<em>sample</em>text<em>sample</em>
　　 text<em>sample</em> text<em>sample</em></p>//*定义一段文本*//
　　　<ul>//*定义列表项*// <li>list-item 1</li>
　　　<li>list-item 2</li> <li>list-item 3</li> </ul>
　　 <p><img src=“ss01068.jpg” width=“280”height=“185”
　　　　　　　　　　alt=“invisible”></p>//*定义一幅图片*//
　　 </body>
　　 </html>

如果我们在上面的代码中做一些改动，则将以另一种效果显示，我们在<head>中把“EM”的display属性值改为block，使其都在新的位置打开；li的“list-style”属性值改为“Upper-roman”（大写罗马符号），img的“display”属性值改为“none”（让图片不显示）。修改后的显示效果如下图：

10. 鼠标样式

11.定位

		自动登录	找回密码
密码			立即注册

CSS 快速上手（一）

浏览过的版块