css学习笔记（一）

zhang_liang_ran

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

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript+html+div+css

CSS 浏览器 HTML

很久之前就开始接触css，但一直专注于业务层，渐渐的忽略了展示层的重要。直到最近接触政府的项目，才越发的感觉到界面美观的必要。因此现在开始系统的学习界面性的知识，并将学习笔记记录于此，一方面，为以后遗忘时有根可寻；另一方面，将自己的学习心得和过程写出来，和大家一起分享，与大家共同进步，如有错误或不周之处，还请各位仁兄海涵指正。进入正题...
CSS--层叠样式表
分为内联样式表、嵌入样式表、外部样式表、输入样式表
1.内联样式表
例：
<html>
    <head></head>
<body>
    <p style="color:blue;background:green;...">
内联方式：段落的样式设置
    </p>
</body>
</html>
2.嵌入样式表
例：
<html>
<head>
    <style media="screen,projection">
此处media属性用来设置此类样式只在页面输出到指定的媒介时，才起

作用。如例中表示，只有当前页面输出到屏幕、投影仪（打印机）时，才起作

用。
        
此处的注释符不能去掉，其作用是防止老式的浏览器不识别style标示

符，导致将style标签之间的内容原样显示在页面中。
        当加上注释符后，浏览器在解析到style标签时，假如不能识别，那么

会将style标签中的内容当做html代码进行解析，从而识别到注释符，避免将内

容原样输出到页面。假如能够识别，则浏览器会忽略掉style标签中的html标示

符，将style标签中的内容当做style类型的代码来解析。
    </style>
</head>
<body>
     <p>
        嵌入方式：段落的样式设置
     </p>

</body>
</html>
3.外部样式表
文件1：test.css
文件2：a.html
在test.css中
p{color:blue;background:green;...}
在a.html中
<html>
    <head>
        <link rel="Stylesheet" href="test.css" type="text/css"

media="screen,projection">
此处rel、href属性必选，type属性可选，但如果选择，值必须为

text/css，media属性可选，含义与嵌入样式表中media一样。
    </head>
<body>
    <p>
外部方式：段落的样式设置
    </p>
</body>
</html>

4.输入样式表
类似于java中，在一个类中引用另一个类。
文件1：test1.css
文件2:test2.css
文件3：a.html

第一种情况：
在test1.css中
p{color:blue;background:green;...}
@import url(test2.css);
在test2.css中
p{font-size:20px;font-family:宋体;...}
在a.html中
<html>
    <head>
        <link rel="Stylesheet" href="test1.css" type="text/css"

media="screen,projection">
此处rel、href属性必选，type属性可选，但如果选择，值必须为

text/css，media属性可选，含义与嵌入样式表中media一样。
    </head>
<body>
    <p>
输入方式：段落的样式设置
    </p>
</body>
</html>
第二种情况：
在test1.css中

p{color:blue;background:green;...}

在test2.css中

p{font-size:20px;font-family:宋体;...}

在a.html中
<html>
    <head>
        <style>

</style>
    </head>
<body>
    <p>
输入方式：段落的样式设置
    </p>
</body>
</html>

分享到：

css学习笔记（二） | java学习笔记1--string老问题

2009-11-07 01:53
浏览 1021
评论(0)
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论