python基础-第十篇-10.2CSS基础

CSS是Cascading Style Sheet的简称，中文为层叠样式表
属性和属性值用冒号隔开，以分号结尾

引入方式

　　行内式--在标签的style属性中设定CSS样式

<body>
    <div style="background-color:red;height:200px;50px">你好</div>
</body>

　　嵌入式--是将CSS样式集中写在网页的<head>标签的<style></style>标签对中

<head>
    <meta charset="UTF-8">
    <title>你好明天</title>
    <style>
        div{
        background-color:blue;
        height:500px;
        100px
        }
    </style>
</head>
<body>
    <div>未来很精彩！</div>
</body>

　　导入式--将一个独立的.css文件引入HTML文件中，导入式使用@import引入外部CSS文件，<style>标记也是写在<head>标记中

导入式会在整个网页装载完后再转载CSS文件

divs.css

div{
background-color:blue;
height:500px;
100px
}

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>你好明天</title>
    <style>
        @import "divs.css";
    </style>
</head>
<body>
    <div>未来很精彩！</div>
</body>
</html>

　　链接式--将一个独立的.css文件引入到HTML文件中，使用<link>标记写在<head>标记中

链接式会以网页文件主体装载前装载css文件

<head>
    <meta charset="UTF-8">
    <title>你好明天</title>
    <link href="divs.css" rel="stylesheet" type="text/css">
</head>

样式应用顺序

行内样式优先级最高
相同样式，不同样式属性将以合并的方式呈现
相同样式并且相同属性，呈现方式在<head>中的顺序决定，后面会覆盖前面属性
！important 指定样式规则应用最优先

<head>
    <meta charset="UTF-8">
    <title>你好明天</title>
    <style>
        #cl{
        background-color:red
        }
        div{
        background:green !important
        }
    </style>
</head>
<body>
    <div id="cl" style="background-color:blue">未来很精彩！</div>
</body>

选择器

　　基本选择器

　　1、通用元素选择器

*表示应用到所有的标签

<head>
    <meta charset="UTF-8">
    <title>你好明天</title>
    <style>
        *{
        background:green
        }
    </style>
</head>
<body>
    <div id="cl">未来很精彩！</div>
    <div id="c2">明天很美好！</div>
    <div id="c3">今天也很如意</div>
</body>

　　2、标签选择器

匹配所有使用某种标签的元素

div{background:green}

　　3、类选择器

匹配所有class属性中包含info的元素
语法：.类名{样式}（类名不能以数字开头，类名区分大小写）

.lizhi{background:green}
<div class="lizhi">未来很精彩！</div>
<div class="lizhi">明天很美好！</div>

　　4、ID选择器

使用id属性来调用样式，在一个网页中id的值都是唯一的
语法：#ID名{样式}（id名不能以数字开头）

#c3{background:green}
<div id="c3">今天也很如意</div>

　　组合选择器

　　1、多元素选择器

同时匹配h3，h4标签，之间用逗号分隔

 h3,div{background:green}
<h3>alex</h3>
<div>eric</div>

　　2、后代元素选择器

匹配所有div标签里嵌套的P标签，之间用空格分隔

<head>
    <meta charset="UTF-8">
    <title>你好明天</title>
    <style>
        div p{background:green}
    </style>
</head>
<body>
    <div>
        <p>nick</p>
        <div>
            <p>alex</p>
            <p>eva</p>
        </div>
        <h1>eric</h1>
    </div>
</body>

　　3、子元素选择器

匹配所有div标签嵌套的子p标签，之间用>分隔

<head>
    <meta charset="UTF-8">
    <title>你好明天</title>
    <style>
        div>p{background:green}
    </style>
</head>
<body>
    <div class="cc">
        <b class="dd">
            <p>alex</p>
            <p>eva</p>
        </b>
        <p>eric</p>
    </div>
</body>

　　4、毗邻元素选择器

匹配所有紧随div标签之后的同级标签p，之间用+分割（只能匹配一个）

<head>
    <meta charset="UTF-8">
    <title>你好明天</title>
    <style>
        div+p{background:green}
    </style>
</head>
<body>
    <p>eva</p>
    <div>alex</div>
    <p>eric</p>
    <p>seven</p>
