怎样使用CSS技术美化网页?(知识点2)

这篇具有很好参考价值的文章主要介绍了怎样使用CSS技术美化网页?(知识点2)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

知识引入

  • 引入CSS样式表

CSS提供了行内式、内嵌式、外链式、导入式四种引入方式,具体介绍如下。

  1. 行内式

行内式也被称为内联样式,是通过标签的style属性来设置标签的样式,其基本语法格式如下。

<标签名 style=“属性:属性值;”>内容</标签名>

Style是标签的属性,任何HTML中都有style属性,可以用来设置行内式。行内式写在<html>根标签中,例如:<h1 style=”font-size:20px;color:blue;”>使用行内式修饰文本</h1>

*注意:行内式通过标签的属性来控制央视的,这样并没有做到结构与样式分离,所以不推荐使用。

    2.内嵌式

        (1)内嵌式是将CSS代码集中写在HTML文档的<head>头部标签中,并且用style标签定义,其基本语法格式如下。

         <head>

         <style type=“text/css”>

        选择器{属性1:属性值;属性2:属性值;属性3:属性值;}

        </style>

       </head>

     (2)下面通过一个案例演示一下如何使用内嵌式CSS样式,先编写代码如图1.

怎样使用CSS技术美化网页?(知识点2),#html,dreamweaver,html5,css

图1

运行显示页面如图2中圈起来的部分。

怎样使用CSS技术美化网页?(知识点2),#html,dreamweaver,html5,css

图2

3.外链式

   (1)外链式也叫链入式,是将所有的样式放在一个或多个以“.css”为扩展名的外部样式表文件中,通过<link href=“css文件的路径” type=”text/css” rel=”stylesheet”/>

上述语句中,<link/>标签需要放在<head>头部标签中,并且必须指定<link/>标签的三个属性,具体如下。

href:定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。

type:定义所链接文档的类型,在这里需要指定为”text/css”,表示链接的外部文件为CSS样式表。

rel:定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件。

  (2)下面通过一个案例来演示一下如何通过外链式方式引入CSS样式表,具体步骤如下。Step01.创建一个HTML文档并添加文本,如图3.

怎样使用CSS技术美化网页?(知识点2),#html,dreamweaver,html5,css

图3

 Step02.将该文档命名并保存,然后新建一个文档,选择css,然后点击创建,如图4.  怎样使用CSS技术美化网页?(知识点2),#html,dreamweaver,html5,css

图4

Step03.创建好后保存,编写样式代码,然后保存,如图5

怎样使用CSS技术美化网页?(知识点2),#html,dreamweaver,html5,css

图5

Step04.保存然后再HTML文档中添加<link/>语句,将“style.css“外部样式表文件链接到HTML文档中,如图6.

怎样使用CSS技术美化网页?(知识点2),#html,dreamweaver,html5,css

图6

Step05.保存好后会出现,成功链接后再文档工具栏上方出现“style.css”,如图7.

怎样使用CSS技术美化网页?(知识点2),#html,dreamweaver,html5,css

图7

Step06.运行显示如图8.

怎样使用CSS技术美化网页?(知识点2),#html,dreamweaver,html5,css

图8

4.导入式

导入式与外链式相同,都是将样式存放再外部样式表文件中。对HTML头部文档应使用style标签,并在style标签内开头处使用@import语句,即可导入外部样式表文件,其基本语法格式如下。

<style type=”text.css”/>

@import url(css文件路径);或@import “css 文件路径”;

/*在此还可以存放其他CSS样式*/

</style>

导入只需要将<link/>语句换成以下其中一个代码:

(1)<style type=”text.css”/>

@import url(style.css);

</style>

(2) <style type=”text.css”/>

@import  “style.css”;

</style>

*注意:虽然导入式与外链式相同,但是大多数网站都采用外链式方式引入外部样式表。

原因是两者的加载时间和顺序不同。

5.以上就是使用CSS技术美化网页(知识点2)的内容了,我们下期讲知识点3(CSS基础选择器)。文章来源地址https://www.toymoban.com/news/detail-819169.html

