CSS网页样式入门及简介 CSS的优势

CSS网页样式入门及简介 CSS的优势

什么是CSS?

CSS由哈坤·利在1994年提出,到1996年正式完成了CSS语言,并且在1998年收录到W3C组织。

CSS(Cascading Style sheet),用于控制网页样式,并允许将样式信息与网页内容分离的一种标记性语言,它可以把网站的样式单独分离出来,单独进行设置。CSS以HTML语言为基础,提供了丰富的格式化功能,比如:字体、颜色、背景、排版等等,这样可以更好的适应页面美工设计。可以理解为CSS就是网页网站美丽的外衣,可以根据需要修改想要的风格。

CSS有哪些优势?

  • 实现了把网页的结构和样式分离,避免使用一些不必要的标签和属性;
  • 结构变得简洁、合理、语义性准确;
  • 更有效的定义对象样式,控制页面版式,抛弃了传统的表格布局陋习。
  • 提高了开发效率和维护效率,后期维护更经济简单。

什么是CSS样式?

我们准备接触的CSS就是下面的样式:

body  { font-size:12px;  color:red;   }
#选择器  { 属性1: 属性值2; 属性2: 属性值2; ....   }

在上面的样式规则中,选择器用于指定CSS样式作用的HTML对象,大括号内是对该对象设置的具体样式。其中,属性和属性值以“键值对”的形式出现,属性是对指定的对象设置的样式属性,如字体大小、文本颜色等,后面我们会学习更多的属性和属性值。属性和属性值之间用英文“:”连接,多个键值对之间用英文“;”进行区分。

1.css样式中的选择器严格区分大小写,属性和属性值不区分大小写,但是按照规范一般“选择器、属性和属性值”采用小写的方式。
2.多个属性之间必须用英文状态下的分号隔开,最后一个属性后的分号可以省略,但是为了方便阅读和添加新样式,最好保留,养成良好的书写习惯!
3.如果属性的值由多个英文单词组成且中间包含空格,则必须为这个属性值加上英文状态下的引号
4.在编写CSS代码时,为了提高代码的可读性,通常会加上CSS注释,这个后面会提到。
5.在CSS代码中空格是不被解析的,花括号以及分号前后的空格可有可无。
在网页中引入css样式分为三种方式: 1.行内式
行内式也称为内联样式,是通过标记的syle属性来设置元素的样式。基本语法格式:< 标记名 style="属性1:属性值1; 属性2:属性值2;" > 内容 </标记名> 2.内嵌式 内嵌式是将CSS代码几种写在HTML文档的<head>头部标记中,并且用<style>标记定义,其基本语法格式为:<head> <style type="text/css"> 选择器 { 属性1:属性值1; 属性2:属性值2; } </style> </head> 3.链入式 链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中,通过<link />标记将外部样式表文件链接到HTML文档中,其基本语法格式为: <head> <link href="CSS文件的路径" type="text/css" rel="stylesheet" /> </head> 对于链入式link标记中三个属性的解释: href:定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。 type:定义所链接文档的类型,在这里需要指定为”text/css”,表示链接的外部文件为CSS样式表。 rel:定义当前文档与被链接文档之间的关系,在这里需要指定为”stylesheet”,表示被链接的文档是一个样式表文件。

我们来简单看一下使用方法,在使用外部样式表的时候需要导入,可以使用下面的方式导入:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>导入css文件方式</title>
    <link rel="stylesheet" type="text/css" href="1.css" />
    <style type="text/css">
        @import  url("1.css")
    </style>
    <style type="text/css">
        p{color:red; }
    </style>
</head>
<body>
    <p>这是一个p标签</p>
</body>
</html>
分享到 :

发表评论

登录... 后才能评论