首页 > 编程语言 > 详细

python笔记-15 css

时间：2018-08-02 00:43:08      阅读：334      评论：0      收藏：0      [点我收藏+]

一、CSS  Cascading Style Sheets 层叠样式表

概括的说css就是用来给html标签添加颜色，调整样式、位置的。

1、通过标签style来设置标签大小、背景色和字体颜色

style中的样式：height、width、background-color、color

<body>
    <div style="height:20px;width:200px;background-color: red;color:white">A</div>
    <div style="height:20px;width:200px;background-color: yellow;color:green">B</div>
    <div style="height:20px;width:200px;background-color: blue;color:white">C</div>
</body>

 效果

技术分享图片

 技术分享图片

      字体的颜色可以使用#xxxxx会rgb()来描述，此处不做展开，需要用的时候直接查即可。

技术分享图片

 

技术分享图片

 

 2、格式复用的问题

我们可以对每个标签分别设置不同的样式，

但是，此时，我们考虑如何复用这些格式

2.1、直接复制

2.2、选择器的使用 head标签中添加style标签，结合选择器中来使样式复用

2.2.1 id选择器 #id

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #x1{
            background-color: orange;color:green;height:50px;
        }
        #x2{
            background-color: deeppink;color:white;height:50px;
        }
    </style>
</head>
<body>
    <div id="x1">ID选择器 id=x1</div>
    <div id="x2">ID选择器 id=x2</div>
</body>
</html>

 

 技术分享图片

2.2.2 css选择器 最常用的选择器 .classname

技术分享图片

 

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
             background-color:#3ada1d;color:black;height:20px;width:100px;
        }
        .c2{
             background-color:yellow;color:black;height:20px;width:100px;
        }
    </style>

</head>
<body>
    <div class="c1">A</div>
    <span class="c2">B</span>
    <span class="c1">CDE</span>
</body>
</html>

 2.2.3 标签选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            font-size: 100px;
        }
        span{
            background-color: deeppink;
        }
        p{
            color:mediumslateblue;
        }
        label {
            background-color: yellow;
        }

    </style>

</head>
<body>
     <p>p标签</p>
     <div>div标签</div>
     <label>label标签</label>
     <span>span标签</span>
</body>

 

技术分享图片

 

2.2.4 关联（层级）选择器

技术分享图片

 

 2.2.5 层级选择器可以和其他的选择器搭配使用

技术分享图片

 

2.2.6 组合选择器

将多个样式一样的选择器合并在一起，逗号是或的关系

技术分享图片

 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 .c2,.c3{
            background-color: skyblue;
        }


    </style>

</head>
<body>
    <div class="c1">
        <P >
            it is p1<br />
            <span class="c3">p1 span</span>
        </P>
        <p class="c2">
            it is p2<br/>
            <span>p2 span</span>
        </p>
    </div>


</body>
</html>

input,div,p{ background-color:red; } 

2.2.7 属性选择器

技术分享图片

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [type=‘text‘]{
            color:deeppink;
        }
        [type=‘password‘]{
            background-color: lightgray;
        }

    </style>

</head>
<body>
     <label for="username">用户名</label>
     <input id="username" type="text" value="username">
     <br />
     <label for="passwd">密码</label>
     <input id="passwd" type="password" value="123456">
</body>
</html>

 

3、不同选择器的优先级

我们并不建议将多个选择器组合在一起使用，当组合的时候需要明确优先级

1、复合选择器优先

写的越精确，优先级越高

2、同一级别

同一级别中后写的会覆盖先写的样式

head中style内样式的注释方法

 文件中引用css样式的方法

标签选择器  <类选择器 < id选择器 <行内样式表

      

技术分享图片

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color:deeppink;
        }
        .c2{
            background-color: lightgray;
        }

    </style>

</head>
<body>
     <label for="username">用户名</label>
     <input id="username" type="text" value="username">
     <br />
     <label for="passwd">密码</label>
     <input id="passwd1" type="password" value="123456" class="c1" class="c2"><br/>
     <input id="passwd1" type="password" value="123456" class="c2" class="c1"><br/>
     <input id="passwd2" type="password" value="123456" class="c1 c2"><br/>
     <input id="passwd2" type="password" value="123456" class="c2 c1"><br/>
</body>

 

 

