python学习之路前端-CSS

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

CSS概述

css是英文Cascading Style Sheets的缩写,称为层叠样式表，用于对页面进行美化。

存在方式有三种：元素内联、页面嵌入和外部引入，比较三种方式的优缺点。

语法：style = 'key1:value1;key2:value2;'

在标签中使用 style='xx:xxx;'
在页面中嵌入 < style type="text/css"> </style > 块
引入外部css文件

必要性：美工会对页面的色彩搭配和图片的美化负责，开发人员则必须知道是如何实现的

常用的选择器

1.标签选择器

/*标签选择器，找到所有的标签应用以下样式*/

div {

            color: green;

   }

2.class选择器

/*class选择器，找到class=c1的所有标签，应用以下样式*/

        .c1{

            background-color: red;

        }

3.id选择器

/*id选择器，找到标签id等于i1的标签，应用以下样式*/

        #i1{

            font-size: 56px;

            /* color: green; */

        }

4.关联选择器

/*层级选择器，找到 class=c2 下的div下的p下的class=c3标签，应用以下样式*/

.c2 div p .c3{

            background-color: red;

        }

5.组合选择器

/*组合选择器，找到class=c4,class=c5,class=c6,的标签，应用以下样式*/

.c4,.c5,.c6{

            background-color: aqua;

              }

6.属性选择器

