CSS引入方式（3种）

*就近原则：行内引入可以覆盖内部引入的效果

  • 内部引入：

*  type="text/css"      为默认可以不写

例子：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <!--第一种写法-->

         <style type="text/css">

             div {

                 font-size: 50px;

                 color: pink;

             }

         </style>

     </head>

     <body>

         <div>

             哈哈哈哈哈11

         </div>

         <div>

             哈哈哈哈哈22

         </div>

         <div>

             哈哈哈哈哈33

         </div>

         <div>

             哈哈哈哈哈44

         </div>

         <div>

             哈哈哈哈哈55

         </div>

     </body>

 </html>

结果：

  • 行内引入：

例子：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <!--第一种写法-->

         <style type="text/css">

             div {

                 font-size: 50px;

                 color: pink;

             }

         </style>

     </head>

     <body>

         <div>

             哈哈哈哈哈11

         </div>

         <div>

             哈哈哈哈哈22

         </div>

         <div>

             哈哈哈哈哈33

         </div>

         <div>

             哈哈哈哈哈44

         </div>

         <!--第二种写法-->

         <div style="font-size: 20px;color: blue;">

             哈哈哈哈哈55

         </div>

     </body>

 </html>

结果：

  • 外部引入：

<link />：将本文件与外部css文件关联

rel属性：

stylesheet：层叠样式表

href属性：外部引入css文件的相对位置

type属性：

（默认）text/css

例子：

创建外部文件

style.css：

div {

    font-size: 50px;

    color: pink;

}

03_外部引入.html：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>外部引入</title>

         <link rel="stylesheet" href="style.css" type="text/css" />

     </head>

     <body>

         <div>

             哈哈哈哈哈11

         </div>

         <div>

             哈哈哈哈哈22

         </div>

         <div>

             哈哈哈哈哈33

         </div>

         <div>

             哈哈哈哈哈44

         </div>

         <div>

             哈哈哈哈哈55

         </div>

     </body>

 </html>

结果：

【使用DIV+CSS重写网站首页案例】CSS引入方式的更多相关文章

  1. 【使用DIV+CSS重写网站首页案例】步骤分析与代码实现

    使用DIV+CSS重写网站首页案例 步骤分析: 第一步:先定义一个大的 div(整个页面),然后嵌套 8 个小的 div(共八行): 第二步:(第一行)在第一个 div 里面嵌套 3 个小的 div: ...

  2. 【使用DIV+CSS重写网站首页案例】CSS选择器

    使用表格<table></table>对网站首页进行布局有缺陷,不能拖动版块,不灵活. DIV Div是一个html的标签,单独使用没有意义,必须结合CSS使用: 是一个块级元 ...

  3. 【使用DIV+CSS重写网站首页案例】CSS浮动

    CSS浮动: 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边缘为止 由于浮动框不在文件的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. 选择器之 float属性 ...

  4. 【使用DIV+CSS重写网站首页案例】CSS盒子模型

    CSS盒子模型 取值问题: 默认情况,padding.border.margin都为0: 设定区域内容的width和height,是区域内容框的尺寸: 如果设定padding/border/margi ...

  5. HTML&CSS——使用DIV和CSS完成网站首页重构

    1.DIV 相关的技术 Div 它是一个 html 标签,一个块级元素(单独显示一行).它单独使用没有任何意义,必须结合CSS来使用.它主要用于页面的布局. Span 它是一个 html 标签,一个内 ...

  6. PHP.5-DIV+CSS布局网站首页实例

    DIV+CSS布局网站首页实例 网站页面布局 http://www.sj33.cn/digital/wyll/201501/42379.html[页头.页脚.侧边栏和内容区域] #避免各浏览器对CSS ...

  7. CSS【03】：CSS 基础选择器与三种引入方式

    基础选择器 选择器:css 选择 html 标签的一个工具,是将 css 与 html 建立起联系,那么 css 就可以控制 html 样式 选择器其实就是给 html 标签起名字 标签选择器 作用: ...

  8. css（一）-- 概述以及引入方式

    概述 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可 ...

  9. 原生CSS设置网站主题色—CSS变量赋值

    定义CSS变量 在css文件顶部定义css变量,注意必须以--开头,使用:root包括这几个变量 :root { --main-bg-color: #ff7675; --color1: #fbfee9 ...

随机推荐

  1. kibana We couldn't activate monitoring

    调节一下监控状态查询的时间范围,有时候,刚启动监控,数据没有生成.把”last 1 hour“改成 具体有数据的时间 用如下语句查看,监控日志在不断生成.重启kibana后正常有监控画面了. GET ...

  2. malloc vs memset

    malloc vs memset OS内存分配过程如下: 用户态程序使用malloc接口,分配虚拟地址. 用户程序访问该虚拟地址,比如memset. 硬件(MMU)需要将虚拟地址转换为物理地址. 硬件 ...

  3. cad.net 复制图元的时候按下多次esc导致复制中断的bug,令REGEN,REGENALL更新图元无效.

    浩辰没有这个bug !!!!!!! 如上述动图所示,cad在复制一个多图元的操作时候,多次按下esc键中断复制操作, **注意例子要有足够多的图元(大概一万个图元),才能很好展示这个bug,而且这个b ...

  4. struts2.xml 中result type属性说明

    chain           用来处理Action链,被跳转的action中仍能获取上个页面的值,如request信息.           com.opensymphony.xwork2.Acti ...

  5. linux免费https证书申请教程

    linux免费https证书申请教程直接去阿里云 菜单有个证书服务进去有个购买证书菜单 选择免费的 然后会提示写个人资料 然后系统生成csr 然后提交审核这个时候会有份邮件 文件下载上传到你的服务器 ...

  6. MODBUS 数据格式相关记录

    串口通讯格式: 串口通讯可以分为同步通讯(Synchronous)和异步通讯(Asynchronous).同步通讯时有一根时钟信号,数据格式中没有起始位和停止位:异步通讯中没有时钟信号,数据格式中包含 ...

  7. 『摆渡车 斜率优化dp及总结』

    摆渡车的题解我已经写过一遍了,在这里,这次主要从斜率优化的角度讲一下摆渡车,并总结一下斜率优化会出现的一些奇奇怪怪的错误. 摆渡车 Description 有 n 名同学要乘坐摆渡车从人大附中前往人民 ...

  8. c#调用python脚本实现排序（适用于python脚本中不包含第三方模块的情况）

    引用:https://www.cnblogs.com/zoe-yan/p/10374757.html 利用vs2017c#调用python脚本需要安装IronPython.我是通过vs2017的工具- ...

  9. C#控制操控操作多个UVC摄像头设备

    有时,我们需要在C#代码中对多个UVC摄像头进行操作,如何实现呢? 建立基于SharpCamera的项目 首先,请根据之前的一篇博文 点击这里 中的说明,建立基于SharpCamera的摄像头控制项目 ...

  10. 几分钟打造超级好看又好用的zsh command line环境

    source: https://www.pexels.com/photo/office-working-app-computer-97077/ 注:这篇适用于用MAC 开发的developer 身为程 ...