</body>

　　属性选择器

　　1、【属性】 and 标签【属性】

【属性】设置所有具有这个属性的标签元素
标签【属性】设置所有含有这个属性并是这类标签的标签元素

<head>
    <meta charset="UTF-8">
    <title>你好明天</title>
    <style>
        [id]{background:green}
        p[id]{background:red}
    </style>
</head>
<body>
    <div id="大家好">nick</div>
    <p id="才是真的好">seven</p>
</body>

　　2、【属性=属性值】

设置所有这个属性等于指定属性值的标签元素

<head>
    <meta charset="UTF-8">
    <title>你好明天</title>
    <style>
        [id="大家好"]{
        background:green
        }
        [id="才是真的好"]{
        font-size:100px;
        color:red
        }

    </style>
</head>
<body>
    <div id="大家好">nick</div>
    <p id="才是真的好">seven</p>
</body>

　　3、【title~=Nick】

设置所有title属性具有多个空格分隔的值，其中一个值等于“Nick”的标签元素

<head>
    <meta charset="UTF-8">
    <title>你好明天</title>
    <style>
        [title~="Nick"]{
        background:black;
        font:500px;
        color:white
        }
    </style>
</head>
<body>
    <p title="Nick Jenny">Nick</p>
    <p title="Jenny Nick">Jenny</p>
    <p title="seven Jenny">seven</p>
</body>

　　4、【title|=Nick】

设置所有title属性具有多个连字号分隔（hyphen-separated）的值、其中值以‘Nick’开头的标签元素
lang属性：“en”、“en-us”、“en-gb”

<head>
    <meta charset="UTF-8">
    <title>你好明天</title>
    <style>
        [title|="Nick"]{
        background:black;
        font:500px;
        color:white
        }
    </style>
</head>
<body>
    <p title="Nick-Jenny">Nick</p>
    <p title="Nick_Jenny">Nick</p>
    <p title="Jenny-Nick">Jenny</p>
    <p title="Nick">Jenny</p>
    <p title="seven Jenny">seven</p>
</body>

　　5、【title^=Nick】

设置属性值以指定值开头的每个标签元素

<head>
    <meta charset="UTF-8">
    <title>你好明天</title>
    <style>
        [title^="Nick"]{
        background:black;
        font:500px;
        color:white
        }
    </style>
</head>
<body>
    <p title="Nick-Jenny">Nick</p>
    <p title="Nick_Jenny">Nick</p>
    <p title="Jenny-Nick">Jenny</p>
    <p title="Nick">Jenny</p>
    <p title="Nick Jenny">seven</p>
</body>

　　6、【title$=Nick】

设置属性值以指定值结尾的每个标签元素

<head>
    <meta charset="UTF-8">
    <title>你好明天</title>
    <style>
        [title$="Nick"]{
        background:black;
        font:500px;
        color:white
        }
    </style>
</head>
<body>
    <p title="Nick-Jenny">Nick</p>
    <p title="Nick_Jenny">Nick</p>
    <p title="Jenny-Nick">Jenny</p>
    <p title="Nick">Jenny</p>
    <p title="Jenny Nick">seven</p>
</body>

　　7、【title*=Nick】

设置属性值中包含指定值的每个元素

<head>
    <meta charset="UTF-8">
    <title>你好明天</title>
    <style>
        [title*="Nick"]{
        background:black;
        font:500px;
        color:white
        }
    </style>
</head>
<body>
    <p title="Nick-Jenny">Nick</p>
    <p title="jigNickJenny">Nick</p>
    <p title="Jenny-Nick">Jenny</p>
    <p title="Nick">Jenny</p>
    <p title="Jenny Nick">seven</p>
</body>

　　伪类选择器

　　1、link、hover、active、visited

a:link（未访问的链接状态），用于定义常规的链接状态
a:hover（鼠标放在链接上的状态），用于产生视觉效果
a:active（在链接上按下鼠标时的状态）
a:visited（已访问过的链接状态）

<head>
    <meta charset="UTF-8">
    <title>你好明天</title>
    <style>
        a:link{color:black}
        a:hover{color:green}
        a:active{color:red}
        a:visited{color:blue}
    </style>
