返回顶部
首页 > 资讯 > 前端开发 > html >如何在网页中插入CSS
  • 856
分享到

如何在网页中插入CSS

2024-04-02 19:04:59 856人浏览 独家记忆
摘要

这篇“如何在网页中插入CSS”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“如何在网页中插入

这篇“如何在网页中插入CSS”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“如何在网页中插入CSS”文章吧。

CSS就是Cascading Style Sheets,中文翻译为“层叠样式表”,简称样式表,它是一种制作网页的新技术。

样式表文件可以用任何文本编辑器(例如:记事本)打开并编辑,一般样式表文件扩展名为 .css

一、如何在网页中插入CSS

在页面中插入样式表的方法:链入外部样式表、内部样式表、导入外表样式表和内嵌样式。

1. 链入外部样式表

链入外部样式表是把样式表保存为一个样式表文件,然后在页面中用<link>标记链接到这个样式表文件,这个<link>标记必须放到页面的<head>区内,如下:

<head>

<link rel="stylesheet" type="text/css" href="./mystyle.css" media=”screen”>

media=”print”

</head>

上面表示浏览器从mystyle.css文件中以文档格式读出定义的样式表。rel=”stylesheet”指的是这个LINK和其href之间的关联,这里指出这个href文件是样式表文件。type=”text/css” 是指文件的类型是样式表文本。href=”mystyle.css” 是文件所在的位置。

内容是定义的样式表如: body {background-image: url("images/back40.gif")}

2.内部样式表

内部样式表是把样式表放到页面的<head>区里,这些定义的样式就应用到页面中了,样式表是用<style>标记插入的,从下例中可以看出<style>标记的用法:

<head>

<style type="text/css">

<!--

hr {color: sienna}

p {margin-left: 20px}

body {background-image: url("images/back40.gif")}

-->

</style>

</head>

注意:有些低版本的浏览器不能识别style标记,这意味着低版本的浏览器会忽略style标记里的内容,并把style标记里的内容以文本直接显示到页面上。为了避免这样的情况发生,我们用加html注释的方式(<!-- 注释 -->)隐藏内容而不让它显示:

3.导入外部样式表

导入外部样式表是指在内部样式表的<style>里导入一个外部样式表,导入时用@import,

实例:

<head>

<style type=”text/css”>

<!--

@import “mystyle.css”

-->

</style>

</head>

方法和链入样式表的方法很相似,但导入外部样式表输入方式更有优势。实质上它相当于存在内部样式表中的。

注意:导入外部样式表必须在样式表的开始部分,在其他内部样式表上面。

4. 内嵌样式

内嵌样式是混合在HTML标记里使用的,可以很简单的对某个元素单独定义样式。内嵌样式的使用是直接将在HTML标记里加入style参数。而style参数的内容就是CSS的属性和值,如下例:

<p style="color: sienna; margin-left: 20px">

这是一个段落

</p>

在style参数后面的引号里的内容相当于在样式表大括号里的内容。

style参数可以应用于任意BODY内的元素(包括BODY本事),除了BASEFONT、PARAM和SCRIPT。

二、语法

1. 基本语法

CSS的定义是由三个部分构成:选择符(selector),属性(properties)和属性的取值(value)。

基本格式如下:

selector {property: value}

(选择符 {属性:值})

选择符是可以是多种形式,一般是你要定义样式的HTML标记,例如BODY、P、TABLE&hellip;&hellip;,

如果需要对一个选择符指定多个属性时,我们使用分号将所有的属性和值分开:

selector {property1: value1; property2: value2}

(选择符 {属性1:值2; 属性1:值2})

2、选择符类型

HTML标记选择符 / 标签选择符

对于你要定义样式的HTML标记,例如BODY、P、TABLE&hellip;&hellip;,你可以通过此方法定义它的属性和值,属性和值要用冒号隔开:

body {color: black}

ID选择符

在HTML页面中ID参数指定了某个单一元素,ID选择符是用来对这个单一元素定义单独的样式。

