01CSS的引入方式
引入CSS方式(重点掌握)
行内样式
内接样式
外接样式
链接式
导入式
css介绍
现在的互联网前端分三层:
- HTML:超文本标记语言。从语义的角度描述页面结构。
- CSS:层叠样式表。从审美的角度负责页面样式。
- JS:JavaScript 。从交互的角度描述页面行为
CSS:Cascading Style Sheet,层叠样式表。CSS的作用就是给HTML页面标签添加各种样式,定义网页的显示效果。简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能。
css的最新版本是css3,我们目前学习的是css2.1
接下来我们要讲一下为什么要使用CSS。
HTML的缺陷:
- 不能够适应多种设备
- 要求浏览器必须智能化足够庞大
- 数据和显示没有分开
- 功能不够强大
CSS 优点:
- 使数据和显示分开
- 降低网络流量
- 使整个网站视觉效果一致
- 使开发效率提高了(耦合性降低,一个人负责写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的引入方式的更多相关文章
- 01-css的引入方式
[转]01-css的引入方式 引入css方式(重点掌握) 行内样式 内接样式 外接样式 3.1 链接式 3.1 导入式 css介绍 现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述 ...
- day 42 01--CSS的引入方式及CSS选择器
01--CSS的引入方式及CSS选择器 本节目录 一 CSS介绍 二 行内样式 三 内接样式 四 外接样式 五 CSS的选择器 六 CSS的高级选择器 七 CSS的属性选择器 八 CSS的伪类选择 ...
- 01-css的引入方式和常用选择器
一.css介绍 现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的角度负责页面样式. JS:JavaScript .从交互的角度描述页面行为 ...
- 01--CSS的引入方式及CSS选择器
一 CSS介绍 现在的互联网前端分三层: a.HTML:超文本标记语言.从语义的角度描述页面结构. b.CSS:层叠样式表.从审美的角度负责页面样式. c.JS:JavaScript .从交互的角度描 ...
- Electron中Jquery的引入方式
原文链接http://huisky.com/blog/16122220522957 Electron默认启用了Node.js的require模块,而jQuery等新版本框架为了支持commondJS标 ...
- css引入方式
1.<style> body{} </style> 2.写在一个单独的文件里面保存即新建一个文件:xx.css; 注明该文件的位置<link re ...
- css js 的引入方式和书写位置
css 的引入方式 1.行内样式 <div id="div1" style="width:100px; height:100px; background:red&q ...
- [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 ...
- CSS的4种引入方式及优先级
第一:css的四种引入方式 1.行内样式 最直接最简单的一种,直接对HTML标签使用style="",例如: <p style="color:#F00; " ...
随机推荐
- Redis 数据备份与恢复,安全,性能测试,客户端连接,管道技术,分区(四)
Redis 数据备份与恢复 Redis SAVE 命令用于创建当前数据库的备份. 语法 redis Save 命令基本语法如下: redis 127.0.0.1:6379> SAVE 实例 re ...
- Codeforces Round #394 (Div. 2) A. Dasha and Stairs
A. Dasha and Stairs time limit per test:2 seconds memory limit per test:256 megabytes input:standard ...
- LeetCode OJ:Perfect Squares(完美平方)
Given a positive integer n, find the least number of perfect square numbers (for example, 1, 4, 9, 1 ...
- L137
Uncontacted Tribes at Risk Amid ‘Worrying' Surge in Amazon Deforestation Illegal loggers and militia ...
- 2017.11.17 Demo-stm8+temperature timeing control
1Find the lab and add in project. Downtown it from ST official website..compile it to ensure it pa ...
- 热烈祝贺博主LZUGIS博客访问量突破
截止发文时间,博主"LZUGIS"CSDN博客文章总访问量突破50W,值此特殊的时刻,特发此文,以表纪念与督促. 博客详情 博客专栏 公众号 常言道:不积跬步,无以至千里:不积小流 ...
- golang实现图片上传
golang实现图片上传 该代码为使用beego实现前后端图片上传.话不多说,直接上代码. 1.前端代码 html代码: <div class="col-5 f-l text text ...
- Android使用Http协议访问网络——HttpConnection
套路篇 使用HttpConnection访问网络一般有如下的套路: 1.获取到HttpConnection的实例,new出一个URL对象,并传入目标的网址,然后调用一下openConnection() ...
- 深入理解java虚拟机-第二章
第2章 Java内存区域与内存溢出异常 运行数据区域 1.程序计数器(Program Counter Register) 是一块较小的内存空间,它可以看作是当前线程所执行的字节码的行号指示器. 2.J ...
- 2017 山东二轮集训 Day7 国王
2017 山东二轮集训 Day7 国王 题目大意 给定一棵树,每个点有黑白两种颜色,定义一条简单路径合法当且仅当路径上所有点黑色与白色数量相等,求有多少非空区间 \([L,R]\) ,使得所有编号 \ ...