1.css功能： 对html标签的渲染和布局

2.CSS 要掌握的两方面：

　　1.查找标签

　　　　　选择器

　　2.操作标签  （对属性进行操作）

3.CSS 语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

例如： 选择是p标签的 ，把颜色变成红色

  1. p {
  2.     color: red;
  3.    }

4.css的四种引入方式

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.  
  7.     <!--方式2 css嵌入式  不推荐-->
  8.     <!--<style>-->
  9.         <!--p {-->
  10.             <!--color: red;-->
  11.             <!--background-color: wheat;-->
  12.         <!--}-->
  13.     <!--</style>-->
  14.  
  15.      <!--方式3 链接式  推荐-->
  16.     <link rel="stylesheet" href="index.css">   #首先要有个index.css文件，里面写着选择器和声明
  17. </head>
  18. <body>
  19.  
  20. <p>P1</p>
  21. <p>P2</p>
  22. <p>P3</p>
  23.  
  24. <!--方式3 行内式  不推荐-->
  25. <!--<p style="color: rebeccapurple">P3</p>-->
  26.  
  27. </body>
  28. </html>

方式四：导入式（了解）

　　将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中，使用的语法如下：

  1. <style type="text/css">
  2.  
  3.           @import"mystyle.css"; 此处要注意.css文件的路径
  4.  
  5. </style>

注意：

导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。

5.css选择器

  1.     <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.  
  7.     <style>
  8.  
  9.           一 基本选择器
  10.  
  11.        1 标签选择器
  12.         div{
  13.             color: red;
  14.         }
  15.         2 id选择器
  16.         #p2{
  17.             color: red;
  18.         }
  19.        3 class选择器
  20.  
  21.         .c1{
  22.             color: red;
  23.         }
  24.        4 通配选择器（了解）
  25.         0 * 
  26.  
  27.         * {
  28.             color: red;
  29.         }
  30.  
  31.         二 组合选择器
  32.  
  33.         1 后代选择器
  34.  
  35.         .c2 p{
  36.             color: red;
  37.         }
  38.  
  39.          2 子代选择器
  40.  
  41.         .c2>p{
  42.             color: red;
  43.         }
  44.  
  45.         3 毗邻选择器 （了解）
  46.  
  47.         .c2+p{
  48.             color: red;
  49.         }
  50.  
  51.         4 兄弟选择器 （了解）
  52.  
  53.         .c2~p{
  54.             color: red;
  55.         }
  56.  
  57.         5.多元素选择器
  58.  
  59.         .c2 .c3,.c2~.c3{
  60.             color: red;
  61.             background-color: green;
  62.             font-size: 15px;
  63.         }
  64.  
  65.     </style>
  66. </head>
  67. <body>
  68.  
  69. <p class="c1">p1</p>
  70. <p id="p2">p2</p>
  71. <p class="c1">p3</p>
  72.  
  73. <p class="c3">P2</p>
  74. <div class="c2">
  75.     <div>
  76.         <p>P3</p>
  77.     </div>
  78.     <p class="c3">P1</p>
  79. </div>
  80.  
  81. <span>span</span>
  82. <p class="c3">P2</p>
  83.  
  84. <div>DIV</div>
  85.  
  86. </body>
  87. </html>
  88.  
  89. </form>
  90. </body>
  91. </html>

python-day49--前端 css-层叠样式表的更多相关文章

  1. Python web前端 02 CSS

    Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...

  2. Python web前端 03 CSS属性

    Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...

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

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

  4. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  5. 【Python全栈-CSS】CSS入门

    CSS入门教程 参考: http://www.cnblogs.com/yuanchenqi/articles/5977825.html http://www.ruanyifeng.com/blog/2 ...

  6. Python web前端 01 HTML常用标签

    Python web前端 01 HTML常用标签 一.HTML创建项目 file ---->new project -----> 输入项目名------>创建文件夹 new dicr ...

  7. Python web前端 05 JavaScript

    Python web前端 05 JavaScript 一.获取元素 1.初识JavaScript /* .. */ #这是多行注释 // #这是单行注释 #JavaScript是一种脚本语言,是一种动 ...

  8. Python web前端 09 jQuery

    Python web前端 09 jQuery 一.三个重要网址 http://jquery.cuishifeng.cn/ #中文查询网站 http://www.bootcdn.cn/ #引入jq ht ...

  9. day 45 前端CSS

      前端CSS   CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式 ...

  10. 前端CSS编程之道-LESS

    由于前端css编写繁琐,最近开始学习LESS,用LESS编写文件.less文件可以直接编译成我们要的.css文件 学习Less 我下面是我练习时的截图,希望小伙伴也能动手自己写一下,而不是复制粘贴模式 ...

随机推荐

  1. chrome谷歌浏览器用这种方式清除缓存比较方便了，必须是调试模式才行

     chrome谷歌浏览器用这种方式清除缓存比较方便了  PS:必须是调试模式才行,可以不是手机模式 ,有些低版本浏览器可能没有这个功能.   ----------------------------- ...

  2. MockWebServer--环境

    MockWebServer是一个可脚本化的用于测试HTTP客户端的Web服务器.主要用于测试你的应用在进行HTTP.HTTPS请求时是否按照预期的行为动作.使用该工具,你可以验证应用的请求是否符合预期 ...

  3. monit

    Monit 是一个用来监测系统状态的工具,不但可以用来监视进程.服务.文件.目录.文件系统,还可以在服务 down 掉的时候自动重启服务或者当某个进程占用过多的资源的时候自动停掉进程,并且支持 Ema ...

  4. 20145335郝昊《网络攻防》Exp 4 利用nmap扫描

    20145335郝昊<网络攻防>Exp 4 利用nmap扫描 实验原理 使用msf辅助模块,nmap来扫描发现局域网中的主机ip 实验步骤 首先使用命令创建一个msf所需的数据库 serv ...

  5. 《Python程序设计（第3版）》[美] 约翰·策勒（John Zelle） 第 3 章 答案

    判断对错 1．由计算机存储和操作的信息称为数据.2．由于浮点数是非常准确的,所以通常应该使用它们,而不是int.3．像加法和减法这样的操作在mAth库中定义.4．n 项的可能排列的数目等于 n!.5． ...

  6. 【前端】javascript+jQuery实现360开机时间显示效果

    实现效果: 实现原理: 给关闭按钮绑定点击事件,点击以后触发动画效果.利用jQuery的animate方法,先让显示天气的盒子高度变为0,接着让整个包含天气和事件的盒子宽度变为0,最后通过将displ ...

  7. Python3基础 str translate 将指定字符转换成另一种特定字符

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  8. kubernetes 命令记录

    操作基本命令:   通过yaml文件创建: kubectl create -f xxx.yaml (不建议使用,无法更新,必须先delete) kubectl apply -f xxx.yaml (创 ...

  9. ZooKeeper 增加Observer部署模式提高性能

    Observer:在不伤害写性能的情况下扩展ZooKeeper. 虽然通过Client直接连接到ZooKeeper集群的性能已经很好了,可是这样的架构假设要承受超大规模的Client,就必须添加Zoo ...

  10. 论文笔记之：End-to-End Localization and Ranking for Relative Attributes

    End-to-End Localization and Ranking for Relative Attributes arXiv Paper  摘要:本文提出一种 end-to-end 的属性识别方 ...