css样式表基本属性1

1.添加CSS的方法

1.1链接外部样式表

即在网页中调用已经定义好的样式表来实现样式表的应用,适用于大型网站。示例:
<head>
...
<link rel=stylesheet type=text/css href=slstyle.css>
...
</head>
rel=stylesheet:页面中使用外部的样式表;
type=text/css:指文件样式类型为样式表文件;
href=slstyle.css:文件所在位置。

1.2内部样式表

一般位于HTML文件头部,这些定义样式可应用到页面中,示例:
<head>
<style type="text/css">
<!--
body{
    margin-left:0px;
    margin-top:0px;
    margin-right:0px;
    margin-bottom:0px;
}
.style1{
    color:#fbe334;
    font-size:13px;
}
-->
</style>
</head>

1.3导入外部样式表

指在内部样式表<style>里导入一个外部样式表,导入时用@import,示例:
<head>
...
<style type=text/css>
<!--
@import slstyle.css
其他样式声明
-->
</style>
...
</head>
@import slstyle.css表示导入slstyle.css样式表,使用时注意外部样式表的路径、方法和外部样式表的方法类似。

1.4内嵌样式

混合在HTML标记里使用,可以很简单地对某个元素单独定义样式,示例:
<table style=color:red;margin-right:220px>
这是一个表格
</p>

2.字体属性

2.1字体font-family

语法:`font-family:"字体1","字体2"...`
说明:当浏览器不支持"字体1"时,会采用"字体2",并以此类推;
示例:
<!doctype html>
<html lang="en">
 <head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8">
  <title>使用css样式表</title>
  <style type="text/css">
    <!--
      .h1{
        font-family:"宋体";
      }
    -->
  </style>
 </head>
 <body>
    <span class="h1">授人以鱼不如授人以渔</span>
 </body>
 </html>

2.2字号font-size

语法:`font-size:大小取值`
取值说明:xx-small:绝对尺寸,最小;
        x-small:较小;
        small:小;
        medium:正常;
        large:大;
        x-large:较大;
        xx-large:最大;
        larger:相对父类增大;
        smaller:相对父类减小;
        length:相对父类百分比大小。
示例:
<!doctype html>
<html lang="en">
 <head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8">
  <title>使用css样式表</title>
  <style type="text/css">
    <!--
      .h1{
        font-family:"宋体";
        font-size:small;
      }
      .h2{
        font-family:"宋体";
        font-size:large;
      }
    -->
  </style>
 </head>
 <body>
    <span class="h1">授人以鱼不如授人以渔</span>
    <span class="h2">授人以鱼不如授人以渔</span>
 </body>
 </html>

2.3字体风格font-style

语法:`font-style:样式取值`
取值说明:normal:正常;
        italic:斜体;
        oblique:中间态,偏斜体。
示例:
<!doctype html>
<html lang="en">
 <head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8">
  <title>使用css样式表</title>
  <style type="text/css">
    <!--
      .h1{
        font-family:"宋体";
        font-size:small;
        font-style:italic;
      }
      .h2{
        font-family:"宋体";
        font-size:large;
        font-style:oblique;
      }
    -->
  </style>
 </head>
 <body>
    <span class="h1">授人以鱼不如授人以渔</span>
    <span class="h2">授人以鱼不如授人以渔</span>
 </body>
 </html>  

2.4加粗字体font-weight

语法:`font-weight:字体粗细值`
取值说明:normal:正常;
        bold:粗体;
        bolder:特粗;
        lighter:特细;
        number:100~900间数值,一般为整数。
示例:
<!doctype html>
<html lang="en">
 <head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8">
  <title>使用css样式表</title>
  <style type="text/css">
    <!--
      .h1{
        font-family:"宋体";
        font-size:small;
        font-style:italic;
        font-weight:lighter;
      }
      .h2{
        font-family:"宋体";
        font-size:large;
        font-style:oblique;
        font-weight:bolder;
      }
    -->
  </style>
 </head>
 <body>
    <span class="h1">授人以鱼不如授人以渔</span>
    <span class="h2">授人以鱼不如授人以渔</span>
 </body>
 </html>  

2.5小字母转为大字母font-variant

