HTML css 格式布局
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 鼠标指到上面时的形状
© 版权符号©
半透明效果:
<div class="box">透明区域<div>
在样式表中的代码为:
.box
{
opacity:0.5; -moz-opacity:0.5 ; filter:alpha(opacity=50)
}
HTML css 格式布局的更多相关文章
- css格式布局
一.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口. 示例 : 二.position:absolute 1.外层没有position:absolute(或 ...
- CSS样式表与格式布局
样式表 CSS(Cascading Style Sheets 层叠样式表),作用是美化HTML网页. 内联样式表: 例:<p style="font-size:10px;" ...
- 关于CSS格式与布局中的基础知识的简单操作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- photoshop将psd导出div+css格式HTML(自动)
psd切片切好后,导出 web格式,存储时选择html.所有切片,然后,选择其他,选择自定,选择切片,选择生成css css命名有2种方式,根据ID和根据类,一般选择根据类(ID尽量少有,防止js要用 ...
- 第五章 CSS页面布局基础
1.标准文档流 在正常流中,在没有使用浮动或者定位的情况下,文本元素按照从上到下.从左到右的格式布局.这是浏览器的默认行为.在正常流中,块级元素从上到下依次排列,而行级元素从左到右依次排列.正常流中的 ...
- 《CSS网站布局实录》学习笔记(五)
第五章 CSS内容排版 5.1 文字排版 5.1.1 通栏排版 进行网页通栏排版时,只要直接将段落文字放置于p或者其他对象中,再对段落文字应用间距.行距.字号等样式控制,便形成了排版雏形. 5.1.2 ...
- 《CSS网站布局实录》学习笔记(四)
第四章 CSS网站元素设计 4.1 网站导航 网站导航是网站中最重要的元素.从形式上看,网站导航主要分横向导航.纵向导航.下拉及多级菜单导航灯3种常见形式. 横向导航:作为门户网站的设计而言,主导航一 ...
- 《CSS网站布局实录》学习笔记(三)
第三章 CSS网页布局与定位 3.1 div 几乎XHTML中的任何标签都可以用于浮动与定位,而div首当其冲.对于其他标签而言,往往有它自身存在的目的,而div元素存在的目的就是为了浮动与定位. 3 ...
- 《CSS网站布局实录》学习笔记(二)
第二章 XHTML与CSS基础 2.1 XHTML基础 XHTML是网页代码的核心内容,标准XHTML代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD ...
随机推荐
- Camera服务之--架构浅析
Camera服务之--架构浅析 分类: Camera 分析2011-12-22 11:17 7685人阅读 评论(3) 收藏 举报 android硬件驱动框架jnilinux内核平台 一.应用层 Ca ...
- 11.10document对象练习
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 隐藏Nginx版本号的安全性与方法
搭建好nginx或者apache,为了安全起见我们都会隐藏他们的版本号,这边讲的是nginx的版本号,如果你也想隐藏apache的版本号,那请点前面的链接.请看nginx版本号信息隐藏文章. Ngin ...
- iOS透明引导页
一.效果展示 这里写图片描述 这种类型的新手引导比较常见,用于告诉用户某个按钮的作用,或者提醒用户可以进行某种交互操作.引导样式是在界面上加了一个半透明的引导图,高亮部分就是要突出的区域 二.怎么做? ...
- c++几个新特性
template 模板 1.出于通用性考虑,程序库中几乎所有东西都被设计为template形式,不支持template几乎不能使用标准程序库. 2.所谓template,是针对"一个或多个尚 ...
- USB自定义HID设备实现-STM32
该文档使用USB固件库,在其基础上进行了自己的定制,完成了一个USB-HID设备,首先是usb_desc.c文件,里面存放了usb各种描述符的存在 #include "usb_desc.h& ...
- NLPIR中文分词器的使用
一.普通java项目 (1)添加项目jar包 File -> Project Structure Libarries 添加jar包jna-4.0.0.jar (2)将Data文件夹复制到 ...
- JS 弹出层 定位至屏幕居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- argparse 命令含参数模块
argparse是python的一个命令行参数模块,可以解析命令行参数,生成帮助等. 你可以这样使用它: #!/usr/bin/python from argparse import Argument ...
- 解開32位元Win 7記憶體4GB限制
解開32位元Win 7記憶體4GB限制: ReadyFor4GB 檔案下載:ReadyFor4GB https://sites.google.com/a/joytown.tw/bai-jia-zhi/ ...