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.链入外部样式表,就是把样式表保存为一个 ...
随机推荐
- POJ 3928 & hdu 2492 & Uva1428 PingPong 【树状数组】
Ping pong Time Limit: 2000/1000 MS (Java/Others) ...
- 【博客目录】SqlServer篇
SqlServer系列篇 [SqlServer系列]SQLSERVER安装教程 [SqlServer系列]数据库三大范式 [SqlServer系列]表单查询 [SqlSer ...
- log4j配置文件详解(转)
Log4J的配置文件(Configuration File)就是用来设置记录器的级别.存放器和布局的,它可接key=value格式的设置或xml格式的设置信息.通过配置,可以创建出Log4J的运行环境 ...
- Java Annotation认知(包括框架图、详细介绍、示例说明)(转)
本文转自:http://www.cnblogs.com/skywang12345/p/3344137.html 网上很多关于Java Annotation的文章,看得人眼花缭乱.Java Annota ...
- 源生js惯性滚动与回弹效果
在写移动端的APP或者页面时,经常会遇到惯性滚动与回弹效果.用插件iscroll可以轻松解决这个问题,大多数的移动框架也能轻松解决这个问题,它们内部都封装了这个效果. 一直好奇这个效果原生JS是怎么实 ...
- angular过滤器基本用法
1.过滤器主要用于数据的筛选,可以直接在模板使用 语法: {{expression | filter}} {{expression | filter | filter2}} {{expression ...
- 《C++程序设计语言(英文第四版)》【PDF】下载
<C++程序设计语言(英文第四版)>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230382177 内容简介 本书是C++领域经典的参 ...
- Android Spinner值不显示,选择列表正常
你在给adapter设置数据时,如果你是静态数据,也就是死数据,那么spinner显示没有问题,但是你如果异步进行网络请求,或者使用Volley请求的时候就要注意,你的adapter设置要在onRes ...
- AI 系列 总目录
AI 系列 答应了园区大牛 张善友 要写AI 的系列博客,所以开始了AI 系列之旅. 一.四大平台系列(百度AI.阿里ET.腾讯.讯飞) 1.百度篇 (1) 百度OCR文字识别-身份证识别 (2) 基 ...
- 来腾讯云开发者实验室 学习.NET
腾讯云开发者实验室为开发者提供了一个零门槛的在线实验平台,开发者实验室提供的能力: 零门槛扫码即可免费领取实验机器,支持使用自有机器参与,实验完成后支持保留实验成果: 在线 WEB IDE 支持 sh ...