</head>
<body>
    <a href="https://www.baidu.com" target="_blank">百度一下</a>
    <a href="https://www.sogou.com" target="_blank">搜狗一下</a>
</body>

　　2、befor、after

p：before 在每个<p>元素的内容之前插入内容
p：after 在每个<p>元素的内容后插入内容

<head>
    <meta charset="UTF-8">
    <title>你好明天</title>
    <style>
        p{color:blue;}
        p:before{content:"before...";}
        p:after{content:"..after";}
    </style>
</head>
<body>
    <p>seven</p>
    <p>eric</p>
</body>

常用属性

　　1、颜色属性

    <p style="color:blue">seven</p>
    <p style="color:#ffee33">alex</p>
    <p style="color:rgb(255,0,0)">eric</p>
    <p style="color:rgba(255,0,0,0.5)">nick</p>

　　2、字体属性

　　font-style：用于规定斜体文本

normal 文本正常显示
italic 文本斜体显示
oblique 文本斜体显示

　　font-weight：设置文本粗细

normal（默认）
bold（加粗）
bolder（相当于<strong>和<b>标签）
lighter（常规）
100~900 整百（400=normal，700=bold）

　　font-size：设置字体的大小

默认值：medium
<absolute-size>可选参数值：xx-small，x-small，small，medium、large、x-large、xx-large
<relative-size>相对父标签中字体的尺寸进行调节。可选参数值：smaller，largeer
<percentage>百分比指定文字大小
<length>用长度值指定文字大小，不允许负值

　　font-family:字体名称

使用逗号隔开多种字体

　　font：简写属性

语法：font：字体大小/行高字体（字体要在最后）

    <p style="font-size:20px">seven</p>
    <p style="font-size:50%">seven</p>
    <p style="font-size:larger">seven</p>
    <p style="font-family:宋体">alex</p>
    <p style="font-family:微软雅黑">alex</p>
    <p style="font-weight:lighter">eric</p>
    <p style="font-weight:bold">eric</p>
    <p style="font-weight:border">eric</p>
    <p style="font-weight:900">eric</p>
    <p style="font-style:oblique">nick</p>
    <p style="font-style:normal">nick</p>

　　3、文本属性

　　white-space：设置元素中空白的处理方式

　　direction:规定文本的方向--ltr（默认），rtl

　　text-align：文本的水平对齐方式--left，center，right

　　line-height：文本行高

　　text-indent：文本缩进

　　letter-spacing：添加字母之间的空白

　　word-spacing：添加每个单词之间的空白

　　text-transform：属性控制文本的大小写

<head>
    <meta charset="UTF-8">
    <title>你好明天</title>
    <style>
        div{
        background-color:blue;
        color:white;
        600px;
        height:200px;
        text-align:center;
        line-height:200px;
        }
        p{
        background-color:black;
        color:yellow;
        100px;
        height:100px;
        text-indent:50px;
        }
        h1{
        letter-spacing:20px;
        word-spacing:20px;
        text-transform:capitalize;
        }
    </style>
</head>
<body>
    <h1>seven eric alex nick</h1>
    <div>大家好才是真的好，你好我也好，吃我一枪，想要牌吗，容我考虑考虑，变变变</div>
    <p>大家好才是真的好，你好我也好，吃我一枪，想要牌吗，容我考虑考虑，变变变</p>

</body>

capitalize 文本中的每个单词以大写字母开头
uppercase 定义仅有大写字母
lowercase 定义仅有小写字母

　text-overflow：文本移出样式

clip 修剪文本
elipsis 显示省略符号...来代表被修剪的文本
string 使用给定的字符串来代表被修剪的文本

文本溢出修剪：

<head>
    <meta charset="UTF-8">
    <title>你好明天</title>
    <style>
        div{
        background-color:black;
        color:white;
        50px;
        height:50px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        }
    </style>
</head>
<body>
    <div>大家好才是真的好，你好我也好，吃我一枪，想要牌吗，容我考虑考虑，变变变</div>
</body>

　　text-decoration：文本的装饰--none（默认）、underline、overline、line-through

　　text-shadow：文本阴影

第一个参数是左右位置
第二个参数是上下位置
第三个位置时虚化效果
第四个参数是颜色

