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>

顶部固定

我是尾巴~

一个很基础的教程。

虽不才，才要坚持~

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.外键 ...

随机推荐

oracle 查看表空间使用情况
查看表空间剩余: ||'M' from dba_free_space group by tablespace_name 查看表空间总大小.使用大小.剩余大小,使用率.剩余率 ) useded, tru ...
SPRING 集成 KAFKA 发送消息
准备工作 1.安装kafka+zookeeper环境 2.利用命令创建好topic,创建一个topic my-topic 集成步骤 1.配置生产者 <?xml version="1.0 ...
vue 开发系列（五）调用原生API
概要我们在开发手机端程序的时候了,我们经常需要使用到拍照,二维码的功能.数字天堂公司提供了大量的原生API支持. http://www.html5plus.org/doc/ 实现 1.在hbuild ...
3.The significance of Books 书本的意义
3.The significance of Books 书本的意义 (1)A bookless life is an imcomplete life.Books influence the depth ...
dj django与ajax交互
Ajax简介 AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言与服务器进行异步交互,传输的数 ...
nginx负载均衡的5种策略
nginx可以根据客户端IP进行负载均衡,在upstream里设置ip_hash,就可以针对同一个C类地址段中的客户端选择同一个后端服务器,除非那个后端服务器宕了才会换一个. nginx的upstre ...
DDR中的一些知识点说明（ODT,ZQ校准，OCT,TDQS）
ODT ( On-DieTermination ,片内终结)ODT 也是 DDR2 相对于 DDR1 的关键技术突破,所谓的终结(端接),就是让信号被电路的终端吸收掉,而不会在电路上形成反射, 造成 ...
Django开发环境搭建
最近笔者使用了Django框架作为项目model层的数据对象处理. 关于Django的开发环境,需要安装以下内容: 1.安装python 2.安装VCForPython27.msi 3.安装pycha ...
SecureCRTv7.3 和 navicat110_mysql
激活步骤: 一.首次使用: 1.保持SecureCRT未打开. 2.打开注册机keygen.exe文件(Windows vista ,7,8需要以管理员身份运行),点击[Patch]按钮,会让你选择文 ...
Python之turtle库
在命令行下```python -m pip install turtle``` 大致有两种命令: 运动命令: forward(distance) #向前移动距离distance代表距离 backwar ...

D15——C语言基础学PYTHON

D15——C语言基础学PYTHON的更多相关文章

随机推荐

热门专题