引入CSS方式(重点掌握)

  1. 行内样式

  2. 内接样式

  3. 外接样式

    1.  链接式

    2. 导入式

css介绍

现在的互联网前端分三层:

  • HTML:超文本标记语言。从语义的角度描述页面结构
  • CSS:层叠样式表。从审美的角度负责页面样式
  • JS:JavaScript 。从交互的角度描述页面行为

CSS:Cascading Style Sheet,层叠样式表。CSS的作用就是给HTML页面标签添加各种样式,定义网页的显示效果。简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能。

css的最新版本是css3,我们目前学习的是css2.1

接下来我们要讲一下为什么要使用CSS。

HTML的缺陷:

  1. 不能够适应多种设备
  2. 要求浏览器必须智能化足够庞大
  3. 数据和显示没有分开
  4. 功能不够强大

CSS 优点:

  1. 使数据和显示分开
  2. 降低网络流量
  3. 使整个网站视觉效果一致
  4. 使开发效率提高了(耦合性降低,一个人负责写html,一个人负责写css)

比如说,有一个样式需要在一百个页面上显示,如果是html来实现,那要写一百遍,现在有了css,只要写一遍。现在,html只提供数据和一些控件,完全交给css提供各种各样的样式。

行内样式

 <div>
/*在行内改样式*/
<p style= "color: green">我是一个段落</p>
</div>

内接样式

 <style type="text/css">
/*写css代码更改样式*/
span{
color: blue;
}
</style>

外接样式-链接式

<link rel="stylesheet" href="./index.css">

外接样式-导入式

<style type="text/css">
@import url('./index.css');
</style>

01CSS的引入方式的更多相关文章

  1. 01-css的引入方式

    [转]01-css的引入方式 引入css方式(重点掌握) 行内样式 内接样式 外接样式 3.1 链接式 3.1 导入式 css介绍 现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述 ...

  2. day 42 01--CSS的引入方式及CSS选择器

    01--CSS的引入方式及CSS选择器   本节目录 一 CSS介绍 二 行内样式 三 内接样式 四 外接样式 五 CSS的选择器 六 CSS的高级选择器 七 CSS的属性选择器 八 CSS的伪类选择 ...

  3. 01-css的引入方式和常用选择器

    一.css介绍 现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的角度负责页面样式. JS:JavaScript .从交互的角度描述页面行为 ...

  4. 01--CSS的引入方式及CSS选择器

    一 CSS介绍 现在的互联网前端分三层: a.HTML:超文本标记语言.从语义的角度描述页面结构. b.CSS:层叠样式表.从审美的角度负责页面样式. c.JS:JavaScript .从交互的角度描 ...

  5. Electron中Jquery的引入方式

    原文链接http://huisky.com/blog/16122220522957 Electron默认启用了Node.js的require模块,而jQuery等新版本框架为了支持commondJS标 ...

  6. css引入方式

    1.<style>          body{}    </style> 2.写在一个单独的文件里面保存即新建一个文件:xx.css; 注明该文件的位置<link re ...

  7. css js 的引入方式和书写位置

    css 的引入方式 1.行内样式 <div id="div1" style="width:100px; height:100px; background:red&q ...

  8. [javascript svg fill stroke stroke-width circle 属性讲解] svg fill stroke stroke-width circle 属性 绘制圆形及引入方式讲解

    <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...

  9. CSS的4种引入方式及优先级

    第一:css的四种引入方式 1.行内样式 最直接最简单的一种,直接对HTML标签使用style="",例如: <p style="color:#F00; " ...

随机推荐

  1. 【51nod-1605】棋盘问题

    上帝创造了一个n*m棋盘,每一个格子都只有可能是黑色或者白色的. 亚当和夏娃在玩一个游戏,每次寻找边长为x的正方形,其中每个格子必须为黑色,然后将这些格子染白. 如果谁不能操作了,那么那个人就输了. ...

  2. form表单的提交地址一定要是完整的绝对地址

    <form action="<%=path%>/servlet/DologinServlet" =<form action="<%=requ ...

  3. node 一站式 学习 教程

    还是比较全面的, 包括了 : monogoDB的安装 使用 , 各种插件, 中间件的介绍, 路由的介绍, 各种数据库框架的介绍, 测试介绍;  掌握后应该可以开发一个中型的程序, 大型程序因为有性能的 ...

  4. WMS专业名词解释

    1.摘果:按照单一客户上订单的内容进行拣选货品(即去货位上拣货),拣选完成后即可直接进行质检.包装. 2.播种:将多个客户订单上的货品进行汇总,然后对这些货品进行拣选.拣选完成后,再区分出每一个客户的 ...

  5. 当导用模块与包的import与from的问题(模块与包的调用)

    当在views.py里写impor models会不会报错呢? 1.Python里面的py文件都是每一行的代码. 2.Python解释器去找一个模块的时候,只去sys.path的路径里找 3.djan ...

  6. 基功太差,怨不得天,得下苦功——WAP面试,正式招聘号角响起

    WAP面试,直接考察coding能力. 面试官是一个日本先生.人超级Nice.一直朝我微笑. 简短的self-introdution后,就让写代码了. (欧巴桑昨天面的,回去后就把题目告诉我们了,我昨 ...

  7. 利用Github免费搭建个人主页(个人博客)

    之前闲着, 利用Github搭了个免费的个人主页. 涉及: Github注册 Github搭建博客 域名选购 绑定域名 更多 一  Github注册 在地址栏输入地址:http://github.co ...

  8. 关于ORM,以及Python中SQLAlchemy的sessionmaker,scoped_session

    orm(object relational mapping):对象关系映射. python面向对象,而数据库是关系型. orm是将数据库关系映射为Python中的对象,不用直接写SQL. 缺点是性能略 ...

  9. C# 实现程序只启动一次(实现程序自重启)

    程序运行过程中,不能有多个实例运行,并且需要程序自己可以重启(重新运行),所以代码如果下代码: static void Main() { bool createNew; using (System.T ...

  10. python 函数 hex()

    hex(x)作用:hex() 函数用于将10进制整数转换成16进制整数. x-10进制整数,返回16进制整数 实例: >>>hex(255) '0xff' >>> ...