一、概述

HTML是骨架、框架
CSS是外表、衣服
JS是动作、肌肉

css的主要作用是对元素进行渲染。
1、找到要操作的标签(选择器)
2、对定位的标签进行操作(属性)

二、CSS引入方式

1、行内式

<p style="background-color:red">行内式</p>

2、内联式

在head标签内使用

<html>
<head>
<style>
div {
background-color:red;
}
div p {
background-color:green;
}
</style>
</head>
<body>
<div>sdfasdfasdfsdf
<p>asdfasfasdf</p>
</div>
</body>
</html>

3、外链式

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

4、导入式

<head>
<style type="text/css">
@import "test.css"
</style>
</head>

注意:
1、推荐使用外链式,简洁明了。
2、外链式中的rel="stylesheet"不能省略,type="text/css"可以省略。
3、@import引入文件时,有数量限制,而link没有。
4、导入式会在整个网页加载完成后再加载CSS文件,因此如果文件非常大的话,网页会有闪烁的情况出现。外链式一开始网页就会加载,所以不会有闪烁出现。

 

css快速入门-引入方式的更多相关文章

  1. 02-03 CSS快速入门

    css四种引入方式:test.html: p{ color: gold; font-size: 20px; } title.html: <!DOCTYPE html> <html l ...

  2. 前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作

    一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如: h1 {color:red; font-size:14px;} 二.CSS四种引入方式 1,行内式 行内式是在标 ...

  3. 前端 CSS 三种引入方式

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

  4. 006 CSS三种引入方式

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

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

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

  6. css三种引入方式以及其优先级的说法

    css 三种引入方式 方式一:行间式 ​ 1.在标签头部的style属性内 ​ 2.属性值满足css语法 ​ 3.属性值用key:value形式赋值,value具有单位 ​ 4.属性值之间用 分号 : ...

  7. CSS快速入门(四)

    目录 CSS快速入门(四) 浮动 float属性 clear属性 浮动解决的问题及其影响 解决父标签塌陷的方法 浮动案例 定位 什么是脱离文档流 定位的两种方法 position定位 static定位 ...

  8. HTML/CSS快速入门

    Web概念 JavaWeb 使用java语言开发基于互联网的项目 软件架构 C/S架构:Client/Server 客户端/服务器 用户本地有一个客户端程序,在远程有一个服务端程序 如QQ,英雄联盟. ...

  9. Html与CSS快速入门01-基础概念

    Web前端技术一直是自己的薄弱环节,经常为了调节一个简单的样式花费大量的时间.最近趁着在做前端部分的开发,果断把这部分知识成体系的恶补一下.内容相对都比较简单,很类似工具手册的学习,但目标是熟练掌握. ...

随机推荐

  1. url用法

    url中的name用法: 0.定义主rul.py urlpatterns = [ url(r'^sinfors/', include('sinfors.urls', namespace="s ...

  2. 一、JavaScript概述 二、JavaScript的语法 三、JavaScript的内置对象

    一.JavaScript的概述###<1>JavaScript的概念 又称ECMAScript,和java没有任何关系 嵌入在HTML元素中的 被浏览器解释运行的 一种脚本语言. ###& ...

  3. 设计一套砝码要求能称量出1 ~ 100g之间的任意重量,请问至少需要多少个砝码?以及每个砝码各自的重量是多少?

    解析: 1g => 1g 2g => 1g 1g => 1 ~ 2g之间的重量 => 1g 2g => 1 ~ 3g之间的重量 4g => 1g 2g 1g =&g ...

  4. Service Mesh服务网格之Linkerd架构

    今天详细介绍一下Linkerd的架构. 控制平面 Linkerd控制平面是一组在专用Kubernetes命名空间中运行的服务(在Linked默认情况下).这些服务完成各种事情——聚合遥测数据.提供面向 ...

  5. QT里使用Gsoap调用WebService

    错误了很多天,今天终于搞定,并得到了服务器的结果.这里把错误的原因记录下来. 首先是这里,之前一直没有加载进来,所以一直报错 SOURCES += main.cpp\ gsoap/soapClient ...

  6. 【记录】有趣的python模块记录

    1. paramiko: 基于SSH用于连接远程服务器并执行相关操作,公钥私钥登录等等

  7. 本地项目关联git仓库

    Command line instructions Git global setup git config --global user.name "zhoushuo" git co ...

  8. 是否含有RTTI(运行时类型信息)是动态语言与静态语言的主要区别

    运行时类型信息代表类型信息和对内存的操作能力. 运行时类型信息是运行时系统的基础. 类型信息分为编译时类型信息和运行时类型信息两种: 静态语言的类型信息只在编译时使用和保留,在可执行文件中没有类型信息 ...

  9. prometheus-入门尝试

    prometheus-入门 Prometheus 是由 SoundCloud 开源监控告警解决方案2015 年在 github 上开源以来,已经吸引了 很多大公司的使用:2016 年 Promethe ...

  10. 【bzoj 2839】集合计数

    权限题 根据广义容斥的套路就很好做了 设\(g_i\)表示交集至少有\(i\)个元素,\(f_i\)表示交集恰好有\(i\)个元素 显然有 \[g_i=\sum_{j=i}^n\binom{j}{i} ...