码迷,mamicode.com
首页 > Web开发 > 详细

HTML/CSS基础教程 四

时间:2014-05-20 08:57:33      阅读:401      评论:0      收藏:0      [点我收藏+]

标签:style   blog   class   c   code   java   

CSS     

 CSS(Cascading Style Sheets): 层叠样式表 . 它是一种用来表现HTML或XML等文件样式的计算机语言. CSS能够让网页表现与内容分离, 相对于HTML的表现而言, CSS能够对网页中的对象的位置排版进行像素级的精确控制, 支持几乎所有的字体字号样式, 拥有对网页对象和模型样式编辑的能力, 并能够进行初步交互设计, 是目前基于文本展示最优秀的表现设计语言.

      上面这段来自百度百科对CSS的定义,我的理解是CSS将每个HTML标签的style进行单独的定义,这样就可以让HTML专注于表现内容.

连接HTML与CSS

  只需在HTML的<head></head>下添加一个<link>标签即可链接, link包含三个属性:

    1.type: 总是等于text/css

    2.rel: 总是等于stylesheet

    3.href:等于你css文件的地址

实现是这样的:

bubuko.com,布布扣
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css" />
        <title></title>
    </head>
bubuko.com,布布扣

css基本结构

bubuko.com,布布扣
selector {
    property: value;
}
bubuko.com,布布扣

  selector: 可以是任何HTML元素, <p>, <img>, <table>, <span>...

  property: 定于selecter的样式, color, font-size, font-family, backgound-color...

  value: ...

例如对<p>的定于:

bubuko.com,布布扣
p {
    font-family: Arial;
    color: blue;
    font-size: 24px;
}
bubuko.com,布布扣

要注意的是每个语句后是有分号的.

注释

css的注释和c与语言类似, 是这样的:

bubuko.com,布布扣
/* I‘m a comment */
bubuko.com,布布扣

数字调色板

定义颜色时, 我们可以使用数字形式的, 这样就以有更多的选择, 例如:

bubuko.com,布布扣
h1 {
    color: #cc6666
}
bubuko.com,布布扣

这里的大小写是不敏感的, 更多的颜色可以自己取找.

Pixels and ems

前面我们调整字体大小使用的是px(像素),像这样:

bubuko.com,布布扣
p {
    font-size: 10px;
}
bubuko.com,布布扣

这个像素是你电脑上的, 这里有一个问题, 如果浏览你网页的设备的像素和你电脑的不一样会怎么样?

解决方法是使用em. 1em等于任何设备上的一个显示默认值, 因此可以这样定义:

bubuko.com,布布扣
p {
    font-size: 10em;
}
bubuko.com,布布扣

css的内建font-family

大部分电脑理解一些流行的字体,像是Verdana, Courier, Garamond, 但每个电脑都装有不同的字体. 为了显示一致, CSS有一些内建字体:

  serif

  sans-serif

  cursive

当然, 这些都是英文字体.

备用字体

可以同时为font指定多个字体作为备用, 这样第一个不行时, 会用下一个, 直到有一个行的, 像这样:

bubuko.com,布布扣
p {
    font-family: Tahoma, Verdana, sans-serif;
}
bubuko.com,布布扣

边框(border)属性

可以这样设置selecter的边框属性:

bubuko.com,布布扣
selector {
    border: 2px solid red;
}
bubuko.com,布布扣

solid: 实线

dashed: 虚线

链接的特殊属性

一般创建的文本链接下面都会有一个下划线, 可以设置text-decoration让它不显示:

bubuko.com,布布扣
a {
    text-decoration: none;
}
bubuko.com,布布扣

HTML/CSS基础教程 四,布布扣,bubuko.com

HTML/CSS基础教程 四

标签:style   blog   class   c   code   java   

原文地址:http://www.cnblogs.com/ezhengnan/p/3737850.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!