CSS

CSS

关注
发信
关注(28)粉丝(399)

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、盒子模型

一个标准的盒子模型：

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

  • 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

05-11 20:29
Powered by LMLPHP ©2024 CSS 0.063144