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. svn导出文件夹到另外目录export

    svn导出文件夹到另外目录export 2.选择目录,下面两个选项不用勾选 3.有存在的文件选择overwrite覆盖,勾选下面的同样操作

  2. 容易遗忘的JS知识点整理

    1.hasOwnProperty相关 为了判断一个对象是否包含自定义属性而不是原型链上的属性,我们需要使用继承自 Object.prototype 的 hasOwnProperty方法.hasOwnP ...

  3. python之路----面向对象的多态特性

    多态 多态指的是一类事物有多种形态 动物有多种形态:人,狗,猪 import abc class Animal(metaclass=abc.ABCMeta): #同一类事物:动物 @abc.abstr ...

  4. 含有虚函数的类sizeof大小

    #include <iostream> using namespace std; class Base1{ virtual void fun1(){} virtual void fun11 ...

  5. SNMP学习笔记之Linux下安装和配置SNMP

    注意:本篇安装用户是root,非root用户启动的时候会报缺少文件错误. 一.安装SNMP 1.1.下载Net-SNMP的源代码 选择一个SNMP版本,比如5.7.1,下载地址如下:http://so ...

  6. Android项目开发三

    微博客户端开发 本周学习计划 运用OAuth相关知识,解决上周出现的微博验证问题. 看懂微博客户端登录.用户主页等功能代码. 将程序中存在的问题解决. 实际完成情况 本周继续研究了OAuth相关知识, ...

  7. [noip模拟题]LGTB 玩THD

    LGTB 最近在玩一个类似DOTA 的游戏名叫THD 有一天他在守一座塔,对面的N 个小兵排成一列从近到远站在塔前面每个小兵有一定的血量hi,杀死后有一定的金钱gi 每一秒,他都可以攻击任意一个活着的 ...

  8. linux如何删除行首的空格

    答: sed 's/^ *//' jello.txt > hello.txt

  9. windows的gvim总是报错: +iconv fencview.vim

    iconv是用来转换gvim文件的编码的, 需要插件: iconv.dll gvim7.3的文件目录结构: vim/vim73是它的核心文件, 而vimfiles是扩展文件, 里面的plugin是专门 ...

  10. P4396 [AHOI2013]作业

    题目链接 luogu4396 思路 唯有水题暖人心 咕了4天,今天跟着std对拍才做出来不得不说题解真的水的一批 先离散化一下 第一问差分询问,权值树状数组套一套就好了 \(nlog_{n}\) 第二 ...