D15——C语言基础学PYTHON
C语言基础学习PYTHON——基础学习D15
20180926内容纲要：
1、CSS介绍
2、CSS的四种引入方式
3、CSS选择器
4、CSS常用属性
5、小结
6、练习
1 CSS介绍
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
编程工具：
记事本：使用Windows系统自带的记事本可以编辑网页。只需要在保存文档时，以.html为后缀名进行保存即可。
Dreamweaver：它与Flash、Fireworks并称网页三剑客。Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别开发的视觉化网页开发工具，利用它可以轻而易举地制作出充满动感的网页。
功能介绍：
CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。
CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。
2 CSS四种引入方式
（1）行内式
行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，代码的重用性不够高，不推荐使用，但如果只是个别标签可以这么做。
<div style="background-color: #2459a2; height:48px;"></div>
（2）嵌入式
嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1 {
background-color: teal;
height: 48px;
}
.c1{
background-color: teal;
height: 48px;
}
</style>
</head>
（3）链接式
将一个.css文件引入到HTML文件中。
首先创建一个Stylesheet，存为common.css
.c1{
background-color: yellow;
color: black;
}
.c2{
font-size: 28px;
color: #2459a2;
}
引用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="commons.css"/>
</head>
（4）导入式
将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
@import "commons.css";
</style>
</head>
3 CSS选择器
（1）id选择区
（2）class选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1 {
background-color: teal;
height: 48px;
}
.c1{
background-color: teal;
height: 48px;
}
</style>
</head>
<body>
<div style="background-color: #2459a2; height:48px;"></div>
<div id="i1"></div>
<div class="c1"></div>
<span class="c1"></span>
<div class="c1"></div>
</body>
</html>
（3）标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background-color:black;
color: white;
}
span div{
background-color:green;
color: yellow;
}
input[type="text"]{width: 100px;height: 200px;}
</style>
</head>
<body>
<div>1</div>
<span>
<div>1</div>
</span>
<div>1</div>
<div>1</div>
<input type="text" />
<input type="password" />
<input class="c3" type="password" n="kanghui" />
</body>
</html>
（4）层级选择器（空格）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 .c2 div{
background-color:black;
color: white;
}
span div{
background-color:green;
color: yellow;
}
</style>
</head>
（5）组合选择器（逗号）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#i1,#i2,#i3{
background-color:green;
color: yellow;
}
.c1,.c2{
background-color:green;
color: yellow;
}
</style>
</head>
（6）属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c3[n="kanghui"]{width: 100px;height: 200px;}
</style>
</head>
PS：优先级，标签上style优先，编写顺序，就近原则
4 CSS常用属性
（1）颜色属性
<div style="color:blueviolet">ppppp</div>
rgb颜色查询对照表：http://tool.oschina.net/commons?type=3
（2）字体属性
font-size: 20px/50%/larger
font-family:'Lucida Bright'
font-weight: lighter/bold/border/
<h1 style="font-style: oblique">qqqq</h1>
（3）背景属性
background-position这个很重要！后面做多层背景时会用到！
background-color: cornflowerblue
background-image: url('1.jpg');
background-repeat: no-repeat;(repeat:平铺满)
background-position: right top（20px 20px）;(横向：left center right)(纵向：top center bottom)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 100px"></div>
<div style="background-image: url(icon_18_118.png);
background-repeat: no-repeat;
height: 20px;
width: 20px;
border: 1px;
background-position-x: 0;
background-position-y: 0;
></div>
</body>
</html>
背景色填充
（4）文本属性
font-size: 10px;
text-align: center; 横向排列
line-height: 200px; 文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比
vertical-align:－4px 设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效
text-indent: 150px; 首行缩进
letter-spacing: 10px;
word-spacing: 20px;
text-transform: capitalize;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> .outer .item {
width: 300px;
height: 200px;
background-color: chartreuse;
display: inline-block;
} </style>
</head>
<body>
<div class="outer">
<div class="item" style="vertical-align: top">ll
</div>
<div class="item">
</div>
</div> <script> </script>
</body>
</html> vertical-align
小试牛刀1
<body>
<div class="c1 c2" style="color:pink"></div>
<div style="border:1px solid red;"></div>
<div style="border:4px dotted red;"></div>
<div style="height: 48px;
width: 80%;
border: 1px solid blue;
font-size: 16px;
text-align: center;
line-height: 48px;
font-weight: bold;">
</div>
</body>
小试牛刀2
（5）边框属性
border-style: solid;
border-color: chartreuse;
border-width: 20px;
简写：border: 30px rebeccapurple solid;
（6）display属性
none
block
inline
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="background-color: red;display: inline">sdsf</div>
<span style="background-color: red;display: block">sdsd</span>
<span style="background-color:red;height: 50px;width: 70px;">sdsds</span>
<a style="background-color: red;"></a>
</body>
</html>
display
（7）内边距和外边距
- margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
- padding: 用于控制内容与边框之间的距离；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 35px;width: 400px;position: relative;">
<input type="text" style="height: 35px;width: 370px;padding-right: 30px;"/>
<span style="position: absolute;right: 10px;top: 10px;background-image:url(i_name.png);height: 20px;width: 20px;display: inline-block;"></span>
</div>
</body>
</html>
边距
练习： 300px*300px的盒子装着100px*100px的盒子，分别通过margin和padding设置将小盒子 移到大盒子的中间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> .div1{
background-color: aqua;
width: 300px;
height: 300px;
}
.div2{
background-color: blueviolet;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
<div class="div2"></div>
</div>
</body>
</html>
练习
思考1:
边框在默认情况下会定位于浏览器窗口的左上角，但是并没有紧贴着浏览器的窗口的边框，这是因为body本身也是一个盒子（外层还有html），在默认情况下， body距离html会有若干像素的margin，具体数值因各个浏览器不尽相同，所以body中的盒子不会紧贴浏览器窗口的边框了。
（8）float属性
- 常见的块级元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。
- 常见的内联元素有span、a、strong、em、label、input、select、textarea、img、br等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
height: 38px;
background-color: #dddddd;
line-height: 38px;
}
</style>
</head>
<body style="margin: 0 auto">
<div class="pg-header">
<div style="width: 960px;margin: auto">
<div style="float: left">收藏本站</div>
<div style="float: right">
<a>登录</a>
<a>注册</a>
</div>
<div style="clear: both"></div>
</div>
</div>
<div style="width: 300px;border: 1px solid red;">
<div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>
<div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>
<div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>
<div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>
<div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>
<div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>
<div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>
<div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>
<div style="clear: both;"></div>
</div>
</body>
</html>
float演示
（9）position属性
fixed
relative
absolute
opcity: 0.5 透明度
z-index: 层级顺序
overflow: hidden,auto
hover
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="width: 50px;height: 50px;background-color: black;position: absolute;"></div>
<div style="height: 5000px;background-color: #dddddd"></div>
</body>
</html>
absolute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="position: relative;width: 500px;height: 400px;border: 1px solid red;margin: 0 auto"> <div style="position: absolute;left:0; bottom:0; width: 50px;height: 50px;background-color: black"></div>
</div>
<div style="position: relative;width: 500px;height: 400px;border: 1px solid red;margin: 0 auto"></div>
<div style="position: relative;width: 500px;height: 400px;border: 1px solid red;margin: 0 auto"></div> </body>
</html>
position演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="z-index: 10;position: fixed;
width: 500px;
height: 500px;
left: 50%;
top: 50%;
margin-top: -200px;
margin-left: -250px;
background-color: white
"></div> <div style="z-index: 9;position: fixed;background-color: black;
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity: 0.6;
"></div>
<div style="height: 5000px;background-color: red"></div>
</body>
</html>
z-index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 200px;width: 300px;overflow: auto">
<img src="1.jpg">
</div>
<div style="height: 200px;width: 300px;overflow: hidden ">
<img src="1.jpg">
</div>
</body>
</html>
overflow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
position: fixed;
right: 0px;
left: 0px;
top: 0px;
height: 48px;
background-color: #24592a;
line-height: 48px;
}
.pg-body {
margin-top: 50px;
}
.w {
width: 980px;
margin: 0 auto;
}
.pg-header .menu{
display: inline-block;
padding: 0 10px 0 10px;
color: white;
}
.pg-header .menu:hover{
background-color: green;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="w">
<a class="logo">LOGO</a>
<a class="menu">全部</a>
<a class="menu">段子</a>
<a class="menu">社区</a>
</div>
</div>
<div class="pg-body">
<div class="w"></div>
</div>
</body>
</html>
hover
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 35px;width: 400px;position: relative;">
<input type="text" style="height: 35px;width: 370px;padding-right: 30px;"/>
<span style="position: absolute;right: 10px;top: 10px;background-image:url(i_name.png);height: 20px;width: 20px;display: inline-block;"></span>
</div>
</body>
</html>
相对绝对位置
5 小结
一鼓作气，再而衰，三而竭！
要学的东西太多了，学不过来了。
酷狗上有些歌已经没有版权了，但是还能听，不能分享。心情有点糟~
6 练习
练习1：返回顶部
需用用到JavaScript，下节内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div onclick="GoTop();" style="width: 50px;height: 50px;background-color: black;color: white;
position: fixed;
bottom: 20px;
right: 20px;
">返回顶部</div>
<div style="height: 5000px;background-color: #dddddd"></div>
<div>
<script>
function GoTop() {
document.body.scrollTop =0;
}
</script>
</div>
</body>
</html>
返回顶部
练习2：顶部固定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
height: 48px;
background-color: black;
color: white;
position: fixed;
top: 0px;
right: 0px;
left: 0px;
}
.pg-body{
background-color: #dddddd;
height: 5000px;
}
</style>
</head>
<body>
<div class="pg-header">头部</div>
<div class="pg-body;" style="margin-top: 48px" >内容</div>
</body>
</html>
顶部固定
我是尾巴~
本次推荐PYTHON基础教程：https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000
一个很基础的教程。
虽不才，才要坚持~
D15——C语言基础学PYTHON的更多相关文章
- D10——C语言基础学PYTHON
C语言基础学习PYTHON——基础学习D10 20180906内容纲要: 1.协程 (1)yield (2)greenlet (3)gevent (4)gevent实现单线程下socket多并发 2. ...
- D16——C语言基础学PYTHON
C语言基础学习PYTHON——基础学习D16 20180927内容纲要: 1.JavaScript介绍 2.JavaScript功能介绍 3.JavaScript变量 4.Dom操作 a.获取标签 b ...
- D07——C语言基础学PYTHON
C语言基础学习PYTHON——基础学习D07 20180826内容纲要: 面向对象进阶学习 1 静态方法 2 类方法 3 属性方法 4 类的特殊成员方法(本节重点) 5 反射(本节重点) 6 异常(本 ...
- D06——C语言基础学PYTHON
C语言基础学习PYTHON——基础学习D06 20180821内容纲要: 面向对象初级学习 1 面向对象 2 类 (1)封装 (2)继承 (3)多态 3 小结 4 练习:选课系统 5 课外拓展:答题系 ...
- D05——C语言基础学PYTHON
C语言基础学习PYTHON——基础学习D05 20180815内容纲要: 1 模块 2 包 3 import的本质 4 内置模块详解 (1)time&datetime (2)datetime ...
- D17——C语言基础学PYTHON
C语言基础学习PYTHON——基础学习D17 20181014内容纲要: 1.jQuery介绍 2.jQuery功能介绍 (1)jQuery的引入方式 (2)选择器 (3)筛选 (4)文本操作 (5) ...
- D14——C语言基础学PYTHON
C语言基础学习PYTHON——基础学习D14 20180919内容纲要: 1.html认识 2.常用标签 3.京东html 4.小结 5.练习(简易淘宝html) 1.html初识(HyperText ...
- D13——C语言基础学PYTHON
C语言基础学习PYTHON——基础学习D13 20180918内容纲要: 堡垒机运维开发 1.堡垒机的介绍 2.堡垒机的架构 3.小结 4.堡垒机的功能实现需求 1 堡垒机的介绍 百度百科 随着信息安 ...
- D12——C语言基础学PYTHON
C语言基础学习PYTHON——基础学习D12 20180912内容纲要: 1.数据库介绍 2.RDMS术语 3.MySQL数据库介绍和基本使用 4.MySQL数据类型 5.MySQL常用命令 6.外键 ...
随机推荐
- 2018.11.03 NOIP模拟 地球发动机（线性dp）
传送门 考试5分钟写完. 如果没这题今天多半爆零了(汗 直接二分出合法的转移范围. 然后用后面的状态更新前面的就可以了. 代码
- poj-3067（树状数组）
题目链接:传送门 题意:日本有东城m个城市,西城m个城市,东城与西城相互连线架桥,判断这些桥相交的次数. 思路:两个直线相交就是(x1-x2)*(y1-y2)<0,所以,对x,y进行排序,按照x ...
- pat -1004（树的遍历）
题目链接:https://pintia.cn/problem-sets/994805342720868352/problems/994805521431773184 思路: (1)用vector记录每 ...
- SPRING 集成 KAFKA 发送消息
准备工作 1.安装kafka+zookeeper环境 2.利用命令创建好topic,创建一个topic my-topic 集成步骤 1.配置生产者 <?xml version="1.0 ...
- nullptr(c++11)
1.概念 用字面值常量nullptr来初始化或赋值来得到空指针 2.c++11之前使用NULL或0 1)NULL是一个宏定义(预处理变量),定义在cstdlib中,其值就是0:对于预处理变量,预处理器 ...
- IntelliJ IDEA 2017版 编译器使用学习笔记(九）(图文详尽版);IDE使用的有趣的插件；IDE代码统计器；Mybatis插件
一.代码统计器,按照名字搜索即可,在file===setting------plugin 使用右键项目:点击自动统计 二.json转实体类 三.自动找寻bug插件 四.Remind me工具 五.检测 ...
- DOM10-1节点层次
DOM(问的那个对象模型)是针对HTML和XML文档的API.DOM描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的一部分. 每个节点都拥有各自的特点.数据和方法,另外和其他节点也存在某种 ...
- 百度Web Uploader组件实现文件上传(一)
Web Uploader WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势 ...
- Struts2之ModelDriven和Preparable拦截器
首先struts.xml文件配置如下 默认拦截器设置为paramsPrepareParamsStack <package name="default" namespace=& ...
- 关于Lambda
1. 查询时,包含关联子对象.如: 数据库中包含表Father和Son,映射实体如下: public class Father { public string Name{get;set;} publi ...