CSS 常用帮助文档

CSS：被用来同时控制多重网页的样式和布局。
HTML页面中CSS样式的写法有3种：
1：标签中写入
　　<body style='margin o auto;'>
2：head头标签内
　　<style>
　　　　body { margin:0 auto;}
　　</style>
3：head头标签内引入css文件
　　<link rel='stylesheet' href='commons.css' />

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

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

CSS 选择器有以下几种：
第一种：id选择器(#i1)
　　<标签 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 id='i1'></div>
　　　　<div id='i2'></div>
　　　　<div id='i3'></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 右漂），注意：如果将父级覆盖，则在最后使用参数：<style='clear:both;'>

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 style='position:relative;'>
　　　　<div style='position:absolute;top:0,left:0;'></div>
　　</div>
　　这里absolute的位置是相对于relative标签的位置周边定位

opacity：透明度，取值范围（0 - 1）

z-index：层级顺序，要结合opcity进行透明度设定。
2层写法举例：
　　<div style='z-index:10;position:fixed;top:50px;left:100px;background-color:white;'>
　　# 这里在引入一层，需要通过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 style='height:5000px;background-color:green;'>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 style='height:35px;width:400px;position;relative;'>
　　　　<input type='text' style='height:35px;width:370px;padding-right:30px;'>
　　　　<span style='position:absolute;right:6px;top:10px;background-image:url(i_name.jpg);height:16px;width:16px;display:inline-block;'></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 style='width:980px;margin:0 auto;'>页面头</div>
　　</div>
　　<div class='pg-content'>
　　　　<div style='width:980px;margin:0 auto;'>页面体</div>
　　</div>
　　<div class='pg-footer'>
　　　　<div style='width:980px;margin:0 auto;'>页面尾</div>
　　</div>

前端学习之--CSS的更多相关文章

  1. 前端学习：CSS的学习总结(图解）

    前端学习:CSS的学习总结(图解) CSS代码笔记 CSS简介 css的引入方式和书写规范 CSS选择器 CSS属性 CSS盒子模型 CSS的定位

  2. 2016.01.22 前端学习 HTML/CSS

    学习HTML/CSS  http://edu.51cto.com/course/course_id-3116.html 明日实践

  3. 前端学习 之 CSS（三）

    九:浮动 浮动是css里面布局最多的一个属性,也是很重要的一个属性. float:表示浮动的意思. 属性值: none: 表示不浮动,默认 left: 表示左浮动 right:表示右浮动 例: htm ...

  4. 前端学习之CSS

    CSS介绍 CSS(Cascading Style Sheet, 层叠样式表)定义如何显示HTML元素, 给HTML设置样式, 让它更加美观. 当浏览器读到一个样式表, 它就会按照这个样式表来对文档进 ...

  5. 前端学习 -- Html&Css -- 条件Hack 和属性Hack

    条件Hack 语法: <!--[if <keywords>? IE <version>?]> HTML代码块 <![endif]--> <keyw ...

  6. 前端学习笔记——CSS选择器

    学习css选择器之前我们先了解下css规则: CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明: 选择器通常是需要改变样式的 HTML 元素. 每条声明由一个属性和一个值组成. 1.id选 ...

  7. 前端学习 之 CSS（二）

    五:继承性和层叠性 css有两大特性,即继承性和层叠性. 1. 继承性 面向对象语言都会存在继承的概念,在面向对象语言中,继承的特点:继承了父类的属性和方法.那么我们现在主要研究css,css就是在设 ...

  8. 前端学习 之 CSS（一）

    一:什么是 CSS? ·CSS 指层叠样式表 (Cascading Style Sheets) ·样式定义如何显示 HTML 元素 ·样式通常存储在样式表中 ·把样式添加到 HTML 4.0 中,是为 ...

  9. 前端学习笔记 - Css初级篇

    有话先说:我是一只菜鸟,一只都是,从前是现在也是. CSS中的会计元素与行内元素 块级元素特性:占据一整行,总是重起一行并且后面的元素也必须另起一行显示.内联元素特性:和其他内联元素显示在同一行. 可 ...

  10. web前端学习笔记(CSS变化宽度布局)

    一.“1-2-1”单列变宽布局: 对于变宽度的布局,首先要使内容的整体宽度随浏览器窗口宽度的变化而变化.因此中间的container容器中的左右两列的总宽度也会变化,这样就会产生不同的情况.这两列是按 ...

随机推荐

  1. Bloom Filter概念和原理【转】

    Bloom Filter概念和原理 Bloom Filter是一种空间效率很高的随机数据结构,它利用位数组很简洁地表示一个集合,并能判断一个元素是否属于这个集合.Bloom Filter的这种高效是有 ...

  2. 46 Simple Python Exercises-Higher order functions and list comprehensions

    26. Using the higher order function reduce(), write a function max_in_list() that takes a list of nu ...

  3. 正确使用MySQL JDBC setFetchSize()方法解决JDBC处理大结果

    一直很纠结,Oracle的快速返回机制,虽然结果集很多,可是它能很快的显示第一个结果,虽然通过MYSQl的客户端可以做到,但是通过JDBC却不行. 今天用了1个多小时,终于搞定此问题,希望对广大Jav ...

  4. 原创：E325: ATTENTION vim超完整超给力的问题与解决方法

    又到了老葵花哥哥开课的时间 这是给大家提供一个企业常见的错误 我相信大家生活还编程中会长期使用接触这个错误 这里我们经常用的两个选项 (E)dit any way 编辑原来的文件,忽略刚刚做的修改 ( ...

  5. 获取指定点的RGB值

    实现效果: 知识运用: Color对象的RGB属性 实现代码: private void button1_Click(object sender, EventArgs e) { OpenFileDia ...

  6. 【转】C#的版本

    这年头啥东东都喜欢过段时间整个啥新版本出来.汽车,手机如此,软件就更是如此了啊.比如啥Iphone 4,Iphone 5,Windows 8,Oracle 12C,SQL Server 2010. 版 ...

  7. C++函数形参为指针和指针引用的区别

    区别: 1.指针传参被调用函数的指针变量在栈内存中重新申请内存. 2.指针引用传参被调用函数的指针变量与调用函数的指针变量共用一块空间. // PointerCite.cpp : 定义控制台应用程序的 ...

  8. 记录xerces使用（VS2017 C++）

    1.编译xerces,获得dll文件和lib文件 2.将dll文件和lib文件拷贝到使用xerces的工程目录里面去 3.配置VS2017 C/C++  ->  All Options --&g ...

  9. Java 一些常见问题（持续更新）

    1. Java 内部类 内部类有四种常见的类型:成员内部类.局部内部类.匿名内部类和静态内部类. 1.成员内部类:定义为另一个类的里面如下: class Circle { double radius ...

  10. POJ-3278 抓住这头牛

    广搜解决. 广搜搜出最短路,直接输出返回就行了. 每个点只搜一次,而且界限进行一次判断. else 语句里面不要用if    else if,这样的话就直走一条路了. #include <ios ...