web学习—css样式表—css初识

最新推荐文章于 2024-11-26 10:44:34 发布

原创最新推荐文章于 2024-11-26 10:44:34 发布 · 695 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

学习。时间de印记专栏收录该内容

26 篇文章

订阅专栏

对于css我也是第一次接触。前边也学习了html在网页中的应用，但是，只用html标签，要做一个很漂亮的网页真的是很难的。并且就是你写好了也是在很多方面存在问题。但是到底什么是css呢？我也是对此很迷茫，原本刚刚接触网页时，更本就没有把它列为重点。后来随着慢慢的了解，才明白css也是十分重要的一块内容。下面，就来学习它吧：

1、概念：

CSS（Cascading Style Sheets）：即层叠样式表单，它是一种用来表现HTML或 XML 等文件式样的计算机语言。

2、优点：

1）、应用css，将有更多的排版和页面布局控制。包括字体大小类型，行间距，字间距，缩进，元素定位等。

2）、网页中内容的样式与结构分离。结构由html标签控制，样式则由css来控制了。

3）、样式可以保存。因为css样式可以存放在一个单独的文件中，所以，可以单独保存。

4）、文档可能会变得更小。因为格式从内容中分离了出来，所以相应文档也就减小了。

5）、更加方便网站的维护。这样修改网站样式时，只需修改css文档就可以实现了。

3、类型：

1）、内联样式：作为一个html标签的属性，将代码直接写入网页中。例如：<p style="color: sienna;margin-left: 20px;">

2）、内嵌样式：把样式表放到页面的<head>区里。例如：

            <head>
                <style type="text/css">
                     p{display: inline}
                     div {display: none}
                </style>
            </head>

3）、外部样式：把样式表保存为一个样式表文件，然后在页面中用<link>标记链接到这个样式表文件，这个<link>标记必须放

到页面的<head>区内。例如：

            <head>
                 ……
                 <link href="mystyle.css" rel="stylesheet" type="text/css" media="all">
                 ……
            </head>

4）、导入样式：内嵌样式表的<style>里导入一个外部样式表，导入时用@import。如下：

            <head>
               ……
               <style type=”text/css”>
                    @import “mystyle.css”
               </style>
               ……
            </head>

css样式表的基本内容就了解这些吧，毕竟我们是为了用它，而不是研究它。下面就开始学习它的语法吧。还有对于做界面，也并不是我想学的主要目的。所以对于css，仅是尽力而为的学些吧。

还有，向大家推荐一个CSS 样式在线编辑器：http://tool.chinaz.com/Tools/CssDesigner.aspx