整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML+CSS:三种css的引入方式,内链式、嵌入

HTML+CSS:三种css的引入方式,内链式、嵌入式、外部式

篇文章我们简单介绍了css的概念以及语法,本篇文章我们将为大家介绍下css的三种引入方式。

(1)内链式引入

内链式css样式表就是把css代码直接写在现有的HTML标签中,具体的使用方法如下面所示:

<div style="color:red">设置文字的颜色为红色</div>

这里要注意:样式的内容写在元素的开始标签里,并且css样式代码要写在style=""双引号中,如果有多条css样式代码设置可以写在一起,中间用分号隔开。多个css样式写在一起的效果如下面所示:

<div style="color:red; font-size:14px">设置字体颜色为红色,并且字体大小为14px</div>

(2)嵌入式引入

嵌入式样式表与内链式不同的是可以很方便的同时修改多个相同元素的样式属性,比如我们想要将某个标签内的内容字体都调整为红色,并且加粗,字体大小都调整为14px;

我们如果使用内链式的方式,我们需要在每个标签上都要加上样式,代码就如下图所示:

从上边可以看出,内链式会产生一堆的冗余代码,而使用我们的嵌入式就比较简单了,代码如下图所示:

由上图可以看出,嵌入式我们只需要修改span标签,那么所有的span标签内内容的样式都会跟着修改。

(3)外部式引入

外部式css样式就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,一般放在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到HTML文件内。

使用语法:<link href="style.css" rel="stylesheet" type="text/css" />

详细讲解:

1、href=""内部的就为css文件的地址一般以英文命名,比如 base.css或者style.css等等。

2、rel="stylesheet" type="text/css" 这是w3c的标准,固定写法不可修改。

3、<link>标签位置一般写在<head>标签之内。

我们在网站建设中,一般都会使用外部式写法,一来可以做到代码分离,有助于后期的修改维护;二来可以减少页面代码的冗余,有助于优化。具体的页面代码就如下图所示:

我们以上三种写法,最后所得到的结果都是一样的,在网页中呈现的效果都如下图所示:

对于css的三种引入方式我们今天就先介绍到这里,我们后期进行项目制作的时候主要还是使用第三种外部式写法,大家在平时可以自己多加联系联系,熟练一下css的基本操作。


每日金句:有志者自有千计万计,无志者只感千难万难。喜欢我的文章的小伙伴记得关注一下哦,每天将为你更新最新知识。

本的网页结构

网页基本结构:

<html>
	<head>
        <title>这是网页标题</title>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
        <meta name="keywords" content="这是关键字"/>
        <link href="css文件路径" rel="stylesheet"/>
        <link rel="shortcut icon" href="favicon.ico"/>
    </head>
    <body>
        
    </body>
</html>

常见网页标签:

标签

含义

常用属性

a

超链接

href / target / title

img

图片

src / alt / title / width / heiht

h1-h6



p



br



hr



em



strong



i



span



div



CSS美化网页

css样式使用方式

  1. 行内(内敛)样式
  2. 内部样式
  3. 外部样式

css基本选择器

  1. ID - > #
  2. CLASS -> .
  3. 标签 -> 标签名

优先级

  1. ID > CLASS > 标签 (在同一个元素上的ID , CLASS比较)
  2. 行内 > 内部> 外部
  • *important 最高级别
  • 高级选择器:

    1. 并集选择器
    2. 交集选择器
    3. 后代选择器
    4. 子元素选择器
    5. 兄弟选择器
    6. 属性选择器

    前提: 非继承属性 > 继承属性(除此条件外,基本可以适应以下计算规则)

    ID

    CLASS

    标签

    100

    10

    1

    文本样式

    样式

    含义

    属性值

    字体样式

    列表与表格

    表单

    盒子模型

    浮动

    定位

    ss是一种用来为Html文档添加样式(字体、间距、位置、颜色、角度等显示效果)的计算机语言。学习网站W3school。

    css的引用样式:

    一:style标签(内联样式)


    通过在head标签中间新建一个style标签,该标签内部存放的就是网页文件中的css代码。

    二:外部引用css文件(外联样式)



    新建一个css文件

    在head标签中间新建一个link标签,通过href属性设置外部的css文件地址。rel=“stylesheet”表示我们引用的一个样式表(css文件)。

    三:标签内部style属性(行内样式)

    在开始标签的内部可以设置一个叫做style的属性,属性的双引号存放该元素代码的css样式(不推荐使用)。


    一般用的就是通过link标签来引入外部css文件来修改样式,一般修改样式有字体,颜色,大小,文本居中,间距等。