CSS(一) 引入方式 选择器 权重
Css(一)
Cascading Style Sheet 层叠样式表
css注释方式/* */
一、Css引入方式
1. 行间样式 style=" key:value; "
<div style="width:100px;height:100px; background:yellow;"></div>
2.页面级css 即在 head 标签里 写 style 标签 里面写行间样式 (不推荐)
<style>
body{
background: green;
}
</style>
4.@import url()引入 同样 写在 Style 标签里面
<style>
@import url(index.css);
</style>
冷门小姿势: 必须写在Style标签第一行 才生效
这种引入方式在 ie6 只能执行 31行 且等页面加载完才能加载 css
4. link 标签引入 (最常用)
<link rel=”stylesheet” href=”index.css”/>
二、 选择器
1.通配符选择器
*{} /*所有标签 包括 body 缺点 浪费型能*/
2.标签选择器 与 伪元素选择器
ul{ /*标签选择器*/
list-style-type: none;
}
span::before{ /*伪元素选择器*/
content:'这段在span前面' /*这里content必须写 至少是 ‘’ 否则不会生效*/
}
span::after{
content:'这段在span后面'
}
3.类选择器 与属性选择器
.wrapper{ /*类选择器 class*/
border: 1px solid pink;
}
[name='weibin']{ /*属性选择器 多用于选择input*/
background: red;
}
4.id选择器
#only{ /*选择id是only的元素*/
color:red;
}
5.后代选择器 (派生选择器)
.wrapper div{ /*这里选择的是 wrapper 下的 所有div*/
float: left;
}
6.子代选择器
.wrapper>div{ /*这里选择是 wrapper 的所有 子级 的div 子级仅仅是一层嵌套关系的*/
float: left;
}
7.并列选择器
div.box{background: pink} /*选出同时满足多个选择器 的元素 选择器间没有空隙*/
8.分组选择器
div,p,span{font-size:'14px'} /*同时编辑多个选择器选中的内容 减少Css冗余 选择器间 , 隔开 */
9.伪类选择器
/*链接伪类*/
a:link{} /*用于尚未访问的链接*/
a:Visited{} /*用于访问后的链接 类似于 看电视剧观看过的集数 变灰*/
/*动态伪类*/
a:hover{} /*鼠标移入时*/
a:active{} /*元素激活时*/
a:focus{} /*聚焦时 */
10.兄弟选择器
h1 + p {margin-top:50px;} /*h1和p 选择h1 下面的 p*/
三、权重值
| 选择器 | 权重 |
| !important | ∞ |
| 行间样式 | 1000 |
| id | 100 |
| class、 属性、 伪类 | 10 |
| 标签、伪元素 | 1 |
| 通配符 | 0 |
父子选择器等 权重值 会加到一起 css 是层叠样式表 如果 后面的权重 相同或大于等于前面的权重 后面定义的样式 就会冲掉 前面定义的样式
CSS(一) 引入方式 选择器 权重的更多相关文章
- python 全栈开发,Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...
- 前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器
前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器 一丶CSS简介 叠样式表(英文全称:Cascading Style Sheets)是一种用来表现 ...
- Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...
- 前端(二)—— CSS的引入方式、长度与颜色单位、常用样式、选择器
CSS的引入方式.长度与颜色单位.常用样式.选择器 一.CSS的三种引入方式 1.行间式 <!doctype html> <html> <head> <met ...
- CSS的引入方式和复合选择器
CSS的引入方式 样式表 优点 缺点 范围 行内样式表 书写方便 结构样式混写 控制一个标签 内部样式表 部分结构和样式相分离 没有彻底 控制一个页面 外部样式表 完全实现结构和样式分离 需要引入 控 ...
- 前端-CSS-初探-注释-语法结构-引入方式-选择器-选择器优先级-01(待完善)
目录 CSS(Cascading Style Sheet) CSS注释 CSS语法结构 CSS的三种引入方式 选择器 伪类.伪元素选择器速查 CSS选择器优先级***** 选择器相同的情况下 选择器不 ...
- CSS的引入方式和样式
CSS的引入方式和样式 一.样式 行内样式 内接样式 外接样式(1.链接式 2.导入式) <!--行内样式--> <div> <p style="color: ...
- CSS的引入与选择器
CSS的引入与选择器 CSS与HTML的关系 Cascading Style Sheet 即层叠样式表 在上一篇文中,已经介绍了一些非常常用的HTML标签,接下来将步入CSS的学习,如果将单纯HTML ...
- CSS的引入方式
再用HTML编写的文本中,有是没能达到我们想要的效果,此时此刻我们可以用过引用CSS来控制!这不仅使得效果好而且代码层次清晰.CSS的引入方式可以分为四类: 1.链入外部样式表,就是把样式表保存为一个 ...
随机推荐
- POJ2942 Knights of the Round Table 点双连通分量,逆图,奇圈
题目链接: poj2942 题意: 有n个人,能够开多场圆桌会议 这n个人中,有m对人有仇视的关系,相互仇视的两人坐在相邻的位置 且每场圆桌会议的人数仅仅能为奇书 问有多少人不能參加 解题思路: 首先 ...
- jquery 自定义选择器
// HTML 代码 <body> <div id="divid1" class="divclass">白色</div> & ...
- Ubuntu 下 libgps 库的使用
简介 一般 GPS 接收器会遵循美国国家海洋电子协会(National Marine Electronics Association)所指定的标准规格,其中包含传输资料的格式以及传输资料的通讯协议.那 ...
- Python:list 和 array的对比以及转换时的注意事项
Python:list 和 array的对比以及转换时的注意事项 zoerywzhou@163.com http://www.cnblogs.com/swje/ 作者:Zhouwan 2017-6-4 ...
- springboot命令启动
gradle打jar包命令 jar { doFirst { def jarFiles = ''; configurations.compile.collect { jarFiles += it.nam ...
- 【java设计模式】【结构模式Structural Pattern】装饰模式Decorator Pattern
public class Client { public static void main(String[] args) { Component component=new ConcreteCompo ...
- TCP/IP的那些事--子网掩码
当前互联网使用的主要是IPv4协议,它是第一个被广泛使用,构成现今互联网的基础的协议.但是,随着用户数量的增多,IPv4包含的IP资源在不断减少.或许你会想,不是还有IPv6吗?IPv6的容量足以应付 ...
- Huffman 哈夫曼编码与译码的原理剖析及C++实现
原理 我们在信息存储时,希望以最少的空间去存储最大的数据,方便数据的传输,那么该怎样做呢? 我们想到将源信息转化为01序列存储,但是这样以来又有一个问题,就是子串匹配问题,我们为了解决这个方法,想到了 ...
- ABAP中的枚举对象
枚举对象是枚举类型的数据对象.枚举对象只能包含类型为枚举类型的枚举值.ABAP从版本7.51开始支持它们. 这是一种常见的模式.在ABAP 7.51之前,人们通常用如下方式实现类似的功能: CLASS ...
- Jenkins 关闭和重启实现方式.
1.关闭Jenkins 只需要在访问jenkins服务器的网址url地址后加上exit.例如我jenkins的地址http://localhost:8080/,那么我只需要在浏览器地址栏上敲下http ...