语法:`font-variant:取值`
取值说明:normal:正常显示;
        small-caps:小字母转为大字母,且字体较小。
示例:
<!doctype html>
<html lang="en">
 <head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8">
  <title>使用css样式表</title>
  <style type="text/css">
    <!--
      .h1{
        font-family:"宋体";
        font-size:small;
        font-style:italic;
        font-weight:lighter;
        font-variant:small-caps;
      }
    -->
  </style>
 </head>
 <body>
    <span class="h1">This is just a test!</span>
 </body>
 </html>  

2.6字体复合属性

语法:`font:字体取值`
取值说明:取值可为字体大小、风格、加粗等等。
**特别说明:可能由于浏览器的不支持,对于此项的设置我并没有看到明显的效果,还请有关大神来解惑~~**
示例:
<!doctype html>
<html lang="en">
 <head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8">
  <title>使用css样式表</title>
  <style type="text/css">
    <!--
      .h1{
        font:bold italic "宋体"
      }
    -->
  </style>
 </head>
 <body>
    <span class="h1">授人以鱼不如授人以渔</span>
 </body>
 </html>  

3.颜色和背属性

3.1颜色属性color

语法:`color:颜色取值`
取值说明:关键字取值,如red、green、blue等分别表示红、绿、蓝;
        十六进制数取值:color:#ff0000 表示红
                     color:#000099 表示蓝
                     color:#ffff00 表示黄
示例:
<!doctype html>
<html lang="en">
 <head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8">
  <title>使用css样式表</title>
  <style type="text/css">
    <!--
      .h1{
        font-family:"宋体";
        font-size:large;
        font-style:oblique;
        font-weight:bolder;
        color:#9900ff;
      }
    -->
  </style>
 </head>
 <body>
    <span class="h1">授人以鱼不如授人以渔</span>
 </body>
 </html>  

3.2背景颜色background-color

语法:`background-color:颜色取值`
取值原则同上3.1.
示例:
<!doctype html>
<html lang="en">
 <head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8">
  <title>使用css样式表</title>
  <style type="text/css">
    <!--
      .h1{
        font-family:"宋体";
        font-size:large;
        font-style:oblique;
        font-weight:bolder;
        color:#9900ff;
        background-color:#ff99ff;
      }
    -->
  </style>
 </head>
 <body>
    <span class="h1">授人以鱼不如授人以渔</span>
 </body>
 </html>  

3.3背景图像background-image

语法:`background-image:url(图像地址)`
地址说明:地址可以为绝对地址,也可以为相对地址
示例:
<!doctype html>
<html lang="en">
 <head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8">
  <title>使用css样式表</title>
  <style type="text/css">
    <!--
      .h1{
        font-family:"宋体";
        font-size:large;
        font-style:oblique;
        font-weight:bolder;
        color:#9900ff;
        background-image:url(image/1.gif);
      }
    -->
  </style>
 </head>
 <body>
    <span class="h1">授人以鱼不如授人以渔</span>
 </body>
 </html>  

3.4背景重复background-repeat

语法:`background-repeat:取值`
取值说明:no-repeat:背景图像不平铺;
        repeat:背景图像平铺满整个网页;
        repeat-x:背景图像只在水平上平铺;
        repeat-y:背景图像只在竖直上平铺。
示例:
<!doctype html>
<html lang="en">
 <head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8">
  <title>使用css样式表</title>
  <style type="text/css">
    <!--
      .h1{
        font-family:"宋体";
        font-size:large;
        font-style:oblique;
        font-weight:bolder;
        color:#9900ff;
        background-image:url(image/1.gif);
        background-repeat:repeat;
      }
    -->
  </style>
 </head>
 <body>
    <span class="h1">授人以鱼不如授人以渔</span>
 </body>
 </html>  

3.5背景附件background-attachment

语法:`background-attachment:scroll/fixed`
说明:scroll:背景图像随内容滚动而滚动,默认项;
     fixed:背景图像固定页面上不动。
