码迷,mamicode.com
首页 > 编程语言 > 详细

Python Day15(CSS)

时间:2017-07-22 15:30:29      阅读:200      评论:0      收藏:0      [点我收藏+]

标签:隐藏   key   animation   页面   之间   bsp   type   存在   字体加粗   

一、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>

 

 
 

Python Day15(CSS)

标签:隐藏   key   animation   页面   之间   bsp   type   存在   字体加粗   

原文地址:http://www.cnblogs.com/breakering/p/7221173.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!