CSS即层叠样式表,在创建时有以下几种样式:

1.内联样式(行内样式、行间样式):

    <标记 style=“属性:属性值;”></标记>

2.内部样式(嵌入式样式):

    <style type="text/css">                <-------一般放置在head部分

    选择器{

      属性:属性值;

      属性:属性值;

    }

</style>

3.外部样式:

①、使用link标签引入:

<link rel="stylesheet" type="text/css" href="css文件路径"/>

注: rel代表引入文件和本文件之间的关系

link标签一般也放在head部分

在使用link标签之前首先要创建一个css文件,文件以英文命名

②、使用@import 引入css文件

@import "css文件路径";

注:@import方式属于css范畴,必须放在css文件中或内部样式中

link和@import的区别:

I.link属于html标签,除了可以引入css文件以外,还可以引入其他文件;@import属于css范畴,只能引入css文件

II.link引入的css文件和html同时加载;而@import引入的css文件要在页面加载完成后才进行加载

III.link标签所有浏览器都支持;@import在IE5及以下版本浏览器不支持

IV. link标签支持js操作DOM;@import不支持

4.样式表的优先级(三种样式表的区别):

采取就近原则(离被设置样式的元素越近,优先级越高)

内联样式>内部样式>外部样式

如果css属性值中出现!important关键字时,他的优先级最高!

前端之CSS创建的样式的更多相关文章

  1. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  2. web前端篇:CSS使用,样式表特征,选择器

    目录 web前端篇:CSS使用,样式表特征,选择器 1.CSS介绍 2.CSS使用 3.样式表特征 4.CSS选择器 5.选择器的优先级 6.练习题: web前端篇:CSS使用,样式表特征,选择器 1 ...

  3. CSS3——注释 id 和 class 选择器 css创建(外部、内部、内联样式表)

    注释 /*         注释内容          */ id 和 class 选择器 id   ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用 < ...

  4. 前端04 /css样式

    前端04 /css样式 目录 前端04 /css样式 昨日内容回顾 css引入 选择器 基础选择器 组合选择器 属性选择器 伪类选择器 伪元素选择器 优先级(权重) 通用选择器 css样式 1高度宽度 ...

  5. 前端之css引入方式/长度及颜色单位/常用样式

    1.css三种引入方式 <!DOCTYPE html><html><head> <meta charset="UTF-8"> < ...

  6. CSS/CSS3常用样式小结

    1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hid ...

  7. [总结]CSS/CSS3常用样式与web移动端资源

    CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条 ...

  8. CSS 基础知识点 样式 选择器 伪类

    CSS 基础知识点汇集 版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...

  9. 前端学习---css基本知识

    css基本知识 我们先看一个小例子: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

随机推荐

  1. 转载-STM32片上FLASH内存映射、页面大小、寄存器映射

    原文地址:http://blog.chinaunix.net/uid-20617446-id-3847242.html 本文以STM32F103RBT6为例介绍了片上Flash(Embedded Fl ...

  2. glibc CVE-2015-7547漏洞的分析和修复方法【转】

    本文转载自:http://blog.csdn.net/tengxy_cloud/article/details/50764370 漏洞概述 glibc中处理DNS查询的代码中存在栈溢出漏洞,远端攻击者 ...

  3. regmap使用介绍【转】

    本文转载自:http://blog.csdn.net/hellowxwworld/article/details/10737569 内核3.1引入一套新的API regmap,目的是提取出关于I2C ...

  4. HDU - 1875 畅通工程再续(最小生成树)

    d.c个小岛,通过建立桥,使其全部可达.求所有的桥的最小长度和. s.最小生成树,数据改成double就行了 c.Prim算法:cost[a][b]和cost[b][a]都得赋值. /* Prim算法 ...

  5. 出现Insufficient space for shared memory file错误解决

    今天在linux下敲命令,出现上面的错误,原来是临时文件目录(/tmp)下的空间不够了,df一看/下100%了.

  6. poj-1273 Drainage Ditches(最大流基础题)

    题目链接: Drainage Ditches Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 67475   Accepted ...

  7. 怎么解决Failed to load the JNI shared library

    怎么解决Failed to load the JNIshared library   解决Failed to load the JNIshared library唯一的方法就是重新安装eclipse, ...

  8. PDB文件说明

    文/玄魂 .PDB文件,全称为“程序数据库”文件.我们使用它(更确切的说是看到它被应用)大多数场景是调试应用程序.目前我们对.PDB文件的普遍认知是它存储了被编译文件的调试信息,作为符号文件存在.那么 ...

  9. API介绍

    API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码 ...

  10. 折半插入排序 之通俗易懂,图文+代码详解-java编程

    转自http://blog.csdn.net/nzfxx/article/details/51615439 1.特点及概念介绍 下面给大家讲解一下"二分法查找"这个java基础查找 ...