CSS样式表：

一、作用：美化网页，页面布局。

二、分类：

　　内联，写在body里标签style=""里面的样式，优点是控制精确，可重用性差。

　　内嵌，嵌在网页的head里面，可重用性高 外部，样式写在另一个文件里面，如果要用直接附加过来。

　　优先级：内联>内嵌>外部

三、选择器：

* 代表所有的元素 一般的网页都需要在写这个样式，去掉有些标签自带的边界，auto代表居中，如：*{  margin: 0px auto;  padding:0px; }

标签选择器：用标签的名字来选择元素。 如：div{}

　　ID选择器：用标签的ID名来选择元素，ID的名字前面加# 如：#d1{}

　　CLASS选择器：用class名来选择元素，class名前面加. 如：.a{}

组合选择器：

　　并列关系：用逗号隔开，代表并列。 如：.a1,.a2,.a3{}

　　后代关系：用空格隔开，空格前面的是后面的父级元素。 如：#d1 a1{}

　　筛选关系：用点隔开。

样式：

1.前景与背景

　　1）前景：指文本 font：是否倾斜 是否加粗 字体大小 选择字体；

font-family:修改字体 font-size：字体大小 font-style：字体样式，italic倾斜 font-weight：字体粗细，bold加粗

color:字体颜色 text-decoration：文本修饰，none可以去下划线 text-indent：首行缩进

　　2）背景： background-color：背景色，background-image：背景图片， background-repeat：平铺方式， background-position：背景图片的位置， background-attachment：背景图片的固定方式

　　3）对齐方式 text-align：水平对齐方式 center居中， vertical-align：垂直对齐方式 middle居中 top靠上 bottom靠下 line-height:行高

注意：设置垂直对齐方式前，必须先设置好行高

2.边框和边界

　　边框： border: 宽度 样式 颜色； border-width:1px; border-style:solid; border-color:#F00;

注意：border-width;border-style;border-color三者必须同时设置

　　边界： 外边距： margin：上 右 下 左； margin-top:上边距 margin-right:右边距 margin-bottom:下边距 margin-left:左边距

　　内边距： padding:上 右 下 左； padding-top:内上边距 padding-right:内右边距 padding-bottom:内下边距 padding-left:内左边距

3.列表与方块 width:宽度 height:高度

　　list-style:位置 type 图片； list-style-type:列表标示的样式，none去掉，list-style-image:列表图片，list-style-position：列表样式的位置

4.格式布局

position位置：

　　absolute绝对位置，相对于浏览器边界的位置；

　　relative相对位置，相对于它本应该出现的位置。

　　fixed:固定位置，它不会随着滚动。

设置好position之后，就可以用top right bottom left这四个样式。

　　float：流，流式布局。

两个方式：left向左流  right向右流

流后面如果要加东西的话要截断流：clear:both——<div style="clear:both"></div>

　　z-index：值越大的越靠上层

5.其它

　　display:  none 隐藏（不占空间，相当于去掉了）； block显示

　　visibility：hidden隐藏（但是占空间，所占的位置还在）； visible显示

　　display和visibility的区别：display隐藏相当于这个元素没有了，visibility的隐藏该元素所占的位置还在，只是内容隐藏了。

　　overflow：超出范围。。。 hidden 超出隐藏（不占位置）； scroll 超出出现滚动条

　　cursor:pointer; 鼠标放上显示（小手）

　　hover：不是一个样式，用元素的ID或者CLASS之类后面跟冒号hover，代表鼠标放到此元素上显示哪些样式

如

6、超链接样式：

<style type="text/css">

a:link--一般链接

{

    color:blue;

}

a:visited--访问过的链接格式

{

    color:green;

}
a1:hover--设置鼠标指向链接时的形式

{

　　cursor:pointer;

　　background-color:#FFF;

　　text-decoration:underline;

}





7、半透明效果（滤镜）：




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

    //样式中的代码

.box

{

    opacity:0.5;

    -moz-opacity:0.5;

    filter:alpha(opacity=)

}




下面是布局一个网页




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">--内嵌，可重用性高

*--代表所有

{

    margin:0px auto;--外边距，auto代表自动居中

    padding:0px;--内边距

    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;--字体

}

#top

{

    width:%;--宽

    height:80px;--高

}

#tmenu

{

    width:%;

    height:60px;

    margin:20px 0px 20px 0px;

}

#tb

