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)

}

css 样式表的更多相关文章

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

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

  2. CSS样式表

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

  3. JS 控制CSS样式表

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

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

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

  5. DOM与CSS样式表

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

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

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

  7. CSS样式表继承详解

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

  8. 2016年10月27日--css样式表

    CSS样式表 样式表分类 1.内联样式表 和html联合显示,控制精确,但是可重用性差,冗余多. !doctype html> <html> <head> <met ...

  9. CSS样式表 选择器

    1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;">内联样式表</p> &l ...

  10. HTML静态网页 css样式表

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

随机推荐

  1. 用ASP.NET Core 1.0中实现邮件发送功能-阿里云邮件推送篇

    在上篇中用MailKit实现了Asp.net core 邮件发送功能,但一直未解决阿里云邮件推送问题,提交工单一开始的回复不尽如人意,比如您的网络问题,您的用户名密码不正确等,但继续沟通下阿里云客户还 ...

  2. NSXMLParser读取XML文件并将数据显示到TableView上

    关于XML,有两种解析方式,分别是SAX(Simple API for XML,基于事件驱动的解析方式,逐行解析数据,采用协议回调机制)和DOM(Document Object Model ,文档对象 ...

  3. LeetCode: Unique Binary Search Trees II 解题报告

    Unique Binary Search Trees II Given n, generate all structurally unique BST's (binary search trees) ...

  4. (原)win8下编译GLUT

    1.到opengl官网下载glut源代码 2.修改glutwin32.mak下 # MSVC install directoriesLIBINSTALL     = XXXXX\VC\lib //vs ...

  5. Spring 开启Annotation <context:annotation-config> 和 <context:component-scan>诠释及区别

    <context:annotation-config> 和 <context:component-scan>的区别 <context:annotation-config& ...

  6. WPF使用扩展屏幕

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  7. Python基本语句

    x = 1 y = 1 dataf = 1.0 def fun1(): print("fun1") class ClassB(): def __init__(self): prin ...

  8. 250W电源带i7+GTX1080?

    电源的科学: Q1:电源的额定功率是什么?峰值功率又是什么?A1:电源的额定功率就是电源正常工作时的功率,它的值为用电器的额定电压乘以额定电流.而峰值功率指的是电源短时间内能达到的最大功率, 一般情况 ...

  9. ubuntu关闭自动更新、打开 ubuntu 的 apport 崩溃检测报告功能

    菜单栏点 系统 --->首选项 --->启动应用程序 --->更新提示 前面的钩打掉 关闭即可     =========== 打开 ubuntu 的 apport 崩溃检测报告功能 ...

  10. Sql Server 系统表功能

    SELECT Name FROM Master..SysDatabases ORDER BY Name