Python之路【第十一篇续】前端之CSS补充

CSS续

1、标签选择器

　　为类型标签设置样式例如：<div>、<a>、等标签设置一个样式，代码如下：

    <style>

        /*标签选择器，如果启用标签选择器所有指定的标签讲默认使用此样式*/

        div{

            font-size: 19px;

        }

    </style>

<body>

    <div>

        font size test 19

    </div>

</body>

效果图如下：

2、ID选择器

　　为指定的ID设置样式，代码如下：

<style>

        /*ID选择器*/

        #i1{

            background-color:red;

        }

  </style>

<body>

/*为所有id为i1的ID应用样式，注意咱们是为了测试，在实际的生产中ID不能相同*/

<a id="i1"> id 选择器 </a> <a id="i1"> id 选择器 </a> <a id="i2"> 如果ID不同,那么将不会应用样式 </a> </body>

效果图如下：

3、类选择器

　　class选择器，id是可以相同的，代码如下：

    <style>

        /*类选择器标签*/

        .cls{

            background-color:blue;

            font-size: 15px;

        }

    </style>

</head>

<body>

    <!--任何类型的标签都可以调用类选择器-->

    <div class="cls">

        class test div

    </div>

    <a class="cls">

        class test a

    </a>

    <span class="cls">

        class test span

    </span>

</body>

注：上面的3个选择器一般不要用标签&id选择器，用类选择器就可以

4、关联选择器

<head>

    <meta charset="UTF-8">

    <title>shuaige</title>

    <style>

        /*为一个标签应用了,类选择器,下的li标签设置样式*/

        .container li{

            background-color: pink;

        }

    </style>

</head>

<body>

    <!--下面的div应用了container类选择器,那么他下面的所有的li标签将应用上面设置的样式-->

    <div class="container">

        <div style="height: 20px;background-color: red;">

            test

        </div>

        <ul>

            <li>

                li1

            </li>

            <li>

                li2

            </li>

            <li>

                li3

            </li>

        </ul>

    </div>

</body>

关联选择器

效果图如下：

关联选择器：应用场景为某标签下面的标签设置指定的样式：

下面的代码就是为应用了这个类选择器的标签下面的所有li标签设置样式

        .container li{

            background-color: pink;

        }

问：如果在上面的代码基础上为li标签下的a标签设置样式怎么办呢？在li后面再加个a即可！

        .container li a {

            background-color: pink;

        }

