前端-css-介绍及三种引入方式

foremost      2022-02-14     229

关键词:

我们为什么需要CSS?

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

什么是CSS?

CSS是指层叠样式表(Cascading Style Sheets),样式定义如何显示HTML元素,样式通常又会存在于样式表中。

也就是说把HTML元素的样式都统一收集起来写在一个地方或一个CSS文件里。

css的优势

1.内容与表现分离 

2.网页的表现统一,容易修改

3.丰富的样式,使页面布局更加灵活

4.减少网页的代码量,
增加网页浏览器速度,节省网络带宽

5.运用独立页面的css,有利于网页被搜索引擎收录

如何使用CSS?

我们通常会把样式规则的内容都保存在CSS文件中,此时该CSS文件被称为外部样式表,

然后在HTML文件中通过link标签引用该CSS文件即可。这样浏览器在解析到该link标

签的时候就会加载该CSS文件,并按照该文件中的样式规则渲染HTML文件。

CSS基础语法

css的三种引入方式

内嵌方式(不方便维护,不建议使用)

每个项目分别建立文件夹

style标签

<!doctype html>
<html>
    <head>
        <meta charset="utf8">
        <style>
            p {
                color: red;
            }
        </style>
    </head>
    <body>
        <p>这是一个p标签!</p>
    </body>
</html>

行内样式

<!doctype html>
<html>
<head>
<meta charset="utf8">
</head>
<body>
<p style="color: blue;">这是一个p标签!</p>
</body>
</html>

外联样式表-链接式(主要使用这种方法)

 

link标签
----------
index.css
p {
  color: green;
}
----------
然后在HTML文件中通过link标签引入:
<!doctype html>
<html>
    <head>
        <meta charset="utf8">
绝对路径
        <link rel="stylesheet" href="./index.css">
    </head>
    <body>
        <p>这是一个p标签!</p>
    </body>
</html>
----------------------------------------------------------

外联样式表-@import url()方式 导入式

了解即可。
----------------------
index.css

@import url(other.css)

---------------------
注意:
@import url()必须写在文件最开始的位置。

链接式与导入式的区别

1、<link/>标签属于XHTML,@import是属性css2.1
2、使用<link/>链接的css文件先加载到网页当中,再进行编译显示
3、使用@import导入的css文件,客户端显示HTML结构,再把CSS文件加载到网页当中
4、@import是属于CSS2.1特有的,对于不兼容CSS2.1的浏览器来说就是无效的

 

前端---css

...  3.1链接式     3.1导入式1.css介绍现在的互联网前端分三层:HTML:超文本标记语言。从语义的角度描述页面结构。CSS:层叠样式表。从审美的角度负责页面样式。JS:JavaScript。从交互的角度描述页面行为CSS:CascadingStyleS... 查看详情

前端基础css入门(代码片段)

【前端基础】CSS介绍css的介绍1.css的定义2.css的作用3.css的基本语法4.小结css的引入方式1.行内式2.内嵌式(内部样式)3.外链式4.css引入方式选择5.小结css的介绍学习目标能够知道css的作用1.css的定义css(CascadingStyleSheet)层叠样... 查看详情

前端之css

...   3.1链接式     3.1导入式css介绍现在的互联网前端分三层:HTML:超文本标记语言。从语义的角度描述页面结构。CSS:层叠样式表。从审美的角度负责页面样式。JS:JavaScript。从交互的角度描述页面行为CSS:CascadingStyle... 查看详情

01-css的引入方式

... 3.1链接式     3.1导入式 css介绍现在的互联网前端分三层:HTML:超文本标记语言。从语义的角度描述页面结构。CSS:层叠样式表。从审美的角度负责页面样式。JS:JavaScript。从交互的角度描述页面行为CSS:CascadingStyle... 查看详情

01-css的引入方式