/*属性选择器*/

        input[type='text'] {width:80px;height: 20px;background-color: #2459a2}

Style样式

style的使用一共有三种形式：

1.直接设置标签的属性

<div style="font-size:20px;color:red;" ></div>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>style的第一种使用方式</title>

</head>

<body>

    <div style="font-size:20px;color:red;" >

        <span>style的第一种使用方式：直接在标签中设置</span>

    </div>

</body>

</html>

2.在head头部进行设置

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>style的使用</title>

    <style>

        div {

            background-color: blue;

            font-size: 40px;

        }

    </style>

</head>

<body>

    <div>

        <p>style的第二种使用方式：在head头部进行设置</p>

    </div>

</body>

</html>

3.将所有的style样式放到一个特定的文件中，然后在使用的地方进行引用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Style的第三种使用方式：引用已经定义好的样式文件</title>

    <link rel="stylesheet" href="common.css" />

</head>

<body>

    <div>Style的第三种使用方式：引用已经定义好的样式文件</div>

</body>

</html>

css文件定义的样式

div {

    font-size: 50px;

    background-color: aquamarine;

    color: #000;

}

说明：三种方式各有利弊，请根据实际情况来进行选择

标签属性：只针对当前标签生效，不具有重用性。

head头部style：针对当前页面均有效，具有重用性，当程序有多个页面时，则需要将head style分别复制到其他的页面方才能生效

css样式文件：程序有多个页面，当多个页面都需要使用相同的style只需要在使用处引用css文件即可。

三种style可以同时使用，其优先级如下：

标签属性优先级最高    head头部style其次   css样式文件优先级最低

如果标签属性和css文件中的style不同时，则继承css样式文件中的style，如果style和css文件相同时，则标签属性会将css文件中的style给覆盖掉。

style和选择器综合应用实例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <!--<style的使用有三种方式：1.直接设置标签的属性  2.在head头部中进行设置 3.将所有的style放到-->

    <!--一个特定的文件中，然后在使用的地方进行引用，三种方式各有利弊，根据实际情况来选择使用>-->

    <!--<link rel="stylesheet" href="common.css" />-->

    <style>

        /*标签选择器，找到所有的标签应用以下样式*/

        div{

            color: green;

        }

        /*id选择器，找到标签id等于i1的标签，应用以下样式*/

        #i1{

            font-size: 56px;

            /* color: green; */

        }

        /*class选择器，找到class=c1的所有标签，应用以下样式*/

        .c1{

            background-color: red;

        }

        /*层级选择器，找到 class=c2 下的div下的p下的class=c3标签，应用以下样式*/

        /*.c2 div p a{*/

            /**/

        /*}*/

        .c2 div p .c3{

            background-color: red;

        }

        /*组合选择器，找到class=c4,class=c5,class=c6,的标签，应用以下样式*/

        .c4,.c5,.c6{

            background-color: aqua;

        }

        /*属性选择器*/

        input[type='text'] {width:80px;height: 20px;background-color: #2459a2}

    </style>

</head>

<body>

    用户名：<input type="text"/>

    <div class="c4">寒风飘飘落叶</div>

    <div class="c5">军队是一朵绿化</div>

    <div class="c6">亲爱的战友你不要想家，不要想妈妈</div>

    <div class="c2">

        <div></div>

        <div>

            <p>

                <span>声声我日夜呼唤，多少句心里话</span>

                <a class="c3">不要离别时两眼泪花，军营是咱温暖的家</a>

            </p>

        </div>

    </div>

    <div class="c3">妈妈你不要牵挂，孩儿我已经长大</div>

    <span class="c1">站岗执勤是保卫国家，风吹雨打都不怕</span>

    <div class="c1">衷心的祝愿妈妈，愿妈妈健康长寿</div>

    <a class="c1">待到庆功时再回家，再来看望好妈妈</a>

    <a id="i1">baidu</a>

    <div>99</div>

    <div>99</div>

    <div>99</div>

    <div>

        <div>asdf</div>

    </div>

</body>

</html>

background系列

1.background-color

背景色有如下三种表现形式
background-color: #FF69B4;
background-color: rgb(25,180,10);
background-color: red;

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        .c1{

            color: red;

            font-size: 32px;

            height: 150px;

            width: 600px;

        }

    </style>

</head>

<body>

    <div class="c1">故乡有位好姑娘，我时常梦见她</div>

    <div style="width: 600px;">

        <div style="width: 20%;background-color: antiquewhite;float: left">军中的男儿也有情</div>

        <div style="width: 80%;background-color: palegoldenrod;float: left">也愿伴你走天涯</div>

    </div>

</body>

</html>

2.background-image

可以像定义样式一样将图片的属性在style中进行定义

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        .img{

            background-image: url("junren.gif");

            height: 150px;

            width: 400px;

            background-repeat: no-repeat;

        }

        .img2{

            background-image: url("guniang.jpg");

            height: 50px;

            width: 50px;

            background-position: 84px -58px;

        }

    </style>

</head>

<body>

    <div class="img"></div>

    <div class="img2"></div>

</body>

</html>

3. background-repeat

　显示的背景图片是否重复填充（no-repeat不重复填充）

4.background-position

　根据实际需要调整background-position来展示不同的图片、内容

应用：将京东的购物车图案显示为"小房子"

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .img {

            background-image: url(jd2015img.png);

            height: 10px;

            width:10px;

            background-position: 87px 18px;

        }

    </style>

</head>

<body>

    <div class="img"></div>

</body>

</html>

border

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>border的使用</title>

</head>

<body>

    <div style="width: 500px;height: 10px;border: 1px solid red;"></div>

    <br/>

    <div style="width: 500px;height: 10px;border: 1px dotted blue;"></div>

    <br/>

    <div style="width: 500px;height: 10px;border: 1px dashed green;"></div>

</body>

</html>

marign和padding

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>margin和padding的使用</title>

</head>

<body>

    <h2>margin</h2>

    <div style="border: 1px solid red;height: 60px;">

        <div style="background-color: green;height: 40px;margin-top: 20px;"></div>

    </div>

    <h2>padding</h2>

    <div style="border:1px solid red;height: 70px;">

        <div style="background-color: yellowgreen;height: 40px;padding-top: 30px;"></div>

    </div>

</body>

</html>

display

1.display的属性值

display  none:隐藏，使其内容不显示

display  block:使行内标签具有块级标签的属性

display  inline:使行内标签具有块级标签的属性

display  inline-block:使行内标签具有块级标签的属性

2.display应用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>display的使用</title>

</head>

<body>

    <!--display  none:隐藏，使其内容不显示-->

    <span style="color: red;font-size: 10px;">span标签是行内标签，使用display标签前的效果</span>

    <br/>

    <span style="color: red;font-size: 40px; display: none;">span标签是行内标签，使用display none标签后的效果</span>

    <br/>

    <!--display  block:使行内标签具有块级标签的属性-->

    <span style="color: red;font-size: 20px;">span标签是行内标签，有多少内容占多少空间</span>

    <span style="background-color: aqua;font-size: 5px;height: 20px;display: block;">使行内标签具有块级标签的属性，占据整行</span>

    <!--display  inline:使行内标签具有块级标签的属性-->

    <div style="background-color: blueviolet;font-size: 20px;">div是块级标签，不管内容有多少都是占据一行</div>

    <div style="background-color: cornflowerblue;font-size: 20px;display: inline">使div块级标签具有行内标签的属性</div>

    <!--display  inline-block:使行内标签具有块级标签的属性-->

    <span style="color: red;font-size: 20px;">span标签是行内标签，有多少内容占多少空间</span>

    <span style="background-color: aqua;font-size: 5px;height: 50px;display: inline-block;">使行内标签既具有块级标签的属性又具有行内标签的属性，占据整行</span>

</body>

</html>