博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS3概述
阅读量:6235 次
发布时间:2019-06-22

本文共 1453 字,大约阅读时间需要 4 分钟。

hot3.png

一个美观、大方、简约的页面和高访问量的网站,是网页设计者的追求。然而,仅通过HTML5实现是非常困难的,HTML仅定义了网页结构,对于文本样式没有过多涉及。这就需要一种技术对页面布局、字体、颜色、背景和其他图文效果的实现提供更加精确的控制,这种技术就是CSS3。

1、编辑和浏览CSS

css基本语法:

每一条样式规则由三部分构成:选择符(selector)、属性(properties)和属性值(value),基本格式如下:

selector{property:value}

下面给出一条样式规则,如:

p{color:red;font-size:40px}

2、编写CSS

选中标签内的文字,右击并在弹出的快捷菜单中选择【CSS样式】<【新建】命令,然后根据提示操作。

3、在HTML5中使用CSS3的方法

CSS样式表能很好的控制页面显示,以达到分离网页内容和样式代码。CSS样式表控制HTML5页面达到好的样式效果,其方式通常包括行内样式、内嵌样式、链接样式和导入样式。

行内样式:

即直接在HTML标记中使用style属性,该属性的内容就是CSS的属性和值。例如:

<p style="color:red;font-size:20px">此段落使用行内样式修饰</p>

总结:如果需要每一个标记都设置style属性,后期维护成本高,网页容易过胖,故不推荐使用。

内嵌样式:

即将CSS样式代码添加到<head></head>之前,并且用<style></style>标记进行声明。

其格式如下:

<head>

<style type="text/css">

p{

color:orange;

text-align:center;

          }

</style>

</head>

总结:如果一个网站,拥有很多页面,对于不同页面的<p>标记都希望采用同样的风格时,内嵌演示就显得有点麻烦。此方式只适用于特殊页面设置单独的样式风格。

链接样式:

链接样式是CSS中使用频率最高也是最实用的方法。它很好地将“页面内容”和“样式风格代码”分离成两个或多个文件。

链接样式是指在外部定义CSS样式表并形成以.css为拓展名的文件,然后在页面中通过<link>链接标记链接到页面中,而且该链接语句必须放在页面的<head>标记区,如下:

<link rel="stylesheet" type="text/css" herf="1.css">

总结:链接样式最大优势就是将CSS代码和HTML代码完全分离,并且同一个CSS文件能够被不同的HTML所链接使用。

导入样式:

导入样式和链接样式基本相同,都是创建一个单独CSS文件,然后再引入到HTML文件中。只不过语法和运作方式有差别。

导入样式是指在内部样式表<style>标记中,使用@improt导入一个外部样式表,例如:

<head>

<style type="text/css">

"1.css"

</style>

</head>

总结:导入方式与链接方式相比较,最大的优点就是可以一次导入多个CSS文件,其格式如下:

<style>

@inport "3.6.css"

@inport "test.css"

</style>

4、优先级问题

如果同一个页面,同时采用了上面四种方式,就会出现优先级问题,他们的优先级如下:

行内样式>内嵌样式>链接样式>导入样式

转载于:https://my.oschina.net/pangzhuzhu/blog/312960

你可能感兴趣的文章
weed-fs使用简介
查看>>
spring理解
查看>>
【文智背后的奥秘】系列篇——关键词智能提取
查看>>
image Modify for kvm , openstack
查看>>
【iOS-cocos2d-X 游戏开发之七】整合Cocos2dX的Android项目到Xcode项目中,Android导入打包运行即可!...
查看>>
要毕业了,为什么这么久我的工作还没有找到?
查看>>
压力测试
查看>>
矩阵对角线计算
查看>>
搜索命令find
查看>>
2015.09.29信息系统项目管理师作业
查看>>
我的友情链接
查看>>
局域网内制作yum源
查看>>
C#中一些易混淆概念总结(二)--------构造函数,this关键字,部分类,枚举
查看>>
IOS UIWebView使用开发
查看>>
redis 常用命令
查看>>
微软将Office语音办公啦
查看>>
设计模式(一)
查看>>
3分钟理解响应式布局
查看>>
LeCun再度回应卸任:我没有被取代,Jérôme 的朋友爆料趣事
查看>>
【零基础】PostgreSQL从入门到精通
查看>>