HTML——CSS样式表&布局页面

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=50)
}

下面是布局一个网页

<!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:100%;--宽
    height:80px;--高
}
#tmenu
{
    width:100%;
    height:60px;
    margin:20px 0px 20px 0px;
}
#tb
{
    width:54.8%;
    height:60px;
    float:left;--向左流
    padding:0px 0px 0px 3.2%;
}
#menu
{
    width:42%;
    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:#999999;
    font-size:14px;
}
#menu1 div:hover
{
    color:#000;
    cursor:pointer;
}
#mmenu
{
    width:100%;
    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:#999999;
    font-size:14px;
    line-height:50px;
    vertical-align:middle;
}
#mmenu div:hover
{
    color:#000;
    cursor:pointer;
}
#mmenu img
{
    margin:14px 14px 14px 0px;
}
#img
{
    width:100%;
    height:600px;
    background-image:url(National%20University%20of%20Singapore%20-%20Home_files/NUSS-ragday2015.jpg);
    background-repeat:no-repeat;
    background-position:center;
    background-size:100% 600px;
}
#imgn
{
    width:100%;
    margin-top:1px;
}
#imgn div
{
    width:25%;
    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>
时间: 2024-10-12 16:11:17

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

css样式表:样式分类,选择器。样式属性,格式与布局

样式表分类: 1.内联样式表, 和html联合显示,例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独立的区域内嵌在网页里,必须写在head里边. <style type="text/css"> p  //格式对p起作用 {样式: } </style> 3.外部样式表 新建一个CSS文件,用来放置样式表.如果要在HTML文件中调用样式表,需要在HTML文件中点右键→

【3-24】css样式表分类、选择器、样式属性、格式布局

一.css样式表分类: (一)内联样式表:代码写在标签内的样式表  控制精确 代码重用性差  优先级最高 格式:<p style="样式属性">内容</p> <div style="text-decoration:line-through;">第四格第三元</div> (二)内嵌样式表:将代码写在标签<style type="text/css"></style>之间,此标签一

CSS样式表规划经验总结

最近看到一些关于CSS文件管理的问题,下面我就自己的经验说说,一个好的CSS文件主要是看他是否具有易维护性.下面我就说说我个人的看法: 一.CSS文件的规划 我在规划CSS的时候,我比较喜欢建立全局css及各模块css.在html页面中引用全局css,在全局css中引用各模块css.比如,建立global.css为全局css,在全局css中定义“* { … } body { … }”之类的全局样式.在全局样式中通过“@import url(”xxx.css”);”引入模块css. 关于模块CSS

CSS样式表初学,比C#和JS简单

今天咱们一起来看下CSS样式表的基本基础 经常看博客或者喜欢钻研代码这一类的人对CSS可能有所耳闻,但具体的可能不是很清楚 那什么是CSS呢?与HTML又有什么区别呢?今天咱们就来说道下这个CSS CSS:层叠式样式表 HTML:超文本标记语言 HTML是负责展示你的网页上都有什么内容,都有什么 CSS是负责你的网页上的内容都怎么摆布,什么样的格局 那CSS到底怎么用呢?布局用HTML中的table不久可以布局么,根据具体要求进行切割就行,没必要用CSS布局,很多人都会这么想 那我要是告诉你一种

4.1 什么是CSS样式表

上一章的课程里,我们学习了表单以及表单中的各种元素,常用的表单元素有:文本框( text).密码框(password).单选按钮(radio).复选框(checkbox).列表框(<select><option>).按钮(button.submit和reset).多行文本框(<textarea>).另外,还学习了框架,包括框架的基本结构.如何创建多个复杂的窗口.框架窗口之间的链接等. 从本章开始,我们将学习CSS(Cascading Style Sheet,层叠式样式表

CSS基础1——CSS样式表及样式规则

1.CSS(Cascading Style Sheets)层叠样式表.用于定义HTMl元素的显示形式,是W3C推出的格式化网页内容的标准技术 2.CSS作为每个网站设计者必须掌握的技术之一,有几个优点: (1)提高页面浏览速度,比传统文本设计方法至少节约50%以上的文件尺寸 (2)缩短改版时间,降低维护费用 (3)结合CSS和DIV,更好的控制页面布局 (4)实现表现和结构.内容相分离 (5)更方便搜索引擎的搜索 3.CSS样式表 (1) 嵌入式样式表 用<style>元素将样式包含在网页内部

当css样式表遇到层

(附:White-space:pre可以是样式表里卖弄body的属性,作用是保持html源代码的空格与换行,等同<pre>标签.) Css样式表可以通过被封在层里的方式来限制页面所修饰的内容.这就是说,为了使样式表只对页面局部起修饰作用,设计者可以将页面的局部内容定义在某个范围之内,这个范围变称为CSS-layer(css层)css层可以通过HTML标签来定义,这种使用方法是web设计中的一枚利器. 1.行<span>和层<div>设计者常常把css样式表放在<s

CSS样式表(一)

在HTML中为各标签加上样式有内联.内嵌和外部样式表三种添加方式.内联的是直接在标签内添加style="样式"即可:内嵌的是直接嵌在网页内,在<head></head>内加入<style type="text/css">样式表</style>:而外部样式表为新建一个单独的样式文件(CSS),然后将外部样式表至当前样式文件中使用(在head内右键点击,选择CSS样式--附加样式表--文件内点击浏览,然后找到样式表保存的位

网站开发综合技术 第二部分 CSS样式表

第2部分 CSS样式表 CSS(Cascading Style Sheets,层叠样式表),作用是美化HTML网页. /*注释*/    注释语法 2.1.样式表的基本概念 2.1.1.样式表分类 1.内联样式表 和html联合显示,控制精确,但是可重用性差,冗余多. 例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独立区域内嵌在网页里,必须写在head标签里边. <style type= "