首页 > 代码库 > HTML/CSS基础教程 四

HTML/CSS基础教程 四

2024-07-05 03:47:43   229人阅读

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文件的地址

实现是这样的:

    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css" />
        <title></title>
    </head>

css基本结构

selector {
    property: value;
}

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

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

　　value: ...

例如对<p>的定于:

p {
    font-family: Arial;
    color: blue;
    font-size: 24px;
}

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

注释

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

/* I‘m a comment */

数字调色板

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

h1 {
    color: #cc6666
}

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

Pixels and ems

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

p {
    font-size: 10px;
}

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

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

p {
    font-size: 10em;
}

css的内建font-family

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

　　serif

　　sans-serif

　　cursive

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

备用字体

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

p {
    font-family: Tahoma, Verdana, sans-serif;
}

边框(border)属性

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

selector {
    border: 2px solid red;
}

solid: 实线

dashed: 虚线

链接的特殊属性

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

a {
    text-decoration: none;
}


联系
我们