{

    width:54.8%;

    height:60px;

    float:left;--向左流

    padding:0px 0px 0px 3.2%;

}

#menu

{

    width:%;

    height:60px;

    float:left;

}

#tb img

{

    width:131px;

    height:60px;

}

#menu1

{

    margin:0px 25px 0px 15px;

    width:342px;

    height:60px;

    float:right;

}

#menu1 div

{

    float:left;

    height:40px;

    margin:20px 15px 0px 15px;

    line-height:60px;

    vertical-align:bottom;

    color:#;

    font-size:14px;

}

#menu1 div:hover

{

    color:#;

    cursor:pointer;

}

#mmenu

{

    width:%;

    height:50px;

    background-color:#f8f8f8;

    border-top:1px solid #e7e7e7;

    border-bottom:1px solid #e7e7e7;

}

#mmenu div

{

    float:left;

    height:50px;

    margin-left:30px;

    color:#;

    font-size:14px;

    line-height:50px;

    vertical-align:middle;

}

#mmenu div:hover

{

    color:#;

    cursor:pointer;

}

#mmenu img

{

    margin:14px 14px 14px 0px;

}

#img

{

    width:%;

    height:600px;

    background-image:url(National%20University%20of%20Singapore%-%20Home_files/NUSS-ragday2015.jpg);

    background-repeat:no-repeat;

    background-position:center;

    background-size:% 600px;

}

#imgn

{

    width:%;

    margin-top:1px;

}

#imgn div

{

    width:%;

    float:left;

    overflow:hidden;

}

#imgn img

{

    margin:0px 0px 0px 1px;

}

</style>

</head>

<body>

<div style="width:100%;">--内联，可重用性差

<!--TOP菜单-->

<div id="top">

    <div id="tmenu">

        <div id="tb">

            <img src="National University of Singapore - Home_files/logo.png" />--图片链接

        </div>

        <div id="menu">

            <div id="menu1">

                <div>News</div>

                <div>Email</div>

                <div>Library</div>

                <div>Student</div>

                <div>Staff</div>

            </div>

        </div>

    </div>

</div>

<!--菜单-->

<div id="mmenu">

    <div style="margin-left:35px;">Home</div>

    <div>Admissions</div>

    <div>Education</div>

    <div>Research</div>

    <div>About</div>

    <div>Giving</div>

    <div style="float:right;margin-right:25px;"><img src="National University of Singapore - Home_files/sousuo.png"/></div>

</div>

<!--图片-->

<div id="img">

</div>

<div id="imgn">

    <div style="margin-right:-1px"><img style="margin-left:0px;" src="National University of Singapore - Home_files/scrolls.jpg" /></div>

    <div><img src="National University of Singapore - Home_files/save_sya-1.jpg"/></div>

    <div><img src="National University of Singapore - Home_files/IAUS.jpg"/></div>

    <div><img src="National University of Singapore - Home_files/nus110-blue.jpg"/></div>

</div>

</div>

</body>

