css,又称样式重叠表,如今的网页的样式基本是div+css写出来的,功能十分强大,要想在html文件中引入css文件需要在<head></head>标签内输入一行:<link  rel=" stylesheet "  type=" text/css "  href=" XXX.css ">

  css的一些基本样式也不一 一做介绍了,这个在手册以及一些学习网站上都会有,大家可以自行查阅;

  css中有四种不同的选择器:1.类选择器(class选择器);2.id选择器;3.html元素选择器;4.通配符选择器;

  1.class选择器的使用:

  . 类选择器名{                                           //类选择器前面的  .   一定要加

    属性名:属性值;

    ...

  }

  2.id选择器的使用:

  # id选择器名{           //在样式表中,id选择器的优先级最高

    属性名:属性值;

    ...

  }

  3.html元素选择器:

  html标签名{            //  eg:   a{    }     img{    }     body{  }   等等

    属性名:属性值;       //当定义一个html元素选择器后,所有该元素的样式都会发生改变

    ...

  }

  //同一html元素选择器中也可进行分类处理

  html标签名.类名{    // eg:   a . cls1 {                a . cls2 {

    属性名:属性值;           属性名:属性值;     属性名:属性值;     

    ...                   ...            ...

  }                    }             }

  /* 应用到页面中   <a  class="cls1">    这个会渲染出a.cls1的样式

          <a  class="cls2">     这个会渲染出a.cls2的样式 */

  4.通配符选择器:

  * {             //通配符选择器会作用于所有的样式,大部分用来定义初始化所有内外页边距,但是其优先级是最低的

    属性名:属性值;    //通常一些有经验的web前端工程师习惯性把页边距清零

    ...            //margin:0px ;   padding:0px;

  }

  四个选择器的优先级:  id选择器 > class选择器 > html元素选择器 > 通配符选择器 ;

  父子选择器:                                //eg:   <span="id">我<span>这里</span>有<span>一段</span>代码</span>

  # id {               // " 我 ",“ 有 ” ,“ 代码 ”  会渲染这个样式

    属性名:属性值;            

  }

  # id  span{            // “ <span>这里</span>”  会渲染这个样式

    属性名:属性值;

  }

  # id span span {         // “ <span>一段</span> ”  会渲染这个样式

    属性名:属性值; 

  }

  父子选择器总结:父子选择器中可以有多层级(但在实际开发中不建议超过三层),

          父子选择器有严格的层级关系;

          任何类型的选择器都可以有父子选择器;

  多个css文件可以相互引用,使用@import  url(“被引入的路径和文件名”)指令引入 ;

有关css的选择器优先级以及父子选择器的更多相关文章

  1. css引入方式优先级以及不同选择器的优先级区别

    我们都知道css有3种基本设置方式即 1.行内也叫嵌入式 例如: <div style='background:red'></div> 2.内联式,在html文件中用style ...

  2. 深入理解CSS选择器优先级

    题外话 今天把 <CSS REFACTORING>(中文名叫<CSS重构:样式表性能调优>)电子书粗略的浏览了一遍,这本书很薄,150页左右,首先是介绍了什么是重构并举了两个简 ...

  3. CSS学习之选择器优先级与属性继承

    CSS学习之选择器优先级与属性继承 选择器优先级 其实选择器是具有优先级的,我们来看下面这一组案例: <!DOCTYPE html> <html lang="en" ...

  4. 伪元素选择器,选择器优先级,CSS修改文字属性,CSS修改字体属性,CSS修改其他属性

    伪元素选择器 未使用元素选择器的效果 第一行:伪元素选择器:选择部分内容 第二行:伪元素选择器:选择部分内容 伪元素选择器:选择部分内容 伪元素选择器:选择部分内容 ::selection:选择指定元 ...

  5. CSS选择器优先级

    1.类的覆盖顺序和应用的时候引用的顺序没关系,覆盖顺序取决于类定义的顺序     例如: .a{ color:red } .b{ color:green }     由于b晚于a定义,所以b覆盖a,反 ...

  6. css几个优先级测试和!important

    css样式不加!important情况下的有默认优先级 ,用!important提高优先级,最常见的css样式选择器的优先级测试.之前博文里也用到了提升优先级的方法: 测试结果:加了!importan ...

  7. css笔记09:选择器优先级

    1. (1) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  8. python 46 css组合选择器 及优先级 、属性选择器

    一:css组合选择器 特性:每个选择器位可以为任意基本选择器或选择器组合 选择器分为以下几类: 群组选择器,子代(后代)选择器,相邻(兄弟)选择器,交集选择器,多类名选择器 1.群组选择器:    d ...

  9. css知多少(6)——选择器的优先级

    1. 引言 上一节<css知多少(5)——选择器>最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两个选择器都是针对<span>的 ...

随机推荐

  1. kswapd和pdflush

    首 先,它们存在的目的不同,kswap的作用是管理内存,pdflush的作用是同步内存和磁盘,当然因为数据写入磁盘前可能会换存在内存,这些缓存真正写 入磁盘由三个原因趋势:1.用户要求缓存马上写入磁盘 ...

  2. 3.Linux的远程管理及网络下载

    3.1 Linux的远程管理 3.1.1 远程管理概述 什么是远程管理: 1.为什么需要远程管理: 服务器通常是Linux系统,而服务器不可能一直在身边,所以就需要远程来操作服务器 企业中通常需要集群 ...

  3. 121. Best Time to Buy and Sell Stock(动态规划)

    Say you have an array for which the ith element is the price of a given stock on day i. If you were ...

  4. 《hello-world》第八次团队作业:Alpha冲刺-Scrum Meeting 5

    项目 内容 这个作业属于哪个课程 2016级计算机科学与工程学院软件工程(西北师范大学) 这个作业的要求在哪里 实验十二 团队作业8:软件测试与Alpha冲刺 团队名称 <hello--worl ...

  5. 【Codeforces 1106E】Lunar New Year and Red Envelopes

    [链接] 我是链接,点我呀:) [题意] 给你k个红包,每个红包可以在si..ti的时间范围内拿走. 抢完红包之后你得到wi元,然后你需要在di+1时刻才能继续抢红包 时间是线性的从1..n 然后某个 ...

  6. bupt summer training for 16 #8 ——字符串处理

    https://vjudge.net/contest/175596#overview A.设第i次出现的位置左右端点分别为Li,Ri 初始化L0 = 0,则有ans = sum{ (L[i] - L[ ...

  7. 如何实现在scrapy调试爬虫

    # -*- coding:utf-8 -*- from scrapy.cmdline import execute import sys import os '''在爬虫文件夹下面自定义一个main. ...

  8. CODEVS——T 1049 棋盘染色

    http://codevs.cn/problem/1049/  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解  查看运行结果     题目描述 Descr ...

  9. Spring MVC-视图解析器(View Resolverr)-XML视图解析器(Xml View Resolver)示例(转载实践)

    以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_xmlviewresolver.htm 说明:示例基于Spring MVC 4.1 ...

  10. N天学习一个linux命令之ssh

    用途 通过加密连接,远程登录主机和在远程主机执行命令,也可以用于转发x11和tcp,也可用于搭建VPN.第一次连接时,会弹出远程主机公钥指纹确认信息,通过这个方式防止中间人攻击. 用法 ssh [op ...