OK 看下面的代码

    <style>

        /*关联选择器：为应用了container下面的子元素下应用了l类选择器下面的应用了p类选择器设置样式*/

        .container .l .p {

            background-color: pink;

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="l">

            test

                <div>

                    <ul>

                        <!--这里需要注意,他们只要是有包换关系就行,不一定非得挨着-->

                        <li class="p">

                            hello shuaige

                        </li>

                    </ul>

                </div>

        </div>

    </div>

效果图如下：

5、组合选择器

有这么一个场景，看下面的关联组合器，cc1和cc2都要使用相同的样式怎么办？重写一遍？

            .container .a .cc1 {

                background-color: pink;

            }

            .container .a .cc2 {

                background-color: pink;

            }

解决方法代码如下：组合选择器1

            .container .a .cc1,.container .a .cc2  {

                background-color: pink;

            }

上面cc1后面的“逗号”就是或的关系，如果路径都是相同的话可以进行改良代码如下：

            .container .a .cc1,.cc2  {

                background-color: pink;

            }

这里组合的时候他是按照第一个出现的逗号来进行处理的，看下面的代码：

            /*组合选择器*/

            .container b ,.a .cc1,.cc2  {

                background-color: pink;

            }

            /*组合选择器分解,上面的分解完成之后谁来应用:background-color: pink;这个样式呢?*/

            .container b

            .container b .a .cc1

            .container b .cc2
　　　　　　　......这里需要注意，“逗号”是或的关系，一般这个不常用，常用的是上面的方法

6、属性选择器

写表单验证的时候最常用,举个例子来说看下面的代码：

我要在这么input下找到type为text的标签并且给他设置样式，在上面咱们知道了组合标签，但是组合选择器最小单元是标签，他不能定位到type属性

    <div>

        <input type="text" />

        <input type="password" />

        <input type="file" />

        <input type="checkbox"/>

        <input type="button"/>

        <input type="reset"/>

    </div>

怎么做呢？在组合选择器后面加个[type=“text”]即可

    <style>

        /*input和[之间不能有空格]*/

        .con input[type="text"] {

            border:3px solid red;

        }

    </style>

效果如下：

需求又来了，我想找到input标签为type为text并且name为“shuaige”的那个input标签

    <div class="con">

        <input type="text" />

        <input type="text" name="shuaige"/>

        <input type="password" />

        <input type="file" />

        <input type="checkbox"/>

        <input type="button"/>

        <input type="reset"/>

    </div>

解决方法：在增加一个属性就行了(注意中括号之间没有空格不会报错但是没有效果)，代码如下：

    <style>

        /*input和[之间不能有空格]*/

        .con input[type="text"][name="shuaige"] {

            border:3px solid red;

        }

    </style>

效果图如下：

属性标签经常用，要记住

也可以使用自定义属性来定义,并且所有的标签都可以使用自定义属性：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>shuaige</title>

    <style>

        /*input和[之间不能有空格]*/

        .con input[type="text"][alex="shuaige"] {

            border:3px solid red;

        }

    </style>

</head>

<body>

    <div class="con">

        <input type="text" />

        <input type="text" alex="shuaige" />

        <input type="password" />

        <input type="file" />

        <input type="checkbox"/>

        <input type="button"/>

        <input type="reset"/>

    </div>

</body>

</html>

属性选择器&自定义属性

7、background-position 图片位移

应用场景，在实际的生产环境中咱们在网页上看到的小图片不是一个一个的零散的小图片的，咱们只是看到了大图片的一部分。比如一个大图片，我只让他显示一部分并不全部显示怎么做？

可以这么想：

有一个窗口，你在窗口的一边，只能通过窗口来看外面，你不能动，我们可以通过移动这个窗口来让你看到不同的场景，当然你看到的大小和窗口的大小有关！

代码如下：

    <style>

        .chuangkou{

            /*定义一个图片*/

            background-image: url('content_images.jpg');

            /*定义一个窗口,指定长和宽*/

            height: 30px;

            width:30px;

            /*设置图片不重复*/

            background-repeat:no-repeat;

            background-position: 3px 10px ;

        }

    </style>

<body>

    <div class="chuangkou">

    </div>

</body>

效果图如下：

8、内、外边距

内边距，代码如下：

    <div style="background-color: green;height: 200px;">

        <div style="margin-left: auto;

                    margin-right:auto;

                    background-color: blue;

                    height: 20px;

                    width:20px;

                    ">

        </div>

    </div>

效果图如下：

我要达到让蓝色在中间的效果怎么办呢？在绿色的基础上在进行填充，代码如下：

我在原有的绿色的div标签内部的顶端又填充了100px这样看起来的效果就变成蓝色的在中间了

外边框

同样的图下面，我在蓝色的方框外面的顶部增加30px效果就向往下移动了30px

    <div style="background-color: green;height: 100px;padding-top: 100px;">

        <div style="margin-left: auto;

                    margin-right:auto;

                    background-color: blue;

                    height: 20px;

                    width:20px;

                    margin-top: 30px;

                    ">

        </div>

    </div>

效果图如下：

这里需要注意：使用padding会继承原有的颜色在内部填充，使用margin在外面扩张并且没有颜色

如果padding&margin不指定在上、下、左、右增加边框的话默认上下左右都添加边框！

9、定位position

position的四个属性值：

static
fixed
relative
absolute

1、position的默认值，一般不设置position属性时，会按照正常的文档流进行排列。

2、fixed是特殊的absolute，即fixed总是以body为定位对象的，按照浏览器的窗口进行定位。

举例，代码如下：

<body>

    <div style="height:2000px;background-color: blueviolet;">

        <!--这里设置position:fixed 并且靠右边和底部各30px-->

        <a style="position: fixed;right: 30px;bottom: 30px;">

        跳转到顶部

        </a>

    </div>

</body>

3、relative

代码如下：

<head>

    <meta charset="UTF-8">

    <title>shuaige</title>

    <style>

        #sub1

        {

            position: relative;

            padding: 5px;

            top: 5px;

            left: 5px;

        }

    </style>

</head>

<body>

    <div  id="parent">

         <div style="background-color:blueviolet;" id="sub1">sub1</div>

         <div style="background-color:blue;" id="sub2">sub2</div>

    </div>

</body>

显示效果如下：

注：

sub1这个div如果没有设置：position: relative会按照正常的文档位置进行定位，如果设置了，并给他设置了边距那么，他会根据他本身进行偏移，并且他的偏移不影响sub2。

4、absolute

absolute这个属性总是有人给出误导。说当position属性设为absolute后，总是按照浏览器窗口来进行定位的，这其实是错误的。实际上，这是fixed属性的特点。

当sub1的position设置为absolute后，其到底以谁为对象进行偏移呢？这里分为两种情况：

当sub1的父对象(或曾祖父，只要是父级对象)parent也设置了position属性，且position的属性值为absolute或者relative时，也就是说，不是默认值的情况，此时sub1按照这个parent（在父对象内）来进行定位。
如果sub1不存在一个有着position属性的父对象，那么那就会以body为定位对象，按照浏览器的窗口进行定位，这个比较容易理解

代码如下：

    <div style="position:relative;background-color: blue;height:100px;">

        <!--当sub1的父对象(或曾祖父，只要是父级对象)parent也设置了position属性-->

        <div style="position:absolute;right: 0px;bottom:0px;background-color: blueviolet">su1</div>

    </div>

    <div style="background-color: blueviolet;height: 2000px;">

        <!--如果父对象内没有,positionabsolute或者relative时,那么会按照你打开网页时的位置进行固定,然后滑动浏览器的时候也随之变化-->

        <div style="position:absolute;right: 30px;bottom: 30px;">

            su1

        </div>

    </div>

10、样式：overflow

应用场景，有这么一种情况，在一个div内有很多的的内容，如果div的框体不是很大超出去了怎么办？详细情况如下图，代码

代码如下：

    <div style="height:100px;background-color:green;">

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

    </div>

效果图如下：

解决方法：增加overflow样式，代码如下：

    <div style="overflow:auto;height:100px;background-color:green;">

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

        tianshuai <br/>

    </div>

效果就会，在div块级标签内有个滚动条

还有一个样式：hidden超出div区域的将会自动隐藏

<div style="overflow:hidden;height:100px;background-color:green;">

11、透明度

透明度，用的比较多，需要注意，简单代码例子如下：

    <div style="background-color:blue;height:100px;padding-top:30px">

        <!--这里设置内部的div的透明度-->

        <div style="opacity: 0.5;background-color:pink;height:30px;margin-left: 30px;margin-right:30px;">

        </div>

    </div>

效果图如下：

12、z-index

用来设置展示在浏览器中的页面的层级

13、CSS布局页面实例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>shuaige</title>

    <style>

        .pg-hander {

            height:48px;

            background-color: cornflowerblue;

        }

        .pg-body .pg-left {

            /*往左飘*/

            position:absolute;

            top: 50px;

            left: 0px;

            bottom: 0px;

            width:200px;

            overflow: auto;

            background-color: #dddddd;

        }

        .pg-body .pg-right {

            position: absolute;

            top:50px;

            bottom:0px;

            /*这里离左边是200像素,因为上面设置的宽为200px*/

            left:200px;

            right:0px;

            overflow: auto;

            background-color: lightblue;

        }

    </style>

</head>

<body style="margin:0 auto">

    <!--定义把整个窗体分为2大部分上,下

    <!--上部分-->

    <div class="pg-hander">

    </div>

    <!--下部分-->

    <div class="pg-body">

        <!--左部分-->

        <div class="pg-left">

            <a>menu list for Mr.心弦</a>

        </div>

        <!--右部分-->

        <div class="pg-right">

            <div style="height:1000px">

                帅哥

            </div>

        </div>

    </div>

</body>

</html>

css布局页面实例

更多见：http://www.cnblogs.com/wupeiqi/

Python之路【第十一篇续】前端之CSS补充的更多相关文章

Python之路(第二十一篇) re模块
一.re模块正则表达式本身是一种小型的.高度专业化的编程语言,正则表达式就是字符串的匹配规则,在多数编程语言里都有相应的支持,python里对应的模块是re,正则表达式模式被编译成一系列的字节码,然 ...
Python之路(第十一篇)装饰器
一.什么是装饰器? 装饰器他人的器具,本身可以是任意可调用对象,被装饰者也可以是任意可调用对象. 强调装饰器的原则:1 不修改被装饰对象的源代码 2 不修改被装饰对象的调用方式装饰器的目标:在遵循1 ...
Python开发【第二十一篇】：Web框架之Django【基础】
Python开发[第二十一篇]:Web框架之Django[基础] 猛击这里:http://www.cnblogs.com/wupeiqi/articles/5237704.html Python之 ...
Python之路【第九篇】：Python操作 RabbitMQ、Redis、Memcache、SQLAlchemy
Python之路[第九篇]:Python操作 RabbitMQ.Redis.Memcache.SQLAlchemy Memcached Memcached 是一个高性能的分布式内存对象缓存系统,用 ...
Python之路【第十一篇】前端初识之HTML
HTML HTML解释: HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他 ...
Python之路【第一篇】python基础
一.python开发 1.开发: 1)高级语言:python .Java .PHP. C# Go ruby c++ ===>字节码 2)低级语言:c .汇编 2.语言之间的对比: 1)py ...
Python之路【第十一篇续】前端初识之CSS
css解释 css样式: css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化,CSS的可以使页面更加的美观.基本上所有的html页面都或多或少的使用cs ...
python之路第五篇之模块和加密算法（进阶篇：续）
模块 Python中,如果要引用一些内置的函数,该怎么处理呢?在Python中有一个概念叫做模块(module) 简单地说,模块就是一个保存了Python代码的文件. 模块分类: 1)内置模块 2)自 ...
python之路第五篇之递归（进阶篇：续：经典例子剖析）
递归在函数内部,可以调用其他函数; 如果一个函数在内部调用自身本身,这个函数就是递归函数. 例如,我们来计算阶乘: n! = 1 x 2 x 3 x ... x n, 用函数f1(n)表示,可以看出 ...

