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提供各种各样的样式。

行内样式

1 <div>
2 <p style="color: green">我是一个段落</p>
3 </div>

内接样式

<style type="text/css">
/*写我们的css代码*/ span{
color: yellow;
} </style>

外接样式-链接式

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

外接样式-导入式

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

css 引入方式的更多相关文章

  1. css引入方式

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

  2. CSS引入方式的区别详解

    在web前端开发中,CSS是一种用来表现HTML或XML等文件样式的语言.很多处于web前端初学阶段的朋友,很多人都不知道CSS引入方式存在三种方法,css引入方式分别为标签内联书写.页面头部书写.外 ...

  3. link标签和css引入方式

    link常见用途 <link> 标签最常见的用途是链接样式表,在 HTML 中,<link> 标签没有结束标签,此元素只能存在于 head 部分,不过它可出现任何次数. < ...

  4. 认识CSS中css引入方式、选择器、文本样式设置以及显示模式

    前端之HTML.CSS(三) CSS CSS-Cascading Styles Sheets,层叠样式表.用于网页的表现,主要用于布局和修饰网页. CSS引入方式 CSS的三种引入方式:行内样式,内部 ...

  5. 项目复习期总结3:CSS引入方式,凝视,命名规范,背景,行高,文本属性

    文件夹: 1.CSS凝视的书写 怎么写?优点? 2.CSS引入方式  各种的优缺点 3.选择器的写法与选择器的优先级 4.CSS命名规范 5.背景,行高 6.文本(text与font开头)等全部属性 ...

  6. 【使用DIV+CSS重写网站首页案例】CSS引入方式

    CSS引入方式(3种) *就近原则:行内引入可以覆盖内部引入的效果 内部引入: *  type="text/css"      为默认可以不写 例子: <!DOCTYPE h ...

  7. css引入方式和基本样式

    css的三种引入方式: 1.内嵌:直接在标签中添加style属性 格式:<标签名 style="样式1:样式值1:样式2=样式值2:"></标签名> 2.内 ...

  8. css 基础 css引入方式

    color:red; //改变颜色 font-size:18px : //改变文字大小 background-color : blue; //设置背景颜色 width:100px ://设置宽度 he ...

  9. 关于CSS引入方式的详细见解

    关于CSS的发展史这里不做介绍.写博客的原因之一是想帮助那些与我一样喜欢纠结的初入前端的伙伴,希望自己写的帖子能对伙伴有些许帮助:原因之二这些帖子也算自己的一个知识的整理.现在还没有一定的顺序可循,但 ...

  10. python全栈开发 * 表格标签 表单标签 css 引入方式 * 180807

    html部分 一.表格标签<table> 1.一个表格<table>由每行<tr>组成的,每行是由<td>组成的. 注意: 一个表格是由行组成的(行是由 ...

随机推荐

  1. 安装低版本django1.11出错

    错误信息: File "C:\python3\lib\site-packages\django\utils\autoreload.py", line 227, in wrapper ...

  2. 【VIP视频网站项目】VIP视频网站项目v1.0.3版本发布啦(程序一键安装+电影后台自动抓取+代码结构调整)

    在线体验地址:http://vip.52tech.tech/ GIthub源码:https://github.com/xiugangzhang/vip.github.io 项目预览 主页面 登录页面 ...

  3. 文本框、评论框原生js

    <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8 ...

  4. BZOJ 4285 使者 (CDQ分治+dfs序)

    题目传送门 题目大意:给你一棵树,有三种操作,在两个点之间连一个传送门,拆毁一个已有的传送门,询问两个点之间的合法路径数量.一条合法路径满足 1.经过且仅经过一个传送门 2.不经过起点终点简单路径上的 ...

  5. 终端打印SQL语句

    在 Django 项目的 settings.py 文件中配置: LOGGING = { 'version': 1, 'disable_existing_loggers': False, 'handle ...

  6. App后台开发运维和架构实践学习总结(2)——RESTful API设计技巧

    前言 移动互联网时代,RESTful API成为越来越重要的移动端和服务器端交互的形式.尤其是在很多互联网公司或者传统行业拥抱移动互联网的时候,一套设计良好的Restful API能够帮助互联网产品支 ...

  7. App架构设计经验谈:接口”安全机制”的设计

    [原文地址 点击打开链接] 原创文章,转载请注明:转载自Keegan小钢 并标明原文链接:http://keeganlee.me/post/architecture/20160107 微信订阅号:ke ...

  8. Mybatis+0+null,小问题引发的血案

    Mybatis在进行<if test="status != null and status != ''">判空操作时,假设status为0的时候,该推断条件的值为fal ...

  9. codeforces 391E2 (【Codeforces Rockethon 2014】E2)

    题目:http://codeforces.com/problemset/problem/391/E2    题意:有三棵树.每棵树有ni个结点,加入两条边把这三棵树连接起来,合并成一棵树.使得合并的树 ...

  10. 在NSUserDefaults中保存自己定义的对象

    在iOS开发中.须要用到一些回调值(从A到B,从B返回时把B中的值带回A中).事实上方法也非常多(delegate,block.nsuserdefaults等).我想用NSUserDefaults回调 ...