CSS样式表：层叠式样式表

一、样式表的分类

1、内联式

写在标记的属性位置，优先级最高，重用性最差。

格式：

<div style="width:100px;height:100px;background-color:red;border:1px solid black">这里是内容</div>

2、内嵌式

<style></style>写在head里面，优先级第二，重用性一般

格式：

<style type="text/css">

.div1{

width:100px;

height:100px;

background-color:red;

border:1px solid black

}

</style>

<div class="div1"></div>

3、外部式

写在一个单独的以css结尾的文件中，通过引用来建立文件与html文件的关系，优先级最低，重用性最好，推荐使用

在css文件中的格式：

.div1{

width=100px;

height=100px;

background-color:red;

border:1px solid black;

}

在html中调用该格式：将css文件拖到html的<head></head>中

或者在<head></head>中输入代码：<link href="css文件的路径" rel="stylesheet" />

二、选择器

1、id选择器

优先级第一，只能选中一个元素。

#ddd1{

background-color:pink;

}

2、class选择器

优先级第二，可以选中一堆元素。

.div1{

background-color:blue;

}

3、标签选择器

以标签名进行选择 div    span   优先级最低，能选中一堆元素，不建议使用

div{

background-color:blue;

}

4、符合选择器

（1）逗号并列

.div1,.div2,#ddd1{

background-color:green;

}

（2）空格后代

.div1 .span1{

font-size:16px;

}

三、样式

1、大小

width:200px;      宽

height:300px;     高

2、背景

background-color:red/#303030/rgb(255,255,255);            背景色

background-image:url(图片路径);            背景图片

background-repeat:                              背景图片平铺方式

background-postion:                  背景图片位置

background-size:                       背景图片大小

background-attachment:fixed            背景图片是否滚动（fixed背景图锁定）

3、字体

font-family:          字体类型

font-size:      12px;/14px;       字体大小

font-style:italic            倾斜

font-weight:bold         加粗

text-decoration:underline下划线   overline上划线  line-through删除线  none 没有，用来去掉超链接的下划线

color:                  字体颜色

4、对齐方式(控制文字在一个div中的布局方式)

text-align:center              水平对齐方式(center水平居中)

vertical-align：middle          垂直对齐方式（middle垂直居中）  但必须配合display:table-cell;使用

line-height:22px;             行高,按像素调

text-indent:30px;          缩进单位，按像素调节

5、边界边框

margin:50px 100px 60px 70px;    外边距   上右下左顺时针顺序

以浏览器左上角为基点若只设置一个px值，则是四个方位的外边距都是设置的这一个值。

若填两个值例如 50px 30px 则是上下外边距是50个像素，左右外边距是30个像素。

padding:             内边距   上右下左顺时针顺序    增加内边距属性，该元素会相应的变大

border:1px(边框粗细) solid(边框实线) black(边框颜色)       边框

6、列表方块

list-style:                 none将列表前面的序号去掉

list-style-image:url(图片路径)                可以将前面的序号变为图片

7、格式与布局

1、位置

（1）postion:

<1>、fixed固定     将一个元素锁定在一个位置。相对于浏览器边框位置固定

<2>、absolute绝对位置     postion:absolute绝对定位，一出现绝对定位则该元素浮动。多了top/bottom/left/right四个属性。一旦浮动起来，该元素要找一个相对定位来进行定位。要想使他在他父级里定位，要在他父级中加postion:relative;

相对于父级元素（浏览器，绝对定位的上级）

<3>、relative相对位置       postion:relative相对定位，多了top/bottom/left/right四个属性     相对于自身应该出现的位置

（2）top:距离上边的距离

（3）right:距离右边的距离

（4）bottom:距离下边的距离

（5）left:距离左边的距离

2、流

float:left;/right;      流式布局

clear:both;      清流

清楚流式布局用法：

在需要清楚流式布局的位置打上一行代码：<div style="clear:both;"></div>

3、z-index分层

值越大越靠上

8、其他

display:block;/none;                 显示block和隐藏none,不占位置

visibility:hidden;/visible;            显示visible和隐藏hidden,占位置

overflow:hidden;/scroll;          超出范围隐藏/超出范围加滚动条

透明：opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50)

圆角：border-radius:5px;

阴影：box-shadow:0 0 5px black;

