zoukankan      html  css  js  c++  java

  • Python Day15(CSS)

    一、CSS概述

    1.简介

    css是英文Cascading Style Sheets的缩写,称为层叠样式表，用于对页面进行美化。
     
    存在方式有三种：元素内联、页面嵌入和外部引入，比较三种方式的优缺点。
     
    语法：style = 'key1:value1;key2:value2;'
     
    • 在标签中使用 style='xx:xxx;'
    • 在页面中嵌入 < style type="text/css"> </style > 块
    • 引入外部css文件
     
    必要性：美工会对页面的色彩搭配和图片的美化负责，开发人员则必须知道是如何实现的。
    PS：css注释    /*     */

    2.标签选择器

    id选择区:

    #i1{
  background-color: #2459a2;
  height: 48px;
  }

    class选择器 ******

    .名称{
  ...
  }

  <标签 class='名称'> </标签>

    标签选择器:

      div{
  ...
  }

  所有div设置上此样式

    层级选择器（空格隔开） ******

      .c1 .c2 div{

  }

    组合选择器（逗号） ******

    #c1,.c2,div{

  }

    属性选择器 ******

    对选择到的标签再通过属性再进行一次筛选

    .c1[n='alex']{ 100px; height:200px; }
    PS:
      - 优先级，标签上style优先，编写顺序，就近原则
     

    3.补充CSS书写顺序

    1. 位置属性(position, top, right, z-index, display, float等)
    2. 大小(width, height, padding, margin)
    3. 文字系列(font, line-height, letter-spacing, color- text-align等)
    4. 背景(background, border等)
    5. 其他(animation, transition等)

    二、CSS各种属性

    1.边框：

    border: 1px solid red
border-top  # 上
border-bottom  # 下
border-left  # 左
border-right  # 右

     2.background：

    background-color;                    # 背景颜色
background-image:url('image/4.gif'); # 默认，div大，图片重复放
background-repeat: repeat-y;         # 是否重复
background-position-x:               # 图片x轴位置
background-position-y:               # 图片y轴位置
background: url(icon_18_118.png) 0 -119px no-repeat;  # 简写

    3.常用属性：

    height;                 # 高度 百分比
width;                  # 宽度 像素，百分比
text-align: center;     # 水平方向居中
line-height;            # 垂直方向根据标签高度居中
color;                  # 字体颜色
font-size;              # 字体大小
font-weight;            # 字体加粗
text-decoration:none;   # 去除超链接的下划线
opcity: 0.6;            # 透明度
z-index: 10;            # 高的在上面
overflow: hidden,auto   # 规定当内容溢出元素框时发生的事情,隐藏或者出现滚动条
hover                   # 选择鼠标指针浮动在其上的元素，并设置其样式 a:hover{background-color:yellow;}
min-width               # 最小宽度
max-width               # 最大宽度

    4.float：

    让标签浪起来，块级标签也可以堆叠

    <div style=" 20%;background-color: red;float: left">1</div>
<div style=" 20%;background-color: black;float: left">2</div>

    控制不住加上：<div style="clear: both;"></div>

    5.display：

    display: none; -- 让标签消失
display: inline;  # 行内
display: block;  # 块级
display: inline-block;
        具有inline,默认自己有多少占多少
        具有block，可以设置高度，宽度，padding  margin
******
行内标签：无法设置高度，宽度，padding  margin
块级标签：设置高度，宽度，padding  margin
    6.margin(外边距)可以改变位置
    CSS Margin(外边距)属性定义元素周围的空间。
    margin清除周围的元素（外边框）的区域。margin没有背景颜色，是完全透明的
    margin可以单独改变元素的上，下，左，右边距。也可以一次改变所有的属性。
    PS：margin: 0 auto
    margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
    margin:100px 50px;

    ps:缩写如果写全的话，顺序是上右下左，其实就是顺时针方向.

    7.padding（填充）改变自身
    CSS Padding（填充）属性定义元素边框与元素内容之间的空间。
    当元素的 Padding（填充）（内边距）被清除时，所"释放"的区域将会受到元素背景颜色的填充。
    单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用，一旦改变一切都改变。
    padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
    padding:25px 50px;

    8.position：

    fiexd (固定在页面的某个位置)

    {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}

    relative + absolute

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

    三、CSS补充

    1.页面布局
     
    主站
    <div class='pg-header'>
      <div style='980px;margin:0 auto;'>
          内容自动居中
      </div>
