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(一) 引入方式 选择器 权重的更多相关文章

  1. python 全栈开发,Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  2. 前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器

    前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器 一丶CSS简介    叠样式表(英文全称:Cascading Style Sheets)是一种用来表现 ...

  3. Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  4. 前端(二)—— CSS的引入方式、长度与颜色单位、常用样式、选择器

    CSS的引入方式.长度与颜色单位.常用样式.选择器 一.CSS的三种引入方式 1.行间式 <!doctype html> <html> <head> <met ...

  5. CSS的引入方式和复合选择器

    CSS的引入方式 样式表 优点 缺点 范围 行内样式表 书写方便 结构样式混写 控制一个标签 内部样式表 部分结构和样式相分离 没有彻底 控制一个页面 外部样式表 完全实现结构和样式分离 需要引入 控 ...

  6. 前端-CSS-初探-注释-语法结构-引入方式-选择器-选择器优先级-01(待完善)

    目录 CSS(Cascading Style Sheet) CSS注释 CSS语法结构 CSS的三种引入方式 选择器 伪类.伪元素选择器速查 CSS选择器优先级***** 选择器相同的情况下 选择器不 ...

  7. CSS的引入方式和样式

    CSS的引入方式和样式 一.样式 行内样式 内接样式 外接样式(1.链接式 2.导入式) <!--行内样式--> <div> <p style="color: ...

  8. CSS的引入与选择器

    CSS的引入与选择器 CSS与HTML的关系 Cascading Style Sheet 即层叠样式表 在上一篇文中,已经介绍了一些非常常用的HTML标签,接下来将步入CSS的学习,如果将单纯HTML ...

  9. CSS的引入方式

    再用HTML编写的文本中,有是没能达到我们想要的效果,此时此刻我们可以用过引用CSS来控制!这不仅使得效果好而且代码层次清晰.CSS的引入方式可以分为四类: 1.链入外部样式表,就是把样式表保存为一个 ...

随机推荐

  1. POJ2942 Knights of the Round Table 点双连通分量,逆图,奇圈

    题目链接: poj2942 题意: 有n个人,能够开多场圆桌会议 这n个人中,有m对人有仇视的关系,相互仇视的两人坐在相邻的位置 且每场圆桌会议的人数仅仅能为奇书 问有多少人不能參加 解题思路: 首先 ...

  2. jquery 自定义选择器

    // HTML 代码 <body> <div id="divid1" class="divclass">白色</div> & ...

  3. Ubuntu 下 libgps 库的使用

    简介 一般 GPS 接收器会遵循美国国家海洋电子协会(National Marine Electronics Association)所指定的标准规格,其中包含传输资料的格式以及传输资料的通讯协议.那 ...

  4. Python:list 和 array的对比以及转换时的注意事项

    Python:list 和 array的对比以及转换时的注意事项 zoerywzhou@163.com http://www.cnblogs.com/swje/ 作者:Zhouwan 2017-6-4 ...

  5. springboot命令启动

    gradle打jar包命令 jar { doFirst { def jarFiles = ''; configurations.compile.collect { jarFiles += it.nam ...

  6. 【java设计模式】【结构模式Structural Pattern】装饰模式Decorator Pattern

    public class Client { public static void main(String[] args) { Component component=new ConcreteCompo ...

  7. TCP/IP的那些事--子网掩码

    当前互联网使用的主要是IPv4协议,它是第一个被广泛使用,构成现今互联网的基础的协议.但是,随着用户数量的增多,IPv4包含的IP资源在不断减少.或许你会想,不是还有IPv6吗?IPv6的容量足以应付 ...

  8. Huffman 哈夫曼编码与译码的原理剖析及C++实现

    原理 我们在信息存储时,希望以最少的空间去存储最大的数据,方便数据的传输,那么该怎样做呢? 我们想到将源信息转化为01序列存储,但是这样以来又有一个问题,就是子串匹配问题,我们为了解决这个方法,想到了 ...

  9. ABAP中的枚举对象

    枚举对象是枚举类型的数据对象.枚举对象只能包含类型为枚举类型的枚举值.ABAP从版本7.51开始支持它们. 这是一种常见的模式.在ABAP 7.51之前,人们通常用如下方式实现类似的功能: CLASS ...

  10. Jenkins 关闭和重启实现方式.

    1.关闭Jenkins 只需要在访问jenkins服务器的网址url地址后加上exit.例如我jenkins的地址http://localhost:8080/,那么我只需要在浏览器地址栏上敲下http ...