css 样式表
/*注释*/ 注释语法
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)
}
css 样式表的更多相关文章
- 深度理解CSS样式表,内有彩蛋....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS样式表
CSS样式及属性 样式标的基本概念 样式表的分类 1.内联样式表 和html联合显示,控制精确,但可重用性差,冗余多. 例:<p style="font-size:14px;" ...
- JS 控制CSS样式表
JS控制CSS所使用的方法: <style> .rule{ display: none; } </style> 你想要改变把他的display属性由none改为inline. ...
- HTML基础(三)——css样式表
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...
- DOM与CSS样式表
在前文 <DOM与元素节点内联样式>中我们了解了用 DOM 提供的接口操作元素节点内联样式的方法,今天我们来学习一下如何用 DOM 操作 CSS 样式表. CSS 样式表概况 通过使用 H ...
- 一起学HTML基础-CSS样式表-基本概念、分类、选择器
一.基本概念: CSS (Cascading Style Sheets)层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...
- CSS样式表继承详解
最近在恶补css样式表的基础知识.上次研究了css样式表之冲突问题详解 .这次是对 css 继承 特性的学习. 什么是css 继承?要想了解css样式表的继承,我们先从文档树(HTML DOM)开始. ...
- 2016年10月27日--css样式表
CSS样式表 样式表分类 1.内联样式表 和html联合显示,控制精确,但是可重用性差,冗余多. !doctype html> <html> <head> <met ...
- CSS样式表 选择器
1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;">内联样式表</p> &l ...
- HTML静态网页 css样式表
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/ 此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控 ...
随机推荐
- NSBundle 的理解和 mainBundle
http://www.360doc.com/content/15/0629/10/20918780_481405304.shtml
- centos 7 /etc/rc.local 开机不执行的问题
最近发现centos7 的/etc/rc.local不会开机执行,于是认真看了下/etc/rc.local文件内容的就发现了问题的原因了 1 2 3 4 5 6 7 8 9 10 11 #!/bin/ ...
- VC++ 学习笔记(三):摩登之路——C++/CLI简介
在Windows上,除非我们必须得用C++来写界面,否则我会选择避免,避免学习和使用MFC.替代的方案是用C#来做界面,然后用C++/CLI来连接C#和Native C++.那么问题来了,C++/CL ...
- timer.scheduleAtFixedRate和timer.schedule的实验
基础代码: Calendar currentTime = Calendar.getInstance(); currentTime.setTime(new Date()); int currentH ...
- IOS , plist 配置项说明
本文转载至 http://blog.csdn.net/fengsh998/article/details/8307424 Key:Application can be killed immediate ...
- 命令行下使用javah命令生成.h文件,出现“错误: 无法访问android.app.Activity 找不到android.app.Activity的类文件”的解决方法
在学习NDK中,当我在项目的bin/classes目录下使用javah命令生成头文件时,出现了“错误: 无法访问android.app.Activity 找不到android.app.Activity ...
- 【经验谈】XmlSerializer的坑
XmlSerializer我想现在用的人可能不多了,大家都在用Json.我现在所在的公司依然在用,所以发现了这个坑.当然这个坑存在很久了只是没用过所以才发现. 事情是这样的,测试那边说系统偶尔会报找不 ...
- WPF之DataGrid
1.WPF 4 DataGrid 控件(基本功能篇) 基本使用,绑定数据展示 2.WPF 4 DataGrid 控件(自定义样式篇) 定义行,列,头,单元格等样式 3.WPF 4 DataGrid 控 ...
- 自动化测试管理平台ATMS(V2.0.2_8.19)下载
自动化测试管理平台ATMS(V2.0.2_8.19)下载 http://www.automationqa.com/forum.php?mod=viewthread&tid=2791
- python 安装加环境变量
pip install sth --global-option="build_ext" --global-option="-I/usr/local/include&quo ...