css学习01
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--页面标题-->
<title>欢迎来到梦想之都</title>
<!--links方式引入css文件-->
<!--link标签在文档中声明外部资源的时候使用-->
<link rel="stylesheet" type="text/css" href="./css/test.css">
<!--@import方式引入css文件-->
<style type="text/css">@import url(http://XXXX/style.css);</style>
<!--本质上都link与@import都是为了加载css文件可是有一些细微的差异-->
<!--
差异1：老祖宗的差异。link属于XHTML标签，而@import彻底是CSS提供的一种方式。
link标签除了能够加载CSS外，还能够作不少其它的事情，好比定义RSS，定义rel链接属性等，@import就只能加载CSS了。
差异2：加载顺序的差异。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面所有被下载完再被加载。因此有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显（梦之都加载CSS的方式就是使用@import，我一边下载一边浏览梦之都网页时，就会出现上述问题）。
差异3：兼容性的差异。因为@import是CSS2.1提出的因此老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
差异4：使用dom控制样式时的差异。当使用javascript控制dom去改变样式的时候，只能使用link标签，由于@import不是dom能够控制的。
大体就这几种差异了（若是还有什么差异，你们告诉我，我再补充上去），其它的都同样，从上面的分析来看，仍是使用link标签比较好。
标准网页制做加载CSS文件时，还应该选定要加载的媒体（media），好比screen，print，或者所有all等。这个我到CSS高级教程中再给你们介绍
-->
<!--css文件内部引用-->
<!--
css选择字符名称{
属性：属性值
属性2:属性值2
}
-->
<style type="text/css">
.p1{
/**color：前景色**/
color: #FF0000;
}
#div1{
color: #F8AE11;
height: 20px;
with:10px;
/*opacity:设置颜色透明度*/
opacity: 0.5;
/*background-color：背景颜色*/
background-color: #006486;
/*background-image：设置背景图片，默认重复*/
background-image: url(./image/share-btn-face.png);
/*取消重复，与background-image配合使用时
repeat: 平铺整个页面,左右与上下
repeat-x: 在x轴上平铺,左右
repeat-y: 在y轴上平铺,上下
no-repeat: 图片不重复
*/
background-repeat: no-repeat;
/*background-position：定义背景图片的位置，一般是平面的x,y的坐标定位,一般取两个值，而且支持百分比*/
background-position: right bottom;
/*是否随着滚动轴移动*/
background-attachment: fixed;
/*backgroud:该属性能够看做是以上5大属性的集合*/
background: transparent url(./image/share-btn-face.png) repeat-x scroll center center;;
}
#ls{
/*letter-spacing：定义字符间距：letter表示英文，space表示中文*/
letter-spacing: 3px;
}
#lsw{
/*word-spacing:定义以空格为间隔的字符间距*/
word-spacing:30px ;
}
#tt{
/*定义文本是否有下划线 上划线
underline: 定义有下划线的文本
overline: 定义有上划线的文本
line-through: 定义直线穿过文本
blink: 定义闪烁的文本
*/
width: 200px;
text-decoration: underline overline line-through;
/*定义字母大小写状态：capitalize首字母大写，uppercase 大写，lowercase小写，可是对中文不起做用*/
text-transform: capitalize;
/*text-align:定义文本的剧中方式：left，right，center，justify 对齐每一行的文字*/
text-align: left start;
/*text-indent:定义首字母缩进*/
text-indent: 5px;
/*white-space:空格内元素的显示方式
normal: 正常无变化(默认处理方式.文本自动处理换行.假如抵达容器边界内容会转到下一行)
pre: 保持HTML源代码的空格与换行,等同与pre标签
nowrap: 强制文本在一行,除非遇到br换行标签
pre-wrap: 同pre属性,可是遇到超出容器范围的时候会自动换行
pre-line: 同pre属性,可是遇到连续空格会被看做一个空格
*/
white-space: pre-wrap;
}
#f{
/*font-family:定义使用的字体*/
font-family: "宋体,Arial";
}
#fs{
/*font-size:能够本身取值；也能够取得相对尺寸（相对于其父类容器的大小），支持百分比*/
font-size: small;
/*字体的显示方式：斜体*/
font-style: italic;
/*font-weight：定义字体的粗细*/
font-weight: bold;
/*font：font属性和backgroud属性同样是一个集合定义*/
font:italic;
}
#ul{
/*
disc: 点;circle: 圆圈
square: 正方形;decimal: 数字
decimal-leading-zero: 十进制数，不足两位的补齐前导0，例如: 01, 02, 03, ..., 98, 99
lower-roman: 小写罗马文字，例如: i, ii, iii, iv, v, ...
upper-roman: 大写罗马文字，例如: I, II, III, IV, V, ...
lower-greek: 小写希腊字母，例如: α(alpha), β(beta), γ(gamma), ...
lower-latin: 小写拉丁文，例如: a, b, c, ... z
upper-latin: 大写拉丁文，例如: A, B, C, ... Z
armenian: 亚美尼亚数字;georgian: 乔治亚数字，例如: an, ban, gan, ..., he, tan, in, in-an, ...
lower-alpha: 小写拉丁文，例如: a, b, c, ... z;upper-alpha: 大写拉丁文，例如: A, B, C, ... Z
*/
list-style-type: square;
/*定义列的样式图片
list-style-image: url(./image/share-btn-face.png);
*/
/*定义列表样式的位置*/
list-style-position:outside;
/*和backgroud集合同样*/
list-style: circle;
}
</style>
</head>
<body>
<!--标题标签，不能够用来作字体大小的调整-->
<h1>欢迎来到梦想之都</h1>
<h2>欢迎来到梦想之都</h2>
<h3>欢迎来到梦想之都</h3>
<a href="#">梦想之都</a>
<p>张志刚</p>
<p>dfafa</p>
<p>dfafa</p>
<p>dfafa</p>
<p>dfffdfdfddfa</p>
<!--css文件内联引用-->
<p style="color: #3080CB">dfaffdafdasfaf</p>
<div id="div1" >
sdfafa
</div>
<p id="ls">sfafafsf</p>
<p id="lsw">士大夫短发短发短发短发短发 发放</p>
<p id="tt">fdf短发短发短发短发短发短发 可是反对分身乏术的奋斗舒服的沙发的发生地方 短发短发短发短发地方df谁发发 收到发发</p>
<p id="f">dsfafs大发放</p>
<p id="fs">dfafafds就算啦放假啦；军</p>
<ul id="ul">
<li>sf</li>
<li>fdafa</li>
</ul>
</body>
</html>
相关文章
- 1. 初学css（01）
- 2. 【Bootstrap基础学习】01 Bootstrap的CSS
- 3. HTML+CSS专项复习01
- 4. 01-01 机器学习
- 5. django学习01
- 6. jade学习01
- 7. SpringMVC 学习01
- 8. jupyter学习01
- 9. python学习01
- 10. HTTP学习01
- 更多相关文章...
- • 您已经学习了 XML Schema，下一步学习什么呢？ - XML Schema 教程
- • 我们已经学习了 SQL，下一步学习什么呢？ - SQL 教程
- • Tomcat学习笔记（史上最全tomcat学习笔记）
- • 适用于PHP初学者的学习线路和建议
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 在windows下的虚拟机中,安装华为电脑的deepin操作系统
- 2. 强烈推荐款下载不限速解析神器
- 3. 【区块链技术】孙宇晨：区块链技术带来金融服务的信任变革
- 4. 搜索引起的链接分析-计算网页的重要性
- 5. TiDB x 微众银行 | 耗时降低 58%，分布式架构助力实现普惠金融
- 6. 《数字孪生体技术白皮书》重磅发布（附完整版下载）
- 7. 双十一“避坑”指南：区块链电子合同为电商交易保驾护航！
- 8. 区块链产业，怎样“链”住未来？
- 9. OpenglRipper使用教程
- 10. springcloud请求一次好用一次不好用zuul Name or service not known
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 初学css（01）
- 2. 【Bootstrap基础学习】01 Bootstrap的CSS
- 3. HTML+CSS专项复习01
- 4. 01-01 机器学习
- 5. django学习01
- 6. jade学习01
- 7. SpringMVC 学习01
- 8. jupyter学习01
- 9. python学习01
- 10. HTTP学习01