首行缩进:
text-indent:2em
行高:
line-height:1.5em 1.5倍行距 也可以设置像素
文字修饰:
text-decoration:underline下划线 line-through 删除线
字符间隔:
letter-spacing:3px

内边距:
padding:10px;
上内边距
padding-top:20px;
右内边距
padding-right:50px;
简写:
padding:top bottom
padding:top left-right bottom
padding:top right bottom left
全局Reset(设置器)
*
{
padding:
margin:
}
块级元素:
宽度:如果没有设置 默认宽度:100%
高度:没有设置,会随着内容改变
让块级元素居中:
margin 0 auto 上下0 左右自动
块元素转为行元素:
display:inline
行元素转为块元素:
display:block

给a标签设置宽高
转成块级元素

块级元素都到一行,又能设置宽高
float:left

隐藏元素
diaplay:none

溢出盒子的内容:
overflow:hidden 直接隐藏掉
overflow:scroll 加滚动条
overflow:auto 自动加滚动条

单独设置边框
border-right:10px solid red

float:
从左穿,穿 到最左边往上走。直到左边没有float属性的元素。左边有float的元素,就在它的右边
如有三个格子,在三行。第一行 的格子没有float属性,第二行有,第二行的元素不会到第一行去。

有浮动属性的元素,是脱离文档流的。
非浮动元素会忽略掉它前面的浮动元素

如果父级元素放不下,会放到下面

有float属性的元素,默认是撑不开父级元素的

相对定位:
相对于原来的位置
position:relative
left:100px;
top:50px;
跟以前的差距,它原来的位置还保留着

绝对定位:
1、相对于离他最近有,有定位属性的 父级元素进行定位
2、它原来的位置不再保留

有定位属性的元素默认的层级都是0,但是后来居上。
控制层级用:z-index,谁大谁就在上面

注意:只有有定位属性的元素才有层级这个概念

背景图片:
background-image:url();
平铺方式:
background-repeat:
位置:
background-position:50px 30px; 左50px 上30px

一般在做图标的时候,其实用的是一张图片
background-position:-X -Y
用PS量好就行了

背景图片简写:
background:#eee url() no-repeat -350px -215px;不要哪个属性,直接不写就行了
顺序:颜色 背景图 重复方式 背景图的位置

visibility属性:
display:none 不显示不保留位置
visibility:hidden 不显示 保留位置

透明度:
opacity: 0.5 0-1取值范围
filter:alpha(opacity=55) 0 - 100取值范围 低版本IE用
可以 两个一起写

取消li标签圆点
list-style:none

CSS命名规范:
对于页面中具有唯一性,结构性的模块,使用ID选择器,其他一般采用class选择器
选择器命名一律使用小写字母

CSS HACK 浏览器调兼容性

哪个效果 有问题,就单独为这个浏览器指定效果
background:green\9; 所有IE浏览器能识别
background:blue\0; IE8 IE9能识别
+background:orange; IE6 IE7能识别
_background:red; IE6能识别

能认识CSS3 又是所有IE浏览器, 则IE9以上都可以
#root #hd{
background:pink\9;
}

设置IE7+ 再用_设置IE6回来

