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

2.CSS 要掌握的两方面：

　　1.查找标签

　　　　　选择器

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

3.CSS 语法

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

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

p {

    color: red;

   }

4.css的四种引入方式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!--方式2 css嵌入式  不推荐-->

    <!--<style>-->

        <!--p {-->

            <!--color: red;-->

            <!--background-color: wheat;-->

        <!--}-->

    <!--</style>-->

     <!--方式3 链接式  推荐-->

    <link rel="stylesheet" href="index.css">   #首先要有个index.css文件，里面写着选择器和声明

</head>

<body>

<p>P1</p>

<p>P2</p>

<p>P3</p>

<!--方式3 行内式  不推荐-->

<!--<p style="color: rebeccapurple">P3</p>-->

</body>

</html>

方式四：导入式（了解）

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

<style type="text/css">

 

          @import"mystyle.css"; 此处要注意.css文件的路径

 

</style>

注意：

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

5.css选择器

    <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

          一 基本选择器

       1 标签选择器

        div{

            color: red;

        }

        2 id选择器

        #p2{

            color: red;

        }

       3 class选择器

        .c1{

            color: red;

        }

       4 通配选择器（了解）

        0 * 

        * {

            color: red;

        }

        二 组合选择器

        1 后代选择器

        .c2 p{

            color: red;

        }

         2 子代选择器

        .c2>p{

            color: red;

        }

        3 毗邻选择器 （了解）

        .c2+p{

            color: red;

        }

        4 兄弟选择器 （了解）

        .c2~p{

            color: red;

        }

        5.多元素选择器

        .c2 .c3,.c2~.c3{

            color: red;

            background-color: green;

            font-size: 15px;

        }

    </style>

</head>

<body>

<p class="c1">p1</p>

<p id="p2">p2</p>

<p class="c1">p3</p>

<p class="c3">P2</p>

<div class="c2">

    <div>

        <p>P3</p>

    </div>

    <p class="c3">P1</p>

</div>

<span>span</span>

<p class="c3">P2</p>

<div>DIV</div>

</body>

</html>

</form>

</body>

</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. Python3 判断文件和文件夹是否存在、创建文件夹

    Python3 判断文件和文件夹是否存在.创建文件夹 python中对文件.文件夹的操作需要涉及到os模块和shutil模块. 创建文件: 1) os.mknod(“test.txt”) 创建空文件  ...

  2. HTML5 多媒体音视频处理

    HTML5 多媒体音视频处理 版权声明:未经博主授权,内容严禁转载 ! 音频处理 - audio HTML5 Audio 音频 目前大多数音频是通过哦插件的形式来播放的. 不同浏览器在网页上播放音频的 ...

  3. 20145118 《Java程序设计》 实验报告四

    实验要求 基于Android Studio开发简单的Android应用并部署测试; 了解Android组件.布局管理器的使用: 掌握Android中事件处理机制: Android Studio安装 实 ...

  4. TP/TCP/UDP

    这两周我继续学习CCSDS协议栈中位于传输层较低位置的SCPS-TP协议,并且复习了TCP/IP体系中的TCP协议和UDP协议,通过学习和对比两个体系的协议,加深了我对SCPS-TP协议的认识和理解. ...

  5. 洛谷 P2056 采花 - 莫队算法

    萧芸斓是 Z国的公主,平时的一大爱好是采花. 今天天气晴朗,阳光明媚,公主清晨便去了皇宫中新建的花园采花.花园足够大,容纳了 n 朵花,花有 c 种颜色(用整数 1-c 表示) ,且花是排成一排的,以 ...

  6. 2016年蓝桥杯B组C/C++省赛（预选赛）题目解析

    2016年蓝桥杯B组C/C++ 点击查看2016年蓝桥杯B组省赛试题(无答案版) 第一题:煤球数目 题解 有一堆煤球,堆成三角棱锥形.具体: 第一层放1个, 第二层3个(排列成三角形), 第三层6个( ...

  7. 2016年蓝桥杯B组C/C++省赛（预选赛）试题

    2016年蓝桥杯B组C/C++ 点击查看2016年蓝桥杯B组省赛题目解析(答案) 第一题:煤球数目 有一堆煤球,堆成三角棱锥形.具体: 第一层放1个, 第二层3个(排列成三角形), 第三层6个(排列成 ...

  8. 【第八章】 springboot + mybatis + 多数据源

    在实际开发中,我们一个项目可能会用到多个数据库,通常一个数据库对应一个数据源. 代码结构: 简要原理: 1)DatabaseType列出所有的数据源的key---key 2)DatabaseConte ...

  9. 全网最详细Apache Kylin1.5安装(单节点)和测试案例

    转:http://blog.itpub.net/30089851/viewspace-2121221/ 微视频链接: Apache Kylin初识      1.版本(当前实验版本组合,版本一定要兼容 ...

  10. NYOJ 16 矩形嵌套（经典DP）

    http://acm.nyist.net/JudgeOnline/problem.php?pid=16 矩形嵌套 时间限制:3000 ms  |           内存限制:65535 KB 难度: ...