zoukankan      html  css  js  c++  java
  • 2012/7/20CSS学习笔记

    从CSS基本语句可以看出,属性石CSS 非常重要的部分。熟练掌握了CSS的各种属性将会是您编辑页面更加得心应手。下面我们就借助一些实例来讲解。

    1.字体属性

    这是最基本的属性,我们经常会用到。它主要包括以下这些属性:

    属性 属性含义 属性值
    font-family 使用什么字体 所有的字体
    font-style 字体是否斜体 Normal、italic、oblique
    font-variant 字体是否用小体大写 Normal、small-caps
    font-weight 定义字体的粗细 Normal、bold、bolder、lither等
    font-size   定义字体的大小 Absolute-size、relative-size、length、percentage等

    2.颜色和背景属性:

    属性 属性定义 属性书写格式 属性值
    Color 定义前景色 例:p{color:red} 颜色
    Backgroud-color 定义背景色 例:body{backgroud-color:yellow} 颜色
    Backgroud-image 定义背景图案 例:body{backgroud:backgroud-image:url(.jpg)} 图片路径
    Backgroud-repeat 定义图案重复方式 例:body{backgroud-repeat;repeat-y} Repeat-x,repeat-y、no-repeat
    Backgroud-attachment 设置滚动 例:body{background-attachmen:scroll} Scroll Fixed
    Backgroud-position 背景图案的初始位置 例:body{backgourd:url(.jpg)top center} Percentage、length、top、left、rigth、bottom等

    比如代码:

    color:yellow;
    backgroud-img:url(ss01038.jpg);
    backgroud-repeat:no-repeat;
    margin-right:15em

    这段代码设置了前景色为黄色,设置了背景图案地址,设置了背景图案不重复显示,另外还设置了距离右边框的距离。

    3.文本属性

    属性 属性定义 属性值
    Word-spacing 定义了各个单词之间的间距 Normal<length>(必须以长度为单位)
    Letter-spacing 定义了每个字母之间的间距 同上
    Text-decoration 定义了文字的“装饰”样式 None|underline|overline|line-through|blink
    Vertical-align 定义了元素在垂直方向上的位置 Baseline|sub|super|top|text-top|middle|bottom|text-bottom|<percentage>
    Text-transform 使文本转换为其他形式 Capitalize|sub|super|top|text-top|middle|bottom|text-bottom|<percentage>
    Text-align 定义了文本的对齐方式 Left|right|center|justify
    Text-indent 定义了文本的首行的缩进方式 <length>|<percentage>
    Line-height 定义了文本的行高 Normal|<number>|<length>|<percentage>

    利用文本属性中的Text-decoration属性就可以实现对超链接的修饰。看代码:

    <html>
         <title>link css</title>
              <head>
                  <style>
                         <!--
    //*定义伪类元素(a:),大括号内定义了前景色属性和文本装饰属性,
    hover加上'font-size'属性目的是让鼠标激活链接时改变字体*//
    a:link{color:green;text-decoration:none}
    //*未访问时的状态,颜色为绿色(green),文本装饰属性(text-decoration)值为没有(none)*//
    a:visited{color:red,text-decoration:none}
    //*访问过的状态,颜色为红色(red),文本装饰属性值为没有*//
    a:hover{color:blue;text-decoration:overline;font-size:20pt}
    //鼠标激活的状态,颜色为蓝色,文本装饰属性为上划,字体大小为20pt*//
    -->
    </style>
    </head>
    <body>
    <p style="font-family:行书体; font-size:18pt">
    <a href="http://www.baidu.com">未访问的连接</a></p>
    <p><a href="http://www.baidu.com">访问过的连接</a></p>
    <p><a href="http://www.baidu.com">鼠标激活的连接</a></p>
    </body>
    </html>
  • 相关阅读:
    【4N魔方阵】
    【2(2N+1)魔方阵 】
    【二分查找法(折半查找法)】
    【循环搜寻法(使用卫兵)】
    【合并排序法】
    【快速排序法一】
    【快速排序二】
    【快速排序三】
    【数据结构】之 线性表详解
    【计算机网络基础】
  • 原文地址:https://www.cnblogs.com/howlaa/p/2601833.html
Copyright © 2011-2022 走看看