您的位置：首页 > Web前端 > CSS

CSS ---关于设置样式

2010-08-28 15:51 309 查看

这些天，在研究传说中很容易的 CSS+DIIV.

其实嘛，似乎也就那么回事，对于基础班而言。

看了个把小时的书--《精通CSS+DIV网页样式与布局》。

由于在学校学习的是直接用DW设计模式操作，所以没学过代码式，连HTML都是自己当初上课去图书馆借书看了下的（笔记晚些时候上）。

废话不多言，学习要总结，要笔记，才记得劳，才有思路，感谢CSDN,督促我这个懒鬼，哈哈。BEGIN:!

-------------------------------------------------------- 偶是华丽丽滴一号分割线 ------------------------------------------------------------------------

CSS嘛，在只学了三章的感觉看来，貌似都嵌入于<style>属性中。<style>在哪里，CSS就在哪里。

如下：

<style>

哈哈，我是CSS.

</style>

一. 关于CSS控制页面。

总结下一共主要有四种： 行内样式，内嵌式，连接式，导入样式。

下面就优先级方式整理下。

1.行内样式。

行内样式是最直接的方式，就等于在<body>里的每条应用到的语句都附上<style=" ">。

* 优点： * 缺点：

直接麻烦，稍微变下就要打一堆代码，不乏有重复的

后期维护麻烦，成本高

网页容易过胖

综上所述，我决定不到非不得已打死不用它。

如下：

<html>

<head>

<title> 我是过胖的行内样式 </title>

</head>

<body>

<p style="color:#FF0000;font-size:20px"> 正文内容1</p>

<p style="color:#000000;font-style:italic"> 正文内容2</p>

<p style="color:#FF00FF;font-size:25px;font-weight:bold"> 正文内容3</p>

</body>

</html>

额...真是天杀的麻烦，对吧，哈哈~~~~ 本小姐是人非鹦鹉更非“代码牌”复读机~~~~~

2. 内嵌式

这个简单，就是把CSS写在<head>...</head>之间，<style>属性在<head>中。

即： <head><style>....</style></head> 。

如下：

<html>

<head>

<title> 我是独一无二的内嵌式 </title>

<style type="text/css">

< !--

p{

color :#FF0000;

text-decoration: underline;

font-weight:bold;

font-size: 25px;

}

--->

</style>

</head>

<body>

<p>正文内容1</p>

[b] <p>正文内容2</p>[/b]

[b] [b]<p>正文内容3</p>[/b][/b]

</body>

</html>

* 优点： * 缺点：

方便了后期维护如果网站不止一个网页，都想重复这个<p>的样式

减肥瘦身了维护成本也就不低，因此仅限于对特殊的页面设置

单独的样式风格。

3. 链接式

使用频率最高，也是最为实用的方法。主要是把 CSS和HTML的代码给完全分离了，分离成两个文件。

如下：

<html>
然后创建文件：1.css

<head>

<title> 我是被完全分离了的链接式 </title>

<link href="1.css"type="test/css"rel="stylesheet">

</head>

<body>

<h2>CSS标题1</h2>

<p>正文内容1</p>

<h2>CSS标题2</h2>
</body>

</html>

<p>正文内容2</p>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航