CSS

羽风之扬

浏览: 86073 次
性别:
来自: 北京

最近访客更多访客>>

liuqimeng1

寻找任大侠

王龙旻

cjh19850924

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

CSS 浏览器 Excel HTML

目标
    掌握 CSS 选择器
掌握使用 CSS 选择器修饰页面细节
了解 CSS 层(盒状模型)的概念
了解 CSS 3新特性

1、掌握 CSS 选择器
在一个网页中有很多的HTML标签，如果想对某个标签的内容
进行样式修饰，必须先从众多标签中找到它。
    CSS 语法，为我们提供了非常方便的语法来选中具体的某个
标签----CSS 选择器
    基本选择器(3种)：
标签(元素Element)选择器：一般给多个相同的标签设置样式
   <p>aaa</p>

   p{
      /* 里面的样式代码对 aaa 生效 */
   }
   ------------------
    类别(伪类)选择器：同时选中多个标签，这些标签可以人为
对他们进行分类。
      <p class="ff">aaaaaa</p>
<div class="ff">bbbb</div>
<a class="ff">vcvccccc</a>

.ff{
/* 对网页中所有有 class=ff 属性的标签生效 */
}
------------------
ID 选择器：一次只选中唯一具有该 id 名称的标签
<p id="aa">asdfasd</p>
<a id="bb">asdfasdf</a>

#aa{
/* 在整个页面中，只能选中一个 id="aa" 的标签 */
}
------------------

复合选择器(灵活组合三种基本选择器)：
交集选择器:同时满足两个条件的选择器
<p class="aa">dfasdfasd</p>
<div class="aa">asdfasdf</div>

div{}
.aa{}    ====> div .aa{}
               div >.aa{}

并集选择器:同时选中多个，这多个标签都有相同的样式
<p>asdfsdfd</p>
<p class="aa">dfasdfasd</p>
<div class="aa">asdfasdf</div>
<span>cccc</span>
<div>asdfasdf</div>

p,div .aa,span{}

嵌套(后代)选择器:
<p>asdfsdfd</p>
<span>adfasdf</span>
<div>sdfsdf</div>
<div class="aa">asdfasdf
<p class="aa">dfasd
<span>cccc</span>
fasd</p>
<p class="bb">dfasdasd</p>
</div>
/* 先确定最外层的标签，逐步往所要找的标签靠近 */
div .aa p .aa span{}

------------------------------
专门针对链接 <a > 标签制定了一个特殊选择器
a{}   Element 选择器
链接标签，本身自带有一些鼠标事件：鼠标移动、覆盖、
点击、移出、访问后

   a:link{/* 默认情况，没有做任何鼠标动作时的样式 */}

   a:visited{/* 鼠标点击以后的样式 */}

   a:hover{/* 鼠标移动到链接上的样式 */}

   a:active{/* 鼠标单击时的样式 */}

注意：当多个基本选择器同时对某个标签的属性进行修饰时，
ID 选择器优先级最高、类别选择器次之、标签选择器最低

CSS 代码与 HTML 代码分离：
(1)行内引入，不推荐
      <p style="css 代码">ssss</p>
(2)内嵌引入，部分推荐
<head>
<style type="text/css">CSS 代码</style>
</head>
(3)外部导入，所有 css 代码独立在 *.css 文件中,
不推荐
<head>
<style type="text/css">
@import "css/style.css"
</style>
</head>

(4)外部链接,CSS代码全部在 style.css 文件中，推荐使用
<head>
<link href="css/style.css"
      rel='stylesheet'
type='text/css'>
</head>

在编写外部的样式文件时，考虑代码重用，一般都会把
修改不同内容的样式进行分离。
    修饰整个页面边框布局的样式 layout.css
修饰整个页面所有字体的样式 font.css
修改整个页面背景等内容的样式 main.css
修改整个页面中所有图片的样式 img.css
.........
修改页面打印时所需要的样式 print.css

<link rel="shortcut icon" href="http://www.126.com/favicon.ico" />
<link id="setSkin" type="text/css" rel="stylesheet"
      href="http://img2.cache.netease.com/www/v2011/css/theme_blue1227.css" />

在使用各种方式导入样式的时候，离内容最近的样式，优先级最高
行内引入-->内嵌-->外部导入-->外部链接

2、掌握使用 CSS 选择器修饰页面细节
   在设计一个页面之前，需要全局的考虑，如：主体颜色、风格、
布局等内容。

    1 可以先使用 Excel 进行页面布局设计
2 然后使用 HTML 中的 <div>标签来大体标记这些布局
3 最后使用 CSS 样式给每个矩形的布局块进行位置、高宽、颜色等的设置

3、了解 CSS 层(盒状模型)的概念
在 CSS 中，把页面看做由多个矩形块搭建而成。

在 CSS 中一般对 div 层标签，附加了内容、内边距、边框、
外边距四个属性。
    内容：width height
内边距：padding
        padding-top padding-left padding-right padding-button
padding:10px 2px 50px 20xp;
padding:10px 20px 10px 20xp; ==>padding:10px 20px;
padding:10px;
边框：border
         top left right button style(实线、虚线、双线、浮雕线)
外边距：margin

    设置盒状模型四边的顺序：顺时针方式，上右下左。

--------------------------
CSS 的定位：
默认的所有的 div 按照编写的代码顺序有各自的位置，
每个 div ，默认占据一整行。

可以使用属性 position 对一个 div 块进行定位
绝对定位：以浏览器左上角原点为起点定位，当一个元素
使用绝对定位时，原来他在页面中的位置就消失。


相对定位：

浮动定位：

4、了解 CSS 3新特性

CSS 开发工具
Rapid CSS 2008 绿色软件

分享到：

JavaScript | 连接数据库3

2011-04-14 08:38
浏览 956
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

CSS

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

CSS

评论

发表评论

相关推荐

最近访客更多访客>>