技术分享图片

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href=‘commons.css‘>
</head>
<body>
     <label for="username">用户名</label>
     <input id="username" type="text" value="username">
     <br />
     <label for="passwd">密码</label>
     <input id="passwd1" type="password" value="123456" class="c1" class="c2"><br/>
     <input id="passwd1" type="password" value="123456" class="c2" class="c1"><br/>
     <input id="passwd2" type="password" value="123456" class="c1 c2"><br/>
     <input id="passwd2" type="password" value="123456" class="c2 c1"><br/>
</body>
</html>
-------------------------------------------
commons.css
.c1{
    background-color:deeppink;
}
.c2{
    background-color: lightgray;
}

 

3、边框样式 border

指令分为三个部分：像素+样式+颜色 

像素表示线的粗细程度

样式 实线虚线等 实线虚线 solid dotted dashed

颜色，rgb

border与left/right/top/bottom的结合使用

技术分享图片

 <input type="text" style="border: 10px dotted red;">
     <input type="text" style="border: 5px solid red;">
     <br />
     <input type="text" style="height:50px;width:50px;border-left: 10px solid orangered;border-top:10px solid greenyellow;">
     <br />
     <br />
     <input type="text" style="
                     height:50px;width: 80px;
                     border-left: 3px solid orangered;
                     border-top:5px dotted greenyellow;
                     border-bottom:5px dashed yellow;
                     border-right: 3px solid plum"

     >

4、宽度及高度的样式 width height

可以用过像素指定大小，也可以使用百分比的方式

技术分享图片

 5、字体居中（水平居中、垂直居中）

水平居中text align

垂直居中line-heigh 和div像素一致

技术分享图片

6、字体的大小及加粗样式

font-size

font-weight:bold（加粗常用）

<div style="background-color: greenyellow;height: 300px;width:40%;text-align: center;line-height: 300px;font-size: 50px;font-weight: bolder">大小</div>

7、float的使用 让几个div在一个div中并排靠左或靠右排列

需要注意父标签对子标签的控制 <div style="clear: both;"></div>

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="commons.css">
    <style>
        .pg_goods{
            height: 200px;
            width:150px;
            border: 2px solid red;
            float: left;
        }
        .pg_goods_img{
            height: 100px;
            width: 100px;
            text-align: center;
        }
    </style>
</head>
<body style="margin:0 auto">
  <div style="height: 100px;background-color: skyblue;color: white;font-weight: bold;font-size: 30px;line-height: 100px">
      yomi的小卖部
  </div>
  <div style="border: 3px dashed lightslategray">
      <div style="border:5px solid antiquewhite;width:10%;height:600px;float: left;background-color: lightgray"></div>
      <div style="border:5px dotted powderblue;width:88%;height:600px;float: right;">
          <div class="pg_goods">
          </div>
          <div class="pg_goods">
          </div>
          <div class="pg_goods">
          </div>
      </div>
      <div style="clear: both;"></div>
  </div>
</body>
</html>

8、display样式的使用（4个情况：行内、块级、混合、空）

display:inline

display:block

display none

display inline-block

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href=‘commons.css‘>

</head>
<body>
     <div style="display: inline;background-color: red">it is div</div>
     <div style="display: none;">看不见我</div>
     <span style="display: block;background-color: yellow">it is span</span>
     <span style="display:inline-block;height: 20px;width: 400px;background-color: greenyellow">it is span ago,now it is inline-block</span>
     <div style="display:inline-block;height: 20px;width: 400px;background-color: skyblue">it is div ago,it is inline-block</div>
     <div style="display: none;">看不见我</div>
</body>
</html>

9、外边距 margin与内边距padding

                    margin不仅能设置边距，还能设置auto居中

技术分享图片

技术分享图片

     <div style="background-color:greenyellow;height: 150px;width:100px;margin:20px">

技术分享图片

 

技术分享图片

 

技术分享图片

  

 float与margin的结合使用

 

技术分享图片

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="margin:0 auto">
    <div style="background-color: lightgray;">
           <div style="width: 1500px;margin:0 auto">
              <div style="float: left;height: 30px;line-height: 30px">收藏本站</div>
              <div style="float: right;height: 30px;margin-left: 3px;line-height: 30px"><a href="http://www.baidu.com">登录</a></div>
              <div style="float: right;height: 30px;line-height: 30px"><a href="http://www.qq.com">注册</a></div>
              <div style="clear: both;"></div>
           </div>
           <div style="clear: both;"></div>
    </div>

</body>
</html>

10、补充一些技巧

