CSS（cascading style sheets，层叠样式表），作用是美化HTML网页。

/*注释*/   注释语法

2.1 样式表的基本概念

2.1.1样式表的分类

1、内联样式表

和HTML联合显示，控制精确，但是可用性差，冗余多。

例：<p style="font-size:14px;">内联样式表</p>

2、内嵌样式表

作为一个独立区域内嵌在网页里，必须写在head标签里边。

<style type="text/css">

p //格式对P标签起作用

{

样式；

}

</style>

3、外部样式表

新建一个CSS文件，用来放样式表。如果要在HTML文件中调用样式表，需要在HTML文件中点右键→CSS样式→附加样式表。一般用link连接方式。

有些标签有些默认的边距，一般写样式表代码的时候都会先去除（也可以设置其他样式），如下：

<style type ="text/css">

*   //格式对所有标签起作用，样式表中px必须写

{

margin:0px;  //边距

padding:0px;  //间距

}

<style>//多个样式表可叠加

2.1.2 选择器

1、标签选择器。用标签名做选择器

<style type ="text/css">

p   //格式对p标签起作用

{

样式；

}

<style>

2、class（类）选择器、都是“.”开头。

<head>

<style type ="text/css">

.main  /* 定义样式*/

{

height:42px;

width:100%;

text-algin:center;

}

<style>//多个样式表可叠加

</head>

<body>

<div class="main">   <!--调用class样式-->

</div>

</body>

3、ID选择器，以#开头

<div id="样式表">

<head>

<style type ="text/css">

#main  /* 定义样式*/

{

height:42px;

width:100%;

text-algin:center;

}

<style>//多个样式表可叠加

</head>

<body>

<div id="main">   <!--调用id样式-->

</div>

</body>

4、复合选择器

1）、用“，”隔开，表示并列。

<style type ="text/css">

p,span   /*格式对p标签起作用*/

{

样式；

}

<style>

2)、用空格隔开，表示后代

<style type ="text/css">

.main p    /*找到使用样式的main标签，在该标签里的p标签使用该样式*/

{

样式；

}

<style>

3）、筛选“，”。

<style type ="text/css">

p.sp     /*在标签p中的class="sp"的标签，执行以下样式*/

{

样式；

}

<style>

2.2、样式属性

二、样式属性

（一）背景与前景

1.背景：

2.前景字体：

（二）边界和边框

border（表格边框、样式等）、margin（表外间距）。padding（内容与单元格间距）。

（三）列表与方块

width、height、（top、bottom、left、right）只有在绝对坐标情况下才有用。

链接的style：

a:link 超链接被点前状态

a:visited 超链接点击后状态

a:hover 悬停在超链接时

a:active 点击超链接时

在定义这些状态时，有一个顺序l v h a

2.2.4

一、position：fixed

锁定位置（相对于浏览器的位置），例如有些网站的右下角的弹出窗口。

二、position：absolute

1.外层没有position：absolute（或relative）；那么div相对于浏览器定位，如下图中b（距离浏览器右边框为50像素，距离下边框为20像素）。

2.外层有position：absolute（或relative）；那么div相对于外层边框定位，如下图中bb（距离d的右边框50像素，距离d的下边框为20像素）。

三、position：relative

相对位置。

如下图，相对于把此div包含住的div的某个位置进行固定。如果外层没有包含他的，那就相对于浏览器进行相对位置的固定。

四、分层（z-index）

在z轴方向分层，可以理解为分成一摞纸，层数越高越靠上。

在上面relative的示例中，我们看到了aa遮住了a，这是因为后写代码的显示级别越靠前，那么在不改变代码顺序的情况下如何让a盖住aa？如下：

五、float：left、right

Left、right时不用给他规定位置（left、top），直接相对于浏览器。若外部被包裹，相对于外部div的除去一行的位置的左上或右上显示。

overflow：hidden；    //超出部分隐藏；scroll，显示出滚动条；

<div style="clear:both"></div>   //截断流

设置超链接的样式示例：

附：cursor：pointer    鼠标指到上面时的形状

&copy                  版权符号©

半透明效果：

<div class="box">透明区域<div>

在样式表中的代码为：

.box

{

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

}

