python-day49--前端 css-层叠样式表
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-层叠样式表的更多相关文章
- Python web前端 02 CSS
Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...
- Python web前端 03 CSS属性
Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...
- 前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器
前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器 一丶CSS简介 叠样式表(英文全称:Cascading Style Sheets)是一种用来表现 ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位（position）z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
- 【Python全栈-CSS】CSS入门
CSS入门教程 参考: http://www.cnblogs.com/yuanchenqi/articles/5977825.html http://www.ruanyifeng.com/blog/2 ...
- Python web前端 01 HTML常用标签
Python web前端 01 HTML常用标签 一.HTML创建项目 file ---->new project -----> 输入项目名------>创建文件夹 new dicr ...
- Python web前端 05 JavaScript
Python web前端 05 JavaScript 一.获取元素 1.初识JavaScript /* .. */ #这是多行注释 // #这是单行注释 #JavaScript是一种脚本语言,是一种动 ...
- Python web前端 09 jQuery
Python web前端 09 jQuery 一.三个重要网址 http://jquery.cuishifeng.cn/ #中文查询网站 http://www.bootcdn.cn/ #引入jq ht ...
- day 45 前端CSS
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式 ...
- 前端CSS编程之道-LESS
由于前端css编写繁琐,最近开始学习LESS,用LESS编写文件.less文件可以直接编译成我们要的.css文件 学习Less 我下面是我练习时的截图,希望小伙伴也能动手自己写一下,而不是复制粘贴模式 ...
随机推荐
- Linux基础命令---cal
cal cal指令可以显示一个日历信息,如果没有指定选项和参数,那么就会显示当前的月份. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.SUSE.openSUSE.Fedora ...
- 好用的在线web页面测试，移动页面测试工具webpagetest使用图文教程
好用的在线web页面测试,移动页面测试工具webpagetest使用图文教程 http://www.webpagetest.org/ 1.打开主页,输入网址,点击 START TEST 按钮开始测试 ...
- python之路----面向对象进阶一
一.isinstance和issubclass isinstance(obj,cls)检查是否obj是否是类 cls 的对象 class Foo(object): pass obj = Foo() i ...
- Python入门之面向对象编程(一)面向对象概念及优点
概念 谈到面向对象,很多程序员会抛出三个词:封装.继承和多态:或者说抽象.一切都是对象之类的话,然而这会让初学者更加疑惑.下面我想通过一个小例子来说明一下 面向对象一般是和面向过程做对比的,下面是一个 ...
- bzoj1660 / P2866 [USACO06NOV]糟糕的一天Bad Hair Day
P2866 [USACO06NOV]糟糕的一天Bad Hair Day 奶牛题里好多单调栈..... 维护一个单调递减栈,存每只牛的高度和位置,顺便统计一下答案. #include<iostre ...
- shell分析http日志
http状态码1字头----信息,服务器收到请求,需要请求者继续执行操作2字头----成功,操作被成功接收并处理3字头----重定向,需要进一步的操作以完成请求4字头----客户端错误,请求包含语法错 ...
- git和github的简单配合使用
1.安装git,TortoiseGit. 2.用帐号A登陆github,建立一个版本仓库test1.用默认值创建就可以了. 3.在本机用TortoiseGit克隆仓库test1.直接选https开头的 ...
- 20145310《网络对抗技术》Exp6 信息搜集技术
实验内容 本次实验的目标是掌握信息搜集的最基础技能.具体有 (1)各种搜索技巧的应用 (2)DNS IP注册信息的查询 (3)基本的扫描技术:主机发现.端口扫描.OS及服务版本探测.具体服务的查点 ( ...
- 探索Java8：(三)Predicate接口的使用
上一篇学习了下Function接口的使用,本篇我们学习下另一个实用的函数式接口Predicate. Predicate的源码跟Function的很像,我们可以对比这两个来分析下.直接上Predicat ...
- Splay简介
Splay树,又叫伸展树,可以实现快速分裂合并一个序列,几乎可以完成平衡树的所有操作.其中最重要的操作是将指定节点伸展到指定位置, 目录 节点定义 旋转操作 伸展操作 插入操作 删除操作 lower_ ...