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>


你可能感兴趣的:(css学习01)