HTML css 格式布局的更多相关文章

  1. css格式布局

    一.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口. 示例 : 二.position:absolute 1.外层没有position:absolute(或 ...

  2. CSS样式表与格式布局

    样式表 CSS(Cascading Style Sheets  层叠样式表),作用是美化HTML网页. 内联样式表: 例:<p style="font-size:10px;" ...

  3. 关于CSS格式与布局中的基础知识的简单操作

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

  4. photoshop将psd导出div+css格式HTML（自动）

    psd切片切好后,导出 web格式,存储时选择html.所有切片,然后,选择其他,选择自定,选择切片,选择生成css css命名有2种方式,根据ID和根据类,一般选择根据类(ID尽量少有,防止js要用 ...

  5. 第五章 CSS页面布局基础

    1.标准文档流 在正常流中,在没有使用浮动或者定位的情况下,文本元素按照从上到下.从左到右的格式布局.这是浏览器的默认行为.在正常流中,块级元素从上到下依次排列,而行级元素从左到右依次排列.正常流中的 ...

  6. 《CSS网站布局实录》学习笔记（五）

    第五章 CSS内容排版 5.1 文字排版 5.1.1 通栏排版 进行网页通栏排版时,只要直接将段落文字放置于p或者其他对象中,再对段落文字应用间距.行距.字号等样式控制,便形成了排版雏形. 5.1.2 ...

  7. 《CSS网站布局实录》学习笔记（四）

    第四章 CSS网站元素设计 4.1 网站导航 网站导航是网站中最重要的元素.从形式上看,网站导航主要分横向导航.纵向导航.下拉及多级菜单导航灯3种常见形式. 横向导航:作为门户网站的设计而言,主导航一 ...

  8. 《CSS网站布局实录》学习笔记（三）

    第三章 CSS网页布局与定位 3.1 div 几乎XHTML中的任何标签都可以用于浮动与定位,而div首当其冲.对于其他标签而言,往往有它自身存在的目的,而div元素存在的目的就是为了浮动与定位. 3 ...

  9. 《CSS网站布局实录》学习笔记（二）

    第二章 XHTML与CSS基础 2.1 XHTML基础 XHTML是网页代码的核心内容,标准XHTML代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD ...

随机推荐

  1. MySQL 批量导入 csv 文件

    注意编码一致性,如:我的数据库是utf-8编码,csv文档的编码也是utf-8. 导入使用 LOAD DATA LOCAL INFILE 详细用法请参看文档或者书籍. mysql  user表结构: ...

  2. jquery.validate.js 一个jQuery验证格式控件

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...

  3. 基于LNMP的Zabbbix之PHP源码安装

    安装一些依赖的包 wget -c ftp://xmlsoft.org/libxml2/libxml2-2.7.8.tar.gz .tar.gz -C ../source/ cd ../source/l ...

  4. MySQL create table 语法

    MySQL中create table语句的基本语法是: CREATE [TEMPORARY] TABLE [IF NOT EXISTS] tbl_name     [(create_definitio ...

  5. LPC1768的USB使用-枚举过程

    枚举过程如下 #ifndef __USBCORE_H__ #define __USBCORE_H__ /* USB端点0 发送数据结构体*/ typedef struct _USB_EP_DATA { ...

  6. LPC1768的IIS通讯

    IIS是飞利浦公司定义的一种用于音频传输的数字总线,LPC1768支持该总线, I2S接口为一条3线串行总线,含有1根数据线.1根时钟线和1根字选择信号线.基本的I2S连接具有一个主机(其总是为主机) ...

  7. cygwin的安装,vi的使用,gcc,g++的使用（转）

    源:cygwin的安装,vi的使用,gcc,g++的使用 Gcc的Makefile简单使用

  8. 【转】国外程序员整理的 C++ 资源大全

    内容包括:标准库.Web应用框架.人工智能.数据库.图片处理.机器学习.日志.代码分析等. 标准库 C++标准库,包括了STL容器,算法和函数等. C++ Standard Library:是一系列类 ...

  9. 深度学习caffe:Ubuntu16.04安装指南(1)

    caffe [CPU ONLY] 2017-01-15 最简单的安装配置方式: 不用GPU加速,使用OPENCV2.4图像库, 这是根据官方教程(链接如下)简化而得到. Ubuntu 16.04 or ...

  10. iOS真机调试配置

    啊!生活不易啊~~~~据说这个过程都可以当做简历技能了... 准备:已经具备了企业开发者账号,和相关证书 目标:让爪机可以真机调试 过程:1.登录官方开发网站 https://developer.ap ...