样式表分类：

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. CAS单点登录之mysql数据库用户验证及常见问题

    前面已经介绍了CAS服务器的搭建,详情见:搭建CAS单点登录服务器.然而前面只是简单地介绍了服务器的搭建,其验证方式是原始的配置文件的方式,这显然不能满足日常的需求.下面介绍下通过mysql数据库认证 ...

  2. iOS 使用UIWebView把oc代码和javascript相关联

    首先请参看一篇文章,作者写的很明白,请参看原地址 http://blog.163.com/m_note/blog/static/208197045201293015844274/. 其实,oc和js的 ...

  3. LLVM,Clang

    在使用xcode时常常会遇到这2个概念,今天总结一下. wiki中关于llvm的描述: LLVM提供了完整編譯系統的中間層,它會將中間語言(IF, Intermediate form)從編譯器取出與最 ...

  4. 为eclipse设置好看的代码主题

    eclipse的默认代码背景是白色,上个文章简单说了字体设置,这边主要介绍代码高亮的主题设置,打造更酷的编程界面.网上有文章说可以在设置里面逐一设置,但是比较麻烦,可以去网上下载现成的主题包,网址为: ...

  5. C#/Java/C/C++基本类型所占大小及表示范围

    C/C++的数据类型: 一,整型 Turbo C:   [signed] int 2Byte//有符号数,-32768~32767   unsigned int 2Byte //无符号数,只能表示整数 ...

  6. Oracle的锁表与解锁

    Oracle的锁表与解锁 SELECT /*+ rule */ s.username, decode(l.type,'TM','TABLE LOCK', 'TX','ROW LOCK', NULL) ...

  7. Docker跨主机通信之路由

    一.实验环境: 主机名 主机IP Docker0_IP Docker1 192.168.88.130 172.17.0.1 Docker2 192.168.88.131 172.18.0.1 二.实验 ...

  8. opencv学习笔记（五）镜像对称

    opencv学习笔记(五)镜像对称 设图像的宽度为width,长度为height.(x,y)为变换后的坐标,(x0,y0)为原图像的坐标. 水平镜像变换: 代码实现: #include <ios ...

  9. 【读书笔记】读《编写高质量代码—Web前端开发修炼之道》 - JavaScript原型继承与面向对象

    JavaScript是基于原型的语言,通过new实例化出来的对象,其属性和行为来自于两部分,一部分来自于构造函数,另一部分是来自于原型.构造函数中定义的属性和行为的优先级比原型中定义的属性和优先级高, ...

  10. DOS下常用网络命令技巧

    DOS,即使对于许多自称了解计算机的人而言,也是一个比较陌生的词汇.然而,在网络管理过程中,DOS命令却是一个不可逾越的障碍,几乎所有的网络命令都运行在DOS界面.对初级用户而言,掌握一些常用网络命令 ...