D15——C语言基础学PYTHON

2021-09-30 02:14:54

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>

顶部固定

我是尾巴~

一个很基础的教程。

虽不才，才要坚持~

码农公寓

相关文章