层叠样式表(CSS)1
一、css的简介
1.层叠样式表的含义
层叠样式表:css是不仅是表现HTML的语言、还是进行样式修饰的语言
层叠:是对一个元素多次设置同一个样式,层层叠加覆盖,如不同的样式对一html标签进行修饰,若样式冲突,则冲突部分应用优先级高的;若不冲突,则共用
样式表:是css属性样式的集合
2.作用
丰富html、使html样式更多样
提高css的样式复用性
使html内容与css样式分离 便于维护
3.引入方式
内嵌样式
内嵌样式是直接把css的代码嵌入到标签中
<div style="color:green;font-size:70px;">
小老弟,针不戳
</div>
用法:
使用style属性将样式嵌入到html标签中、写法:属性:属性值
多属性之间用分号(;)隔开
**不建议使用**
内部样式
在head标签中使用style标签进行css的引入
<style type="text/css">
div{color:green;font-size:70px;}
</style>
用法:使用style标签、type属性将css的引入
<style type="text/css">
属性:type:让浏览器知道要使用css解析器去解析这个样式,写法:属性:属性值;多属性之间用分号(;)隔开
外部样式
link链接方式
把css样式做成一个单独css文件,需要便引用(jj01.css文件)
<link rel="stylesheet" type="text/css" href="jj01.css" />
用法:
创建css文件,把css样式写入文件中
在head中使用link标签进行引入
<link rel="stylesheet" type="text/css" href="路径"/>
rel:设置引入的文件对象与HTML之间的关系
type:让浏览器知道要使用css解析器去解析这个样式
href:css文件的路径
写法:属性:属性值;多属性之间用分号(;)隔开
@import方式(不推荐使用):
我们来聊聊为什么不推荐使用这个方式来引入外部样式(了解一下@import即可,不必学习)
在使用@import方式引入的时候,css是无法并行下载,浏览器首先下的引用的这个css文件,其他css文件需要等解析完成后再发现并下载,然后再解析再进行一系列操作才能把页面显示。这个问题直接说明了一个问题:网页加载时间变长,导致网页会有较长时间停留在空白页面。所以推荐使用link链接
@import方式其他缺点:
@import对部分低版本IE浏览器是不支持的
@import是等html加载完后再在加载
@import是不支持js的动态修改
注:未经同意请勿转载,仅作学习使用。以上有描述不正确之处,望大家能不吝指出,共同学习共同进步。谢谢
层叠样式表(CSS)1的更多相关文章
- 层叠样式表(CSS)
层叠样式表(CSS) CSS(Cascading Style Sheet)中文译为层叠样式表.是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言.CSS的引入就是为了使得HTML语言能够 ...
- __x__(16)0906第三天__层叠样式表CSS简介
层叠样式表CSS Cascading Style Sheets 用来为网页创建样式表,通过样式表对网页进行装饰. 所谓层叠,就是将网页想象成一层一层的结构,层次高的将覆盖层次低的. CSS可以为网页的 ...
- css学习(1)-- 层叠样式表CSS的基础
一.什么是CSS CSS是Cascading Style Sheets的简写,它除了可以轻松设置网页元素的显示位置和格式处,甚至还能产生滤镜,图像淡化,网页淡入淡出的渐变效果. 一个样式表由样式规则组 ...
- 层叠样式表css的优先级
优先级1:外部<内部<行内优先级2:标签选择器<类选择器<ID选择器
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- CSS层叠
前面的话 层叠样式表CSS最基本的一个特性就是层叠.冲突的声明通过层叠进行排序,由此确定最终的文档表示.而这个过程的核心就是选择器及其相关声明的特殊性.重要性.来源及继承机制.本文将详细介绍CSS层叠 ...
- web前端:css
css简介: web文档的结构由html元素定义,而这些html元素是如何显示的,则是由层叠样式表css来定义,这样就实现了结构与表现的分离. 1.外部样式表 可以将样式定义放在一个单独的文件中,并且 ...
- (转)第一天 XHTML CSS基础知识 文章出处:标准之路(http://www.aa25.cn/div_css/902.shtml)
欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础,也 ...
- CSS样式总结
CSS: Cascading Style Sheet,层叠样式表 Css由三部分组成:选择符.样式属性.值: 基本语法:选择符 {样式属性:值:样式属性:值.....} 一,选择器 常用的选择器有:标 ...
- [CSS3] 学习笔记-CSS入门基本知识
1.CSS概述 CSS指层叠样式表 CSS样式表极大的提高了工作效率 1)CSS基础语法: selector{ propery:value } 例1:h1{color:red;font-size:14 ...
随机推荐
- [白嫖]阿里云服务器ECS以及无影云桌面
[白嫖]aliyun 阿里云ECS和无影云桌面 [云服务器 ECS]学生认证约7个月 适合入门级开发者,用于搭建网站.小程序.云博客.部署主流开发环境,如 lamp.node.js.wordpress ...
- C# 编译异常CS0433
编译后遇到nuget版本冲突: error CS0433: 类型"ShellFile"同时存在于"Microsoft.WindowsAPICodePack.Shell, ...
- Java 新的生态型应用开发框架,Solon v2.2.14 发布
Java 新的生态型应用开发框架,Solon :更快.更小.更简单.从零开始构建,有自己的标准规范与开放生态: 150多个生态插件,可以满足各种场景开发 大量的国产框架适配,可以为应用软件国产化提供更 ...
- Prism Sample 7 Modules Directory
这种方式用扫描目录的方式来增加模块,具备最大的灵活性 仍然在App.xaml.cs中增加了以下代码 protected override IModuleCatalog CreateModuleCata ...
- 通过空间占用和执行计划了解SQL Server的行存储索引
1 索引介绍 索引是一种帮助查询语句能够快速定位到数据的一种技术.索引的存储方式有行存储索引.列存储索引和内存优化三种存储方式: 行存储索引,使用B+树结构,行存储指的是数据存储格式为堆.聚集索引和内 ...
- 文心一言 VS chatgpt (5)-- 算法导论2.2 3~4题
三.再次考虑线性查找问题(参见练习 2.1-3).假定要查找的元素等可能地为数组中的任意元素,平均需要检查输入序列的多少元素?最坏情况又如何呢?用0记号给出线性查找的平均情况和最坏情况运行时间.证明你 ...
- 2020-12-19:系统load过高,你怎么去查?
福哥答案2020-12-20:[答案来自此链接:](http://bbs.xiangxueketang.cn/question/800)1.top命令查看该机器的负载状况.2.cd /proc/pid ...
- 【熊子q的代码乐园】用python写个健康报备记录小系统
目录 一.前言 二.技术实现 1.概述 2. 环境 3. 技术核心 4. 数据库 5. 源代码 三.最后 一.前言 coding的一路上,遇到过许多问题,也写过一些代码去解决,回头看看还是有点意思的, ...
- weex项目使用iconfont 字体图标
一.使用本地字体图标 1.在 https://www.iconfont.cn/manage/index 注册自己的账号 2.创建自己的项目 3.添加自己需要的图标,并将其下载到本地 4.入口页面引入 ...
- ArcMap手动新建矢量要素的方式
本文介绍在ArcGIS下属ArcMap软件中,新建点.线.面等矢量要素图层,并对新建图层的空间范围加以划定的方法. 首先,在右侧"Catalog"栏中选择需要存放新建立矢量 ...