CSS ：层叠样式表 cascading style sheets 它的作用是：美化html网页

格式：样式名：值；样式名：值；样式名：值；

注释语法：/* 注释内容 */

选中代码按TAB，代码左移，shift+tab右移

（一）基本：

一：分类：

1.内联 和html联合显示,控制精确，可重用性差，冗余多

<p >呵呵呵</p>

2.内嵌 作为一个独立区域内嵌在网页里，必须在head里面

<head>

<style type="text/css">
p 对页面里的p起作用
{
font-size：108px;
}

</style>
</head>

3.外部 建个CSS文件夹，新建CSS文件

右键，css样式表，附加样式表，找到文件，一般用link连接方式

二：选择器

1.简单选择器

*是所有的

标签选择器： 用标签名做选择器，如：p{样式}
class选择器：设置统一的class，比如在<p class="qd"> 在样式表中用点代表class的选择器 .qd{样式}
id选择器：针对某个id起作用，id不允许重。<p id="xx"> 在样式表中#xx{样式}

id选择器优先级高于class选择器优先级高于标签名选择器，优先级高的会覆盖掉优先级低的样式，样式表优先级高于属性的

2.复合选择器

以逗号隔开；并列关系，同时起作用如：#xx,#dd{ 样式 }
以空格隔开，后代关系，如果p在div里面，则用 div p { 样式 }
以点隔开的，筛选关系，p.qd { }对p进行class筛选，p里class为qd的执行样式

（二）样式：

一：背景与前景
background-color:#eeeeff;背景颜色
background-image:url(image/8b322d3f373e4a3fb8a1677e.jpg)；背景图片（默认平铺）：

background-attachment:fixed; 背景固定
background-attachment:scroll;背景和字一起滚动，默认是一起
background-repeat:repeat;对齐方式，默认平铺repeat
background-repeat:no-repeat;不平铺
background-repeat:repeat-x;横向平铺
background-repeat:repeat-y;纵向平铺
background-position:center;不平铺的情况下位置放到中间
background-position:right bottom;右下角
background-position:right 100px bottom 100px;离右边100，离下面100，可以是负的值

前景
font-family:"隶书";字体名称（微软雅黑，宋体）
font-size:12px; 字体大小，像素（12px,14px,18px）8em默认字体的8倍还可以用百分比
font-weight:100; bold,normal 是否加粗
font-style:inherit; italic,normal是否倾斜
color:#09F;颜色

文本对齐修饰
text-decoration:underline;下划线，overline上划线，line-through删除线，none是去掉下划线，可以去掉超链接的下划线
text-align:center;横向对齐方式
vertical-align:middle;纵向对齐方式top.middle,bottom
text-indent:首行缩进量，如果字体是14px,则缩进两个位28px
line-height:行高 一般是1.5到2倍的字体大小

二：边界与边框

1.border类：边框

border: 5px solid blue ；5个像素的粗细，样式是实线，颜色是blue；
border-width:5px; border-style:double;border-color:red;这是分开设置粗细，样式和颜色
border-top:5px solid red;设置上面的 border-bottom:5px solid red;设置下面的

2.margin类：外边距

margin:10px;四个边距都是10px； margin-top:10px; right,left,bottom;上右左下
margin:10px 0px 10px 0px;顺序是顺时针：上右下左。

3.padding类：内边距

padding:10px 0px 10px 0px;顺时针，上右下左

三：列表与方块

默认布局方式，流式布局，上到下，左到右，相对流式布局

width,height, 只有在绝对定位布局时可用（left,top,right,bottom）

对ol列表：
list-style:none;去掉有序数字 circle;是圆圈，disc圆点
list-style-image：url(images/8.jpg);列表图片
list-style-position:outside; 符号在边距上，inside符号在边距之内
margin padding 默认是有边距和间距
list-style-type:disc 类型

四：格式与布局

布局的时候一般最上面写上：

*
{
margin:0px auto;
padding:0px;
}

让所有的外距和内距为0，加了auto居中。

1.position：
obsolute; 绝对定位，放在页面首屏的那个位置，跟着滚动
外层没有position=absolute或relative它按照浏览器边框定位
如果外层有position=absolute或relative它按照外层的那个元素的边框进行定位

fixed； 固定在页面的一个位置上，滚动屏幕，它不动，针对浏览器边框定位

正常一个div默认占一行，确定它本来应该在的位置， 如果不设置position，则left,right,top,bottom不管用
relative;相当于之前应当在的位置进行移动，之前的位置应该是左上角

2.z-index:9; z轴，控制谁在上层，大的压小的

3.溢出overflow:超出范围
hidden隐藏 scroll出现滚动条

4.float:浮动方向，原本默认占一行，float之后可以在一行内放多个
float:left 从左边浮

5.clear:both 截断流 加一行<div >截断浮动流