</html>


												


											
HTML——CSS样式表&布局页面的更多相关文章
	

    
								
  1. CSS样式表——布局练习（制作360网页）
		
    以制作360网页为例(只做到了静态网页) 提纲:1.总共分为7部分 悬浮窗: 源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra ...
    
		
    2. 
						
  2. css样式表：样式分类，选择器。样式属性，格式与布局
		
    样式表分类: 1.内联样式表, 和html联合显示,例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独 ...
    
		
    3. 
						
  3. css样式表和选择器的优先级以及position元素属性值的区别
		
    css样式表优先级 问题:当同一个HTML元素被不止一个样式定义时,会使用哪个样式呢? 答:一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字4拥有最高的优先权. 1.浏览器缺省 ...
    
		
    4. 
						
  4. CSS样式表初学，比C#和JS简单
		
    今天咱们一起来看下CSS样式表的基本基础 经常看博客或者喜欢钻研代码这一类的人对CSS可能有所耳闻,但具体的可能不是很清楚 那什么是CSS呢?与HTML又有什么区别呢?今天咱们就来说道下这个CSS C ...
    
		
    5. 
						
  5. CSS样式表的写作规范
		
    推荐大家使用的CSS书写规范.顺序 写了这么久的CSS,但自己都没有按照良好的CSS书写规范来写CSS代码,东写一段西写一段,命名也是想到什么写什么,过一段时间自己都不知道写的是那一块内容, 这样会影 ...
    
		
    6. 
						
  6. CSS样式----CSS样式表的继承性和层叠性（图文详解）
		
    本文最初于2017-07-29发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 本文重点 CSS的继承性 CSS的层叠性 计算权重 ...
    
		
    7. 
						
  7. WEB入门 四	CSS样式表深入
		
    学习内容 Ø        CSS选择器深入学习 Ø        CSS继承 Ø        CSS文本效果 Ø        CSS图片效果 能力目标 Ø        掌握CSS选择器的组合声 ...
    
		
    8. 
						
  8. WEB入门三	CSS样式表基础
		
    学习内容 Ø        CSS的基本语法 Ø        CSS选择器 Ø        常见的CSS样式 Ø        网页中3种使用CSS的方式 能力目标 Ø        理解CSS的 ...
    
		
    9. 
						
  9. CSS样式表、JS脚本加载顺序与SpringMVC在URL路径中传参数与SpringMVC 拦截器
		
    CSS样式表和JS脚本加载顺序 Css样式表文件要在<head>中先加载,这样网页显示时可以第一次就渲染出正确的布局和样式,网页就不会闪烁,或跳变 JS脚本尽可能放在<body> ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Unity uGUI 登录界面
			
    小记:进入冬季,天气确实变冷了,即使这样也不能作为自己不学习的理由!!! 昨天咱们一起学习了UGUI的Button的相关知识,那么今天咱们做一个简单的登录Demo,有些人可能不屑但是多学点总没什么坏处 ...
    
			
    2. 
						
  2. WindowsForm  增 删 查 改
			
    首先是连接数据库  在数据库里写代码 建立一个数据库下面是代码 create database JinXiaoCun go use JinXiaoCun go create table users ( ...
    
			
    3. 
						
  3. <转>golang 并发性能数据
			
    1.管道chan吞吐极限10,000,000,单次Put,Get耗时大约100ns/op,无论是采用单Go程,还是多Go程并发(并发数:100, 10000, 100000),耗时均没有变化,Go内核 ...
    
			
    4. 
						
  4. USACO 1.4 ariprog 解题报告
			
    这是继虫洞之后又让我为难的一个 剪枝题目,无论如何,做的再快,也只能过6个点,最后三个点也TLE.后来参考了一下标答,大概思路是这样的. 朴素算法就不多说了,枚举a,b然后判断就行,网上说这样优化到位 ...
    
			
    5. 
						
  5. visual studio无法输入密匙解决方法
			
    控制面板->程序和功能->修复/卸载(更改),当到输入密匙界面运行程序,即可出现密匙输入框. 所用程序网上搜索:CrackVS2008ForWindows7
    
			
    6. 
						
  6. [转载]ACM(访问控制模型)，Security Identifiers(SID)，Security Descriptors(安全描述符)，ACL(访问控制列表)，Access Tokens(访问令牌)
			
    对于<windows核心编程>中的只言片语无法驱散心中的疑惑.就让MSDN中的解释给我们一盏明灯吧.如果要很详细的介绍,还是到MSDN仔细的看吧,我只是大体用容易理解的语言描述一下. wi ...
    
			
    7. 
						
  7. java的clone
			
    做项目时有时可能会遇到需要克隆对象的时候,因为有时候对象是直接从别的类get到的,那样引用的是一个对象,修改的话会将原先的对象也修改了. java的浅克隆,十分简单.但是只会克隆基本的数据类型,当涉及 ...
    
			
    8. 
						
  8. PC远程调试移动设备(转载)
			
    我们在移动端进行前端开发时,会遇到一个让人头痛但不得不面对的问题--调试. 在 PC 机器上,我们有功能强大的 Chrome DevTools.Firebug,即便是老版本的 IE ,我们也可以安装微 ...
    
			
    9. 
						
  9. 整理：GET与POST的区别
			
    1.根据HTTP规范,GET用于信息获取,而且应该是安全的和幂等的. (1).所谓安全的意味着该操作用于获取信息而非修改信息.换句话说,GET 请求一般不应产生副作用.就是说,它仅仅是获取资源信息,就 ...
    
			
    10. 
						
  10. [转]Linux下转换字符集(UTF8转换)
			
    今天在Linux 下使用 Iconv 命令转换一个UTF8文件时,总是转换不成功.提示: iconv: 未知 0 处的非法输入序列 后来使用 man iconv 查看,还是没发现异常,因为命令格式都是 ...
    
			
    11.