第七节 Html字体样式,HTML学习笔记 CSS文本及字体及连接及列表第七节（原创）(示例代码)...-CSDN博客

文本及字体及连接及列表

hello tzy

静夜思

床前明月光

疑是地上霜

床前明月光

疑是地上霜

this is web page

This is wEb pAge

tHis is wEb page

this is web page

测试测试测试测试测试测试测试测试测试测试测试测试测试测试

this is web pagethis is web pagethis is web pagethis is web pagethis is web pagethis is web page

拉拉

测试a标签百度

看一看效果

苹果
苹果
苹果
苹果
苹果

看一看效果

苹果
苹果
苹果
苹果
苹果

看一看效果

苹果
苹果
苹果
苹果
苹果

css文件tzy.css

h1 {

text-indent: -2em;

/*首行退进2字符*/

padding: 2em;

/*首行缩进2字符*/

}

p {

padding: 2em;

}

#p1 {

text-transform: capitalize;

/*首字母大写*/

}

#p2 {

text-transform: lowercase;

/*全部小写*/

}

#p3 {

text-transform: uppercase;

/*全部大写*/

}

#p4 {

/*阴影效果居左居上清晰度小清颜色*/

text-shadow: 20px 20px 0px #FF00FF;

}

.p5 {

width: 40px;

text-wrap: normal;

/*自动换行不会拆分英文*/

}

/*@font-face {*/

/*font-family: myfont;*/

/*src: url(字体地址);*/

/*}*/

/*div{*/

/*font-family: myfont;*/

/*引用自己的下载的字体,用户可以直接使用，安全性还需改进*/

/*}*/

a:link{

color: red;

/*未被点击*/

text-decoration: none;

/*取消下划线*/

}

a:visited{

color: blue;

/*已被点击*/

}

a:hover{

color: darkgreen;

/*鼠标划过*/

}

a:active{

/*正在点击*/

color: aqua;

font-size:80px;

/* 提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。*/

}

ul li{

/*list-style-type: georgian;*/

/*//修改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");

/*设置图片*/

}

.ul1{

list-style-position: inside;

/*离屏幕左边远一点*/

}

.ul2{

list-style-position: outside;

/*离左边屏幕近一些*/

}