10.1、css复用
将公有的样式放到一个css中私有的再单独写css，增加阅读性条理性。

<style>
如果整个页面的宽度 > 900px时：
.c{共有 }
.c1{独有}
.c2{独有}
<div class=‘c c1‘></div>
<div class=‘c c2‘></div>
10.2、自适应 和 改变大小变形
左右滚动条的出现
宽度，百分比

页面最外层：像素的宽度 => 最外层设置绝对宽度
技术分享图片

技术分享图片

技术分享图片

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="width:500px;margin:0 auto">

    <p>
        　　庆历四年春，滕子京谪守巴陵郡。越明年，政通人和，百废具兴。乃重修岳阳楼，增其旧制，刻唐贤今人诗赋于其上。属予作文以记之。(具 通：俱)

　　予观夫巴陵胜状，在洞庭一湖。衔远山，吞长江，浩浩汤汤，横无际涯；朝晖夕阴，气象万千。此则岳阳楼之大观也，前人之述备矣。然则北通巫峡，南极潇湘，迁客骚人，多会于此，览物之情，得无异乎?

　　若夫霪雨霏霏，连月不开，阴风怒号，浊浪排空；日星隐曜，山岳潜形；商旅不行，樯倾楫摧；薄暮冥冥，虎啸猿啼。登斯楼也，则有去国怀乡，忧谗畏讥，满目萧然，感极而悲者矣。(隐曜 一作：隐耀；霪雨 通：淫雨)

　　至若春和景明，波澜不惊，上下天光，一碧万顷；沙鸥翔集，锦鳞游泳；岸芷汀兰，郁郁青青。而或长烟一空，皓月千里，浮光跃金，静影沉璧，渔歌互答，此乐何极！登斯楼也，则有心旷神怡，宠辱偕忘，把酒临风，其喜洋洋者矣。

　　嗟夫！予尝求古仁人之心，或异二者之为，何哉？不以物喜，不以己悲；居庙堂之高则忧其民；处江湖之远则忧其君。是进亦忧，退亦忧。然则何时而乐耶？其必曰：“先天下之忧而忧，后天下之乐而乐”乎。噫！微斯人，吾谁与归？

　　时六年九月十五日。
    </p>
</div>

</body>
</html>

10.3、默认img标签，有一个1px的边框
img{border: 0;}

 

11、positon的三个情况（fix、relative、absolute） 

11.1 position:
a. fiexd => 固定在页面的某个位置 ，如页面工具栏，模态登录框
b.absolute=>第一次打开页面时候固定，后面拖动滚轮会移动。
b. relative + absolute 相对于relative标签，absolute与其保持固定的相对位置，如点赞

<div style=‘position:relative;‘>
<div style=‘position:absolute;top:0;left:0;‘></div>
</div>

11.2 模态登录框需要结合的参数：

opcity: 0.5 透明度 1->0 0消失

z-index: 层级顺序  越大越在上面

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .body{
            margin: 0 auto;
        }
        .pg_width{
            width:1760px;
        }
        .pg_head{
            height:44px;
            color:white;
            background-color: #2459a2;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
        }
        .pg_body{
            background-color: #ededed;
            height: 700px;
            margin-top: 46px;
        }
        .pg_info{
            margin: 0 auto;
            width: 1100px;
        }
        .c1{
            background-color: white;
        }
        .p{
          border: 1px solid black;
          height: 80px;
        }
        [name=‘pg_head‘] a{
            text-align: center;
            line-height: 44px;
            padding: 0 10px;
        }
        [name=‘pg_head‘] a:hover{
            font-weight: bold;
            background-color: blue;
            font-size: large;
        }

    </style>
