<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Text and fonts and connections and lists</title> <Linkrel= "stylesheet"href= "Tzy.css"type= "Text/css"></Head><Body><Pstyle= "Color:brown;text-align:center">Hello Tzy</P><!--Center Color -<H1>Quiet Night thinking</H1><P>Moon Light in front of the bed</P><P>Suspected ground frost.</P><P>Moon Light in front of the bed</P><P>Suspected ground frost.</P><PID= "P1">This is web page</P><PID= "P2">This is WEb PAge</P><PID= "P3">This is WEb page</P><PID= "P4">This is web page</P><Pclass= "P5">Test test testing test test test testing test test test test test</P><Pclass= "P5">This is Web Pagethis is Web pagethis is Web pagethis are Web pagethis is Web page</P><Pstyle= "font-family:fantasy;font-size:40px">Lesbian</P><ahref= "Http://www.baidu.com">Test a label Baidu</a><P>Take a look at the effect</P><ul> <Li>Apple</Li> <Li>Apple</Li> <Li>Apple</Li> <Li>Apple</Li> <Li>Apple</Li></ul><P>Take a look at the effect</P><ulclass= "UL1"> <Li>Apple</Li> <Li>Apple</Li> <Li>Apple</Li> <Li>Apple</Li> <Li>Apple</Li></ul><P>Take a look at the effect</P><ulClas= "Ul2"> <Li>Apple</Li> <Li>Apple</Li> <Li>Apple</Li> <Li>Apple</Li> <Li>Apple</Li></ul></Body></HTML>
H1{text-indent:-2em;/*2 characters back in first line*/padding:2em;/*indent 2 characters in the first line*/}P{padding:2em;}#p1{Text-transform:Capitalize;/*Capitalize first letter*/}#p2{Text-transform:lowercase;/*All lowercase*/}#p3{Text-transform:Uppercase;/*ALL caps*/}#p4{/*shadow effect on left top clear color*/Text-shadow:20px 20px 0px #FF00FF;}. P5{width:40px;Text-wrap:Normal;/*Word wrap does not split in English.*/}/*@font-face {*//*Font-family:myfont;*//*Src:url (font address);*//*}*//*div{*//*Font-family:myfont;*//*reference your own downloaded fonts, users can use directly, security needs to be improved*//*}*/A:link{Color:Red;/*has not been clicked*/text-decoration:None;/*Remove Underline*/}a:visited{Color:Blue;/*has been clicked*/}a:hover{Color:Darkgreen;/*Mouse over*/}a:active{/*is tapping*/Color:Aqua;font-size:80px;/*tip: In CSS definitions, a:hover must be placed after A:link and a:visited to be valid. Hint: In the CSS definition, a:active must be placed after a:hover to be valid. */}ul Li{/*List-style-type:georgian;*/ /*//Modify the tag picture before Li*/List-style-image:URL ("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1504976310558&di= 4a7378a8e142317c61a6e16bb2f02ee7&imgtype=0&src=http%3a%2f%2fimg.90sjimg.com%2finspiration%2f03%2f98% 2f74%2f62%2f70%2fs_236_cl3486omafk6prgdpo43.gif ");/*set up Li pictures*/}. UL1{list-style-position:inside;/*a little farther from the left side of the screen*/}. Ul2{list-style-position:outside;/*A little closer to the left screen .*/}
HTML Learning Notes CSS text and fonts and joins and lists (a label usage and indentation) case seventh (original) Reference use table