Python Day15(CSS)

Posted 2020-09-29

一、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‘]{ width: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;}

4.float：

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

<div style="width: 20%;background-color: red;float: left">1</div>
<div style="width: 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>