dayjavaweb之文件和课件so easy系列css教程

SoEasy列之CSSCSS介CSSCascadingStyleSheets样式定义如何显示HTML样式通常在样式表中CSSHTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对语言。CSS层叠样式（英语：CascadingStyleSheets，简写CSS又称串样式列表层次结构式样式表文件，一种用来为结构化文档（HTMLXML应用）添加样式（字体、间距和颜色等）的计算机语览器支持，而下一版的CSS4仍在开发过程中。1990年代初HTML被发明开始，样式表就以各种形式出现了，不同的浏览器结合了它们各自初的HTML版本只含有很少的显示属性，读者来决定网页应该怎样被显示。但随着HTML的成长，为了满足设计师的要求，HTML获得了很多显示功能。随着这些功能的增1994年哈坤·利提出了CSS的最初建议。伯特·波斯（BertBos）当时正在设计一个叫做“Argo”的浏览器，他们决定一起合作设计CSS。当时已经有过一些样式表语言的建议了，但CSS是第一个含有“层叠”的主意的。在CSS中，一个计，混合各人的1994年在芝加哥的一次会议上第一次展示了CSS的建议，1995年他与波斯一起再次展示这个建议。当时W3C刚刚创建，W3C对CSS的发展很感，它为此组织了一次讨论会。哈坤、波斯和其他一些人（比如微软的托马斯·雷尔登）是这个项目的主要技术。1996年底，CSS已经完成。1996年12月CSS要求的第一版本被。1997年初，W3C内组织了专门管CSS的工作组，其是克里斯·里雷。这个工作组开始讨论第一版中没有涉及到的问题，其结果是1998年5月的第二版要求。到2007年为止，第三版还CSS1W3C推荐，CSS1发布于19961217日。1999111日，此推荐CSS2W3C推荐，CSS2发布于1999111日。CSS2添加了对媒介（CSS3——CSS3计划将CSSCSS使通过HTML元素的style属性来设置CSSstylestyle="css属性:css属性值<!DOCTYPE<!DOCTYPE<title>01_第一种使用方式style="css属性:css属性值<divstyle="color:red;"通过HTML页面的style元素来设置CSS<<style选择器属性值}<!DOCTYPE<!DOCTYPE<title>02_第二种使用方式<metahttp-equiv="content-type"content="text/html;<!- :type:指定使用样式,值为选择器{属性值}--<styletype="text/css">div{color:} 通过HTML元素的style属性来引入外部CSS<<styletype="text/css">@importurl(样式表名称)<!DOCTYPE<!DOCTYPE<title>03_第三种使用方式<metahttp-equiv="content-type"content="text/html;<!- :type:指定使用样式,值为设置CSS语法@importurl(样式表名称--<styletype="text/css">@import 通过HTML页面的link元素来引入外部CSS<<linkhref="css文件路径rel="stylesheet"type="text/css"<!DOCTYPE<!DOCTYPE<title>04_第四种使用方式<metahttp-equiv="content-type"content="text/html;<!-:href:引入外部cssrel:type:指定使用样式,值为--<linkhref="div.css"rel="stylesheet"type="text/css" CSS语{属性值属性值CSS总是以键值对(key\value)形式存在CSS总是以分号(;)结束组以大括号({})为了让CSSCSSCSS"/*"开始,<<style/**/div{/*color:}第#show1#show1{color:#show2#show2{color:#show3#show3{color:#show3#show3{color:注意：RGB0时也要写百分比符号。但是在其他的情况下就divdiv{font-family:Courier,"CourierNew",多重如果要定义不止一个，则需要用分号将每个分开大多数样式表包含不止一条规则，而大多数规则包含不止一个。多重和空格的使用使得CSS样CSS<!DOCTYPE<!DOCTYPE<title>08_背景色<metahttp-equiv="content-type"content="text/html;<stylebody{background-color:yellow}h1{background-color:#00ff00}h2{background-color:p{background-color:p.no2{background-color:gray;padding:<h1><h2><p>这是段落<pclass="no2">这个段落设置了内边距。<!DOCTYPE<!DOCTYPE<title>09_背景图像<metahttp-equiv="content-type"content="text/html;<stylebody{background-p.flower{background-image:url(b.jpg);padding:20px;}a.radio{background-image:url(c.jpg);padding:20px;}<p<ahref=class="radio">。<b>注释：</b><!DOCTYPE<!DOCTYPE<title>10_背景重复<metahttp-equiv="content-type"content="text/html;<styletype="text/css">{background-repeat:repeat-}<!DOCTYPE<!DOCTYPE<title>11_背景定位<metahttp-equiv="content-type"content="text/html;<styletype="text/css">{background-repeat:no-repeat;}centertopcentercenterbottomcentercenterrightcenter或centerleftcentercenter{{background-repeat:no-repeat;background-position:50%50%;}{background-repeat:no-repeat;background-position:50px100px;}<!DOCTYPE<title>12_背景关联<metahttp-equiv="content-type"content="text/html;<styletype="text/css">{background-attaent:fixed}<p>图像不会随页面的其余部分滚动。<p>图像不会随页面的其余部分滚动。<p>图像不会随页面的其余部分滚动。<p>图像不会随页面的其余部分滚动。<p>图像不会随页面的其余部分滚动。<p>图像不会随页面的其余部分滚动。<p>图像不会随页面的其余部分滚动。<p>图像不会随页面的其余部分滚动。<p>图像不会随页面的其余部分滚动。<p>图像不会随页面的其余部分滚动。<p>图像不会随页面的其余部分滚动。<p>图像不会随页面的其余部分滚动。<p>图像不会随页面的其余部分滚动。<p>图像不会随页面的其余部分滚动。CSS设置文本阴影。CSS2CSS2.1没有保留该属性<!DOCTYPE<!DOCTYPE<title>13_缩进文本<metahttp-equiv="content-type"content="text/html;<styletype="text/css">p{text-indent:<p>缩进文本p{text-indent:<!DOCTYPE<!DOCTYPE<title>14_水平对齐<metahttp-equiv="content-type"content="text/html;<styletype="text/css">p{text-align:center;}<p>水平对齐值规定应该从父元素继承text-align<!DOCTYPE<!DOCTYPE<title>15_宇间隔<metahttp-equiv="content-type"content="text/html;<stylep.spread{word-spacing:30px;}p.tight{word-spacing:-0.5em;}<pclass="spread">Thisissome<pclass="tight">Thisissome<!DOCTYPE<!DOCTYPE<title>16_字母间隔<metahttp-equiv="content-type"content="text/html;<styleh1{letter-spacing:-0.5em}h4{letter-spacing:20px}<h1>Thisisheader<h4>Thisisheader<!DOCTYPE<title>17_字符转换<metahttp-equiv="content-type"content="text/html;<styleh1{text-transform:uppercase}p.uppercase{text-transform:uppercase}p.lowercase{text-transform:lowercase}p.capitalize{text-transform:capitalize}<h1>ThisIsAnH1<pclass="uppercase">Thisissometextina<pclass="lowercase">Thisissometextina<pclass="capitalize">Thisissometextina<!DOCTYPE<!DOCTYPE<title>18_文本装饰<metahttp-equiv="content-type"content="text/html;<stylea{text-decoration:<ahref="#">文本装饰<!DOCTYPE<!DOCTYPE<title>19_处理空白符<metahttp-equiv="content-type"content="text/html;<stylep{white-space:paragraphin<p>white-spacenormal略换行符。<!DOCTYPE<!DOCTYPE<title>20_文本方向<metahttp-equiv="content-type"content="text/html;<styletype="text/css">div.one{direction:rtl}div.two{direction:<divclass="one">Sometext.Right-to-left<divclass="two">Sometext.Left-to-rightCSS（CSS2.1已删除该属性（CSS2.1<!DOCTYPE<!DOCTYPE<title>21_字体系列<metahttp-equiv="content-type"content="text/html;<stylebody{font-family:sans-h1{font-p{font-family:Times,TimesNR,'NewCenturySchoolbook',Georgia,'NewYork',serif;}<h1>Thisisheading<p>Thisisa<p>Thisisa<!DOCTYPE<!DOCTYPE<title>22_字体风格<metahttp-equiv="content-type"content="text/html;<styletype="text/css">p.normal{font-style:normal}p.italic{font-p.oblique{font-<pclass="normal">Thisisaparagraph,<pclass="italic">Thisisaparagraph,<pclass="oblique">Thisisaparagraph,<!DOCTYPE<!DOCTYPE<title>23_字体变形<metahttp-equiv="content-type"content="text/html;<stylep.normal{font-variant:normal}p.small{font-variant:small-caps}<pclass="normal">Thisisa<pclass="small">Thisisa<!DOCTYPE<!DOCTYPE<title>24_字体加粗<metahttp-equiv="content-type"content="text/html;<stylep.normal{font-weight:normal}p.thick{font-weight:bold}p.thicker{font-weight:900}<pclass="normal">Thisisa<pclass="thick">Thisisa<pclass="thicker">Thisisa<!DOCTYPE<!DOCTYPE<title>25_字体大小<metahttp-equiv="content-type"content="text/html;<styletype="text/css">h1{font-size:60px;}h2{font-size:40px;}p{font-size:14px;}<h1>Thisisheading<h2>Thisisheading<p>Thisisa<p>ThisisaCSS选择元素选择器就是通过HTML页面的元素名称来设置css属性值divdiv{color:red;类选择器就是通过HTML元素的class属性值来设置css.class.class属性值.myDiv.myDiv{color:red;IDID选择器就是通过HTML元素的id属性值来设置css#id#id属性值#show1#show1{color:red;属性选择器就是通过HTML元素的属性名称来设置css[[属性名称属性值[name][name]{color:red;属性值divdivem{color:red;子选择器就是设置HTML页面的指定元素的子元素的css子元素属性值divdiv>em{color:red;相邻元素选择器就是设置HTML页面的指定元素的下一个兄弟元素的css属性名属性值divdiv+div{color:red;选择器分组就是将不同选择器相同的内容“压缩”在一起，得到更简洁的样式表/*/*noh1{color:blue;}h2{color:blue;}h3{color:blue;}h4{color:blue;}h5h6/*h1,h2,h3,h4,h5,h6-selector（***CSS121112lang属性的元素添加样式2aa:link{color /*的a:visited{color#00FF00/*的a:hover{color#FF00FF}/*上a:active{color#0000FF}/*pp:first-child{font-weight::lang:lang<!DOCTYPE<!DOCTYPE<metahttp-equiv="content-type"content="text/html;<styletype="text/css">q:lang(no){quotes:"~"}<p>文字<qlang="no">的文字</q>文字CSS1122"first-letter"pp:first-letter{font-weight:"first-line"pp:first-line{font-weight::before":before"h1h1:before{content::after":after"h1h1:after{content:CSS框模<!DOCTYPE<!DOCTYPE<title>26_内边距<metahttp-equiv="content-type"content="text/html;<styletype="text/css">td.test1{padding:1.5cm}td.test2{padding:0.5cm<table<td<br<table<td0.5cm2.5cm4<!DOCTYPE<!DOCTYPE<title>27_边框<metahttp-equiv="content-type"content="text/html;<stylep{border:mediumdouble<p>Some<!DOCTYPE<!DOCTYPE<title>28_外边距<metahttp-equiv="content-type"content="text/html;<stylep.margin{margin:2cm4cm3cm<p>这个段落没有指定外边距。<pclass="margin">这个段落带有指定的外边距。这个段落带有指定的外边距。这个<p>这个段落没有指定外边距。<!DOCTYPE<title>29_外边距合并<metahttp-equiv="content-type"content="text/html;<style*{}#d1background-}#d2background-}<div<div<p>div20px30px（20px10px）CSS定<!DOCTYPE<!DOCTYPE<title>30_相对定位<metahttp-equiv="content-type"content="text/html;<styletype="text/css">h2.pos_left{}h2.pos_right{