css样式的引入方式

  首选来介绍一下什么是CSS?(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言,其实就是一种层叠样式表。

  CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

  就像造房子一样,如果html是基地的话,那么CSS就是装修,只有装修的房子才可以住,自然至于那些灯光之类的是JS了,这是简单的比例,但也说明了css的重要性。

  网页的核心就是内容与样式的分离,其中CSS就是分离的一种,那么如果分离了,该如何引用呢?一些网站中很多文件,只有相关的引用才可以实现,其中有四种方式,内链样式嵌入式样式外部样式导入样式,下面为大家介绍一下:

  1:内联样式(行间样式):在标签的style属性添加样式:

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8" />
  <title>行内样式</title>
</head>
<body>
     <!--使用行内样式引入CSS-->
     <h1 style="color:red;">惊风随笔</h1>
     <p style="color:red;font-size:30px;">惊风随笔</p>
</body>
</html>

  2、嵌入式样式表(内部样式表):在style标签内添加(加在head标签内部)

<html>
<head>
  <meta charset="utf-8" />
  <title>内部样式表</title>
  <!--使用内部样式表引入CSS-->
  <style type="text/css">
    div{
        background: green;
    }
  </style>
</head>
<body>
     <div>我是DIV</div>
</body>
</html>

  3.外部样式表:将css样式编写在扩展名为.css的文件中,再导入样式,导入在(head标签内部)

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8" />
  <title>外部样式表</title>
  <!--链接式:推荐使用-->
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  </style>
</head>
<body>
     <ul>
         <li>HTML</li>
         <li>CSS</li>
        <li>JavaScript</li>
     </ul>
</html>

  4、@import导入其他css文件。就相当于原来的css文件中包含被导入的css文件中的样式。

<!DOCTYPE>
<html>
<head>
  <meta charset="utf-8" />
  <title>导入样式表</title>
  <!--导入式-不推荐使用-->
  <style type="text/css">
    @import url("css/style.css");
  </style>
</head>
<body>
     <ul>
         <li>HTML</li>
         <li>CSS</li>
         <li>JavaScript</li>
     </ul>
</html>

  不过根据目前网站的做做法,要做到内容与样式的分离,一般都是使用第三种的做法,也就是使用外部式表。这是通用的方式了,第四种一般很少用,因为需要进一步的加载,不利于后期SEO的优化。

原文地址:https://www.cnblogs.com/songtianfa/p/11245573.html

时间: 2024-11-08 21:51:01

css样式的引入方式的相关文章

web前端(7)—— 了解CSS样式,引入css样式的方式

CSS 在前面大概的介绍了css,从本片博文开始,会详细的介绍它,在最开始介绍web前端时,打开百度首页,当时我提出了一个问题,为什么百度首页的输入框可以放在正中间,就是由于有css的控制,我们可以打开浏览器的调试界面查看这个输入框的css样式: 图中我圈出来的左边html代码的就是html属性的键值对,然后圈出的右边位置就是css样式,然后右边那个窗口你还可以所谓的线上编辑,在最后点击一下,就可以编辑: 这个此时就暂且不提了,以后学到的时候再添加,然后那些已经有的也可以去掉,把选项框里的“√”

前端之CSS的属性引入方式、选择器、选择器优先级

目录 1011 前端之CSS的属性引入方式.选择器.选择器优先级 一.CSS介绍 二.CSS语法 2.1CSS实例 2.2 CSS注释 三.css属性的引入方式 3.1 行内样式 3.2 内部样式 3.3 外部样式 四.CSS选择器 4.1 元素(标签)选择器 4.2 id选择器 4.3 类选择器 4.4 通用选择器 4.5 后代选择器 4.6 儿子选择器 4.7 毗邻选择器 4.8 兄弟选择器 4.9 属性选择器 4.10 分组和嵌套选择器 4.11 伪类选择器 4.12 伪类元素选择器 五.

css js 的引入方式和书写位置

css 的引入方式 1.行内样式 <div id="div1" style="width:100px; height:100px; background:red"></div> 2.内嵌(写在head标签内) <head>     <style>   #div1{ width:100px; height:100px; background:red; } </style> </head> 3.外联

CSS三种引入方式:内联、页级、外联

1.内联CSS 内联CSS也可称为行内CSS或者行级CSS,它直接在标签内部引入,显著的优点是十分的便捷.高效:但是同时也造成了不能够重用样式的缺点,如果代码行数到达一定长度不建议采用.通常内联CSS作为测试使用,可以查找代码中bug. 1 <body> 2 <div style="width: 65px;height: 20px;border: 1px solid;">测试元素</div> 3 </body> 2.页级CSS 页级CSS

三种CSS样式的引用方式

CSS样式 3种引用样式的好处及区别: 外部引入样式 优点:代码易于管理和维护,一个CSS能控制多个页面.提高加载速度. 缺点:当外部CSS过多时会造成服务器的请求压力. 头部引入样式: .  优点:加载速度最快,并且不会造成服务器的压力. 缺点:不利于维护和改版.代码量大显得乱. 行内样式: .  优点:优先级最高. 缺点:代码乱.不利于改版和维护.影响开发成本 优先级: 选取一个或多个标签进行操作 常用的选择器有三种:标签名选择器.类名选择器.ID名选择器.(在起名的时候要尽量起和内容有关的

css快速入门-引入方式

一.概述 HTML是骨架.框架CSS是外表.衣服JS是动作.肌肉 css的主要作用是对元素进行渲染.1.找到要操作的标签(选择器)2.对定位的标签进行操作(属性) 二.CSS引入方式 1.行内式 <p style="background-color:red">行内式</p> 2.内联式 在head标签内使用 <html> <head> <style> div { background-color:red; } div p {

CSS四种引入方式

第一种直接在属性标签后添加CSS代码,可读性差,不推荐使用. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--第一种引入方式--> <div style="color: red;backg

JS设置CSS样式的集中方式

1. 直接设置style的属性  某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign)  如果想保留 - 号,就中括号的形式  element.style['text-align'] = '100px'; element.style.height = '100px'; 2. 直接设置属性(只能用于某些属性,相关样式会自动识别) element.setAttribute('height', 100); element.setAttribute

7-[CSS]-css介绍,引入方式

1.CSS介绍:层叠样式表(Cascading Style Sheets) 我们为什么需要CSS? 使用css的目的就是让网页具有美观一致的页面,另外一个最重要的原因是内容与格式分离 在没有CSS之前,我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性,当HTML内容非常多时,就会定义很多重复的样式属性,并且修改的时候需要逐个修改,费心费力.是时候做出改变了,所以CSS就出现了. CSS的出现解决了下面两个问题: 将HTML页面的内容与样式分离. 提高web开发的工作效率. 什