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. angular $location常用方法使用
			
    $location提供了一些常用的操作和获取地址栏里的地址的方法. <script type="text/javascript"> angular.module('ap ...
    
			
    2. 
						
  2. wamp安装
			
    下载之后双击文件进行安装选择:I accept the agreement ,点击Next. 一直单击NEXT 安装完成后运行wamp,在桌面右下角即会出现wamp的图标,图标最初是红色的,然后变为橙 ...
    
			
    3. 
						
  3. AjaxHelper创建的ajax无效，JQuery直接方法post有效，原来是Microsoft.jQuery.Unobtrusive.Ajax错误，NuGet解决
			
    Get-Package -ListAvailable -Filter Microsoft.JQuery Microsoft.jQuery.Unobtrusive.Ajax –Version 3.2.0
    
			
    4. 
						
  4. 初始seajs
			
    SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制 SeaJS本身遵循KISS(Keep It Simple, Stupid ...
    
			
    5. 
						
  5. HttpWebRequest在GetResponse时总是超时
			
    最近在通过RESTFUL接口来发布些数据,总是出现请求超时,好不容易找到个靠谱点的了,记下来,回去试下!! “ 问题就是我第一个HttpWebRequest在GetResponse之后,忘记将取得的W ...
    
			
    6. 
						
  6. Python之路第十一天，高级(3)-Python操作 Memcached、Redis
			
    Memcached Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的速度 ...
    
			
    7. 
						
  7. python GUI学习——Tkinter
			
    支持python的常见GUI工具包: Tkinter 使用Tk平台 很容易得到 半标准 wxpython 基于wxWindows.跨平台越来越流行 Python Win 只能在Windows上使用 使 ...
    
			
    8. 
						
  8. django之uWSGI配置 +Nginx
			
    参考文档 官方文档   安装: pip install uwsgi 启动命令: 方法一.直接命令启动 /home/zabbix/application/python/bin/uwsgi --socke ...
    
			
    9. 
						
  9. TypeError: 'QueryDict' object is not callable
			
    id = int(request.POST('id')) Error message: TypeError: 'QueryDict' object is not callable Error rese ...
    
			
    10. 
						
  10. Spring中IoC - 两种ApplicationContext加载Bean的配置
			
    说明:Spring IoC其实就是在Service的实现中定义了一些以来的策略类,这些策略类不是通过 初始化.Setter.工厂方法来确定的.而是通过一个叫做上下文的(ApplicationConte ...
    
			
    11.