ID选择符的应用和类选择符类似,在html标签中使用id参数:

<p id="intro">

这个段落向右对齐

</p>

定义ID选择符要在ID名称前加上一个“#”号。定义ID选择符的属性有两种方法。

下面实例,ID属性将匹配所有id="intro"的元素:

#intro

{

font-size:110%;

font-weight: bold;

color:#0000ff;

background-color: transparent

}

(字体尺寸为默认尺寸的110%;粗体;蓝色;背景颜色透明)

下面这个例子,ID属性只匹配id="intro"的段落元素:

p#intro

{

font-size:110%;

font-weight: bold;

color:#0000ff;

background-color: transparent

}

注:ID选择符局限性很大,只能单独定义某个元素的样式,一般只在特殊情况下使用。

id一个页面只可以使用一次,如果使用了多个id:

第一就是不能通过W3的校验,尽管可以在浏览器中使用;

第二当你需要用javascript通过id来控制这个div,那就会出现错误。

概念上说:

id是先找到结构/内容,再给它定义样式;class是先定义好一种样式,再套给多个结构/内容。

类选择符

用类选择符你能够把相同的元素分类定义不同的样式,定义类选择符时,在自定类的名称前面加一个点号。假如你想要两个不同的段落,一个段落向右对齐,一个段落居中,你可以先定义两个类:

p.right {text-align: right}

p.center {text-align: center}

应用时,只要在HTML标记里加入你定义的class参数:

<p>

这个段落向右对齐的

</p>

<p>

这个段落是居中排列的

</p>

注:类的名称可以是任意英文单词或以英文开头与数字的组合,一般以其功能和效果简要命名。

类选择符还有一种用法,在选择符中省略HTML标记名,这样可以把几个不同的元素定义成相同的样式:

.center {text-align: center}

这样的类可以被应用到任何元素上。

注:这种省略HTML标记的类选择符是我们经后最常用的CSS方法,使用这种方法,我们可以很方便的在任意元素上套用预先定义好的类样式。

选择符组

你可以把相同属性和值的选择符组合起来书写,用逗号将选择符分开,这样可以减少样式重复定义:

p, table{ font-size: 9pt }

(段落和表格里的文字尺寸为9号字)

效果完全等于:

p { font-size: 9pt }

table { font-size: 9pt }

包含选择符

可以单独对某种元素包含关系定义的样式表,元素1里包含元素2,这种方式只对在元素1里的元素2定义,对单独的元素1或元素2无定义,例如:

Table .leftdiv

{

font-size: 12px

}

在表格内的链接改变了样式,文字大小为12象素,而表格外的链接的文字仍为默认大小。

样式表的层叠性

层叠性就是继承性,样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素。事实上,所有在元素中嵌套的元素都会继承外层元素指定的属性值,有时会把很多层嵌套的样式叠加在一起。例如在DIV标记中嵌套P标记:

div { color: red; font-size:9pt}

<div>

<p>

这个段落的文字为红色9号字

</p>

</div>

(P元素里的内容会继承DIV定义的属性)

注:有些情况下内部选择符不继承周围选择符的值,但理论上这些都是特殊的。例如:上边界属性值是不会继承的,直觉上,一个段落不会同文档BODY一样的上边界值。

另外,当样式表继承遇到冲突时,总是以最后定义的样式为准。如果上例中定义了P的颜色:

div { color: red; font-size:9pt}

p {color: blue}

<div>

<p>

这个段落的文字为蓝色9号字

</p>

</div>

我们可以看到段落里的文字大小为9号字是继承div属性的,而color属性则依照最后定义的。

不同的选择符定义相同的元素时,要考虑到不同的选择符之间的优先级。ID选择符,类选择符和HTML标记选择符,因为ID选择符是最后加上元素上的,所以优先级最高,类选择符次之,顺序为:

内嵌样式表的样式 id选择符 类选择符 HTML标记选择符

如果想超越这三者之间的关系,可以用!important提升样式表的优先权,例如:

