首先简单理解浏览器与网页的交互过程

CSS样式表(stylesheet)

  cascading style sheet 级联样式表

  表现HTML或XHTML文件样式的计算机语言:包含对字体、颜色、边距、高度、背景图片、网页定位等设定

  css优势:内容于表现分离

  网页的表现统一,容易修改

  丰富的样式,使得页面布局更加灵活

  减少网页的代码量,增加网页的浏览速度,节省网络带宽

  运用独立于页面的css有利于网页被搜索引擎收录

插入CSS样式表分为三种:

外部样式表(External style sheet)

链接式与导入式的区别

<link rel=”stylesheet” type=”text/css”

href=”path”>

<style type="text/css">

@import url(path);

</style>

<link/> 标签属于XHTML,@import是属于CSS2.1

使用<link/> 链接的CSS文件先加载到网页当中再进行编译显示

使用@import导入的CSS文件,客户端显示HTML结构,再把CSS文件加载到网页当中

@import是属于CSS2.1特有的,对不兼容CSS2.1的浏览器是无效的

内部样式表(Internal style sheet)

CSS代码写在<head>的<style>标签中

<style>

h1{color:green;}

</style>

优点:方便在同页面中修改样式

缺点:不利于在多页面间共享复用代码及维护,对内容与样式的分离也不够彻底。

内联样式(Inline style)

使用style属性引入CSS 样式

<h1 style=”color:red;”>style属性的应用</h1>

<p style=”font-size:14px;color:green;”>直接在HTML标签中设置样式</p>

CSS三种插入样式表格式的更多相关文章

  1. CSS 四种引入样式表优缺点分析

    CSS 四种引入样式表 CSS 有四种方式引入样式表,如下: 外部样式表 内部样式表 行内样式表 导入样式表 外部样式表优缺点 优点 实现了结构与表现的代码完全分离 方便复用及维护 因为分离到各自独立 ...

  2. (一)CSS三种插入方式

    CSS概述 CSS(Cascading Style Sheets)指层叠样式表,样式定义了如何显示HTML元素. 样式通常存储在样式表中,样式与HTML分离解决了内容与表现分离的问题. 多个样式表可以 ...

  3. 你真的知道css三种存在样式(外联样式、内部样式、内联样式)的区别吗?

    css样式在html中有三种存在形态: 内联样式:<div style="display: none"></div> 内部样式: <style> ...

  4. css三种样式表写法

    css三种样式表:1.内嵌样式表: <head>  <style type="text/css">   样式表写法  </style> < ...

  5. CSS三种样式

    CSS 指层叠样式表 (Cascading Style Sheets): 1 内联样式:无法复用,在元素style内写 ,很少使用: 2 内部样式:在head元素内style属性内写,此样式可以被当前 ...

  6. CSS三种写法的优先级

    在HTML文件中引入CSS样式有三种方法: 外部样式:通过link标签引入CSS样式: 内页样式:写在HTML页面里面的style标签里面: 行内样式:写在对应标签的style属性里面. 我知道一般情 ...

  7. 前端 CSS 三种引入方式

    CSS三种引入方式 行内样式 内接样式 外部样式 链接式 导入式 行内样式 就是在标签加上style属性设置样式 <!DOCTYPE html> <html lang="e ...

  8. 006 CSS三种引入方式

    CSS三种引入方式 一.三种方式的书写规范 1.行间式 <div style="width: 100px; height: 100px; background-color: red&q ...

  9. Python 45 css三种引入方式以及优先级

    一:css三种引入方式 三种方式为:行间式 | 内联式 | 外联式 行间式   1.在标签头部的style属性内  2.属性值满足的是css语法  3.属性值用key:value形式赋值,value具 ...

随机推荐

  1. Hadoop-HBASE 热添加新节点

    Hadoop-HBASE 热添加新节点 环境:192.168.137.101 hd1192.168.137.102 hd2192.168.137.103 hd3192.168.137.104 hd4四 ...

  2. Android App启动速度优化

    解决在桌面上点击APP图标后经过一两秒后才显示页面,以及App启动后主界面显示过慢问题 一.应用的启动方式 1.冷启动:当启动应用时,后台没有该应用的进程,这时系统会首先会创建一个新的进程分配给该应用 ...

  3. MFC 中CString 格式16进制转int 十进制

    代码:CString  v_hex ; int v_dec; v_dec = wcstol(v_hex, NULL, 16);

  4. Linux下安装jdk8步骤详述

    作为Java开发人员,在Linux下安装一些开发工具是必备技能,本文以安装jdk为例,详细记录了每一步的操作命令,以供参考. 0.下载jdk8 登录网址:http://www.oracle.com/t ...

  5. WordPress版微信小程序2.2.0版发布

    2017年8月12日WordPress版微信小程序2.2.0版通过了微信的审核正式发布,此版本的更新以完善功能为主.主要更新的功能是:站内链接,猜你喜欢,热点文章. WordPress版微信小程序开放 ...

  6. 网页提示504 gateway time-out是什么意思?如何解决?

    大家在访问网站的时候通常会遇到502错误.404错误等,很少会遇到504错误.但是在我们去访问大流量或者内容数据量较多的网站时,打开网页偶尔就会出现504 gateway time-out,这到底是什 ...

  7. 二、CSS选择器

    1.CSS派生选择器 概念:通过依据元素在其位置的上下文关系来定义样式. 实例: <!--index.html--> <!DOCTYPE html> <html lang ...

  8. SQL Server事务

    事务全部是关于原子性的.原子性的概念是指可以把一些事情当做一个单元来看待.从数据库的角度看,它是指应全部执行或全部都不执行的一条或多条语句的最小组合.为了理解事务的概念,需要能够定义非常明确的边界.事 ...

  9. 在线安装TIDB集群

     在线安装TiDB集群 服务器准备 说明:TiDB8需要能够连接外网,以便下载各类安装包 TiDB4非必须,但最好是有一台,因为后续测试Mysql数据同步或者进行性能比较时,都要用到 TiKV最好是采 ...

  10. spring 之 BeanPostProcessor

    粗略一看, 它有这么多实现: 可见, 它是多么基础 而重要的一个 接口啊! 它提供了两个方法: public interface BeanPostProcessor { Object postProc ...