CSS 小结笔记之三种样式表
CSS 引入共有三种方式:内部样式表,内联样式(行内样式)表,外部样式表,当然也可以使用多重样式
内联样式
<div style="color:red;font-size:20px">内联样式表</div >
内联样式 直接把样式卸载html代码行内,一般仅仅在此样式仅仅只在当前元素上应用时使用,其他情况下尽量不要使用。
内部样式表
<style>
div {
color: blue;
font-size: 20px
}
</style>
内部样式表一般写在HTML头部,在<head>标签内用<style>标签括起来。此方式一般使用在当前页面需要使用特殊的样式。
外部样式表
<link rel="stylesheet" href="CSS/Googlefonts.css">
外部样式表 是单独将样式写到一个css文件中,并在头部引用。使用外部样式表时要注意如果出现多重样式时样式覆盖带来的问题。
多重样式
当使用多重样式时,多重样式将会重叠为一个,一般而言多个样式表会根据下面的规则重叠为一个,其中4为最高权重
- 浏览器缺省设置
- 外部样式表
- 内部样式表(位于 head 标签内部)
- 内联样式(在 HTML 元素内部)
多重样式优先级顺序
对于同一个元素的多个样式而言,优先级次序如下,7的优先级最高(!important 规则例外,但一般尽量不要用):
- 通用选择器(*)
- 元素(类型)选择器
- 类选择器
- 属性选择器
- 伪类
- ID 选择器
- 内联样式
CSS 小结笔记之三种样式表的更多相关文章
- css三种样式表写法
css三种样式表:1.内嵌样式表: <head> <style type="text/css"> 样式表写法 </style> < ...
- CSS 四种样式表 六种规则选择器 五种常用样式属性
新的html程序要在VS中编写了,在vs中安装ASP.NET和Web开发,并用ASP.NET Web 应用程序(.NETFramework)创建一个网页程序.添加一个html页 后面的代码都是在htm ...
- CSS 小结笔记之浮动
在css中float是一个非常好用的属性,float最基本用法是用来做文字环绕型的样式的. 基本用法:float:left | right 例如 <!DOCTYPE html> <h ...
- 程序员接触新语言————hello world ^-^,web3种样式表
我的第一个网页 <!DOCTYPE html> <html> <head lang="en"> <meta charset="U ...
- CSS 小结笔记之解决flex布局边框对不齐
在使用flex 进行伸缩布局的时候,经常会给子盒子设置边框,这时经常会出现上下边框对不齐的情况.本篇文章来探讨并解决这个问题. 具体出现的问题如下图所示 具体代码如下 <!DOCTYPE htm ...
- CSS三种样式表
1.外部样式表当样式需要应用于很多页面时,外部样式表将是理想的选择.在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观.每个页面使用 <link> 标签链接到样式表. & ...
- CSS的三种样式表和优先级
1.外部样式表当样式需要应用于很多页面时,外部样式表将是理想的选择.在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观.每个页面使用 <link> 标签链接到样式表. & ...
- CSS 小结笔记之选择器
Css选择器主要分为以下几类 类选择器 ID选择器 通配符选择器 标签选择器 伪类选择器 复合选择器 1.类选择器:通过.classname 来选择 例如 .color2 { color: rebec ...
- 转载:CSS的组成,三种样式(内联式,嵌入式,外部式),优先级
(仅供自己备份) 原文地址:http://blog.csdn.net/chq11106004389/article/details/50515717 CSS的组成 选择符/选择器+声明(属性+值) 选 ...
随机推荐
- 【链表】Linked List Cycle II
题目: Given a linked list, return the node where the cycle begins. If there is no cycle, return null. ...
- 关于Class的invokeDynamic指令
(1)java7之Special Methods (2)invokedynamic指令 https://www.cnblogs.com/wade-luffy/p/6058087.html public ...
- nuxt踩过的坑
nuxt.js 简单介绍 nuxt官网:https://zh.nuxtjs.org/ 1.nuxt.js的原理图: 具体的原理介绍官网有详细的解释,欢迎移步官网,这里不再复述. 2.nuxt.js的优 ...
- C语言中判断字符串str1是否以str2开始或结束
#include <stdlib.h> #include <string.h> #include <stdio.h> /**判断str1是否以str2开头 * 如果 ...
- 转载《浅析MVC框架中View层的优雅设计及实例》
在基于B/S的应用程序开发中,从基本的技术分工上来说就是两大块,一是软件显示界面,另一个是程序逻辑.在N年前的脚本语言时代,无论是asp.php还是jsp,我们基本是都是把这两者柔和在一起的.尽管我们 ...
- linux svn 开机启动
在/etc/init.d中建立svnboot,内容如下: #!/bin/bash if [ ! -f "/usr/bin/svnserve" ] then echo "s ...
- linux之tmpfs
1.概述 tmpfs是ramfs的衍生品,ramfs是基于RAM的文件系统,不能使用swap空间:tmpfs可以动态释放空间.可以使用swap空间.ramfs不能控制使用内存的大小容易使内存爆掉:而t ...
- SharePoint 2013 EventHanlder工具
之前在07的时候使用SharePoint Event Receiver Manager (2007 & 2010)来管理SharePoint的Event Handler,但是2013后作者没有 ...
- Node.js文件操作二
前面的博客 Node.js文件操作一中主要是对文件的读写操作,其实还有文件这块还有一些其他操作. 一.验证文件path是否正确(系统是如下定义的) fs.exists = function(path, ...
- Vertica示例数据库安装
1.示例数据库简介: Vertica跟传统数据库一样,自带了示例数据库--VMart示例数据库,是一个多架构数据库.该数据是大型超市(VMart)中可能会用到的数据库,可用来访问产品.客户.员工以及网 ...