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

鳄鱼君

发表文章数:643

热门标签

, ,

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » 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>

未经允许不得转载:作者:鳄鱼君, 转载或复制请以 超链接形式 并注明出处 鳄鱼君
原文地址:《CSS网页样式入门及简介 CSS的优势》 发布于2020-03-23

分享到:
赞(2) 赏杯咖啡

评论 抢沙发

1 + 6 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册