　　word-wrap:自动换行--break-word

自动换行并加阴影

<head>
    <meta charset="UTF-8">
    <title>你好明天</title>
    <style>
        div{
        background-color:blue;
        color:white;
        100px;
        height:100px;
        box-shadow:10px 10px 5px green;
        word-wrap:break-word;
        }
        h1{
        text-shadow:5px 5px 5px #888;
        }
    </style>
</head>
<body>
    <h1>seven</h1>
    <div>大家好才是真的好，你好我也好，吃我一枪，想要牌吗，容我考虑考虑，变变变</div>
</body>

　　4、背景属性

　　background-color:背景颜色

　　background-image：设置背景图片

url("http://pic.cnblogs.com/avatar/942693/20160613182316.png")图片地址

background-image:linear-gradient(green,blue,yellow,red,black); 颜色渐变效果

     div{
        height:500px;
        500px;
        background-image:url("1.jpg");
        background-image:url("http://pic.cnblogs.com/avatar/942693/20160613182316.png");
        background-image:linear-gradient(green,blue,yellow,red,black)
        }

　　background-position：设置背景图像的位置坐标

background-position：center center；图片置中，x轴center，y轴center
1px-195px 截取图片某部分，分别代表坐标x，y轴

　　background-repeat：设置背景图片不重复平铺

no-repeat 设置图片不重复，常用
round 自动缩放直到适应并填充整个容器
space 以相同的间距平铺且填充满整个容器

　　background-size

contain
cover

　　background-attachment 背景图片是否固定或随着页面的其余部分滚动

　　background 缩写

    <style>
        div{
        height:1000px;
        1000px;
        border:5px red solid;
        background:url("1.jpg") no-repeat left 30px bottom 15px;
        background:url("1.jpg") no-repeat center bottom 15px;
        }
    </style>

　　5、列表属性

　　list-style-type：列表项标志的类型

none 去除标志
decimal-leading-zero 02
square 方框
circle 空心圆
upper-alph或disc 实心圆

　　list-style-image：将图像设置为列表项标志

　　list-style-position：列表项标志的位置

inside
outside

　　list-style 简写

    <ul style="list-style:none">
        <li>alex</li>
        <li>seven</li>
        <li>eric</li>
    </ul>

　　页面布局

　　1、边框

　　border-style:边框样式

solid 默认，实线
double 双线
dotted 点状线条
dashed 虚线

　　border-color:边框颜色

　　border-边框宽度

　　border-radius:圆角

1个参数：四个角都应用
2个参数：第一个参数应用于左上、右下；第二个参数应用于左下、右上
3个参数：第一个参数应用于左上；第二个参数应用于左下、右上；第三个参数应用于右下
4个参数：左上、右上、右下、左下（顺手针）

　　border 简写

border：2px yellow solid

　　box-shadow：边框阴影

第一个参数是左右位置
第二个参数是上下位置
第三个参数是虚化效果
第四个参数是颜色
box-shadow：10px 10px 5px #888

点赞提醒

<head>
    <meta charset="UTF-8">
    <title>你好明天</title>
    <style>
        div{
        border:2px solid;
        border-radius:25px;
        140px
        }
    </style>
</head>
<body>
    <div> 点赞哦！dear</div>
</body>

画圆角

<head>
    <meta charset="UTF-8">
    <title>你好明天</title>
    <style>
        .rrrr1{
        display:inline-block;
        height:100px;
        100px;
        background:green;
        border-radius:20px 40px;
        }
        .r2{
        display:inline-block;
        height:100px;
        100px;
        background:yellow;
        border-radius:20px 30px 50px 70px
        }
    </style>
</head>
<body>
    <div class="rrrr1"></div>
    <div class="r2"></div>
</body>

　　2、盒子模型

一个标准的盒子模型：

padding：用于控制内容与边框之间的距离
margin：用于控制元素与元素之间的距离
一参四边，两参上下、左右，三参上、左右、下

内盒子移动到中间

