css引入样式-行内样式、内嵌样式和外链样式

css初识及引入样式

概念：css通常称为css样式表或层叠样式表
作用：

 - 主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式- css以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

引入css样式表的三种方式：

1）行内式（内联样式）

概念：称行内样式、行间样式，是通过标签的style属性来设置元素的样式
基础语法<标签名 style="属性1：属性值1；属性2：属性值2;">内容</标签名>
注意：
style其实就是标签的属性
样式属性和值之间用：
多组属性值之间用；隔开
只能控制当前的标签和嵌套在其中的字标签，造成代码冗(rong)余
缺点：没有实现样式和结构的分离

2）内部样式表（内嵌样式表）

是将css代码集中写在HTML文档的head头部标签中，并且用style标签定义
基础语法

<head><style type="text/css">div{color: red;font-size: 12px;}</style>
</head>

注意
style标签一般位于head标签中，理论上他可以放在HTML文档的如何地方。
type="text/css"在html中可以省略。
只能控制当前的页面。
缺点：没有彻底分离

3）外部样式表（外链式）

概念：是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中
基本语法

<head><link rel="stylesheet" type="text/css" href="css文件路径">
</head>

注意
link是一个单标签
link标签要放在head头部标签中，并且指定link的三个属性

属性	作用
rel	定义当前文档与被链接文档之间的关系，在这里需要指定为"stylesheet"，表示被链接的文档是一个样式表文件。
type	定义所链接文档的类型，在这里需要指定为"text/CSS",表示链接的外部文件为CSS样式表。我们都可以省略
href	定义所有链接外部样式表文件的url，可以是绝对路径也可以是相对路径

缺点：需要引入

CSS样式总结：

选择器用于指定css样式作用的HTML标签，花括号内是对该对象设置的具体样式
属性和属性值以“键值对”的形式出现
属性是对指定的对象设置的样式属性
属性和属性值之间用“.”连接
多个“键值对”之间用“;”，进行区分

css引入样式-行内样式、内嵌样式和外链样式相关推荐

react的行内样式和外链样式
一.行内样式如果你的行内样式没有生效,看一下是不是写少了一个花括号 export default class MyStyle extends Component {render() {return ...
【前端】行间样式、内部样式和外链样式，选择器，伪类，样式，开发者工具，快捷键
行间样式.内部样式和外链样式写在style属性中的样式叫行间样式写在style标记的样式叫内部样式写在css文件里的样式叫外链样式,需要link链入html文件内部样式和外链样式需要用选择器找 ...
H5 CSS引入方式行内样式表
引入方式一:行内样式表,通过标签的style属性设置 <html> <head> <meta charset="utf-8"> <titl ...
外链引入css有哪些方式_引入ＣＳＳ样式表的方式有哪些？
CSS用于修饰网页样式,但是,如果希望CSS修饰的样式起作用,就必须在html档中引入CSS样式表.引入样式表的常用方式有三种,即行内式.内嵌式.外链式,具体介绍如下. 1.行内式行内式也称内联样式 ...
外链式样式表_CSS外链式与内联式的区别是什么
区别:CSS外链式是将css代码单独写一个以".css"为扩展名的文件中,然后使用link标签链接到html中.CSS内联式是直接使用style属性将css代码写在HTML标签中. ...
CSS选择器/CSS字体文本属性/CSS引入方式/案例
CSS 1.CSS简介 1.1 HTML的局限性虽然 HTML 可以做简单的样式,但是带来的是无尽的臃肿和繁琐 1.2 CSS-网页的美容师 CSS 是层叠样式表 ( Cascading Style ...
CSS简介、行内样式、内部样式、外部样式、注释、引入其他CSS文件
CSS的发展历程: 起初是没有css的,只有少量样式是可以写在html标签中,这样代码格外显得臃肿,此时CSS就出现了. 初识CSS: CSS(Cascading Style Sheets),被称为C ...
【CSS】CSS 层叠样式表 ② ( CSS 引入方式 - 内嵌样式 )
文章目录一.CSS 引入方式 - 内嵌样式 1.内嵌样式语法 2.内嵌样式示例 3.内嵌样式完整代码示例 4.内嵌样式运行效果一.CSS 引入方式 - 内嵌样式 1.内嵌样式语法 CSS 内嵌样式 ...
13 ，CSS 入门基础,行内排版内嵌式排版和外部排版样式
1.认识 CSS 2.传统 HTML 设计网页版面的缺点 3.CSS 的特点 4.CSS 的排版样式 13.1 认识CSS CSS的英文全名是 Cascading Style Sheets,中文可翻译 ...

css引入样式-行内样式、内嵌样式和外链样式

css初识及引入样式

css引入样式-行内样式、内嵌样式和外链样式相关推荐

最新文章

热门文章