到了这里,关于怎样使用CSS技术美化网页?(知识点2)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • CSS知识点汇总(四)

    避免过度约束 避免后代选择符 避免链式选择符 使用紧凑的语法 避免不必要的命名空间 避免不必要的重复 最好使用表示语义的名字。 避免!important,可以选择其他选择器 尽可能的精简规则,合并不同类里的重复规则 1. 概念: 将多个小图片拼接到一个图片中。通过 backgro

    2024年02月11日
    浏览(48)
  • CSS3 知识点

    一、【圆角效果】 border-radius: 5px 4px 3px 2px; border-top-right-radius:10px 右上解圆滑 二、【阴影效果】 box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; box-shadow: 0 0 15px blue inset; 内阴影 三、【颜色之RGBA】 color:rgba(R,G,B,A) 或 background-color:rgba(100

    2024年02月10日
    浏览(46)
  • css知识学习系列(16)-每天10个知识点

    👍 点赞,你的认可是我创作的动力! ⭐️ 收藏,你的青睐是我努力的方向! ✏️ 评论,你的意见是我进步的财富! margin 是元素外边距,用于控制元素与其周围元素之间的间距,影响元素与其他元素的距离。 padding 是元素内边距,用于控制元素内部内容与元素边框之间的

    2024年02月07日
    浏览(54)
  • css知识学习系列(11)-每天10个知识点

    👍 点赞,你的认可是我创作的动力! ⭐️ 收藏,你的青睐是我努力的方向! ✏️ 评论,你的意见是我进步的财富! 使用 position 属性可以定义元素的定位方式,如 position: relative; 、 position: absolute; 等。 使用 z-index 属性可以定义元素在层叠上下文中的层级关系,值较大的元

    2024年02月07日
    浏览(38)
  • css知识学习系列(15)-每天10个知识点

    👍 点赞,你的认可是我创作的动力! ⭐️ 收藏,你的青睐是我努力的方向! ✏️ 评论,你的意见是我进步的财富! transition 属性用于创建元素状态变化的平滑过渡效果。您可以指定要过渡的属性、持续时间和过渡类型。 示例: transition: width 0.5s ease; 会使元素的宽度在0.

    2024年02月07日
    浏览(49)
  • HTML+CSS阶段知识点梳理

    目录 一、简单的网页结构 二、常用标签  三、列表  四、CSS引入方式 五、常用选择器  1、标签(元素)选择器 2、id选择器 3、class选择器 4、通配选择器 5、复合选择器 6、关系选择器 7、属性选择器 8、伪类选择器 9、a元素的伪类 10、伪元素选择器 11、继承 12、选择器的权重

    2024年02月05日
    浏览(45)
  • 前端工作中常用 CSS 知识点整理

    1.1文字溢出省略号 文字单行溢出: 多行文字溢出: 1.2css变量 CSS变量 又称 CSS自定义属性 ,通过在 css 中自定义属性 --var 与函数 var() 组成, var() 用于引用自定义属性。谈到为何会在 CSS 中使用变量,以下使用一个示例讲述。 1.3渐变 渐变分为 线性渐变 、 径向渐变 ,这里笔者直

    2024年02月15日
    浏览(58)
  • CSS知识点汇总(十)--移动端适配

    在移动端虽然整体来说大部分浏览器内核都是 webkit,而且大部分都支持 css3 的所有语法。但手机屏幕尺寸不一样,分辨率不一样,或者有时需要考虑横竖屏的问题,或者考虑到各式各样的移动端兼容性问题。 1、方案选择 1、使用 css 的媒体查询 @media 基于 css 的媒体查询属性

    2024年02月11日
    浏览(48)
  • CSS文本外观属性内容(知识点1)

    知识引入 使用HTML可以对文本外观进行简单的控制,但是效果并不理想,为此CSS提供了一系列的文本外观样式属性,具体如下。 color:文本颜色 color属性用于定义文本的颜色,其取值方式有以下三种。 (1)预定义的颜色值,如red、green、blue等。 (2)十六进制,例如#FF6600,#29

    2024年01月23日
    浏览(45)
  • 【前端】快速掌握HTML+CSS核心知识点

    1.HTML核心基础知识 1.1.编写第一个HTML网页 快捷键生成html模板 标签含义 标签名 定义 说明 HTML标签 页面中最大的标签,根标签 文档头部 注意在head标签中我们必须设置的标签是title 文档标题 让页面拥有一个属于自己的标题 文档主体 元素包含文档的所有内容,页面内容 1.2.超

    2024年02月12日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包