</div>
<div  class='pg-content'></div>
<div  class='pg-footer'></div>

    后台管理布局：

    position:
    • fiexd            -- 永远固定在窗口的某个位置
    • relative         -- 单独无意义
    • absolute       -- 第一次定位，可以在指定位置，但是随着滚动条的滚动则会发生变化
    第一种布局:
    左侧菜单跟随滚动条
     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="x-ua-compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <title>Title</title>
 8     <style>
 9         body{
10             margin: 0;
11         }
12 
13         .pg-header{
14             height: 48px;
15             background-color: #2459a2;
16             line-height: 48px;
17         }
18 
19         .pg-nav{
20             position: absolute;
21             top: 48px;
22             bottom: 0;
23             left: 0;
24             width: 200px;
25             background-color: #dddddd;
26         }
27 
28         .pg-body{
29             position: absolute;
30             top: 48px;
31             right: 0;
32             bottom: 0;
33             left: 200px;
34             background-color: pink;
35         }
36     </style>
37 </head>
38 <body>
39     <div class="pg-header"></div>
40     <div class="pg-nav"></div>
41     <div class="pg-body">
42         <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
43         <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
44         <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
45         <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
46         <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
47         <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
48         <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
49         <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
50     </div>
51 </body>
52 </html>
    View Code
     
    第二种布局:
    左侧以及上不不动
     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="x-ua-compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <title>Title</title>
 8     <style>
 9         body{
10             margin: 0;
11         }
12 
13         .pg-header{
14             height: 48px;
15             background-color: #2459a2;
16             line-height: 48px;
17         }
18 
19         .pg-nav{
20             position: absolute;
21             top: 48px;
22             bottom: 0;
23             left: 0;
24             width: 200px;
25             background-color: #dddddd;
26             overflow: auto;
27         }
28 
29         .pg-body{
30             position: absolute;
31             top: 48px;
32             right: 0;
33             bottom: 0;
34             left: 200px;
35             background-color: pink;
36             overflow: auto;
37         }
38     </style>
39 </head>
40 <body>
41     <div class="pg-header"></div>
42     <div class="pg-nav">
43         <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
44         <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
45         <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
46         <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
47     </div>
48     <div class="pg-body">
49         <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
50         <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
51         <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
52         <p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p><p>hello</p>
53     </div>
54 </body>
55 </html>
    View Code

    2.hover高级用法

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="x-ua-compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
 8     <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
 9     <title>Title</title>
10     <style>
11         body{
12             margin: 0;
13         }
14         .c1{
15             height: 48px;
16             line-height: 48px;
17             background-color: #1c5a9c;
18         }
19         .c2{
20             width: 1100px;
21             height: 48px;
22             margin: 0 auto;
23         }
24         .c3{
25             position: relative;
26             width: 50px;
27             height: 48px;
28             line-height: 48px;
29             text-align: center;
30         }
31         .c3:hover {
32             background-color: #5956dc;
33         }
34         .c3:hover .c4 {
35             display: block;
36         }
37         .c4 {
38             display: none;
39             position: absolute;
40             width: 100px;
41             top: 48px;
42             left: -25px;
43             background-color: #f1f2f7;
44         }
45         .c4 a{
46             display: block;
47         }
48     </style>
49 </head>
50 <body>
51     <div class="c1">
52         <div class="c2">
53             <div class="c3">
54                 <a href="#"><i class="fa fa-user-o" aria-hidden="true"></i></a>
55                 <div class="c4">
56                     <a href="">我的资料</a>
57                     <a href="">注销</a>
58                 </div>
59             </div>
60         </div>
61     </div>
62 </body>
63 </html>
    View Code
     
  • 相关阅读:
    poj3673
    poj3438
    poj3461
    poj3518
    poj3672
    变秃了，也变强了！爆肝吐血整理出的超硬核JVM笔记分享！
    左手字节，右手阿里，我是如何通阿里架构师的java面试文档，拿到多家大厂offer的
    Java异常处理与常用类
    copy_{to, from}_user()的思考
    vi文本编辑器常用指令功能
  • 原文地址：https://www.cnblogs.com/breakering/p/7221173.html
Copyright © 2011-2022 走看看