有没有做任务的网站,专业网络公司报价,升腾d9116 做网站,百度开户流程CSS:层叠样式表
CSS#xff08;Cascading Style Sheets,层叠样式表#xff09;#xff0c;是一种用来为结构化文档添加样式#xff08;字体、间距和颜色#xff09;的计算机语言#xff0c;css扩展名为.css。 实例: !DOCTYPE htmlhtml
head…CSS:层叠样式表
CSSCascading Style Sheets,层叠样式表是一种用来为结构化文档添加样式字体、间距和颜色的计算机语言css扩展名为.css。 实例: !DOCTYPE htmlhtml
headmeta charsetutf-8titleCSS实例/titlestylebody{background-color: aquamarine;}h1 {color:orangered;text-align: center;}p {font-family:Times New Roman;font-size: 25px;}/style
/head
body
h1 CSS实例 /h1
p这是一个段落/p
/body
/html CSS简介 CSS指层叠样式表样式定义如何显示HTML元素样式通常存储在样式表中把样式添加到HTML4.0中是为了解决内容与表现分离的问题外部样式可以极大提高工作效率外部样式表通常存储在CSS文件中多个样式定义可层叠为一个 样式表定义如何显示HTML元素就像HTML中的字体标签和颜色属性所起的作用那样样式通常保存在外部.css文件中我们只需要编辑一个简单的CSS文档就可以改变所有页面的布局和改观。 CSS语法
css规则由两个主要部分组成选择器以及一条或多条声明。
h1 {color:bule;font-size:12px;}
上述h1为选择器color和font-size为属性对应的blue和12px为值。选择器通常是您需要改变样式的HTML元素。每条声明由一个属性和一个值组成。属性是您希望设置的样式属性。每一个属性都有一个值。属性和值被冒号分开。
CSS实例 CSS声明总是以分号结束声明总是以大括号{}括起来 p{color:red;text-align:center;} 为了让CSS可读性更强每行只描述一个属性 !DOCTYPE htmlhtml
headmeta charsetutf-8titleCSS实例/titlestylebody{background-color: aquamarine;}h1 {color:orangered;text-align: center;}p {font-family:Times New Roman;font-size: 25px;}a{color: rgb(4, 255, 0);text-align: start;background-color: black;}/style
/head
body
h1 CSS实例 /h1
p这是一个段落/p
p这两段话用来描述CSS属性/p
a开始/a
/body
/html CSS注释 注释是用来解释你的代码并且可以随意编辑它浏览器会忽略它。
CSS注释以 /* 开始, 以 */ 结束 stylebody{background-color: aquamarine;}h1 {color:orangered;text-align: center;}p {font-family:Times New Roman;font-size: 25px;}/* a{color: rgb(4, 255, 0);text-align: start;background-color: black;}*//styleCSS id和class id和class选择器 如果要在HTML元素中设置CSS样式则需在元素中设置“id”和“class”选择器。 Id选择器
id选择器可以为标有特定id的HTML元素指定特定的样式。
HTML元素以id属性来设置id选择器CSS中id选择器以“#”来定义。
以下的样式规则应用于元素属性idp
#p
{text-align:center;color:red;
}
ID属性不要以数字开头数字开头的ID在Mozilla/Firefox中不起作用。
class选择器 class选择器用于描述一组元素的样式class选择器有别于id选择器class选择器可以在多个元素中使用。class选择器在HTML中以class属性表述在caa中类选择器以一个点.号表示。在下面的例子中所有拥有center类的HTML元素均为居中。 .center{text-align:center;} 也可以指定特定的HTML元素使用class.在以下实例中所有p元素使用的classcenter让该元素的文本居中。 p.center{text-align:center;} 多个class选择器可以使用空格分开 .center{text-align:center;}
.color{color:#ff0000;} 实例 !DOCTYPE htmlhtml
headmeta charsetutf-8titleCSS实例/titlestylebody{background-color: aquamarine;}#hha {color: yellow;text-align: center;}p.center {font-family:Times New Roman;font-size: 25px;background-color: rgb(255, 227, 127);}a{color: rgb(4, 255, 0);text-align: start;background-color: black;}/style
/head
body!-- id选择器 --
h1 idhha CSS实例 /h1
!-- class选择器 --
p classcenter这是一个段落/p
p classcenter这两段话用来描述CSS属性/p
a开始/a
/body
/html 以上为id选择器和class选择器实例请仔细观察其不同之处。
CSS创建
当读到一个样表时浏览器会根据它来格式化HTML文档。 如何插入样式表
插入样式表的方法有三种
外部样式表内部样式表内联样式表
外部样式表
当样式需要应用到很多页面时外部样式表将是理想的选择。在使用外部样式表的情况下可以通过改变一个文件来改变整个站点的外观。每个页面使用link标签链接到样式表。link标签在文档的头部
head
link relstylesheet typetext/css hrefmystyle.css
/head
浏览器会从文件mystyle.css中读到样式声明并根据它来格式文档。
外部样式表可以用在任何文本编辑器中进行编辑。文件不能包含任何html标签。样式表应该以.css扩展名进行保存。
实例
CSS
#hr {color:sienna;}p {margin-left:20px;font-size: 25px;background-color: rgb(255, 227, 127);}body {background-image:url(/img/2.webp);}h1{color: yellow;text-align: center;}
HTML
!DOCTYPE html
html
headmeta charsetutf-8titleCSS实例/titlelink relstylesheet typetext/CSS hrefcss/mystyle.css
/head
bodyh1 CSS实例 /h1h2CSS创建/h2
p这是一个段落/p
p这两段话用来描述CSS属性/p
/body
/html
运行结果 内部样式
当单个文档需要特殊的样式时就应该使用内部样式表。你可以使用style标签在文档头部定义内部样式表就像这样
headmeta charsetutf-8titleCSS实例/titlestylebody{background-color: aquamarine;}hr {color: yellow;text-align: center;}p{font-family:Times New Roman;font-size: 25px;background-color: rgb(255, 227, 127);}a{color: rgb(4, 255, 0);text-align: start;background-color: black;}/style /head
内联样式
由于需要将表现和内容混杂在一起内联样式会损失掉样式表的许多优势。要使用内联样式需要在相关的标签内使用样式属性。style属性可以包含任何css属性。
p stylecolor:sienna;margin-left:20px这是一个段落。/p
多重样式
如果某些属性在不同的样式表中被同样的选择器定义那么属性值将从更具体的样式表中被继承过来。实例外部样式表拥有针对h3选择器的三个属性
h3
{
color:red;
text-align:left;
font-size:8pt;
}
而内部样式表拥有针对h3选择器的两个属性
h3
{
text-align:right;
font-size:20pt;
}
假如拥有内部样式表的这个页面同时拥有与外部样式表链接那么h3得到的样式是;
color:red;
text-align:right;
font-size:20pt;
即颜色属性将被继承于外部样式表而文字排列和字体尺寸会被内部样式表中的规则取代。
多重样式优先级 样式表允许多中方式规定样式信息。样式可以规定在单个的HTML中在HTML页的头元素中或在一个外部的CSS 文件中。甚至可以在同一个HTML文档内部引用多个外部样式表。 一般情况下优先级如下 内联样式内部样式外部样式浏览器默认样式 !DOCTYPE html
html
headmeta charsetutf-8titleCSS实例/title!-- 外部样式 --link relstylesheet typetext/CSS hrefCSS/color.cssstyle typetext/cssh3{color: aquamarine;text-align: center;}/style
/head
bodyh3 CSS实例 /h3
/body
/html
CSS外部样式
h3{color: blue;text-align: left;
} 注意如果外部样式放在内部样式后面则外部样式将覆盖内部样式实例如下 !DOCTYPE html
html
headmeta charsetutf-8titleCSS实例/title!-- 内部样式 --style typetext/cssh3{color: aquamarine;text-align: center;}
/style!-- 外部样式 -- link relstylesheet typetext/CSS hrefCSS/color.css
/head
bodyh3 CSS实例 /h3
/body
/html CSS背景 CSS背景属性用于定义HTML元素的背景。 CSS属性定义背景效果 background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position 背景颜色
background-color属性定义了元素的背景颜色。
页面的背景颜色使用在body的选择器中
body{background-color:#b0c4de;}
实例
!DOCTYPE html
html
head
meta charsetutf-8
title背景颜色/title
stylebody{background-color: orange;}
/style
/head
bodyh1牵丝戏安/h1p你好牵丝戏安/p
/body
/html CSS中颜色通常以以下方式定义
十六进制 - 如#ff0000RGB - 如rgb(255,0,0)颜色名称 - 如red
以下实例中, h1, p, 和 div 元素拥有不同的背景颜色:
!DOCTYPE html
htmlheadmeta charsetutf-8titleCSS back实例/titlestyleh1{ background-color:blue}p {background-color:#e0ffff;}div{background-color: yellow;}/style/headbodyh1这是CSS背景颜色实例/h1divp这段有自己的背景颜色/p与上述同一个div/div/body
/html 背景图像 background-image属性描述了元素的背景图像。默认情况下背景图像进行平铺重复显示以覆盖整个元素实体。 !DOCTYPE html
htmlheadmeta charsetutf-8titleCSS back实例/titlestylebody{background-color: aquamarine;background-image: url(img/2.webp);}/style/headbodyh1这是CSS背景颜色实例/h1divp这段有自己的背景颜色/p与上述同一个div/div/body
/html 背景图像-水平或垂直
默认情况下backgroung-image属性会在页面的水平或者垂直方向平铺一些图像如果在水平方向与垂直方向平铺会显得很不协调。正如上图所示如果图像只在水平方向平铺页面背景会好看一些 body
{ background-image: url(img/2.webp);background-repeat: repeat-x;
}
背景图像-设置定位与不平铺
让背景图像不影响文本的排版。如果你不想让图像平铺可以使用background-repeat属性 body{background-image: url(img/2.webp);background-repeat: no-repeat;} 以上实例中背景图像与文本显示在同一个位置为了让排版更加合理不影响文本的阅读可以改变图像的位置。利用background-position属性改变图像的位置 body{background-image: url(img/2.webp);background-repeat: no-repeat;background-position: right top;} 背景-简写属性
在以上代码中我们可以看到页面的背景颜色通过了很多属性来控制。为了简化这些属性的代码我们可以将这些属性合并在一个属性中背景颜色的简写为“background” body {background: url(img/2.webp) no-repeat right top;} CSS文本格式 文本颜色 颜色属性被用来设置文字的颜色。颜色是通过CSS最经常的指定 十六进制值 - 如: FF0000一个RGB值 - 如: RGB(255,0,0)颜色的名称 - 如: red 文本的对齐方式 文本排列属性是用来设置文本的水平对齐方式。 文本可居中或对齐到左或右,两端对齐. 当text-align设置为justify每一行被展开为宽度相等左右外边距是对齐如杂志和报纸。 实例;
!DOCTYPE html
htmlheadmeta charsetutf-8titleCSS back实例/titlestyleh1{color: aquamarine;text-align: center;}p.date{text-align: right;color: blue;}p.main{text-align: justify;color: red/style/headbodyh1春晓/h1p classdate唐孟浩然/pp classmain 春眠不觉晓处处闻啼鸟。/pp classmain夜来风雨声花落知多少。/ppb注意/b 重置浏览器窗口大小查看 quot;justifyquot; 是如何工作的。/p/body
/html 文本修饰
text-decoration属性用来设置或删除文本的装饰。从设计的角度来看text-decoretion属性主要是用来删除链接的下划线。 文本转换
文本转换属性是用来指定在一个文本中的大写和小写字母。可用于所有字句变成大写或小写字母或每个单词的首字母大写。 文本缩进
文本缩进属性是用来指定文本的第一行的缩进。
实例
!DOCTYPE html
htmlheadmeta charsetutf-8titleCSS back实例/titlestyleh1{color: aquamarine;text-align: center;text-decoration: underline;}p.date{text-align: right;color: blue;text-decoration: overline;}p.main{text-align: justify;color: red;text-decoration: line-through;text-indent: 50px;}a.start{text-decoration:none;}p.uppercase{texttransform:uppercase;}p.lowercase {text-transform:lowercase;}p.capitalize {text-transform:capitalize;}}/style/headbodyh1春晓/h1p classdate唐孟浩然/pp classmain 春眠不觉晓处处闻啼鸟。/pp classmain夜来风雨声花落知多少。/pa classstart hrefhttp://www.baidu.com百度网站/abra hrefhttp://www.baidu.com百度网站/ap classuppercaseThis is some text./pp classlowercaseThis is some text./pp classcapitalizeThis is some text./p/body
/html CSS字体 CSS字体属性定义字体加粗大小文字样式。
CSS字型
在CSS中有两种类型的字体系列名称 通用字体系列 - 拥有相似外观的字体系统组合如 Serif 或 Monospace特定字体系列 - 一个特定的字体系列如 Times 或 Courier 字体系列
font-family 属性设置文本的字体系列。
font-family 属性应该设置几个字体名称作为一种后备机制如果浏览器不支持第一种字体他将尝试下一种字体。
注意: 如果字体系列的名称超过一个字它必须用引号如Font Family宋体。
多个字体系列是用一个逗号分隔指明 !DOCTYPE html
html
head
meta charsetutf-8
title菜鸟教程(runoob.com)/title
style
p.serif{font-family:Times New Roman,Times,serif;}
p.sansserif{font-family:Arial,Helvetica,sans-serif;}
/style
/head
body
h1CSS 字体/h1
p classserif这一段的字体是 Times New Roman /p
p classsansserif这一段的字体是 Arial./p
/body
/html 字体样式
主要是用于指定斜体文字的字体样式属性。
这个属性有三个值
正常 - 正常显示文本斜体 - 以斜体字显示的文字倾斜的文字 - 文字向一边倾斜和斜体非常类似但不太支持
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
字体大小
font-size 属性设置文本的大小。
能否管理文字的大小在网页设计中是非常重要的。但是你不能通过调整字体大小使段落看上去像标题或者使标题看上去像段落。
请务必使用正确的HTML标签就h1 - h6表示标题和p表示段落
字体大小的值可以是绝对或相对的大小。
绝对大小
设置一个指定大小的文本不允许用户在所有浏览器中改变文本大小确定了输出的物理尺寸时绝对大小很有用
相对大小
相对于周围的元素来设置大小允许用户在浏览器中改变文字大小
设置字体大小像素
设置文字的大小与像素可以完全控制文字大小
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;} 用em来设置字体大小
为了避免Internet Explorer 中无法调整文本的问题许多开发者使用 em 单位代替像素。
em的尺寸单位由W3C建议。
1em和当前字体大小相等。在浏览器中默认的文字大小是16px。
因此1em的默认大小是16px。可以通过下面这个公式将像素转换为empx/16em CSS链接 不同的链接可以有不同的样式。
链接样式
链接的样式可以用任何CSS属性如颜色字体背景等。
特别的链接可以有不同的样式这取决于他们是什么状态。
这四个链接状态是
a:link - 正常未访问过的链接a:visited - 用户已访问过的链接a:hover - 当用户鼠标放在链接上时a:active - 链接被点击的那一刻
!DOCTYPE html
html
head
meta charsetutf-8
titleCSS链接/title
stylea:link{color:aqua;} a:visited{color:aquamarine;}a:hover{color: blue;}a:active{color:cadetblue}
/style
/head
body
a slass hrefhttp://www.baidu.com访问百度/abr
pb注意/b a:hover 必须在 a:link 和 a:visited 之后需要严格按顺序才能看到效果。/p
pb注意/b a:active 必须在 a:hover 之后。/p
/body
/html 当设置为若干链路状态的样式也有一些顺序规则
a:hover 必须跟在 a:link 和 a:visited后面a:active 必须跟在 a:hover后面
文本修饰
text-decoration 属性主要用于删除链接中的下划线
stylea:link{color:aqua;text-decoration: none;} a:visited{color:aquamarine;text-decoration: none;}a:hover{color: blue;text-decoration: underline;}a:active{color:cadetbluel;text-decoration: underline;}
/style 背景颜色
背景颜色属性指定链接背景色
stylea:link{color:aqua;text-decoration: none;background-color: blue;} a:visited{color:aquamarine;text-decoration: none;background-color: aqua;}a:hover{color: blue;text-decoration: underline;background-color: black;}a:active{color:cadetbluel;text-decoration: underline;background-color: blueviolet;}
/styleCSS列表 CSS列表属性作用如下
设置不同的列表标记为有序列表设置不同的列表标记为无序列表设置列表项标记为图像
列表
在HTML中有两种类型的列表
无序列表 ul - 列表项标记用特殊图形如小黑点、小方框等有序列表 ol - 列表项的标记有数字或字母
使用 CSS可以列出进一步的样式并可用图像作列表项标记。
无序列表如下所示:
CoffeeTeaCoca Cola
有序列表如下所示:
CoffeeTeaCoca Cola
不同的列表项标记
list-style-type属性指定列表项标记的类型是
!DOCTYPE html
html
head
meta charsetutf-8
titleCSS链接/title
styleul.a {list-style-type:circle;}ul.b {list-style-type:square;}ol.c {list-style-type:upper-roman;}ol.d {list-style-type:lower-alpha;}/style
/head
bodyp无序列表实例:/pul classali苹果/lili香蕉/lili香蕉梨/li/ulul classbli苹果/lili香蕉/lili香蕉梨/li/ulp有序列表实例:/pol classcli苹果/lili香蕉/lili香蕉梨/li/olol classdli苹果/lili香蕉/lili香蕉梨/li/ol
/body
/html 作为列表项标记的图像
ul
{list-style-image: url(sqpurple.gif);
} 注意url中为标记前的图片地址。 ul: 设置列表类型为没有列表项标记设置填充和边距 0px浏览器兼容性ul 中所有 li: 设置图像的 URL并设置它只显示一次无重复您需要的定位图像位置左 0px 和上下 5px用 padding-left 属性把文本置于列表中 列表-简写属性
在单个属性中可以指定所有的列表属性。这就是所谓的简写属性。
为列表使用简写属性列表样式属性设置如下
ul
{list-style: square url(sqpurple.gif);
}
CSS盒子模型 所有HTML元素可以看作盒子在CSS中box model这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子封装周围的HTML元素它包括边距边框填充和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 上面的图片说明了盒子模型。 不同部分的说明 Margin(外边距) - 清除边框外的区域外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域内边距是透明的。Content(内容) - 盒子的内容显示文本和图像。 !DOCTYPE html
html
head
meta charsetutf-8
title盒子链接/title
stylediv{background-color: antiquewhite;width: 300px;border: 25px solid darkcyan;padding:30px;margin: 50px;}/style
/head
bodyh2盒子模型/h2 p盒子模型本质是一个盒子封装周围的HTML元素它包括边距边框填充和实际内容。/pdiv这里是盒子内的实际内容。有25内间距30外间距50绿色边框/div
/body
/html CSS边框 边框样式border-style 属性用来定义边框的样式。 border-style值 none默认无边框dotted定义一个点线边框dashed定义一个虚线边框solid定义一个实线边框double定义两个边框。两个边框的宽度和border-width的值相同groove定义3D沟槽边框。效果取决于边框的颜色值ridge定义3D脊边框。效果取决于边框的颜色值inset定义一个3D的嵌入边框。效果取决于边框的颜色值outset定义一个3D突出边框。效果取决于边框的颜色值 实例 !DOCTYPE html
htmlheadmeta charsetutf-8titleborder/titlestylep.none{border-style: none;}p.dotted{border-style:dotted;}p.dashed{border-style:dashed;}p.solid{border-style:solid;}p.double{border-style: double;}p.groove{border-style:groove;}p.ridge{border-style:ridge;}p.inset{border-style:inset;}p.outset{border-style:outset;}/style/headbodyp classnone无边框/pp classdotted点线边框/pp classdashed虚线边框/pp classsolid实现边框/pp classdouble两个边框/pp classgroove3D沟槽边框/pp classridge3D脊边框/pp classinset3D嵌入边框/pp p classoutset3D突出边框/p/body
/html 边框宽度 可以通过border-width属性为边框指定宽度。指定宽度有两种方法可以指定长度值比如2px或0.1em或者使用3个关键字之一他们分别为thick、medium和thin。 注意CSS没有定义3个关键字的具体宽度所以一个用户可能把thick、medium和thin分别设置为等于5px、3px和2px而另一个用户则分别设置为3px、2px、和1px. 实例
!DOCTYPE html
htmlheadmeta charsetutf-8titleborder/titlestylep.one{border-style: solid;border-width: 5px;}p.two{border-style:solid;border-width: medium;}p.three{border-style: solid;border-width: 1px;}/style/headbodyp classone牵丝戏安/pp classtwo牵丝戏安/pp classthree牵丝戏安/p/body
/html 边框颜色 border-color属性用于设置边框的颜色。可以设置的颜色
name - 指定颜色的名称如 redRGB - 指定 RGB 值, 如 rgb(255,0,0)Hex - 指定16进制值, 如 #ff0000
您还可以设置边框的颜色为transparent。
注意 border-color单独使用是不起作用的必须得先使用border-style来设置边框样式。 边框-单独设置各边
border-style属性可以有1-4个值
border-style:dotted solid double dashed; 上边框是 dotted右边框是 solid底边框是 double左边框是 dashedborder-style:dotted solid double; 上边框是 dotted左、右边框是 solid底边框是 doubleborder-style:dotted solid; 上、底边框是 dotted右、左边框是 solidborder-style:dotted; 四面边框是 dotted
!DOCTYPE html
htmlheadmeta charsetutf-8titleborder/titlestylep.one{border-top-style: solid;border-right-style: groove;border-bottom-style: dotted;border-left-style: ridge;border-width: 5px;border-color: aqua;}p.two{border:solid medium blue;}p.three{border-style: solid;border-width: 1px;}/style/headbodyp classone牵丝戏安/pp classtwo牵丝戏安/pp classthree牵丝戏安/p/body
/html CSS外边距 CSS外边距属性定义元素周围的空间。 margin
margin清楚周围的外边框元素区域。margin没有背景颜色是完全透明的。
margin可以单独改变元素的上、下、左、右边距也可以一次改变所有的属性。 可能的值
值说明auto设置浏览器边距。 这样做的结果会依赖于浏览器length定义一个固定的margin使用像素ptem等%定义一个使用百分比的边距 margin可以使用负值重叠的内容。 Margin-单边外边距属性
!DOCTYPE html
html
head
meta charsetutf-8
title边距(runoob.com)/title
style
p
{background-color:yellow;
}
p.margin
{margin-top:100px;margin-bottom:100px;margin-right:50px;margin-left:50px;
}
/style
/headbody
p这是一个没有指定边距大小的段落。/p
p classmargin这是一个指定边距大小的段落。/p
/body/html CSSpadding填充 CSSpadding填充是一个简写属性定义元素边框与元素内容之间的空间即上下左右的内边距。 当元素的 padding填充内边距被清除时所释放的区域将会受到元素背景颜色的填充。
单独使用 padding 属性可以改变上下左右的填充。 可能的值
值说明length定义一个固定的填充(像素, pt, em,等)%使用百分比值定义一个填充
填充-单边内边距属性
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px; 上内边距是 25px右内边距是 50px下内边距是 25px左内边距是 50px
CSS分组和嵌套选择器 分组选择器
h1
{color:green;
}
h2
{color:green;
}
p
{color:green;
}
为了尽量减少代码可以使用分组选择器每个选择器用逗号分隔。
style
h1,h2,p
{color:green;
}/style
嵌套选择器
它可能适用于选择器内部的选择器的样式。
在下面的例子设置了四个样式
p{ }: 为所有 p 元素指定一个样式。.marked{ }: 为所有 classmarked 的元素指定一个样式。.marked p{ }: 为所有 classmarked 元素内的 p 元素指定一个样式。p.marked{ }: 为所有 classmarked 的 p 元素指定一个样式。
style
p/* 第一个样式 */
{color:blue;text-align:center;
}
.marked/* 第二个样式 */
{background-color:red;
}
.marked p/* 为classmarked元素内的P元素指定一个样式 */
{color:rgb(15, 222, 84);
}
p.marked/* 为所有classmarked的P元素指定一个样式 */
{text-decoration:underline;
}
/style CSS定位
position属性制定了元素的定位类型。
position属性的五个值
stationrelativefixedabsolutsticky
元素可以使用的顶部、底部、左侧和右侧属性定位。然而这些属性无法工作除非是先设定position属性。他们也有不同的工作方式这取决于定位的方法。 station定位
HTML元素的默认值即没有定位遵循正常的文档流对象。静态定位的元素不会受到top,bittom,left,right影响。 styleh1{color: aquamarine;text-align: center;}p.date{text-align: right;color: bluen;}p.main{color: red;left:20px;position:relative}a.start{text-decoration:none;position: relative;left: -20px;}/style absolute定位
!DOCTYPE html
htmlheadmeta charsetutf-8titleCSS back实例/titlestyleh1{color: aquamarine;text-align: center;}p.date{text-align: right;color: bluen;}p.main{color: red;left:20px;position:relative}a.start{text-decoration:none;position:absolute;left: 100px;top:150px;}/style/headbodyh1春晓/h1p classdate唐孟浩然/pp classmain 春眠不觉晓处处闻啼鸟。/pa classstart夜来风雨声花落知多少。/a/body
/html Sticky定位
sticky 英文字面意思是粘粘贴所以可以把它称之为粘性定位。
position: sticky; 基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时它的表现就像 position:fixed;它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位之后为固定定位。 h1{position:-webkit-sticky;position:sticky;top:0;padding: 5px;background-color: blue;border:2px solid #4CAF50;color: aquamarine;text-align: center;} 重叠的元素
元素的定位与文档流无关所以它们可以覆盖页面上的其它元素
z-index属性指定了一个元素的堆叠顺序哪个元素应该放在前面或后面
一个元素可以有正数或负数的堆叠顺序 img{position: absolute;left: 0px;top:0px;z-index: -1;} CSS总结
CSS基础教程就到这里更多复杂样式只需将前面所学习的简单样式相互组合核心内容为盒子模型根据盒子模型的布局可以设置十分美观的网站。
