python学习之路前端-CSS
CSS概述
css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化。
存在方式有三种:元素内联、页面嵌入和外部引入,比较三种方式的优缺点。
语法:style = 'key1:value1;key2:value2;'
- 在标签中使用 style='xx:xxx;'
- 在页面中嵌入 < style type="text/css"> </style > 块
- 引入外部css文件
必要性:美工会对页面的色彩搭配和图片的美化负责,开发人员则必须知道是如何实现的
常用的选择器
1.标签选择器
/*标签选择器,找到所有的标签应用以下样式*/
div {
color: green;
}
2.class选择器
/*class选择器,找到class=c1的所有标签,应用以下样式*/
.c1{
background-color: red;
}
3.id选择器
/*id选择器,找到标签id等于i1的标签,应用以下样式*/
#i1{
font-size: 56px;
/* color: green; */
}
4.关联选择器
/*层级选择器,找到 class=c2 下的div下的p下的class=c3标签,应用以下样式*/
.c2 div p .c3{
background-color: red;
}
5.组合选择器
/*组合选择器,找到class=c4,class=c5,class=c6,的标签,应用以下样式*/
.c4,.c5,.c6{
background-color: aqua;
}
6.属性选择器
/*属性选择器*/
input[type='text'] {width:80px;height: 20px;background-color: #2459a2}
Style样式
style的使用一共有三种形式:
1.直接设置标签的属性
<div style="font-size:20px;color:red;" ></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>style的第一种使用方式</title>
</head>
<body>
<div style="font-size:20px;color:red;" >
<span>style的第一种使用方式:直接在标签中设置</span>
</div>
</body>
</html>
2.在head头部进行设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>style的使用</title>
<style>
div {
background-color: blue;
font-size: 40px;
}
</style>
</head>
<body>
<div>
<p>style的第二种使用方式:在head头部进行设置</p>
</div>
</body>
</html>
3.将所有的style样式放到一个特定的文件中,然后在使用的地方进行引用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Style的第三种使用方式:引用已经定义好的样式文件</title>
<link rel="stylesheet" href="common.css" />
</head>
<body>
<div>Style的第三种使用方式:引用已经定义好的样式文件</div>
</body>
</html>
css文件定义的样式
div {
font-size: 50px;
background-color: aquamarine;
color: #000;
}
说明:三种方式各有利弊,请根据实际情况来进行选择
标签属性:只针对当前标签生效,不具有重用性。 head头部style:针对当前页面均有效,具有重用性,当程序有多个页面时,则需要将head style分别复制到其他的页面方才能生效 css样式文件:程序有多个页面,当多个页面都需要使用相同的style只需要在使用处引用css文件即可。 三种style可以同时使用,其优先级如下: 标签属性优先级最高 head头部style其次 css样式文件优先级最低 如果标签属性和css文件中的style不同时,则继承css样式文件中的style,如果style和css文件相同时,则标签属性会将css文件中的style给覆盖掉。
style和选择器综合应用实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--<style的使用有三种方式:1.直接设置标签的属性 2.在head头部中进行设置 3.将所有的style放到-->
<!--一个特定的文件中,然后在使用的地方进行引用,三种方式各有利弊,根据实际情况来选择使用>-->
<!--<link rel="stylesheet" href="common.css" />-->
<style>
/*标签选择器,找到所有的标签应用以下样式*/
div{
color: green;
}
/*id选择器,找到标签id等于i1的标签,应用以下样式*/
#i1{
font-size: 56px;
/* color: green; */
}
/*class选择器,找到class=c1的所有标签,应用以下样式*/
.c1{
background-color: red;
}
/*层级选择器,找到 class=c2 下的div下的p下的class=c3标签,应用以下样式*/
/*.c2 div p a{*/
/**/
/*}*/
.c2 div p .c3{
background-color: red;
}
/*组合选择器,找到class=c4,class=c5,class=c6,的标签,应用以下样式*/
.c4,.c5,.c6{
background-color: aqua;
}
/*属性选择器*/
input[type='text'] {width:80px;height: 20px;background-color: #2459a2}
</style>
</head>
<body>
用户名:<input type="text"/>
<div class="c4">寒风飘飘落叶</div>
<div class="c5">军队是一朵绿化</div>
<div class="c6">亲爱的战友你不要想家,不要想妈妈</div> <div class="c2">
<div></div>
<div>
<p>
<span>声声我日夜呼唤,多少句心里话</span>
<a class="c3">不要离别时两眼泪花,军营是咱温暖的家</a>
</p>
</div>
</div>
<div class="c3">妈妈你不要牵挂,孩儿我已经长大</div> <span class="c1">站岗执勤是保卫国家,风吹雨打都不怕</span>
<div class="c1">衷心的祝愿妈妈,愿妈妈健康长寿</div>
<a class="c1">待到庆功时再回家,再来看望好妈妈</a> <a id="i1">baidu</a>
<div>99</div>
<div>99</div>
<div>99</div>
<div>
<div>asdf</div>
</div>
</body>
</html>
background系列
1.background-color
背景色有如下三种表现形式
background-color: #FF69B4;
background-color: rgb(25,180,10);
background-color: red;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.c1{
color: red;
font-size: 32px;
height: 150px;
width: 600px;
}
</style>
</head>
<body>
<div class="c1">故乡有位好姑娘,我时常梦见她</div>
<div style="width: 600px;">
<div style="width: 20%;background-color: antiquewhite;float: left">军中的男儿也有情</div>
<div style="width: 80%;background-color: palegoldenrod;float: left">也愿伴你走天涯</div>
</div>
</body>
</html>
2.background-image
可以像定义样式一样将图片的属性在style中进行定义
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.img{
background-image: url("junren.gif");
height: 150px;
width: 400px;
background-repeat: no-repeat;
}
.img2{
background-image: url("guniang.jpg");
height: 50px;
width: 50px;
background-position: 84px -58px;
}
</style>
</head>
<body>
<div class="img"></div>
<div class="img2"></div>
</body>
</html>
3. background-repeat
显示的背景图片是否重复填充(no-repeat不重复填充)
4.background-position
根据实际需要调整background-position来展示不同的图片、内容
应用:将京东的购物车图案显示为"小房子"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.img {
background-image: url(jd2015img.png);
height: 10px;
width:10px;
background-position: 87px 18px;
}
</style>
</head>
<body>
<div class="img"></div>
</body>
</html>
border
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>border的使用</title>
</head>
<body>
<div style="width: 500px;height: 10px;border: 1px solid red;"></div>
<br/>
<div style="width: 500px;height: 10px;border: 1px dotted blue;"></div>
<br/>
<div style="width: 500px;height: 10px;border: 1px dashed green;"></div>
</body>
</html>
marign和padding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin和padding的使用</title>
</head>
<body>
<h2>margin</h2>
<div style="border: 1px solid red;height: 60px;">
<div style="background-color: green;height: 40px;margin-top: 20px;"></div>
</div>
<h2>padding</h2>
<div style="border:1px solid red;height: 70px;">
<div style="background-color: yellowgreen;height: 40px;padding-top: 30px;"></div>
</div>
</body>
</html>
display
1.display的属性值
display none:隐藏,使其内容不显示
display block:使行内标签具有块级标签的属性
display inline:使行内标签具有块级标签的属性
display inline-block:使行内标签具有块级标签的属性
2.display应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display的使用</title>
</head>
<body>
<!--display none:隐藏,使其内容不显示-->
<span style="color: red;font-size: 10px;">span标签是行内标签,使用display标签前的效果</span>
<br/>
<span style="color: red;font-size: 40px; display: none;">span标签是行内标签,使用display none标签后的效果</span>
<br/>
<!--display block:使行内标签具有块级标签的属性-->
<span style="color: red;font-size: 20px;">span标签是行内标签,有多少内容占多少空间</span>
<span style="background-color: aqua;font-size: 5px;height: 20px;display: block;">使行内标签具有块级标签的属性,占据整行</span>
<!--display inline:使行内标签具有块级标签的属性-->
<div style="background-color: blueviolet;font-size: 20px;">div是块级标签,不管内容有多少都是占据一行</div>
<div style="background-color: cornflowerblue;font-size: 20px;display: inline">使div块级标签具有行内标签的属性</div>
<!--display inline-block:使行内标签具有块级标签的属性-->
<span style="color: red;font-size: 20px;">span标签是行内标签,有多少内容占多少空间</span>
<span style="background-color: aqua;font-size: 5px;height: 50px;display: inline-block;">使行内标签既具有块级标签的属性又具有行内标签的属性,占据整行</span>
</body>
</html>
cursor
超链接
python学习之路前端-CSS的更多相关文章
- python学习之路前端-jQuery
jQuery简介 JQuery是继prototype之后又一个优秀的Javascript库.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF1.5+, Safa ...
- python学习之路前端-JavaScript
JavaScript简介 JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本 ...
- python学习之路前端-HTML
HTML概述 HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以 ...
- python学习之路前端-Dom
Dom简介 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为 ...
- python学习之路------你想要的都在这里了
python学习之路------你想要的都在这里了 (根据自己的学习进度后期不断更新哟!!!) 一.python基础 1.python基础--python基本知识.七大数据类型等 2.python基础 ...
- Python学习之路-Day1-Python基础
学习python的过程: 在茫茫的编程语言中我选择了python,因为感觉python很强大,能用到很多领域.我自己也学过一些编程语言,比如:C,java,php,html,css等.但是我感觉自己都 ...
- Python学习之路【第一篇】-Python简介和基础入门
1.Python简介 1.1 Python是什么 相信混迹IT界的很多朋友都知道,Python是近年来最火的一个热点,没有之一.从性质上来讲它和我们熟知的C.java.php等没有什么本质的区别,也是 ...
- python学习之路-day2-pyth基础2
一. 模块初识 Python的强大之处在于他有非常丰富和强大的标准库和第三方库,第三方库存放位置:site-packages sys模块简介 导入模块 import sys 3 sys模 ...
- Python学习之路-Day2-Python基础3
Python学习之路第三天 学习内容: 1.文件操作 2.字符转编码操作 3.函数介绍 4.递归 5.函数式编程 1.文件操作 打印到屏幕 最简单的输出方法是用print语句,你可以给它传递零个或多个 ...
随机推荐
- urlopen()&urlretrieve()
1.urlopen()方法 urllib.request.urlopen(url[,data[,proxies]]) 创建一个表示远程url的类文件对象,然后像本地文件一样的操作这个类文件对象来获取远 ...
- JavaScript 中常见的内存泄露陷阱(摘)
内存泄露是每个开发者最终都不得不面对的问题.即便使用自动内存管理的语言,你还是会碰到一些内存泄漏的情况.内存泄露会导致一系列问题,比如:运行缓慢,崩溃,高延迟,甚至一些与其他应用相关的问题. 什么是内 ...
- 去除Eclipse中js报错的问题
第一步: 去除eclipse的JS验证: 将windows->preference->Java Script->Validator->Errors/Warn ...
- [LeetCode] Circular Array Loop 环形数组循环
You are given an array of positive and negative integers. If a number n at an index is positive, the ...
- 织云Lite发布:详解包管理核心能力
本文由 织云平台团队 发布于 腾讯云云+社区 织云Lite发布 腾讯织云自动化运维体系经过10年技术积淀,维护近万个业务模块,超过20万节点.鉴于业界朋友的呼声,我们将织云的核心功能独立抽象出来,凝结 ...
- 【基础】EM 还是 REM?这是一个问题!
简言 应用象EM 和 REM这种相对长度单位进行页面排版是WEB开发中的最佳实践.在页面排版中较好应用EM 和 REM,根据设备尺寸缩放显示元素的大小.这就使得组件在不同设备上都达到最佳的显示效果成为 ...
- 最快的3x3中值模糊
10.1国庆后,知名博主:laviewpbt http://www.cnblogs.com/Imageshop/ 发起了一个优化3x3中值模糊的小活动. 俺也参加其中,今天博主laviewpbt ...
- ABP领域层知识回顾之---工作单元
1. 前言 在上一篇博文中(http://www.cnblogs.com/xiyin/p/6842958.html) 我们讲到了ABP领域层的仓储.这边博文我们来讲 工作单元.个人觉得比较重要.文 ...
- ●BZOJ 2337 [HNOI2011]XOR和路径
题链: http://www.lydsy.com/JudgeOnline/problem.php?id=2337题解: 概率dp, 因为异或的每一位之间没有关系,我们就依次考虑每一位k.(即边权要么为 ...
- ●BZOJ 3129 [Sdoi2013]方程
题链: http://www.lydsy.com/JudgeOnline/problem.php?id=3129 题解: 容斥,扩展Lucas,中国剩余定理 先看看不管限制,只需要每个位置都是正整数时 ...