</head>
<body class="body">
       <div name="to_top" style="height: 50px;width: 50px;background-color: gainsboro;position: fixed;bottom: 2px;right: 2px;z-index:10;font-size: 20px;text-align: center;line-height:25px">返回顶端</div>

       <div name="pg_head" class="pg_width pg_head" style="width: 100%">
           <div class="pg_info">
               <a>LOGO</a>
               <a>全部</a>
               <a>42区</a>
               <a>骰子</a>
               <a>图片</a>
           </div>
       </div>
       <div name="pg_body" class="pg_body">
           <div class="pg_info c1">
               <div class="p">
                   <div style="height: 20%;font-size: 10px">这是一篇文章的标题</div>
                   <div style="height: 60%;font-size: 10px">Python [1]（英国发音：/?pa?θ?n/ 美国发音：/?pa?θɑ?n/）, 是一种面向对象的解释型计算机程序设计语言，由荷兰人Guido van Rossum于1989年发明，第一个公开发行版发行于1991年。</div>
                   <div style="height: 20%;font-size: 10px;position: relative">
                       点赞
                       <span style="
                       color:red;
                       position: absolute;
                       top:-10px;
                       left: 20px;">+1</span>
                   </div>

               </div>
               <div style="height: 70px;width:140px;overflow: hidden">
                   <img src="手柄.png">
               </div>
               <div style="height: 70px;width:140px;overflow: auto">
                   <img src="手柄.png">
               </div>
           </div>
       </div>
       <div name="pg_tail" style="width:100%" >
           <div class="pg_info">
               <div style="text-align: center;">&copy 2018 yomi</div>
           </div>
       </div>


</body>
</html>

12、  overflow样式的hidden与auto

不加overflow -->撑开

 

overflow

拿图片测试 使用auto，则超出部分变为滚动条，使用hidden则隐藏

 

<div style="width:600px;height:300px; overflow: hidden">
    <img src="lx素材.jpg" >
</div>

 

 

 

技术分享图片

技术分享图片

 

拿文字测试

 

<div style="width:100px;height:100px;margin:0 auto;overflow: auto">

 

此处不截图了，效果和图片是一样的

13、hover鼠标悬停时候的样式

 不做截图了，上面有

        [name=‘pg_head‘] a:hover{
            font-weight: bold;
            background-color: blue;
            font-size: large;
        }

 

 14、backgroud与url结合添加图片

此处我们先不思考使用background添加图片和使用img标签添加图片的优劣对比

几个点：repeat、no-repeat、repeat-x、repeat-y、background-positon-x、background-position-y

repeat情况：

技术分享图片

no-repeat的情况

技术分享图片

 

repeat -x与repeat-y的情况 x轴重复与y轴重复

技术分享图片

<div style="background:url(icon_素材.png);height: 300px;width: 300px;background-repeat: repeat-x">

 

 

background-position-x、background-position-y的情况：通常用于一张大图截取不同的图标，结合在一张图上可以减少建立会话的数量

技术分享图片

 

 

 技术分享图片

 

<div style="height: 25%;font-size: 10px;position: relative">
                       <span style="
                                   display: inline-block;
                                   height: 18px;width: 18px;
                                   background: url(icon_素材.png);
                                   background-position-y:18px">
                        </span>
                        点赞
</div>

 二、输入框带图片的实现方法

1、step1 一个div套一个input

     <div style="height: 35px;width: 400px;border:1px solid red">
        <input type="text" style="height: 35px;width: 400px;" >
        <span class="c3"></span>
     </div>

技术分享图片

去掉border:1px solid red
     <div style="height: 35px;width: 400px;">
        <input type="text" style="height: 35px;width: 400px;" >
        <span class="c3"></span>
     </div>

技术分享图片

2、step2 一个div套一个span、图片为background且span与div保持relative与absolute的关系，来确保位置

开始放图片调整位置

     <div style="height: 35px;width: 200px;position: relative">
        <input type="text" style="height: 35px;width: 200px;" >
        <span style="position: absolute;display: inline-block;right: 2px;top:10px;height: 16px;width: 16px;background: url(i_name.jpg);"></span>
     </div>
出现挡住文字的情况

技术分享图片

3、padding调整位置并调整width的值

使用padding调整
     <div style="height: 35px;width: 200px;position: relative">
        <input type="text" style="height: 35px;width: 200px;padding-right: 30px" >
        <span style="position: absolute;display: inline-block;right: 2px;top:10px;height: 16px;width: 16px;background: url(i_name.jpg);"></span>
     </div>

发现图片发生偏移

技术分享图片

4、完成

调整input标签 padding多少减多少

成功
     <div style="height: 35px;width: 200px;position: relative">
        <input type="text" style="height: 35px;width: 170px;padding-right: 30px" >
        <span style="position: absolute;display: inline-block;right: 2px;top:10px;height: 16px;width: 16px;background: url(i_name.jpg);"></span>
     </div>

技术分享图片

 

python笔记-15 css

原文：https://www.cnblogs.com/yomi/p/9244801.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
教程昨日排行
更多>
友情链接
汇智网   PHP教程   插件网  
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣，分享程序人生！