Python开发【前端】：CSS

Kylin Zhang

发表于 2016-11-10 13:13:57

css样式选择器

标签上设置style属性：

  1. <body>
  2.     <div style="height: 48px;">第一层</div>
  3.     <div style="height: 48px;">第二层</div>
  4.     <div style="height: 48px;">第三层</div>
  5. </body>

直接在div里写相对应的样式

id选择器

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <title>Title</title>
  4.     <style>
  5.         #i1{
  6.             background-color: #2459a2;
  7.             height: 48px;
  8.         }
  9.     </style>
  10. </head>
  11. <body>
  12.     <div id="i1">第一层</div>
  13. </body>

把样式写到head里面，以#开头命名，调用对应样式在div里用id属性指定相应的id名

class选择器（最常用）

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <title>Title</title>
  4.     <style>
  5.         .c1{
  6.             background-color: #2459a2;
  7.             height: 48px;
  8.         }
  9.     </style>
  10. </head>
  11. <body>
  12.      <div class="c1">第一层</div>
  13.      <div class="c1">第二层</div>
  14.      <div class="c1">第三层</div>
  15. </body>

把样式写到head里面，以.开头命名，调用对应样式在div里用class属性指定相应的类名，可以多个div调用

标签选择器

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <title>Title</title>
  4.     <style>
  5.         div{
  6.             background-color: #2459a2;
  7.             height: 48px;
  8.         }
  9.     </style>
  10. </head>
  11. <body>
  12.      <div >第一层</div>
  13.      <div >第二层</div>
  14.      <div >第三层</div>
  15. </body>

标签选择器，设置div样式，则body里所有的div标签内的内容都会应用此内容

关联选择器（层级选择器）

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <title>Title</title>
  4.     <style>
  5.         span div{
  6.             background-color: #2459a2;
  7.             height: 48px;
  8.         }
  9.     </style>
  10. </head>
  11. <body>
  12.      <div >第一层</div>
  13.      <span>
  14.         <div >span里的div</div>
  15.      </span>
  16.      <div >第三层</div>
  17. </body>

只让span里面的div标签应用样式，可多层嵌套

组合选择器

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <title>Title</title>
  4.     <style>
  5.         #i1,#i2,#i3{
  6.             background-color: #2459a2;
  7.             height: 48px;
  8.         }
  9.     </style>
  10. </head>
  11. <body>
  12.      <div id="i1">第一层</div>
  13.      <div id="i2">第一层</div>
  14.      <div id="i3">第一层</div>
  15. </body>

组合选择器，加,号，相同样式多命名

属性选择器

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <title>Title</title>
  4.     <style>
  5.         input[name="James"]{width: 20px;height: 20px;}
  6.     </style>
  7. </head>
  8. <body>
  9.     <input type="text" name="James">
  10.     <input type="text">
  11.     <input type="password">
  12. </body>

根据属性进行筛选匹配，只有第一个input标签匹配上对应的样式

css样式引用