CSS样式基础总结的更多相关文章

  1. CSS样式基础知识

    CSS样式基础知识 CSS样式概述 CSS是Cascading Style Sheet 的缩写.译作“层叠样式表单”.是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. 引用位 ...

  2. HTML CSS样式基础

    一.css 1.什么是css? Cascading Style Sheet 级联样式表 改变样式的一个工具,说白了,就是为了让我们的页面好看, HTML底层封装了css这样一个工具. 2.怎么使用cs ...

  3. CSS样式基础:

    CSS:外部文件导入  <link rel="stylesheet" type="text/css" href="./style.css&quo ...

  4. css样式基础详解

    一.字体属性:(font) 1.大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 2.样式 {font-styl ...

  5. CSS样式基础2

    CSS: 一.常用样式:字体,颜色,背景 二.布局:浮动  定位  标签特性 三.标签盒子模型: 边距  边框 四.动画:旋转 渐变 注意:子标签会继承父标签的样式但不是所有的样式都会被继承. 1.1 ...

  6. css样式基础三

    css的定位: 其中css中被分为块级元素与行内元素.如块级元素div.hx标签.p元素.行内元素span和strong W3school给出的一切皆为框的定义. 而且可以使用display属性,强行 ...

  7. Css样式基础

    1.Css的语法 CSS的语法主要由两个部分组成,一个是选择器,一个是属性. 选择器又分为以下几种: 1.元素选择器:即Html标签去掉括号的就是元素 2.类选择器:所谓的类就是说class=“名称” ...

  8. CSS样式基础二

    一.列表 主要分为有序列表ol,无序列表ul <ul> <li></li> ... </ul> <ol> <li></li ...

  9. Emmet快速编写CSS样式

    基本的CSS样式编写时,很多样式只需输入首字母即可得到不带属性值的CSS样式,像上面说到的margin. 1.而对于一些带有特定的属性值的CSS样式,只需输入CSS标签与属性值的首字母就可以,比如: ...

随机推荐

  1. htm常用标签总结

    1.结构性定义 文件类型 <HTML></HTML> (放在档案的开头与结尾) 文件主题 <TITLE></TITLE> (必须放在「文头」区块内) 文 ...

  2. React Native:使用 JavaScript 构建原生应用

    [转载] 本篇为联合翻译,译者:寸志,范洪春,kmokidd,姜天意 数月前,Facebook 对外宣布了正在开发的 React Native 框架,这个框架允许你使用 JavaScript 开发原生 ...

  3. CentOS6.x生产环境下一键安装mono+jexus的脚本,自启动,带服务,版本号自控

    转自: http://linuxdot.net/bbsfile-3784 1.支持哪些个平台?答:暂时仅支持CentOS6.x平台,7.x未测试,欢迎测试并到群里反馈给我(昵称:无聊人士) 2.一键安 ...

  4. SqlServer表结构查询

    一.前言 近两天项目升级数据迁移,将老版本(sqlserver)的数据迁移到新版本(mysql)数据库,需要整理一个Excel表格出来,映射两个库之间的表格字段,示例如下: Mysql数据库查询表结构 ...

  5. SQL Server 2012 新特性:其他

    安装期间的设置   为了强化角色分离,不自动在 sysadmin 固定服务器角色中设置 BUILTIN\administrators 和 Local System (NT AUTHORITY\SYST ...

  6. mysql半同步(semi-sync)源码实现

    mysql复制简单介绍了mysql semi-sync的出现的原因,并说明了semi-sync如何保证不丢数据.这篇文章主要侧重于semi-sync的实现,结合源码将semi-sync的实现过程展现给 ...

  7. 转载 c# 颜色对照表

    这篇文章来来源于C# Color Table,这里是我翻译的中文版本,其中已经加上了我的一些理解和注释.翻译这篇文章的原因是我在写C#程序的时候发现,C#自带的颜色种类极多(详见下表),如果没有直观的 ...

  8. 搭建基于PHP的www服务器

    安装MySQL #!/bin/bash mount |grep "/dev/sr0" if [ "$?" != 0 ];then mount /dev/sr0 ...

  9. UVA10325 The Lottery(容斥原理)

    题意: 给n,m,和m个数(k1~km).求1~n中有多少个数不是(k1~km)中任意一数的倍数. 题解: 容斥模板题.反面考虑,a的倍数有n/a个:既是a,也是b的倍数,即lcm(a,b)的倍数有n ...

  10. OpenStack 企业私有云的若干需求(4):混合云支持 (Hybrid Cloud Support)

    本系列会介绍OpenStack 企业私有云的几个需求: 自动扩展(Auto-scaling)支持 多租户和租户隔离 (multi-tenancy and tenancy isolation) 混合云( ...