样式表分类：

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">

p  //格式对p起作用

{样式；

}

</style>

2.  class选择器，都是用“.”开头（类）

<head>

<style type="text/css">

.main

{样式

}

</style>

</head>

<body>

<div class="main">

</div>

</body>

3.id选择器以“#”开头，表示单独唯一。样式和class相同只是开头和body里的样式名不同即<div id="main">

链接的style：

  a:link 超链接被点前状态

  a:visited 超链接点击后状态

  a:hover 悬停在超链接时

  a:active 点击超链接时

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

样式：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>

.a1:link
{
color:black;
text-decoration:none;
font-size:24px;
}
.a1:visited
{
color:black;
text-decoration:none;
font-size:24px;
}
.a1:hover
{
color:red;
text-decoration:underline;
font-size:24px;
}
.a1:active
{
color:orange;
text-decoration:underline;
font-size:24px;
}

</style>
</head>

<body>
<div class="main"><p>1234567890</p></div>
<a class="a1" href="http://www.baidu.com">百度一下</a><br />

</body>
</html>

格式与布局

1.position:fixed

锁定位置（相对于浏览器的位置）

2.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>   //截断流

半透明效果：

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

在样式表中的代码为：

.box

{

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

}

css样式表：样式分类，选择器。样式属性，格式与布局的更多相关文章

  1. CSS样式表基础知识、样式表的分类及选择器

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

  2. CSS 四种样式表 六种规则选择器 五种常用样式属性

    新的html程序要在VS中编写了,在vs中安装ASP.NET和Web开发,并用ASP.NET Web 应用程序(.NETFramework)创建一个网页程序.添加一个html页 后面的代码都是在htm ...

  3. web前端篇：CSS使用，样式表特征，选择器

    目录 web前端篇:CSS使用,样式表特征,选择器 1.CSS介绍 2.CSS使用 3.样式表特征 4.CSS选择器 5.选择器的优先级 6.练习题: web前端篇:CSS使用,样式表特征,选择器 1 ...

  4. CSS样式表------第一章：样式表的基本概念

    CSS(Cascading Style Sheets,层叠样式表),控制页面样式外观,作用是美化HTML网页. 一. 样式表的基本概念 1.样式表的分类 (1)内联样式表  -----放在元素的开始标 ...

  5. 【Qt开发】QT样式表单 qss的样式优化

    QT样式表单 QT的样式表单允许我们在对程序不做任何代码上的更改的情况下轻松改变应用程序的外观. 其思想来源于网页设计中的CSS,即可以将功能设计和美学设计分开. 它的语法和概念和HTML CSS也是 ...

  6. HTML基础（五）——-css样式表——样式属性——格式与布局

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

  7. Qt样式表之一：Qt样式表和盒子模型介绍

    一.Qt样式表介绍 Qt样式表是一个可以自定义部件外观的十分强大的机制,可以用来美化部件.Qt样式表的概念.术语和语法都受到了HTML的层叠样式表(Cascading Style Sheets, CS ...

  8. 2017-3-25 css样式表（一）

    样式表: 一.样式表的概念:CSS(Cascading Style Sheets)层叠式样式表,作用是美化HTML网页. 二.样式表的分类:样式表分内联式样式表.内嵌式样式表和外部样式表三种. 1.内 ...

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

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

  10. css——样式表分类，选择器

    一,样式表分类 (1)内联样式[优先级最高][常用][代码重复使用性最差] (当特殊的样式需要应用到个别元素时,就可以使用内联样式. 使用内联样式的方法是在相关的标签中使用样式属性.样式属性可以包含任 ...

随机推荐

  1. TexBox的属性

    允许多行输入

  2. Java for LeetCode 077 Combinations

    Given two integers n and k, return all possible combinations of k numbers out of 1 ... n. For exampl ...

  3. July 31st, Week 32nd Sunday, 2016

    If you wept for the missing sunset, you would miss all the shining stars. 如果你为错过夕阳而哭泣,那你有可能也会错过灿烂的星空 ...

  4. atom 震动特效

    1.下载atom 2.配置环境变量 3.运行apm install activate-power-mode 4.打开Atom激活(control+alt+o(是o不是零)) 注:新标签若没效果可以ct ...

  5. 矩形覆盖（codevs 1101）

    题目描述 Description 在平面上有 n 个点(n <= 50),每个点用一对整数坐标表示.例如:当 n＝4 时,4个点的坐标分另为:p1(1,1),p2(2,2),p3(3,6),P4 ...

  6. （九）STM32之AFIO

    也许你以为IO和AFIO是很简单的,事实上有几个误区可能很多人都没注意过,当你只用现成的开发板来学习的时候,别人已经帮你做好了资源分配,所有的外设功能学习都是照着别人给你的例程去做的,这才没让你觉得奇 ...

  7. icon上添加数字提醒

    使用viewbadger包: package com.jingle.vierbagerstudy; import android.app.Activity; import android.os.Bun ...

  8. Linux下Gcc生成和使用静态库和动态库详解

    参考文章:http://blog.chinaunix.net/uid-23592843-id-223539.html 一.基本概念 1.1什么是库 在windows平台和linux平台下都大量存在着库 ...

  9. oracle 10g 学习之基本 SQL SELECT 语句（4）

    本篇文章中,对于有的和MSSQL Server相同的语法我就没有再写了,这里我只写Oracle和MSSQL Server有点不同的 定义空值 l  空值是无效的,未指定的,未知的或不可预知的值 l  ...

  10. laravel框架session使用教程

    laravel是一款php框架了,在使用laravel时会碰到session使用问题了,在使用过程中碰到一些问题与一些应用的例子. 用Laravel开发应用,把原有的代码copy过来,以前的代码ses ...