前端学习之--CSS

CSS 常用帮助文档

CSS:被用来同时控制多重网页的样式和布局。

HTML页面中CSS样式的写法有3种:

1:标签中写入

  <body >

2:head头标签内

  <style>

    body { margin:0 auto;}

  </style>

3:head头标签内引入css文件

  <link rel='stylesheet' href='commons.css' />

优先级:标签上的style最高,编写顺序,就近原则

CSS注释方法:/* ... */

CSS 选择器有以下几种:

第一种:id选择器(#i1)

  <标签 >

    #i1{

      background-color: #00000;

      height: 48px;

      }

第二种:class选择器

    <标签 class='c1'></标签>

      .c1{

        background-color: #00000;

        height: 48px;

        }

第三种: 标签选择器

    <div></标签>

      div{

        background-color: #00000;

        height: 48px;

        }

第四种:层级模式(可以多个层级)

    <span><div>test</div></span>

      span div{ ... } 表示span下的div标签使用此样式

      .c1 div{...} 表示class为c1下的div标签

第五种:组合选择器

    <div ></div>

    <div ></div>

    <div ></div>

      #i1,#i2,#i3{...}

      .c1,.c2,.c3{...}

第六种:属性选择器,对选择到的标签再通过属性进行一次赛选

    <input type='text'>

    input[type='text']{width:100px;height:200px;}

以下主要介绍些常用的css样式

border: 1px solid red; 边框属性依次为,边框宽度,边框样式,边框颜色

height:标签高度

width:标签宽度(像素,百分比)

min-height 设置元素的最小高度。

min-width 设置元素的最小宽度。

line-height:垂直方向根据标签高度居中

text-aligh:center 水平方向居中

color:字体颜色

font-size:字体大小

font-weight:字体加粗

float:标签进行漂移,也就是块级标签堆叠,(left 左漂,right 右漂),注意:如果将父级覆盖,则在最后使用参数:<>

display:可选参数如下

  - block:将内联标签转换为块级标签

  - inline:将块级标签转换为内联标签

  - inline-block:同时具有块级标签和内联标签的属性。(内联标签不具有padding,margin,高,宽等属性设置)

  - none:设置此属性的标签消失

padding:内边距,元素边框与元素内容之间的空间

margin:外边距,定义元素周围的空间,div整体居中(0,auto)

position:元素定位,参数如下

  - fixed:固定元素在游览器窗口的指定位置,不随页面的滚动而移动。 举例:(position:fixed,top:0,left:0,right:0)

  - relative + absolute:这2个元素要一起使用,二者之间是相对定位

  - Relative 定位:相对定位元素的定位是相对其正常位置。

  - Absolute 定位:绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>

举例:

  <div >

    <div ></div>

  </div>

  这里absolute的位置是相对于relative标签的位置周边定位

opacity:透明度,取值范围(0 - 1)

z-index:层级顺序,要结合opcity进行透明度设定。

2层写法举例:

  <div >

  # 这里在引入一层,需要通过z-index:10值的高低来确定优先度,数字越大越在最上层。

  <div style='z-index:9;position:fixed;background-color:black;top:0,bottom:0;right:0;left;0;opacity:0.5;></div> # 这个就是设置透明度(1就完全覆盖)

  <div >sdf</div>

overflow:设置当元素的内容溢出其区域时发生的事情,参数如下

  - auto:当图片大小超过设定的大小,则在设定的范围出现滑轮。

  - hidden:当图片大小超过设定的大小,则只显示设定大小的窗口。

hover:当鼠标移动到当前标签上时,以下css属性才生效,

  写法:.pg-header .menu:hover{ background-color:blue}

background-image:背景图像。body {background-image:url('paper.gif');}

background-color:背景颜色,使用在body。 body {background-color:#b0c4de;}

background-repeat:背景图像增加方式,参数如下:

  - repeat-x: 只横向增加

  - repeat-y: 只纵向增加

  - no-repeat: 不堆叠

background-position:改变图像在背景中的位置,如:background-position:10px,10px;

实例:账户输入框内最右侧增加用户名的图片

  <div >

    <input type='text' >

    <span ></span>

  </div>

技巧:

1:CSS重用功能

  <style>

    .c{ 共有}

    .c1{ 独有}

    .c2{ 独有}

  </style>

  <div class='c,c1'></div>

  <div class='c,c2'></div>

2:默认图片的外边框是1px,去掉:img:{broder:0}

举例:常用页面的布局

1:主站的布局

  <div class='pg-header'>

    <div >页面头</div>

  </div>

  <div class='pg-content'>

    <div >页面体</div>

  </div>

  <div class='pg-footer'>

    <div >页面尾</div>

  </div>