css基础css页面布局基础

样式可以在HTML中定义,也可以在一个单独的外部样式文件中定义。样式可以分为嵌入式样式表,外部样式表,内联样式表。

外部样式表:首先要建一个后缀为.css的样式表文件,然后在web文档中的<head>段使用<link>标记,这样就可以将一个外部样式表文件链接到文档中。

语法:<link rel="stylesheet" type="text/css" href="样式表的url"/>

嵌入式样式表:在web文档的<head>段使用<style>元素将样式包含在网页内部。仅用于该网页。

语法:<style type="text/css"/>样式定义</style>

内联样式表:多数的HTML标记都包含有一个style属性,允许指定在标记显示时的样式。

语法:<html标记 style="样式定义"></html标记>

比如想要将一个特定的<h1>标记的文本显示为红色。

<h1 style="color:red;">文本</h1>

 

多个样式定义可以层叠向下通过多个层次来影响文档。这种层叠是有优先级的,从小到大为:用户浏览器的设置,外部样式表,嵌入式样式表,内联样式表。

css页面布局基础:

css盒模型:属性包括border(边框),margin(外边据),padding(内边距),width(宽),height(高),这些属性可以用快捷方式表示,顺序为上右下左,值之间用空格隔开。

如;margin:10px 20px auto auto;

正常文档流的布局:在正常流中,文本元素按照从上到下,从左到右的格式布局。块级元素从上到下依次排列,内嵌元素从左到右一次排列。通过浮动或者定位,可以把元素从正常文档流中脱离出来,从而实现与正常文档流不同的复杂的布局。

元素浮动:为使元素浮动到左边或者右边,并且是后面的文本环绕它,我们可以对该元素应用float属性,float属性的取值包括三个:none(不浮动),left(左浮动),right(右浮动)。float属性可以应用于任何元素。

元素浮动的基本行为:1.当float不为none的时候,元素将被视作块级,等于设置display:block;2.当浮动一个文本类型元素时,必须指定该元素的width属性,如果不设置宽度,那么元素内容就会折叠到最小的宽度。3.浮动元素停留在包含它的父级元素的内容区域,不会穿过这个区域。4.浮动元素的margin值是不会重合的。

元素浮动可以很好的节省布局空间。但是有时候并不是最恰当的。这时候可以用clear属性来清楚浮动后的某一区域,让后续的元素从正确位置显示。clear属性的值有:none(允许元素两边都可以有浮动元素),left(不允许左边有浮动元素),right(不允许右边有浮动元素),both(不允许有浮动元素),clear属性只能用于块级元素。

在页面布局中,有时候想要把内容显示到指定的内容,按照正常文档流来说,有时候很难放在想要的位置。这时候可以用定位(position属性)来解决问题。position属性有4个值:static,relative.absolute,fixed.

static:静态定位,表示按照正常定位方式,元素盒按照在文档流中出现的顺序一次格式化。

relative:相对定位,移动元素盒,它在文档流中的原始空间会保留下来,不会被占用。{position:relative;top:;right:;bottom:;left:;}

absolute:绝对定位,移动元素盒,它在文档流中的原始空间不会被保留,不会影响周边元素的布局。{position:absolute;top:;right:;bottom:;left:;}

fixed:固定定位,和absolute类似,元素从文档流中脱离出来,但是它是相对于视口定位,不是对于容器块定位。大多数情况下,视口就是指浏览器窗口。{position:fixed;top:;right:;bottom:;left:;}

元素溢出处理:如果一个元素的大小设置太小,以致不能包含其内容,那么可以使用overflow属性指定其内容不能填充时该如何处理。

overflow的取值可以是visible,hidden,scroll,auto,

visible表示不裁剪内容,强制显示元素的内容。

hidden表示裁剪内容,并不显示超出对象尺寸的内容。

scroll表示裁剪内容,同事提供滚动条,显示全部内容。

auto表示只有在必要的时候才裁剪内容并添加滚动条。

注意:如果要使用overflow属性,那么该元素的position属性必须是绝对定位。

 

元素的可见性:在CSS中,有两个属性可以设置元素的可见性。display和visibility。

display属性常用的值有:none,block,inline。

visibility属性的值有:visible(可见),hidden(影藏),inherit(继承)。

这2种的区别在于:display影藏元素时,等于是脱离文档,不占据任何空间。而visibility影藏元素时,原有空间仍会被占据。

css可以设置动画效果,下面是一个动画效果的代码:

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
#div2{
z-index: 1;
position: absolute;
top: 50px;
left: 400px;
animation-name: left-a ,left-b;
animation-duration: 2s ,6s;
animation-fill-mode:forwards;
animation-iteration-count:1,infinite;
animation-delay:0s,2s;
}
#div3{
z-index: 3;
position: absolute;
top: 50px;
left: 400px;
animation-name: center-a ,center-b;
animation-duration: 2s ,6s;
animation-fill-mode:forwards;
animation-iteration-count:1,infinite;
animation-delay:0s,2s;
}
#div4{
z-index: 2;
position: absolute;
top: 50px;
left: 400px;
animation-name: right-a ,right-b;
animation-duration: 2s ,6s;
animation-fill-mode:forwards;
animation-iteration-count:1,infinite;
animation-delay:0s,2s;

}
@keyframes left-a
{
0% {transform: scale(0,0) ;position: absolute;top:50px;left: 400px; }
100% {transform: scale(1,1) ;position: absolute;top: 100px;left: 100px;}
}
@keyframes left-b
{
0%{ left: 100px;}
15%{ left: 100px;z-index: 1;}
45%{ left:700px;}
55%{ left: 700px;z-index: 2;}
70%{ left: 400px;}
85%{ left: 400px;z-index: 3;}
100%{ left:100px ;}
}
@keyframes center-a
{
0% {transform: scale(0,0);position: absolute;top: 50px;left: 400px; }
100% {transform: scale(1,1) ;position: absolute;top: 100px;left: 400px;}
}
@keyframes center-b
{
0%{ left: 400px;}
15%{ left: 400px;z-index: 3;}
45%{ left:100px;}
55%{ left: 100px;z-index: 2;}
70%{ left: 700px;}
85%{ left: 700px;z-index: 1;}
100%{ left:400px ;}
}
@keyframes right-a
{
0% {transform: scale(0,0);position: absolute;top: 50px;left: 400px; }
100% {transform: scale(1,1);position: absolute;top: 100px;left: 700px;}
}
@keyframes right-b
{
0%{ left: 700px;}
15%{ left: 700px;z-index: 2;}
45%{ left:400px;}
55%{ left: 400px;z-index: 3;}
70%{ left: 100px;}
85%{ left: 100px;z-index: 1;}
100%{ left:700px ;}
}
</style>
</head>
<body>

<div id="div2"><img src="image/gallery-img1.png" /></div>
<div id="div3"><img src="image/gallery-img2.png" /></div>
<div id="div4"><img src="image/gallery-img3.png" /></div>
</body>
</html>

 

在做网页的过程中,首先要布好局,布局好了,在往里添加内容,这样做起来才有思路,不会因为一些原因而使得思绪混乱,前面写完的代码,后面看就不知道代表的是什么了。在写代码的时候,我们给元素命组名或者id值的时候,一定要清晰明了,别全文档乱命名,想起什么就是什么,这样会混乱,不好改动。如果哪里需要改动,都不知道找哪里。

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。