随机推荐

js-回车事件控制
1.文本框回车时间 < script type = "text/javascript" language = "javascript" > fun ...
WordPress菜单函数wp_nav_menu()详细介绍
导航菜单函数wp_nav_menu()进行详细的说明. 1.wp_nav_menu()函数介绍: worpdress发展到3.0以后增加了一个自定义菜单函数wp_nav_menu(),使得wordpr ...
SPAN的高度问题
FIRST OF ALL,最容易令人忽略而导致头疼的因素.web页面文档类型: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...
【OpenJ_POJ C16D】Extracurricular Sports（构造，找规律）
题目求n个互不相同的数,满足其和为其lcm.我们把lcm看成一个线段,分割成长度不同的n份.当然分法有很多,我们只需要构造一个好想好写的.先分成两个二分之一,取其中一个二分之一再分成1/3和2/3,接 ...
BZOJ 4384: [POI2015]Trzy wieże
4384: [POI2015]Trzy wieże Time Limit: 20 Sec Memory Limit: 128 MBSubmit: 217 Solved: 61[Submit][St ...
golang学习之旅：搭建go语言开发环境
从今天起,将学习go语言.今天翻了一下许式伟前辈写的<Go语言编程>中的简要介绍:Go语言——互联网时代的C语言.前面的序中介绍了Go语言的很多特性,很强大,迫不及待地想要一探究竟,于是便 ...
UVa 101 The Blocks Problem Vector基本操作
UVa 101 The Blocks Problem 一道纯模拟题 The Problem The problem is to parse a series of commands that inst ...
[JavaEE]理解ThreadLocal
转http://www.iteye.com/topic/103804 首先,ThreadLocal 不是用来解决共享对象的多线程访问问题的,一般情况下,通过ThreadLocal.set() 到线程中 ...
C#编写滤镜图片色调取反效果(Invert)
转自:http://www.it165.net/pro/html/201208/3469.html Invert 英文叫做颠倒.. 原理很简单也就是将 255- 原本的值.. 这样 0(黑) 就会变 ...
Navicat 的使用（一）
1.创建连接主机名 : 可以不写名称随意主机名/IP地址:localhost或者127.0.0.1 都是本机的意思端口:默认3306 尽量不要改怕与其余端口重复,如有重名端口系统会报错用户 ...

Python之路【第十一篇续】前端之CSS补充

CSS续

Python之路【第十一篇续】前端之CSS补充的更多相关文章

随机推荐

热门专题