<head>
    <meta charset="UTF-8">
    <title>你好明天</title>
    <style>
        .father{
        300px;
        height:300px;
        background:green;
        border:5px solid
        }
        .son{
        100px;
        height:100px;
        background:red;
        margin:100px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
        </div>
    </div>
</body>

外盒子扩展

<head>
    <meta charset="UTF-8">
    <title>你好明天</title>
    <style>
        .father{
        300px;
        height:300px;
        background:green;
        padding-left:200px;
        padding-top:200px;
        }
        .son{
        100px;
        height:100px;
        background:red;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
        </div>
    </div>
</body>

边框在默认情况下会定位于浏览器窗口的左上角，但是并没有紧贴着浏览器的窗口的边框，这是因为body本身也是一个盒子，外层还有html，
在默认情况下，body距离html会有若干像素的margin，所以body中的盒子不会紧贴浏览器窗口的边框了。

解决方法：
body {
    margin: 0;
}

　　3、display

none 不显示
block 显示为块级元素
inline 显示为内联元素
inline-block 行内块元素（会保持块元素的高宽）
list-item 显示为列表元素

　　4、visibility

visible 元素可见
hidden 元素不可见
collapse 当再表格元素中使用时，此值可删除一行或一列，不会影响表格的布局

　　5、float 浮动-让一行显示两个块级标签，会脱离文档流

　　首先要知道，div是块级元素，在页面中独占一行，自上而下排列，也就是传说的流。

　　无论多么复杂的布局，其基本出发点均是：“如何在一行显示多个div元素”。浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。

none
left 左浮动
right 右浮动

<head>
    <meta charset="UTF-8">
    <title>你好明天</title>
    <style>
        .div1{
        background:red;
        height:50px;
        100px;
        }
        .div2{
        background:blue;
        height:120px;
        150px;
        float:left;
        }
        .div3{
        background:green;
        height:100px;
        300px;
        float:left;
        }
        .div4{
        background:yellow;
        height:160px;
        150px;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
</body>

　　结论：假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边（如果一行放不下这两个元素，那么A元素会被挤到下一行）；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是A的顶部总和上一个元素的底部对齐。

　　div的顺序是HTML代码中div顺序决定的

　　靠近页面边缘的一端是前，远离页面边缘的一端是后

　clear 清除浮动可以理解为打破横向排列：

none：默认值，允许两边都可以有浮动对象
left：不允许左边有浮动对象
right：不允许右边有浮动对象
both：不允许两边有浮动对象

<head>
    <meta charset="UTF-8">
    <title>你好明天</title>
    <style>
        .div1{
        background:red;
        height:50px;
        100px;
        }
        .div2{
        background:blue;
        height:120px;
        150px;
        float:right;
        }
        .div3{
        background:green;
        height:100px;
        300px;
        float:right;
        clear:right;
        }
        .div4{
        background:yellow;
        height:250px;
        150px;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
</body>

　　6、overflow 设置当对象的内容超过其指定高度及宽度时如何显示内容

visible 默认，内容不被修剪，会呈现在元素框之外
hidden 内容会被修剪，并且其余内容是不可见的
scroll 内容会修剪，但是浏览器会显示滚动条以便查看其余的内容
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

　　7、position 规定元素的定位类型

static 默认值，没有定位，遵从正常的文档流
relative 相对定位元素，相对于其正常位置进行定位，遵从正常的文档流
absolute 绝对定位元素，脱离正常文档流
fixed 绝对定位元素，固定在浏览器某处

<head>
    <meta charset="UTF-8">
    <title>你好明天</title>
    <style>
        .div1{
        background:red;
        height:50px;
        100px;
        }
        .div4{
        background:blue;
        height:4000px;
        6000px;
        }
        .div3{
        background:green;
        height:100px;
        300px;
        position:absolute;
        left:100px;
        top:100px;
        }
        .div2{
        background:yellow;
        height:50px;
        50px;
        font:red;
        float:right;
        position:fixed;
        }
        .father{
        position:relative;
        }
        body{
        margin:0px;
        }
        .div5{
        height:100px;
        100px;
        background:black;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="div1"></div>
        <div class="div2">qq交谈</div>
        <div class="div3"></div>
        <div class="div4"></div>
        <div class="div5"></div>
    </div>
</body>

　　详见：http://www.cnblogs.com/suoning/p/5625582.html