css样式表:样式分类,选择器。样式属性,格式与布局
样式表分类:
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样式表:样式分类,选择器。样式属性,格式与布局的更多相关文章
- CSS样式表基础知识、样式表的分类及选择器
一.CSS基本概念: CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/ 此为注释语法 二.样式表的分类 1.内联样式表(和html联合 ...
- CSS 四种样式表 六种规则选择器 五种常用样式属性
新的html程序要在VS中编写了,在vs中安装ASP.NET和Web开发,并用ASP.NET Web 应用程序(.NETFramework)创建一个网页程序.添加一个html页 后面的代码都是在htm ...
- web前端篇:CSS使用,样式表特征,选择器
目录 web前端篇:CSS使用,样式表特征,选择器 1.CSS介绍 2.CSS使用 3.样式表特征 4.CSS选择器 5.选择器的优先级 6.练习题: web前端篇:CSS使用,样式表特征,选择器 1 ...
- CSS样式表------第一章:样式表的基本概念
CSS(Cascading Style Sheets,层叠样式表),控制页面样式外观,作用是美化HTML网页. 一. 样式表的基本概念 1.样式表的分类 (1)内联样式表 -----放在元素的开始标 ...
- 【Qt开发】QT样式表单 qss的样式优化
QT样式表单 QT的样式表单允许我们在对程序不做任何代码上的更改的情况下轻松改变应用程序的外观. 其思想来源于网页设计中的CSS,即可以将功能设计和美学设计分开. 它的语法和概念和HTML CSS也是 ...
- HTML基础(五)——-css样式表——样式属性——格式与布局
一.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口. 示例: 二.position:absolute 绝对位置: 1.外层没有position:a ...
- Qt样式表之一:Qt样式表和盒子模型介绍
一.Qt样式表介绍 Qt样式表是一个可以自定义部件外观的十分强大的机制,可以用来美化部件.Qt样式表的概念.术语和语法都受到了HTML的层叠样式表(Cascading Style Sheets, CS ...
- 2017-3-25 css样式表(一)
样式表: 一.样式表的概念:CSS(Cascading Style Sheets)层叠式样式表,作用是美化HTML网页. 二.样式表的分类:样式表分内联式样式表.内嵌式样式表和外部样式表三种. 1.内 ...
- 一起学HTML基础-CSS样式表-基本概念、分类、选择器
一.基本概念: CSS (Cascading Style Sheets)层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...
- css——样式表分类,选择器
一,样式表分类 (1)内联样式[优先级最高][常用][代码重复使用性最差] (当特殊的样式需要应用到个别元素时,就可以使用内联样式. 使用内联样式的方法是在相关的标签中使用样式属性.样式属性可以包含任 ...
随机推荐
- 40.扑克牌的顺子[Continuous cards]
[题目] 从扑克牌中随机抽5张牌,判断是不是一个顺子,即这5张牌是不是连续的.2-10为数字本身,A为1,J为11,Q为12,K为13,而大小王可以看成任意数字. [分析] 这题目很有意思,是一个典型 ...
- Linux服务器通过rz/sz轻松上传下载文件
Linux服务器通过命令行远程访问时,上传文件还需要ftp所以不太方便,可以使用rz这个小工具来上传不太大的文件,方法如下: 输入rz,如果提示命令不存在,证明还没有安装,以CentOS为例,安装命令 ...
- iOS两个框架之间的类型转换--"桥接"技术
话不多说,直接举例说明吧.场景模拟:需要开发一个通讯录相关功能,实现访问以及添加等等.这时,需要使用的框架是Core Foundation.而此框架使用的是C语言,例如:CFArrayRef,CFSt ...
- 安装qmake与环境变量解析
转自:http://www.kuqin.com/qtdocument/qmake-manual-2.html 安装qmake 当Qt被连编的时候,默认情况下qmake也会被连编. 这一部分解释如何手工 ...
- java call sap
1.下载需要的jar,windows用dll,linux用so win下载地址 linux下载地址 win下载地址new 2.环境: windows -> sapjco3.dll放到wi ...
- 大神的游戏(codevs 1353)
题目描述 Description 在那遥远的机房,有一片神奇的格子.为了方便起见,我们编号为1~n.传说只要放入一些卡片,就能实现愿望.卡片一共有m种颜色,但是相邻的格子间不能放入相同颜色的卡片.只要 ...
- CodeIgniter - 数据库的增删改查
数据库操作无非是CRUD,用非装逼的语言来说就是增删改查.也许这一节会讲的很泛泛,或者很多人看不懂,没关系,大致的看看,知道是这么回事就好,继续往后看,后面会讲实例,这些枯燥而又抽象的东西可以先跳过, ...
- 常用的Linux操作
1.运行.sh文件 第一种方法: 首先你要打开一个终端. 然后输入sudo su 随后输入密码.这样就取得了root用户权限. 然后找到那个文件 执行./sh文件名字 这样.sh就运行了. 第二种方法 ...
- CDH中,执行HIVE脚本表联查权限问题。。
文章来自http://www.cnblogs.com/hark0623/p/4174641.html 转发请注明 有时候执行表联查的时候总会出现没有权限写文件的情况. 这个时候使用sudo -H hi ...
- uva494 Kindergarten Counting Game
#include<bits/stdc++.h>using namespace std;int main(){ int n=0; char a; int flag=1; while((sca ...