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

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

 

引入方式

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

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

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

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

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

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

divs.css

div{
background-color:blue;
height:500px;
width: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>

 

样式应用顺序

  1. 行内样式优先级最高
  2. 相同样式,不同样式属性将以合并的方式呈现
  3. 相同样式并且相同属性,呈现方式在<head>中的顺序决定,后面会覆盖前面属性
  4. !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;
        width:600px;
        height:200px;
        text-align:center;
        line-height:200px;
        }
        p{
        background-color:black;
        color:yellow;
        width: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;
        width: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;
        width: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;
        width: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;
        width: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-width:边框宽度

  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;
        width:140px
        }
    </style>
</head>
<body>
    <div> 点赞哦!dear</div>
</body>

 画圆角

<head>
    <meta charset="UTF-8">
    <title>你好明天</title>
    <style>
        .rrrr1{
        display:inline-block;
        height:100px;
        width:100px;
        background:green;
        border-radius:20px 40px;
        }
        .r2{
        display:inline-block;
        height:100px;
        width: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{
        width:300px;
        height:300px;
        background:green;
        border:5px solid
        }
        .son{
        width: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{
        width:300px;
        height:300px;
        background:green;
        padding-left:200px;
        padding-top:200px;
        }
        .son{
        width: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;
        width:100px;
        }
        .div2{
        background:blue;
        height:120px;
        width:150px;
        float:left;
        }
        .div3{
        background:green;
        height:100px;
        width:300px;
        float:left;
        }
        .div4{
        background:yellow;
        height:160px;
        width: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;
        width:100px;
        }
        .div2{
        background:blue;
        height:120px;
        width:150px;
        float:right;
        }
        .div3{
        background:green;
        height:100px;
        width:300px;
        float:right;
        clear:right;
        }
        .div4{
        background:yellow;
        height:250px;
        width: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;
        width:100px;
        }
        .div4{
        background:blue;
        height:4000px;
        width:6000px;
        }
        .div3{
        background:green;
        height:100px;
        width:300px;
        position:absolute;
        left:100px;
        top:100px;
        }
        .div2{
        background:yellow;
        height:50px;
        width:50px;
        font:red;
        float:right;
        position:fixed;
        }
        .father{
        position:relative;
        }
        body{
        margin:0px;
        }
        .div5{
        height:100px;
        width: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

posted @ 2016-08-01 12:16  财经知识狂魔  阅读(346)  评论(0编辑  收藏  举报