【2017-03-24】CSS样式表的更多相关文章

  1. WEB入门三 CSS样式表基础

    学习内容 Ø        CSS的基本语法 Ø        CSS选择器 Ø        常见的CSS样式 Ø        网页中3种使用CSS的方式 能力目标 Ø        理解CSS的 ...

  2. WEB入门 四 CSS样式表深入

    学习内容 Ø        CSS选择器深入学习 Ø        CSS继承 Ø        CSS文本效果 Ø        CSS图片效果 能力目标 Ø        掌握CSS选择器的组合声 ...

  3. 当css样式表遇到层

    (附:White-space:pre可以是样式表里卖弄body的属性,作用是保持html源代码的空格与换行,等同<pre>标签.) Css样式表可以通过被封在层里的方式来限制页面所修饰的内 ...

  4. 深度理解CSS样式表，内有彩蛋....

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. CSS样式表

    CSS样式及属性 样式标的基本概念 样式表的分类 1.内联样式表 和html联合显示,控制精确,但可重用性差,冗余多. 例:<p style="font-size:14px;" ...

  6. JS 控制CSS样式表

    JS控制CSS所使用的方法: <style> .rule{ display: none; } </style> 你想要改变把他的display属性由none改为inline.  ...

  7. HTML基础（三）——css样式表

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...

  8. DOM与CSS样式表

    在前文 <DOM与元素节点内联样式>中我们了解了用 DOM 提供的接口操作元素节点内联样式的方法,今天我们来学习一下如何用 DOM 操作 CSS 样式表. CSS 样式表概况 通过使用 H ...

  9. 一起学HTML基础-CSS样式表-基本概念、分类、选择器

    一.基本概念: CSS  (Cascading Style Sheets)层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...

  10. CSS样式表继承详解

    最近在恶补css样式表的基础知识.上次研究了css样式表之冲突问题详解 .这次是对 css 继承 特性的学习. 什么是css 继承?要想了解css样式表的继承,我们先从文档树(HTML DOM)开始. ...

随机推荐

  1. jstl__报错

    1.缺少JAR:解决的办法就是手动将jstl.jar和 standard.jar这两个jar包加入到web项目的WEB-INF/lib目录中或者是把jstl.jar.standard.jar复制到to ...

  2. form表单的两种提交方式，submit和button的用法

    1.当输入用户名和密码为空的时候,需要判断.这时候就用到了校验用户名和密码,这个需要在jsp的前端页面写:有两种方法,一种是用submit提交.一种是用button提交.方法一: 在jsp的前端页面的 ...

  3. 如何在linux下制作一个windows的可启动u盘？

    如何在linux下制作一个windows的可启动u盘? 情景是这样的,有一个windows10的iso,现在想通过U盘安装,要求即支持UEFI(启动引导器),又支持Legacy(启动引导器),因为有一 ...

  4. 微端游戏启动器launcher的制作（序篇）

    公司要做一个游戏接入腾讯QQ游戏大厅,腾讯要求制作一个launcher,公司之前并没有接入过腾讯,所以大家其实都不懂,而我又是新人,所以刚拿到这个任务的时候整个人就是一个大写的懵逼.在网上查找了不少的 ...

  5. [数据共享（干货）] wcf rest 服务发布数据 以及获得数据

    最近在做一个项目 ,需要我们做一个东西,我们姑且叫数据共享吧,我们公司叫A公司,对方公司叫B公司,就是A公司提供一个数据服务接口出去,B公司如果想拿我们数据的时候直接调用我们的服务接口就行了,我们同样 ...

  6. udp 双机通信（服务器循环检测)2

    此文摘自:http://blog.csdn.net/qinpeng100423/article/details/8980423,谢谢了 自己上一篇写的udp通信,只能运行一次,参考了这位博主的,只是把 ...

  7. Oracle instant client在windows下的安装和使用

    安装 * 从oracle官方网站下载instant client文件,一般来说,有basic.sqlplus.odbc.jdbc,就足够用的了: instantclient-basic-win32-1 ...

  8. pl/sql 导出oracle表结构

    tools->export tables 是导出表结构还有数据 tools->export user objects是导出表结构   可以用tools->export tables ...

  9. [Hadoop] - Hadoop3.0.x编译

    这里仅介绍一种Hadoop3.0.x版本的源码编译方式 编译过程 1. 下载源码 2. 安装依赖环境 3. 源码编译 ========================================= ...

  10. HTML移动端开发常见的兼容性总结

    1.安卓浏览器看背景图片,有些设备会模糊.用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢?经过研究,是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率来显示网 ...