p { color: #FF0000 }

.blue { color: #0000FF}

#id1 { color: #FFFF00}

<p id="id1" style=””>

这里显示颜色

</p>

我们同时对页面中的一个段落加上这三种样式,它最后会依照被!important申明的HTML标记选择符样式为红色文字。如果去掉!important,则依照优先权最高的ID选择符为黄色文字。

3.特殊选择符&mdash;伪类

伪类可以看做是一种特殊的类选择符,是能被支持CSS的浏览器自动所识别的特殊选择符。它的最大的用处就是可以对链接在不同状态下定义不同的样式效果。

1. 语法

伪类的语法是在原有的语法里加上一个伪类(pseudo-class):

selector:pseudo-class {property: value}

(选择符:伪类 {属性: 值})

伪类和类不同,是CSS已经定义好的,不能象类选择符一样随意用别的名字,

根据上面的语法可以解释为:

对象(选择符)在某个特殊状态下(伪类)的样式。

类选择符及其他选择符也同样可以和伪类混用:

selector.class:pseudo-class {property: value}

(选择符.类:伪类 {属性: 值})

2. 锚的伪类&mdash;动态连接

我们最常用的是4种a(锚)元素的伪类,它表示动态链接在4种不同的状态:link、visited、active、hover(未访问的链接、已访问的链接、激活链接和鼠标停留在链接上)。我们把它们分别定义不同的效果:

a:link {color: #FF0000; text-decoration: none}

a:visited {color: #00FF00; text-decoration: none}

a:hover {color: #FF00FF; text-decoration: underline}

a:active {color: #0000FF; text-decoration: underline}

注:有时这个链接访问前鼠标指向链接时有效果,而链接访问后鼠标再次指向链接时却无效果了。这是因为你把a:hover放在了a:visited的前面,这样的话由于后面的优先级高,当访问链接后就忽略了a:hover的效果。在定义这些链接样式时,一定要按照a:link, a:visited, a:hover, a:actived的顺序书写。

3. 锚的伪类--类选择符动态链接

将伪类和类组合起来用,就可以在同一个页面中做几组不同的链接效果了,例如,我们定义一组链接为红色,访问后为蓝色;另一组为绿色,访问后为黄色:

a.red:link {color: #FF0000}

a.red:visited {color: #0000FF}

a.blue:link {color: #00FF00}

a.blue:visited {color: #FF00FF}

现在应用在不同的链接上:

<a href="...">这是第一组链接</a>

<a href="...">这是第二组链接</a>

4. 其他伪类

CSS2还定义了首字和首行(first-letter和first-line)的伪类,可以对元素的首字或首行设定不同的样式。

接下来实例,我们在段落标记里定义文本首字尺寸为默认大小的3倍:

<style type=”text/css”>

p:first-letter {font-size: 300%}

</style>

再定义一个首行样式的实例:

<style type=”text/css”>

div:first-line {color: red}

</style>

如果段落中有多行,那么第一行为红色,第二、三行为默认颜色

注:首字和首行的伪类需要IE5.5以上的版本支持。

以上就是关于“如何在网页中插入CSS”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注编程网html频道。

--结束END--

本文标题: 如何在网页中插入CSS

本文链接: https://www.lsjlt.com/news/93184.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 如何在网页中插入CSS
    这篇“如何在网页中插入CSS”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“如何在网页中插入...
    99+
    2024-04-02
  • 网页中怎么插入CSS样式表
    本篇文章为大家展示了网页中怎么插入CSS样式表,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。如何插入CSS样式表当读到一个CSS样式表时,浏览器会根据它来格式化HT...
    99+
    2024-04-02
  • Dreamweaver网页如何插入Figure
    这篇文章主要介绍Dreamweaver网页如何插入Figure,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!首先我们点击插入,并再次点击Figure。如何我们选择一种类型。这样我们就成功添加了标签。点击进去,我们就可...
    99+
    2023-06-08
  • css中如何插入表格
    这篇文章将为大家详细讲解有关css中如何插入表格,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。css中插入表格的方法:使用【<style>】标签在文档头部定义内部样式表,代码为【<sty...
    99+
    2023-06-14
  • Dreamweaver网页中如何插入命名锚记链接
    这篇文章将为大家详细讲解有关Dreamweaver网页中如何插入命名锚记链接,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。方法如下首先,打开Dreamweaver,新建html文件,为了方便大家理解小编这...
    99+
    2023-06-08
  • CSS中如何插入样式表
    这篇文章主要介绍“CSS中如何插入样式表”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“CSS中如何插入样式表”文章能帮助大家解决问题。CSS是一种用来表现HTML(标准通用标记语言的一个应用)或XM...
    99+
    2023-06-27
  • Dreamweaver cs5网页如何插入验证标签
    这篇文章给大家分享的是有关Dreamweaver cs5网页如何插入验证标签的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。在Spry数据集下方,我们点击Spry验证标签。然后我们可以在这里输入标签的ID。在这里我...
    99+
    2023-06-08
  • 怎么在网页中插入Flash按钮与文本
    这篇文章主要讲解了“怎么在网页中插入Flash按钮与文本”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么在网页中插入Flash按钮与文本”吧!  一、在网页中插入Flash 按钮   ( ...
    99+
    2023-06-08
  • 如何在MySQL中插入json
    本篇文章为大家展示了如何在MySQL中插入json,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。在MySQL5.7.8之后开始支持一种可高效获取JSON文本中数据的...
    99+
    2024-04-02
  • 怎么在HTML页面中插入JavaScript
    今天小编给大家分享一下怎么在HTML页面中插入JavaScript的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面...
    99+
    2024-04-02
  • html如何插入css样式
    这篇文章主要介绍html如何插入css样式,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! html插入css样式的方法:1、使用style属性在特定的HT...
    99+
    2024-04-02
  • 怎么在html中插入css样式
    这篇文章主要讲解了“怎么在html中插入css样式”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么在html中插入css样式”吧!  在使用Dreamweaver CS6进行网页...
    99+
    2023-06-08
  • HTML中怎么将图像插入网页
    这篇文章主要介绍“HTML中怎么将图像插入网页”,在日常操作中,相信很多人在HTML中怎么将图像插入网页问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”HTML中怎么将图像插入...
    99+
    2024-04-02
  • Dreamweaver网页中怎么插入导航条
    小编给大家分享一下Dreamweaver网页中怎么插入导航条,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!方法如下点击Dreamweaver,双击打开。选择文件-...
    99+
    2023-06-08
  • 如何在html中插入图片
    这期内容当中小编将会给大家带来有关如何在html中插入图片,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。html有什么特点1、简易性:超级文本标记语言版本升级采用超集方式,从而更加灵活方便,适合初学前端开...
    99+
    2023-06-14
  • 如何在frontpage2000中运用css设置网页字体
    这篇文章主要讲解了“如何在frontpage2000中运用css设置网页字体”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何在frontpage2000中运用css设置网页字体”吧!   ...
    99+
    2023-06-08
  • 怎么在html页面中插入视频
    这篇文章的内容主要围绕怎么在html页面中插入视频进行讲述,文章内容清晰易懂,条理清晰,非常适合新手学习,值得大家去阅读。感兴趣的朋友可以跟随小编一起阅读吧。希望大家通过这篇文章有所收获! Video标签...
    99+
    2024-04-02
  • css3怎么在页面中插入内容
    这篇文章主要讲解了“css3怎么在页面中插入内容”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css3怎么在页面中插入内容”吧!A.使用选择器来插入内容h3...
    99+
    2024-04-02
  • 如何在jsp中引入css
    本篇文章为大家展示了如何在jsp中引入css,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。什么是csscss是一种用来表现HTML或XML等文件样式的计算机语言,主要是用来设计网页的样式,使网页更加...
    99+
    2023-06-14
  • 如何查看网页css
    这篇文章给大家分享的是有关如何查看网页css的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 查看网页css的方法:1、在浏览器中打开指定网页;2、在网...
    99+
    2024-04-02
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作