示例:
<!doctype html>
<html lang="en">
 <head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8">
  <title>使用css样式表</title>
  <style type="text/css">
    <!--
      .h1{
        font-family:"宋体";
        font-size:large;
        font-style:oblique;
        font-weight:bolder;
        color:#9900ff;
        background-attachment:fixed;
        background-image:url(image/1.gif);
        background-repeat:repeat;
      }
    -->
  </style>
 </head>
 <body>
    <span class="h1">授人以鱼不如授人以渔</span>
 </body>
 </html>  

3.6背景图像位置background-position

语法:`background-position:位置取值`
取值说明:
   长度设置取值:x:横向位置;
              y:纵向位置。
   百分比设置值:0% 0%      左上  关键字设置 top left
               50% 0%    上居中           top center
               100% 0%    右上            top right
               0% 50%    左居中           left center
               50% 50%    正中          center center
               100% 50%  右居中          right center
               0% 100%    左下           bottom left  
               50% 100%  下居中          bottom center                                                       
               100% 100%  右下           bottom right 
   示例:
<!doctype html>
<html lang="en">
 <head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8">
  <title>使用css样式表</title>
  <style type="text/css">
    <!--
      .h1{
        font-family:"宋体";
        font-size:large;
        font-style:oblique;
        font-weight:bolder;
        color:#9900ff;
        background-attachment:fixed;
        background-image:url(image/1.gif);
        background-repeat:repeat;
        background-position:center center;
      }
    -->
  </style>
 </head>
 <body>
    <span class="h1">授人以鱼不如授人以渔</span>
 </body>
 </html>  

3.7背景复合属性background

语法:`background:取值`
取值说明:取值包括背景颜色、背景图像、背景重复等等,各值间用空格连接。
示例:
<!doctype html>
<html lang="en">
 <head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8">
  <title>使用css样式表</title>
  <style type="text/css">
    <!--
      .h1{
        font-family:"宋体";
        font-size:large;
        font-style:oblique;
        font-weight:bolder;
        background:url(imgaes/1.jpg) repeat center center;
      }
    -->
  </style>
 </head>
 <body>
    <span class="h1">授人以鱼不如授人以渔</span>
 </body>
 </html>  

4.段落属性

4.1单词间隔word-spacing

语法:`word-spacing:取值`
取值说明:normal:正常,默认项;
         长度值加单位,可为负值。
示例:
<!doctype html>
<html lang="en">
 <head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8">
  <title>使用css样式表</title>
  <style type="text/css">
    <!--
      .h1{
        font-family:"宋体";
        font-size:large;
        font-style:oblique;
        font-weight:bolder;
        background:url(imgaes/1.jpg) repeat center center;
        word-spacing:3px;
      }
    -->
  </style>
 </head>
 <body>
    <span class="h1">This is just a test!</span>
 </body>
 </html>   

5.2字符间隔letter-spacing

语法:`letter-spacing:取值`
示例:
<!doctype html>
<html lang="en">
 <head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8">
  <title>使用css样式表</title>
  <style type="text/css">
    <!--
      .h1{
        font-family:"宋体";
        font-size:large;
        font-style:oblique;
        font-weight:bolder;
        background:url(imgaes/1.jpg) repeat center center;
        letter-spacing:3px;
      }
    -->
  </style>
 </head>
 <body>
    <span class="h1">授人以鱼不如授人以渔</span>
 </body>
 </html>  

4.3文字修饰text-decoration

语法:`text-decoration:取值`
取值说明:none:不修饰,默认;
         underline:文字下划线;
         overline:文字上划线;
         linethrough:文字删除线;
         blink:文字闪烁效果。
示例:
<!doctype html>
<html lang="en">
 <head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8">
  <title>使用css样式表</title>
  <style type="text/css">
    <!--
      .h1{
        font-family:"宋体";
        font-size:large;
        font-style:oblique;
        font-weight:bolder;
        background:url(imgaes/1.jpg) repeat center center;
        text-decoration:underline;
      }
    -->
  </style>
 </head>
 <body>
    <span class="h1">授人以鱼不如授人以渔</span>
 </body>
 </html>  

4.4垂直对齐方式vertical-align

语法:`vertical-align:排列取值`
取值说明:baseline:垂直对齐,默认;
         sub:文字下标;
         super:文字上标;
         top:垂直靠上对齐;
         text-top:元素和上级元素字体向上对齐;
         middle:垂直居中对齐;
         text-bottom:元素和上级元素字体向下对齐。
