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. POJ 3928 &amp; hdu 2492 &amp; Uva1428 PingPong 【树状数组】

    Ping pong                                                   Time Limit: 2000/1000 MS (Java/Others)   ...

  2. 【博客目录】SqlServer篇

    SqlServer系列篇   [SqlServer系列]SQLSERVER安装教程     [SqlServer系列]数据库三大范式     [SqlServer系列]表单查询     [SqlSer ...

  3. log4j配置文件详解(转)

    Log4J的配置文件(Configuration File)就是用来设置记录器的级别.存放器和布局的,它可接key=value格式的设置或xml格式的设置信息.通过配置,可以创建出Log4J的运行环境 ...

  4. Java Annotation认知(包括框架图、详细介绍、示例说明)(转)

    本文转自:http://www.cnblogs.com/skywang12345/p/3344137.html 网上很多关于Java Annotation的文章,看得人眼花缭乱.Java Annota ...

  5. 源生js惯性滚动与回弹效果

    在写移动端的APP或者页面时,经常会遇到惯性滚动与回弹效果.用插件iscroll可以轻松解决这个问题,大多数的移动框架也能轻松解决这个问题,它们内部都封装了这个效果. 一直好奇这个效果原生JS是怎么实 ...

  6. angular过滤器基本用法

    1.过滤器主要用于数据的筛选,可以直接在模板使用 语法: {{expression | filter}} {{expression | filter | filter2}} {{expression ...

  7. 《C++程序设计语言(英文第四版)》【PDF】下载

    <C++程序设计语言(英文第四版)>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230382177 内容简介 本书是C++领域经典的参 ...

  8. Android Spinner值不显示,选择列表正常

    你在给adapter设置数据时,如果你是静态数据,也就是死数据,那么spinner显示没有问题,但是你如果异步进行网络请求,或者使用Volley请求的时候就要注意,你的adapter设置要在onRes ...

  9. AI 系列 总目录

    AI 系列 答应了园区大牛 张善友 要写AI 的系列博客,所以开始了AI 系列之旅. 一.四大平台系列(百度AI.阿里ET.腾讯.讯飞) 1.百度篇 (1) 百度OCR文字识别-身份证识别 (2) 基 ...

  10. 来腾讯云开发者实验室 学习.NET

    腾讯云开发者实验室为开发者提供了一个零门槛的在线实验平台,开发者实验室提供的能力: 零门槛扫码即可免费领取实验机器,支持使用自有机器参与,实验完成后支持保留实验成果: 在线 WEB IDE 支持 sh ...