前端-CSS-介绍及三种引入方式
我们为什么需要CSS?
使用css的目的就是让网页具有美观一致的页面,另外一个最重要的原因是内容与格式分离 在没有CSS之前,
我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性,当HTML内容非常多时,就会定义很
多重复的样式属性,并且修改的时候需要逐个修改,费心费力。是时候做出改变了,所以CSS就出现了。 CSS的出现解决了下面两个问题: 将HTML页面的内容与样式分离。
提高web开发的工作效率。
什么是CSS?
CSS是指层叠样式表(Cascading Style Sheets),样式定义如何显示HTML元素,样式通常又会存在于样式表中。 也就是说把HTML元素的样式都统一收集起来写在一个地方或一个CSS文件里。
css的优势
1.内容与表现分离 2.网页的表现统一,容易修改 3.丰富的样式,使页面布局更加灵活 4.减少网页的代码量,
增加网页浏览器速度,节省网络带宽 5.运用独立页面的css,有利于网页被搜索引擎收录
如何使用CSS?
我们通常会把样式规则的内容都保存在CSS文件中,此时该CSS文件被称为外部样式表, 然后在HTML文件中通过link标签引用该CSS文件即可。这样浏览器在解析到该link标 签的时候就会加载该CSS文件,并按照该文件中的样式规则渲染HTML文件。
CSS基础语法
css的三种引入方式
内嵌方式(不方便维护,不建议使用)
每个项目分别建立文件夹
style
标签
<!doctype html>
<html>
<head>
<meta charset="utf8">
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>这是一个p标签!</p>
</body>
</html>
行内样式
<!doctype html>
<html>
<head>
<meta charset="utf8">
</head>
<body>
<p style="color: blue;">这是一个p标签!</p>
</body>
</html>
外联样式表-链接式(主要使用这种方法)
link标签
----------
index.css
p {
color: green;
}
----------
然后在HTML文件中通过link标签引入:
<!doctype html>
<html>
<head>
<meta charset="utf8">
绝对路径
<link rel="stylesheet" href="./index.css">
</head>
<body>
<p>这是一个p标签!</p>
</body>
</html>
----------------------------------------------------------
外联样式表-@import url()方式 导入式
了解即可。
----------------------
index.css @import url(other.css) ---------------------
注意:
@import url()必须写在文件最开始的位置。 链接式与导入式的区别 1、<link/>标签属于XHTML,@import是属性css2.1
2、使用<link/>链接的css文件先加载到网页当中,再进行编译显示
3、使用@import导入的css文件,客户端显示HTML结构,再把CSS文件加载到网页当中
4、@import是属于CSS2.1特有的,对于不兼容CSS2.1的浏览器来说就是无效的
前端-CSS-介绍及三种引入方式的更多相关文章
- CSS文件的三种引入方式
CSS的引入方式共有三种:行内样式.内部样式表.外部样式表. 一.行内样式 使用style属性引入CSS样式. 示例:<h1 style="color:red;">st ...
- js介绍,js三种引入方式,js选择器,js四种调试方式,js操作页面文档DOM(修改文本,修改css样式,修改属性)
js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...
- 前端 CSS 三种引入方式
CSS三种引入方式 行内样式 内接样式 外部样式 链接式 导入式 行内样式 就是在标签加上style属性设置样式 <!DOCTYPE html> <html lang="e ...
- CSS【03】:CSS 基础选择器与三种引入方式
基础选择器 选择器:css 选择 html 标签的一个工具,是将 css 与 html 建立起联系,那么 css 就可以控制 html 样式 选择器其实就是给 html 标签起名字 标签选择器 作用: ...
- html(常用标签,标签分类),页面模板, CSS(css的三种引入方式),三种引入方式优先级
HTML 标记语言为非编程语言负责完成页面的结构 组成: 标签:被<>包裹的由字母开头,可以结合合法字符( -|数字 ),能被浏览器解析的特殊符号,标签有头有尾 指令:被<>包 ...
- css-1,css的三种引入方式 基本选择器
<!-- (1)CSS 层叠样式表 作用:修饰网页结构 (2)css的三种引入方式 权重: 优先级高 权重大 谁在页面谁的权重大 - 行内样式 注意:行内样式的优先级是最高的 - 内接样式 - ...
- 006 CSS三种引入方式
CSS三种引入方式 一.三种方式的书写规范 1.行间式 <div style="width: 100px; height: 100px; background-color: red&q ...
- Python 45 css三种引入方式以及优先级
一:css三种引入方式 三种方式为:行间式 | 内联式 | 外联式 行间式 1.在标签头部的style属性内 2.属性值满足的是css语法 3.属性值用key:value形式赋值,value具 ...
- 11 CSS的三种引入方式和基本选择器
<!-- 整体说明: 1.CSS的三种引入方式 (1)行内样式 (2)内接样式 (3)外接样式 2.CSS的基本选择器 (1)id选择器 (引用方式:#id) (2)标签选择器(引用方式:标签名 ...
随机推荐
- tomcat源码阅读之过滤器
一.Servlet过滤器: 1.介绍: Servlet过滤器本身并不生成请求和响应对象,它只提供过滤作用. Servlet过滤器能够在Servlet被调用之前检查Request对象,修改Request ...
- 【转】每天一个linux命令(47):iostat命令
原文网址:http://www.cnblogs.com/peida/archive/2012/12/28/2837345.html Linux系统中的 iostat是I/O statistics(输入 ...
- Python+VSCode+Git 学习总结
稍等,先写个脑图... 继续,读完本文,你会学会: 1.如何在VSCode中写Python代码: 2.如何在VSCode中使用Git: 为什么写这篇总结 首先,我假设你是一名Python语言初学者,你 ...
- 监督学习(Supervised learning)
定义符号 m:训练样本的数目 n:特征的数量 x‘s:输入变/特征值 y‘s:输出变量/目标变量 (x,y):训练样本 ->(x(i),y(i)):训练集,第i个训练样本,i=1,2..,m 监 ...
- css调用方式的方法
1.内部样式表(位于 <head> 标签内部) <html><style>.box{display:inline}p { color: rgb(255,0,0); ...
- jquey XMLHttpRequest cannot load url.Origin null is not allowed by Access-Control-Allow-Origin
此篇文章原文地址:http://blog.csdn.net/wangsky2/article/details/22961345 正文: 原文地址:http://stackoverflow.com/qu ...
- cookie js案例
//存cokie function setcookie(keys,value,time){ document.cookie=keys+"="+decodeURIComponent( ...
- Jira 迁移工作
JIRA: 1.直接同步应用服务: rsync -aSvHz --progress --delete atlassian root@192.168.1.243:/opt/atlassian 2. 同步 ...
- Python软件开发规范
bin 整个程序的执行路口 start.py conf 配置文件 setting.py lib 库 模块与包 common.py sql.py core 核心逻辑 ...
- linux Composer 安装
Composer是一个管理PHP包依赖关系的工具.我们可以使用Composer方便地管理项目中一些第三方库和自己的库. 我们可以把Composer安装到当前目录或者特定目录甚至将它变成全局命令 *执行 ...