css样式优先级

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <title>Title</title>
  4.     <style>
  5.         .c1{
  6.             background-color: red;
  7.             color: white;
  8.         }
  9.         .c2{
  10.             background-color:black;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <div class="c2 c1" style="color:palegreen" >第一层</div>
  16. </body>

如果样式不冲突，则样式都应用，如果样式有冲突，style样式优先级最大，其次其他的安装编写的顺序，越靠近越优先

文件方式引用样式

定义样式并保存到commons.css文件

  1. .c1{
  2. background-color: red;
  3. color: white;
  4. }
  5. .c2{
  6. background-color:black;
  7. }

引用commons.css文件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" href="commons.css">
  7. </head>
  8. <body>
  9.     <div class="c2 c1" style="color:palegreen" >第一层</div>
  10. </body>
  11. </html>

　　

css样式边框

基本边框

  1. <body>
  2.     <div style="border: 1px dotted red;">
  3.         第一层边框
  4.     </div>
  5. <!--border：边框宽度  solid：边框样式实线（dotted虚线）颜色：red-->
  6. </body>

边框其他样式

  1. <body>
  2.     <div style="height: 48px;
  3.     width: 80%;
  4.     border: 1px solid brown;
  5.     font-size: 16px;
  6.     text-align: center;
  7.     line-height: 48px;
  8.     ">第二层边框</div>
  9.  
  10.     <!--height: 48px 边框高度-->
  11.     <!--width: 80% 宽度页面的80%-->
  12.     <!--border: 1px solid brown 边框宽度、样式、颜色-->
  13.     <!--font-size: 16px;  字体大小-->
  14.     <!--text-align: center; 水平居中-->
  15.     <!--line-height: 48px; 垂直居中-->
  16. </body>

-》》点击显示效果

CSS样式浮动

初识float

  1. <body>
  2.     <div style="width: 20%;float: left;">左边</div>
  3.     <div style="width: 80%;float: right;">右边</div>
  4. </body>

-》》点击显示效果

float测试页

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <title>Title</title>
  4.     <style>
  5.         .pg-header{
  6.             height: 38px;
  7.             background-color: #dddddd;
  8.             line-height: 38px;
  9.         }
  10.     </style>
  11. </head>
  12. <body style="margin: 0 auto;">
  13.     <div class="pg-header">
  14.         <div style="float: left;">*收藏本站</div>
  15.         <div style="float: right;">
  16.             <a>登录</a>
  17.             <a>注册</a>
  18.         </div>
  19.     </div>
  20.     <div style="width: 300px;border: 1px solid red;">
  21.         <div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>
  22.         <div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>
  23.         <div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>
  24.         <div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>
  25.         <div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>
  26.         <div style="clear: both"></div>
  27.     </div>
  28. </body>

-》》点击显示效果

注：<body style="margin: 0 auto;">消除与浏览器顶部之间的缝隙；<div style="clear: both"></div>子边框浮动后，显示父边框的边框线

CSS样式display

块级标签和行内标签相互转换

  1. <body>
  2.     <div style="display: inline">块级</div>
  3.     <span style="display: block">行内</span>
  4. </body>

-》》点击显示效果

注：display:inline 转换为行内标签；display：block转换为块级标签；另还有display：none不显示

行内标签：无法设置高度，宽度，padding margin
块级标签：设置高度，宽度，padding margin

  1. <body>
  2.     <span style="display: inline-block;height: 50px;width: 70px">行内</span>
  3.     <div style="display: inline">块级</div>
  4. </body>

-》》点击显示效果

注：display:inline-block 既有inline的属性（默认自己有多少占多少）又有block的属性（可以设置高度、宽度、padding、margin）

CSS样式边距

外边距margin

  1. <body>
  2.     <div style="border: 2px solid red;height: 70px;">
  3.         <div style="background-color: green;height: 50px;
  4.         margin-top: 25px;"></div>
  5.     </div>
  6. </body>

-》》点击显示效果

注：margin-top：25px表示外边距，子边框与父边框top之间的距离为25px

内边距padding

  1. <body>
  2.     <div style="border: 2px solid red;height: 70px;">
  3.         <div style="background-color: green;height: 50px;
  4.         padding-top: 25px;"></div>
  5.     </div>
  6. </body>

-》》点击显示效果

注：padding-top：25px表示内边距，子边框内自己与top之间的距离为25px

内容来源：http://www.cnblogs.com/lianzhilei/p/6046131.html

Python开发【第十篇】：CSS （二）的更多相关文章

  1. Python开发【第一篇】：目录

    本系列博文包含 Python基础.前端开发.Web框架.缓存以及队列等,希望可以给正在学习编程的童鞋提供一点帮助!!! Python开发[第一篇]:目录 Python开发[第二篇]:初识Python ...

  2. Python开发【第二篇】：初识Python

    Python开发[第二篇]:初识Python   Python简介 Python前世今生 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏 ...

  3. Python 学习 第十篇 CMDB用户权限管理

    Python 学习 第十篇 CMDB用户权限管理 2016-10-10 16:29:17 标签: python 版权声明:原创作品,谢绝转载!否则将追究法律责任. 不管是什么系统,用户权限都是至关重要 ...

  4. Python开发【第一篇】:目录

    本系列博文包含Python基础.前端开发.Web框架.缓存以及队列等,希望可以给正在学习Python编程的朋友们提供一点帮助! .Python开发[第一篇]:目录 .Python开发[第二篇]:初始P ...

  5. Python开发【第九篇】：HTML （二）

    python[第十四篇]HTML基础 时间:2016-08-08 20:57:27      阅读:49      评论:0      收藏:0      [点我收藏+] 标签: 什么是HTML? H ...

  6. Python开发【第一篇】基础题目二

    1 列表题 l1 = [11, 22, 33] l2 = [22, 33, 44] # a. 获取l1 中有,l2中没有的元素 for i in l1: if i not in l2: # b. 获取 ...

  7. 跟着老男孩教育学Python开发【第一篇】：初识Python

    Python简介 Python前世今生 Python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解 ...

  8. Python开发【第一篇】：初识Python

    初识python 一.python简介 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解 ...

  9. [Python笔记]第十篇:模块续

    requests Python标准库中提供了:urllib等模块以供Http请求,但是,它的 API 太渣了.它是为另一个时代.另一个互联网所创建的.它需要巨量的工作,甚至包括各种方法覆盖,来完成最简 ...

  10. Python开发【第二篇】：初始Python

    Python的前世今生 Python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,中国人称他为龟叔,他在圣诞节期间在阿姆斯特丹为了打发时间,决定开发一个新的脚本 ...

随机推荐

  1. java单点登录系统CAS的简单使用

    转:http://blog.csdn.net/yunye114105/article/details/7997041 背景 有几个相对独立的java的web应用系统, 各自有自己的登陆验证功能,用户在 ...

  2. 转:Google技术开发指南：给大学生自学的建议

    原文来自于:http://blog.jobbole.com/80621/ 技术开发指南 想要成为成功的软件工程师,必须拥有坚实的计算机科学的基础.本指南针对大学生,给出一条自学途径,让学生以科班和非科 ...

  3. 一个用得比较广的微信API的XXE外部实体注入漏洞

    文件地址: https://github.com/dodgepudding/wechat-php-sdk/raw/master/wechat.class.php 代码: <?php /** * ...

  4. Infinite Scroll–无限分页

    一.前言 现在有很多网站都有这样的交互 1.当你往下浏览页面时,页面会自动去异步加载数据. 无限分页效果 infinite scroll 效果图 –ifxoxo.com 2.在页面下方有一个“点击加载 ...

  5. BZOJ 3240 矩阵游戏

    Description 婷婷是个喜欢矩阵的小朋友,有一天她想用电脑生成一个巨大的\(n\)行\(m\)列的矩阵(你不用担心她如何存储).她生成的这个矩阵满足一个神奇的性质:若用\(F[i][j]\)来 ...

  6. couchdb and redis

    http://www.jdon.com/artichect/scalable5.html http://www.dedecms.com/knowledge/data-base/nosql/2012/0 ...

  7. Flux工作流

    Flux工作流 模型层(M)和控制层(C) Flux 只是这个模式的一个例子. 很多代码和一堆重复的模板 在其他JavaScript环境中实现重用. 强大又容易配置的模块化打包工具Webpack来简化 ...

  8. Unity NGUI 3.0.4版本 制作网络版斗地主

    Unity NGUI 3.0.4版本 @by 灰太龙  开发环境 Win7旗舰版 Unity 4.2.1f4 本文就写个开门篇,告诉大家怎么用NGUI,第一步导入NGUI 3.0.4版本! 1.启动U ...

  9. Dungeon Master

    poj2251:http://poj.org/problem?id=2251 题意:给你一个三维的立方体,然后给你一个起点,和终点的坐标.然后让你求从起点到终点的最短路程.题解:该题就是求三维的最短路 ...

  10. Emag eht htiw Em Pleh

    Emag eht htiw Em Pleh This problem is a reverse case of the problem 2996. You are given the output o ...