2014-11-26----css的简介的更多相关文章

  1. css012 css布局简介

    css012  css布局简介 一.    网页布局的类型 网页布局的类型 1.固定宽度 2.流式 3.相应式web设计 二.    如何进行css布局 1.强大的<div>标签 网页的h ...

  2. CSS 选择器简介

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 选择器权重 如果以4位数表示选择符权重,那么: 元素选择器的权重是1: id 选择器的权重为100: cl ...

  3. ssh The authenticity of host '10.11.26.2 (10.11.26.2)' can't be established

    The authenticity of host '10.11.26.2 (10.11.26.2)' can't be established. ECDSA key fingerprint is SH ...

  4. Notes of Scrum Meeting(2014/11/2)

    Notes of Scrum Meeting (2014/11/2) 软件工程项目组Sevens开始项目之后的第一次Scrum Meeting报告 会议时间:2014年11月2日  20:00—20: ...

  5. string源码分析 ——转载 http://blogs.360.cn/360cloud/2012/11/26/linux-gcc-stl-string-in-depth/

    1. 问题提出 最近在我们的项目当中,出现了两次与使用string相关的问题. 1.1. 问题1:新代码引入的Bug 前一段时间有一个老项目来一个新需求,我们新增了一些代码逻辑来处理这个新需求.测试阶 ...

  6. 【知识点总结】NOIP前夕 2014.11.4

    2014.11.4 7:33 还有三天半就要NOIP,圈一下要背的知识点: 一.数论 1.素数判断 2.筛法求素数 3.求一个数的欧拉函数值 4.预处理欧拉函数 5.卡塔兰数递推式 6.快速幂(模素数 ...

  7. 妙味css3课程---1-1、css中自定义属性可以用属性选择器么

    妙味css3课程---1-1.css中自定义属性可以用属性选择器么 一.总结 一句话总结:可以的. 1.如何实现用属性选择器实现a标签根据href里面含有的字段选择背景图片? p a[href*=te ...

  8. Goland 2020.2.x 激活码永久破解教程 （最新Goland激活码！2020.11.26亲测可用！）

    在2020.11.26 Goland的用户们又迎来了一次更新,这就导致很多软件打开时候就提示Goland激活码已经失效,码小辫第一时间给各位分享了关于最新Goland激活破解教程! goland已经更 ...

  9. LESS CSS 框架简介(转)

    原文地址:http://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/ 简介 CSS(层叠样式表)是一门历史悠久的标记性语言,同 HTML ...

  10. LESS CSS 框架简介

    使用 LESS 简化层叠样式表(CSS)的编写 LESS 是动态的样式表语言,通过简洁明了的语法定义,使编写 CSS 的工作变得非常简单.本文将通过实例,为大家介绍这一框架. 简介 CSS(层叠样式表 ...

随机推荐

  1. 用户故事（User Story）

    摘要: 一件用户通过系统完成他一个有价值的目标(买一罐饮料)的事.这样的过程就叫“用户案例(user case)”或者“用户故事(user story)”.本文描述了敏捷开发的技巧:如何以用户故事管理 ...

  2. sql 将Null 值转化成空字符串

    当Null + 任何字符串时,都等于Null. 因些用函数IsNull(字段名,''),如果字段名中的值是Null时,那么这个字段名的值是''. 例如::select code + IsNull('- ...

  3. Axure原型用pmdaniu在线托管尝试

    这次把原型中语音模块的坑填了一部分,实现了拖拽按钮控制的界面效果 http://www.pmdaniu.com/prototype/view?id=WXpVNwNhUmYMPFN3AkA

  4. 开发小技巧：C#逐个输出字符

    静态自定义方法: static int counter = 0; static string displayString = "This string will appear one let ...

  5. Robot Framework自动化测试环境准备（一）

    Robot framework是诺西(NSN)开源的一套自动化测试工具,在通信设备自动化测试中很实用,它基于Python开发,主要模拟NMS网管配置数据到网元NODE,并读取配置看配置是否生效. == ...

  6. jquery 书写全选反选功能

    书写一个后台管理中用到的全选反选功能.代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  7. 【硬件】DELLserver硬件监控及DELL系统管理工具OMSA介绍

    1.1.1. DELLserver硬件监控及DELL系统管理工具OMSA介绍 本文介绍採用使用Nagios和OMSA监控DELLserver的硬件健康状态,Nagios监控的方式是NRPE模式,须要配 ...

  8. Android项目Tab类型主界面大总结 Fragment+TabPageIndicator+ViewPager

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/24740977 Android如今实现Tab类型的界面方式越来越多,今天就把常见的 ...

  9. 【HDU 2014 Multi-University Training Contest 1 1002】/【HDU 4862】Jump

    多校训练就这么华丽丽的到了 ,于是乎各种华丽丽的被虐也開始了. 这是多校的1002; 最小费用最大流. 题目大意: 有n*m个方格,每一个方格都一个的十进制一位的数.你能够操作K次. 对于每一次操作, ...

  10. StirngUtil工具类 之 邮箱注冊 域名不区分大写和小写方法

    /** * 传入邮箱域名所有变为小写,然后拼接前缀返回 *<b>Summary: </b> * emailDomainTransform() * @param domain * ...