美文网首页web
CSS基本简介以及引入方式

CSS基本简介以及引入方式

作者: lvyweb | 来源:发表于2018-09-17 10:08 被阅读8次

标签(空格分隔): CSS


CSS简介

  • CSS 指层叠样式表 (Cascading Style Sheets)
  • CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。
  • CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。
  • CSS就是控制页面布局和样式

HTML,CSS以及JS的关系

  • HTML 结构层 负责从 语义的角度搭建页面结构
  • CSS 样式层 负责从 审美的角度美化页
  • JavaScript 行为层 负责从 交互的角度提升用户体验

如何编写CSS

分为三种,行内样式,内嵌(嵌入,内部)样式,外部样式表(外链式)

1,行内样式

语法:<标签 style="声明1;声明2;......">
说明:行内样式就是直接把CSS代码添加到HTML的标记中,即作为HTML标记的属性标记存在。通过这种方法,可以很简单地对某个元素单独定义样式。作用当前行,不可以重用。

domo:<p style="color:skyblue;">我是天蓝色字体</p>

2,内嵌(嵌入,内部)样式

语法:

<style type="text/css">
选择器{声明1;声明2;声明3;.......}
</style>

说明:head标签中添加style标签。作用整当前页,可是实现重用。

domo:

 <style>
    p{
        color: skyblue;
    }
    </style>
</head>
<body>
<p>我是天蓝色字体</p>

</body>

3,外部样式表(外链式)

  • 外链式:
    用法:

    • 在外部定义CSS样式表并形成以.CSS为扩展名文件,
    • 然后在页面中通过<link>链接标记链接到页面中,而且该链接语句必须放在页面的<head>标记区
      <link type="text/css" rel="stylesheet" href="要引入的css文件的路径"/>

    说明:链接样式很好地将“页面内容”和“样式风格代码”分离成两个或多个文件,实现了页面框架HTML代码和CSS代码的分离,使前期制作和后期维护都十分方便。同一个CSS文件,根据需要可以链接到网站中所有的HTML页面上,使得网站整体风格统一、协调,并且后期维护的工作量也大大减少。作用整个网站,完全可以重用。

    注意:其实链接式就是把嵌入式中的样式文件单独分离出来,形成一个样式表文件进行存储。由于链接式在减少代码书写和减少维护工作方面都非常突出,所以链接式是最常用的一种方法。另外,链接式也可以在一个页面中链接多个文件。

  • 导入式:

<style type="text/css">
      @import url(要导入的css文件的路径);
</style>

外链式和导入式的区别和联系:
导入式与链接式在使用上非常相似,都实现了页面与样式的文件分离。区别在与导入式在页面初始化时,把样式文件导入到页面中,这样就变成了内嵌式,而链接式仅是发现页面中有标签需要格式时候才以链接的方式引入,比较看来还是链接式最为合理。

相关文章

  • CSS基本简介以及引入方式

    标签(空格分隔): CSS CSS简介 CSS 指层叠样式表 (Cascading Style Sheets) C...

  • CSS介绍

    CSS简介 CSS基础选择器 CSS字体属性 CSS文本属性 CSS的引入方式 CSS简介 CSS是层叠样式表(C...

  • css基础

    本文简介CSS的基础用法 CSS的引用方式 1.通过 引入 CSS。 @import的引用方式注释:@impo...

  • CSS基础

    1.CSS简介 CSS 的全称是Cascading Style Sheets,层叠样式表 2.CSS的引入方式 内...

  • CSS学习总结

    学了有一小段时间前端了,今做个CSS的总结! 目录: CSS 简介 CSS 语法 CSS 选择器 CSS 引入方式...

  • 「CSS」语法

    CSS 简介 CSS 引入方法 CSS 语法 浏览器私有属性 属性值语法基本元素组合符号数量符号CSS 规则示例 ...

  • CSS部分

    引入方式 1.使用link标签引入css 文件 2.在head中通过sytle标签定义 语法 查找标签的方式 基本...

  • 珠峰培训css从入门到精通1

    html基本结构 常用的标签元素A-Z 块级元素和行内元素特点 标签语义化 CSS基本语法 CSS引入方式—行内式...

  • @import和link

    简介 @import和link都是引入CSS文件的方式。 @import是CSS2.1提出来的,IE9+才能完全使...

  • CSS基础(一)

    1.CSS 的引入方式有哪些? CSS 的引入方式有以下三种: 行内样式使用style属性引入CSS样式。 内部样...

网友评论

    本文标题:CSS基本简介以及引入方式

    本文链接:https://www.haomeiwen.com/subject/quhknftx.html