程序博客网 > bf风森系部落卫衣淘宝

CSS基础

来源：互联网 发布：bf风森系部落卫衣淘宝 编辑：程序博客网 时间：2024/06/05 10:55

CSS的基本代码形式：

<style type="text/css">

<!--

    适用标签{属性：值}

-->

</style>

1）：CSS代码应放在HTML文本的<HEAD>...</HEAD>部分内。

2）：CSS采用<STYLE>...</STYLE>形式。譬如要将HTML文本中<H2>标签内的文字全部以“斜体+红色”显示，那么必须按如下编辑。H2{font-style:italic;color:red}


HTML文本中嵌入样式表的四种方式：

1）：内嵌至HEAD部分。

2）：使用外部样式表—链接模式。

3）：直接插入至标签部分。

4）：使用外部样式表—Import模式。


1）：内嵌至HEAD部分

该方法是将样式表直接内嵌至<HEAD>...</HEAD>部分，一般称其为“内嵌(Embedding)样式表”方式。

<style type=”text/css”>

<!--

    适用标签{属性：值；属性：值}

    适用标签{属性：值；属性：值}

-->

</style>

【css_01.htm的内容如下：】

<html>

<head>

<title>在HEAD部分嵌入CSS</title>

<style type="text/css">

<!--

    H1{font-family:楷体;color:pink}

    H2{font-style:italic;color:red}

    H3{font-style:italic;color:green}

-->

</style>

</head>

<body>

    <H1>此处是H1风格适用的部分</H1>

    <H2>此处是H2风格适用的部分</H2>

    <H3>此处是H3风格适用的部分</h3>

</body>

</html>

执行此代码的结果如下所示：


2）：使用外部样式表—链接模式

该方法是先将样式表保存在别的文件中，然后再对其进行定义及使用。一般该方法称为“链接<Linking>样式表”方式。

<link rel =”stylesheet” type=”text/css” href=”样式表文件名”>

使用链接方式能将保存在其他文件中的样式表插入至自身的文本中。使用该方法可以在众多HTML文本中共享同一样式表，而且只需要修改样式表文本(.css)就可以达到修改HTML文本的目的。

【02.css的内容如下：】

H2{font-family:楷体;font-style:italic;color:purple}

p{font-size:20pt;line-height:2em;color:green}

【css_02.htm的内容如下：】

<html>

<head>

<title>使用外部样式表</title>

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

</head>

<body>

    <H2>H2标签内字体为斜体加楷体，颜色为紫色！</H2>

    <p>p标签内的文字大小为20pt，行距为2em,颜色为绿色!</p>

</body>

</html>

执行此段代码的结果如下：


3）：直接插入至标签部分

在标签中使用STYLE属性直接编辑样式表，该方式一般被称做“Inline样式表”方式。

<标签 STYLE=”属性：值”>

利用STYLE属性使样式表直接适用于HTML标签，主要用在风格内容只适用于局部页面的情况。然而要特别注意的是，不可过度地使用这种方式，因为直接插入的样式表会使文本文件变大。

【css_03.htm的内容如下：】

<html>

<head>

<title>Inline方式</title>

</head>

<body>

    <font style="font-size:15pt;color:blue;font-family:楷体;">Inline方式</font>

    <p style="background:green;font-size:20pt;font-family:楷体;">直接在标签内起作用的方式</p>

</body>

</html>

执行此代码的结果如下：


4）：使用外部样式表—Import模式

此种样式表与<STYLE>...</STYLE>标签一起使用，在使用外部文件这一点上与链接式样式表颇为相似。一般将该方法称为“Import样式表”。

<STYLE TYLE=”text/css”>

<!--

   @import url(“css文件路径/文件名”)

-->

</STYLE>

要先编辑样式表文件再对其进行使用。它要与<STYLE>...</STYLE>标签一起使用，比其他样式表的某些设定拥有更高的优先权。

【04.css的内容如下：】

H2,H3{font-family:楷体;font-style:italic;color:purple}

【css_04.htm的内容如下：】

<html>

<head>

<title>Import模式</title>

<style type="text/css">

<!--

    @import url("04.css");

-->

</style>

</head>

<body>

    <H2>H2标签内字体为斜体加楷体，颜色为紫色！</H2>

    <H3>H3标签内字体为斜体加楷体，颜色为紫色！</H3>

</body>

</html>

执行此代码的结果如下：


 

0 0
bf风森系部落卫衣淘宝 bf风森系部落卫衣淘宝
原创粉丝点击
热门IT博客
淘宝怎样看退货率淘宝怎样看退货率
数据库导论第五版答案数据库导论第五版答案
微信公众号淘宝客制作
网络加速器
博彦科技面试题java
职场 知乎
小学生编程软件下载
linux启动nginx命令行
电脑精选淘宝怎么删除
人工智能会有那些产品
linux压缩文件命令tgz
tplink isp数据库
淘宝pc链接转无线连接
什么软件接收手机短信
linux安装软件gz
巨人网络招聘
算法基础txt
不一样的美男 知乎
申请淘宝020线下安装
mysql启动命令
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 乐山 峨眉山两日游 峨眉山旅游费用 峨眉山旅游路线 去峨眉山旅游 峨眉山门票团购 乐山 峨眉山二日游 峨眉山四日游 峨眉山酒店预订 峨眉山两日游报价 成都 峨眉山 峨眉山票价 峨眉山跟团价格 峨眉山山顶住宿 峨眉山1日游 峨眉山二日游价格 峨眉山景区门票 峨眉山a股票 峨眉山报团 峨眉山住宿多少钱 乐山峨眉山二日游价格 成都 峨眉山 一日游 成都峨眉山门票价格 峨眉山当地旅行社 峨眉山市游玩 峨眉山纯玩团 成都到峨眉山怎么走 峨眉山自驾游攻略 成都至峨眉山 峨眉山住宿哪里好 峨眉山美食 峨眉山住宿哪家好 峨眉山旅游要多少钱 峨眉山一日游费用 峨眉山景区住宿价格 乐山峨眉山旅游 峨眉山 一日游 从成都去峨眉山 峨眉山市属于哪个市 峨眉山的门票 成都到峨眉山游玩 重庆到峨眉山

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里