前端之CSS创建的样式
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创建的样式的更多相关文章
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- web前端篇:CSS使用,样式表特征,选择器
目录 web前端篇:CSS使用,样式表特征,选择器 1.CSS介绍 2.CSS使用 3.样式表特征 4.CSS选择器 5.选择器的优先级 6.练习题: web前端篇:CSS使用,样式表特征,选择器 1 ...
- CSS3——注释 id 和 class 选择器 css创建(外部、内部、内联样式表)
注释 /* 注释内容 */ id 和 class 选择器 id ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用 < ...
- 前端04 /css样式
前端04 /css样式 目录 前端04 /css样式 昨日内容回顾 css引入 选择器 基础选择器 组合选择器 属性选择器 伪类选择器 伪元素选择器 优先级(权重) 通用选择器 css样式 1高度宽度 ...
- 前端之css引入方式/长度及颜色单位/常用样式
1.css三种引入方式 <!DOCTYPE html><html><head> <meta charset="UTF-8"> < ...
- CSS/CSS3常用样式小结
1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hid ...
- [总结]CSS/CSS3常用样式与web移动端资源
CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条 ...
- CSS 基础知识点 样式 选择器 伪类
CSS 基础知识点汇集 版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...
- 前端学习---css基本知识
css基本知识 我们先看一个小例子: <!DOCTYPE html> <html lang="en"> <head> <meta char ...
随机推荐
- 20170228 ALV method中用E消息,会退出到初始界面;STOP 会dump;
再回车就处理界面了, 所以,Handel_data_change 做数据检查时,如果需要报错要用到, CALL METHOD er_data_changed->add_protocol_entr ...
- JSP 用poi 读取Excel
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- Mac JDK 多版本共存
1. 安装各JDK版本,安装后通过Java -version检测是否安装好 2. 打开~/.bash_profile,没有的话创建 vim ~/.bash_profile ...
- vim使用手册出现 找到 tag:1/9或更多 查看别的定义的方法
:ts 或 tselect 查看有相同地方的定义 通过这种方式会出现一个列表,输入:q 然后通过数字键和回车查看某一个定义,个人经常用:ts :tn或tnext 查找下一个定义地方. :tp 查找上一 ...
- 序列化FastReport,重要提示少走弯路 good
原本在开发一个报表插件,因为需要远程传输,因此需要序列化报表,序列化FastReport有两种方式, 1.仅序列化数据,由客户端接受到数据,并呈现报表,这种方式需要在客户端存储报表格式文件xxx.Fr ...
- webpack 的编译原理
自从接触了react,vue 这两个框架,都会用到webpack这个打包工具.面试的时候,经常被问到知道webpack的编译原理吗? 可以简单的介绍一下.每每这个时候都被问的哑口无言,平时用的时候挺顺 ...
- hdu-2680 Choose the best route(最短路)
题目链接: Choose the best route Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K ( ...
- CodeForces242D:Connected Components (不错的并查集)
We already know of the large corporation where Polycarpus works as a system administrator. The compu ...
- 聊聊Java SPI机制
一.Java SPI机制 SPI(Service Provider Interface)是JDK内置的服务发现机制,用在不同模块间通过接口调用服务,避免对具体服务服务接口具体实现类的耦合.比如JDBC ...
- bzoj5063
平衡树 6个操作做完当然GG了,其实只有两个操作,翻转[A+1,A+B],把这个区间放到C的后面,那么就是基本splay操作了,可是好久没打,又GG了,splay函数写错了... #include&l ...