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样式表

    第2部分 CSS样式表 CSS(Cascading Style Sheets,层叠样式表),作用是美化HTML网页. /*注释*/    注释语法 2.1.样式表的基本概念 2.1.1.样式表分类 1 ...

  2. 11-19网页基础--第二部分CSS样式表基本概念

    CSS,全称(Cascading Style Sheets,层叠样式表),作用是美化HTML网页. 一.基本概念:是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. 你可能对C ...

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

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

  4. JavaScript访问修改css样式表

    1.访问元素中style属性的css样式 可以根据属性的ID或name标签利用dom操作直接访问到内部的css样式,直接使用style对象访问 <div id="myid" ...

  5. 网页 CSS样式表

    昨天,我主要是对CSS样式表进行了一下复习. CSS样式表主要有三类:内联样式表.内嵌样式表.外部样式表,我们平时一般使用第二种样式表. 选择器主要包括:标签选择器.class选择器.ID选择器.复合 ...

  6. 【2017-03-24】CSS样式表

    CSS样式表:层叠式样式表 一.样式表的分类 1.内联式 写在标记的属性位置,优先级最高,重用性最差. 格式: <div style="width:100px;height:100px ...

  7. 【3-24】css样式表分类、选择器、样式属性

    一.css样式表分类: (一)内联样式表:代码写在标签内的样式表  控制精确 代码重用性差  优先级最高 格式:<p style="样式属性">内容</p> ...

  8. CSS样式表的写作规范

    推荐大家使用的CSS书写规范.顺序 写了这么久的CSS,但自己都没有按照良好的CSS书写规范来写CSS代码,东写一段西写一段,命名也是想到什么写什么,过一段时间自己都不知道写的是那一块内容, 这样会影 ...

  9. CSS样式----CSS样式表的继承性和层叠性（图文详解）

    本文最初于2017-07-29发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 本文重点 CSS的继承性 CSS的层叠性 计算权重 ...

随机推荐

  1. Hibernate 查询语句

    Hibernate查询语言(HQL)是一种面向对象的查询语言,类似于SQL,但不是对表和列操作,HQL适用于持久对象和它们的属性. HQL查询由Hibernate转换成传统的SQL查询,这在圈上的数据 ...

  2. dup2()函数的使用，

    #define STR "xiamanman\n"#define STR_LEN 10#define STDOUT 1 #include <stdio.h>#inclu ...

  3. CUBRID学习笔记 1 简介 cubrid教程

    CUBRID 是一个全面开源,且完全免费的关系数据库管理系统.CUBRID为高效执行Web应用进行了高度优化,特别是需要处理大数据量和高并发请求的复杂商务服务.通过提供独特的最优化特性,CUBRID可 ...

  4. Java初始化（构造器）

    在类的内部,变量定义的先后顺序决定了初始化的顺序.即使变量定义散布于方法定义之间,它们仍旧会在任何方法(包括构造器)被调用之前得到初始化. import static humeng.com.cnblo ...

  5. DZY Loves Chessboard

    DescriptionDZY loves chessboard, and he enjoys playing with it. He has a chessboard of n rows and m ...

  6. C++中关于new及内存地址的思考

    OJ题刷多了,每次都是直接分配内存,那么,你还记得怎么动态分配内存吗? ———————————————————————————————————— 我们知道,使用malloc/calloc等分配内存的函 ...

  7. mtk lcm驱动加载流程 （转载）

    平台:mt6582 + Android 4.4 前面就说过,在mtk代码中支持屏是可兼容的,通过调用驱动中的compare_id函数来匹配驱动和屏,这里来细看一下代码. 1. LK部分(mediate ...

  8. 在PC端或移动端应用中接入商业QQ的方法

    今天看博友的博客学习了一种很有用的方法: 在页面中需要接入企业的QQ,访问网址:http://shang.qq.com/widget/consult.php.(就是API接口),然后你只需要登录你的Q ...

  9. Python学习（9）列表

    目录 Python 列表 访问列表中的值 更新列表 删除列表元素 列表脚本操作符 列表截取 列表函数&方法 Python 列表(List) 序列是Python中最基本的数据结构.序列中的每个元 ...

  10. C#_观察者模式

    假设有一个软件公司,每当有新产品推出,就把信息通知到一些客户. 把通知这个动作抽象成一个接口. public interface IService { void Notif(); } 客户如果想获得通 ...