css中内嵌,内联以及外联的区别

在学习css的过程中,经常会用到内嵌,内联以及外联这三种,接下来我就对于自己所学的一点介绍一下:

1、内嵌

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h1 style="color:red;">web前端<h1>
</body>
<html

类似于上图代码中:

<h1 style="color:red;">web前端<h1>这句代码中在h1标签中插入了
style="color:red。这种写法就叫做内嵌,相对而言比较简单也比较容易理解。2、内联
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
           h1{
              color:red;
              }    <style>
</head>
<body>
<h1>web前端<h1>
</body>
<html

内联的格式如上图的代码,所要声明的属性都在<head>中,这样可以声明多个属性值,简洁易懂。

3.、外联

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h1>web前端<h1>
</body>
<html
.h1{color:red}

第一图的代码是在html中书写,而第二图的代码则是在css中书写,这样可以使源代码和属性值分开书写,这样更加简洁,在面对大段落的编写来讲很大程度降低了我们的书写难度已经出错率。

以上就是所学这三种方式的内容的简单理解。

时间: 2024-12-23 09:42:38

css中内嵌,内联以及外联的区别的相关文章

CSS中的行内标签变成块级标签

大家都知道,CSS中的行内标签(span,i,b等等),是不能设置宽高或者margin-top;margin-bottom;但是在设置了display为block或者inline-block的情况下是可以设置的,这就是常见的行内元素转化为块级元素: 今天给大家分享的是自己在案例中看到的小技巧.给行内标签添加position:absolute或者float中的设置,行内元素是会被默认转成块级元素!!!

CSS中px和em属性的特点与区别

详解px和em的特点和区别象素px是我们在定义CSS中经常用到的尺寸大小单位,而em在国外网站中经常被使用,px和em之间究竟有什么区别和特点呢?◆px像素(Pixel),相对长度单位.像素px是相对于显示器屏幕分辨率而言的.◆em是相对长度单位,相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸.因此用px来定义字体,就无法用浏览器字体放大的功能.任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合:1em=16px.那么12px=0

比较css中单位px,em和rem的区别

国内的设计师大都喜欢用px,而国外网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? px特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核). px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS2.0手册) em是相对长度单位.相对于当前对象内文本的字体尺寸.如

CSS中的行内元素和块级元素

我们在构造页面时,会发现有的元素是上下排列的,而有的则是横向排列的,这是为啥子呢   看看上图,我们也没给他设置啥子属性咋就不一样了,其实是因为每个元素都有默认的 display 属性,比如 div 标签的默认 display 属性是 block,我们通常称这类元素为块级元素:span 标签的默认 display 属性是 inline,我们通常称这类元素为行内元素 我们可以看到块级元素总是独占一行,从上到下显示,行内元素则是从左到右显示.这是因为块级元素前后有换行符,而行内元素前后没有换行符.除

css中display:inline-block display:-moz-inline-box display:-moz-inline-stack 的区别

很多时候我们必须使一些块元素并排显示,一般想到的是必须使用浮动,但是块元素浮动给边距(margin)的时候在IE下会出现加倍的BUG,所以很多时候不得不把这个块元素套在一个内联元素里面,然后给内联元素 浮动和边距.今天看到这篇文章不错 就COPY 过来 希望大家做个参考: display:inline-block简单来说就是将对象呈递为内联对象,但是对象的内容作为块对象呈递.旁边的内联对象会被呈递在同一行内,允许空格.但是这个属性目前不是所有的浏览器都支持,只有Opera和Safari支持,Fi

css中position属性(absolute|relative|static|fixed)的区别

position属性的相关定义:static:无特殊定位,对象遵循正常文档流; relative:对象遵循正常文档流; absolute:对象脱离正常文档流; fixed:对象脱离正常文档流 我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置.而其层叠通过z-

[ css 变换 transform 属性 ] css中transform属性讲解及实例演示的区别

一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了~~ 看看下图女帝的动作以及神情,就可以知道名字带D的家伙的厉害! 最近折腾iPad的一些东西,有一些3D效果的交互.有些事情,总以为是遥远的未来,谁知真正发生的时候说来就来,比如说一颗想结婚的心,又比方说在实际项目中折腾3D transform效果. 然而,虽然以前折腾过3D变换效果(webkit

CSS中一个冒号和两个冒号的区别

单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素.伪元素由双冒号和伪元素名称组成.双冒号是在css3规范中引入的,用于区分伪类和伪元素.但是伪类兼容现存样式,浏览器需要同时支持旧的伪类,比如:first-line.:first-letter.:before.:after等.对于CSS2之前已有的伪元素,比如:before,单冒号和双冒号的写法::before作用是一样的.提醒,如果你的网站只需要兼容webkit.firefox.opera等浏览器,建议对于伪元素采用双冒号的写法如果

彻底弄懂css中单位px和em,rem的区别

PX:PX实际上就是像素,用PX设置字体大小时,比较稳定和精确.但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,如果改变了浏览器的缩放,这时会使用我们的Web页面布局被打破.这样对于那些关心自己网站可用性的用户来说,就是一个大问题了.因此,这时就提出了使用“em”来定义Web页面的字体. EM:EM就是根据基准来缩放字体的大小.EM实质是一个相对值,而非具体的数值.这种技术需要一个参考点,一般都是以<body>的“font-size”为基准.如WordPress官方主题T