示例:
<!doctype html>
<html lang="en">
 <head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8">
  <title>使用css样式表</title>
  <style type="text/css">
    <!--
      .h1{
        font-family:"宋体";
        font-size:large;
        vertical-align:super;
      }
    -->
  </style>
 </head>
 <body>
    5<span class="h1">2</span>-2<span class="h1">2</span>=21
 </body>
 </html>  

4.5文本转换text-transform

语法:`text-transform:转换值`
取值说明:none:使用原始值;
         capitalize:每个单词第一个字母大写;
         uppercase:每个单词所有字母大写;
         lowercase:每个单词所有字母小写。
示例:
<!doctype html>
<html lang="en">
 <head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8">
  <title>使用css样式表</title>
  <style type="text/css">
    <!--
      .h1{
        font-size:large;
        text-transform:uppercase;
      }
    -->
  </style>
 </head>
 <body>
    <span class="h1">This is just a test!</span>
 </body>
 </html>     

4.6水平对齐方式text-align

语法:`text-align:排列值`
取值说明:left:左对齐;
         right:右对齐;
         center:居中对齐;
         justify:两端对齐。
示例:
<!doctype html>
<html lang="en">
 <head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8">
  <title>使用css样式表</title>
  <style type="text/css">
    <!--
      .h1{
        font-family:"宋体";
        font-size:large;
        text-align:center;
      }
    -->
  </style>
 </head>
 <body>
    <span class="h1">授人以鱼不如授人以渔</span>
 </body>
 </html>  

4.7文本缩进text-indent

语法:`text-indent:缩进值`
取值说明:缩进值为长度值或百分比。
示例:
<!doctype html>
<html lang="en">
 <head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8">
  <title>使用css样式表</title>
  <style type="text/css">
    <!--
      .h1{
        font-family:"宋体";
        font-size:large;
        text-indent:25px;
      }
    -->
  </style>
 </head>
 <body>
   <span class="h1">授人以鱼不如授人以渔</span>
 </body>
 </html>  

4.8文本行高line-height

语法:`line-height:行高值`
取值说明:行高值可以为长度、倍数或百分比。
示例:
<!doctype html>
<html lang="en">
 <head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8">
  <title>使用css样式表</title>
  <style type="text/css">
    <!--
      .h1{
        font-family:"宋体";
        font-size:large;
        line-height:25px;
      }
    -->
  </style>
 </head>
 <body>
   <span class="h1">
   授人以鱼不如授人以渔<br>
   授人以鱼不如授人以渔<br>
   授人以鱼不如授人以渔
   </span>
 </body>
 </html>  

4.9处理空白white-space

语法:`white-space:值`
取值说明:normal:连续多个空格合并,默认;
         pre:源代码中空格和换行符保留(仅IE6正确显示)
         nowrap:强制一行显示所有文本,直至结束或遇<br>
示例:
<!doctype html>
<html lang="en">
 <head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8">
  <title>使用css样式表</title>
  <style type="text/css">
    <!--
      .h1{
        font-family:"宋体";
        font-size:large;
        white-space:pre;
      }
    -->
  </style>
 </head>
 <body>
   <span class="h1">
   授人以鱼不如授人以渔
   </span>
 </body>
 </html>     

4.10文本反排unicode-bidi、direction

语法:`direction:ltr|rtl|inherit`
     `unicode-bidi:bidi-override|normal|embed`
取值说明:
      direction:ltr从左到右顺序排列;
                 rtl从右向左书序排列;
                 inherit文本流值不可继承。
      unicode-bidi:bidi-override严格按direction属性值重排;
                    normal默认值;
                    embed对象打开附加嵌入层,direction指定嵌入层,在对象内部隐式重排。
示例:
<!doctype html>
<html lang="en">
 <head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8">
  <title>使用css样式表</title>
  <style type="text/css">
    <!--
      .h1{
        font-family:"宋体";
        font-size:large;
        direction:rtl;
        unicode-bidi:bidi-override;
      }
    -->
  </style>
 </head>
 <body>
   <span class="h1">
   授人以鱼不如授人以渔
   </span>
 </body>
 </html>  
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值