...   3.1链接式     3.1导入式css介绍现在的互联网前端分三层:HTML:超文本标记语言。从语义的角度描述页面结构。CSS:层叠样式表。从审美的角度负责页面样式。JS:JavaScript。从交互的角度描述页面行为CSS:CascadingStyle... 查看详情

引入css的三种方式

虽然入职已经大半年,并自诩前端工程师,但是我真的不会……(有一种我有罪我该死的感觉从CSS样式代码插入的形式来看基本可以分为以下3种:内联式、嵌入式和外部式三种。1.内联式内联式css样式表就是把css代码直... 查看详情

前端css的引入方式

!!!前端css的引入方式#1、css介绍#现在互联网分为三层:#html:超文本标记语言,从语义的角度描述页面结构。#CSS:层叠样式表,从审美的角度负责页面样式#JavaScript:从交互的角度描述页面行为##css:cascadingstylesheet,层叠样... 查看详情

web前端——了解css样式,引入css样式的方式

...css,从本片博文开始,会详细的介绍它,在最开始介绍web前端时,打开百度首页,当时我提出了一个问题,为什么百度首页的输入框可以放在正中间,就是由于有css的控制,我们可以打开浏览器的调试界面查看这个输入框的css样... 查看详情

前端详细介绍1

一:CSS的三种引入方式1:行间式   ①:在标签头部的style属性内   ②:属性值满足的是css语法   ③:属性值用key:value形式赋值,value具有单位   ④:属性值之间用分号(;)隔开 ... 查看详情

前端css--引入方式和选择器

...   3.1链接式     3.1导入式css介绍现在的互联网前端分三层:HTML:超文本标记语言。从语义的角度描述页面结构。CSS:层叠样式表。从审美的角度负责页面样式。JS:JavaScript。从交互的角度描述页面行为CSS:CascadingStyle... 查看详情

前端css

CSS介绍   CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观。  当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染)。CSS语法     ... 查看详情

css三种引入方式

CSS三种引入方式一、三种方式的书写规范1、行间式<divstyle="width:100px;height:100px;background-color:red"></div>行间式1.在标签头部的style属性内2.属性值满足的是css语法3.属性值用key:value形式赋值,value具有单位4.属性值之间用;隔开2... 查看详情

css的引入方法

... 3.1链接式     3.1导入式 css介绍现在的互联网前端分三层:HTML:超文本标记语言。从语义的角度描述页面结构。CSS:层叠样式表。从审美的角度负责页面样式。JS:JavaScript。从交互的角度描述页面行为CSS:CascadingStyle... 查看详情

前端:css

  一,css介绍CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素。当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染)。二,CSS语法1,每个CSS样式由两个组成部分:选择器和声明。声... 查看详情

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

目录1011前端之CSS的属性引入方式、选择器、选择器优先级一、CSS介绍二、CSS语法2.1CSS实例2.2CSS注释三、css属性的引入方式3.1行内样式3.2内部样式3.3外部样式四、CSS选择器4.1元素(标签)选择器4.2id选择器4.3类选择器4.4通用选择器4.5... 查看详情

css引用方式

...分别为:外部引入、内部引入、行内样式,下面一一进行介绍。1.外部引入:CSS代码在一个独立的文件中,HTML通过Link标签引入到页面。代码格式:<linkrel=“stylesheet”href="../css/index.css">;注:1.link标签是head的子元素;  ... 查看详情

day44-前端入门-css的三种引用方式以及优先级样式与长度颜色常用样式css选择器

目录一、css的三种引用方式行间式内联式外联式二、三种引入的优先级三、样式与长度颜色基本样式长度颜色四、常用样式字体样式文本样式背景样式五、css选择器基础选择器基础选择器优先级组合选择器组合选择器优先级属性... 查看详情

前端之htmlcss

前端之HTML、CSS(三)   CSS  CSS-CascadingStylesSheets,层叠样式表。用于网页的表现,主要用于布局和修饰网页。  CSS引入方式  CSS的三种引入方式:行内样式,内部样式表,外部样式表。  行内样式:通过标签的styl... 查看详情