程序界的葵花宝典教程CSS创建

开课吧开课吧锤锤2021-06-02 16:20

点赞
有用
分享分享

    在过去的几年中,CSS有了很大的改进。总会有一些新功能出来,让你感到惊讶。你可以使用CSS的功能来创建很多令人惊奇的东西,只需要有一点创意即可。

web

    首先,先说一下三种方法为:外部样式表、内部样式表、内联样式

    1、外部样式表

    应用场景:当样式需要应用于很多页面的时候,就需要用到外部样式表。在外部样式情况下,你可以通过改变一个文件而改变整个网站的样式。

    写法:每个页面使用标签连接到样式表,

    例如:

<head>
    <link ref="stylesheet" type="text/css" href="style.css">
</head>

    浏览器会从style.css中读取样式声明,并根据这个文件来美化HTML

    外部样式表文件不能包含任何HTML标签,样式以.css作为扩展名进行保存

    例如:

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}

    注意:不要在属性值与单位之间留有空格

p {margin-left:20px;} <!--正确的写法-->
p {margin-left:20 px;}  <!--错误的写法-->

    2、内部样式表

    应用背景:当单个页面需要特使样式时,就需要使用内部样式表。

    写法:使用标签在文档头头部定义内部样式表,就像这样:

<head>
<style>
    hr {color:sienna;}
    p {margin-left:20px;}
    body {background-image:url("images/back40.gif");}
</style>
</head>

    3、内联样式

    这是一种将样式和内容混在一起写的样式,这样不便于统一维护,所以jingshen谨慎使用。

    应用场景:当样式仅需在一个元素上应用一次的时候。

    写法:在相应的标签中使用style属性,属性值为CSS属性,例如:

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

    多重样式

    如果即使用了外部样式又使用了内部样式,那具体使用哪个呢?这就是多重样式

    例如:

    外部样式:

h3
{
    color:red;
    text-align:left;
    font-size:8pt;
}

    内部样式:

h3
{
    text-align:right;
    font-size:20pt;
}

    同样的标签,内部有两个属性,外部多一个color,这种情况下,内部样式会继承外部样式的样式,但是和自己属性相同的部分,内部样式会覆盖外部样式,也就是说,上述同时使用了外/内部样式的文件,具体表现的样式为:

    最终样式:

h3
{
    color:red;
    text-align:right;
    font-size:20pt;
}

    color继承了外部样式,因为内部样式没有这个属性,其他名称相同的两个属性(text-align/font-size)用了自己的样式

    多重样式的优先级:

    内联样式>内部样式>外部样式>浏览器默认样式

    当你学会创建之后,你就可以自己独立的联系,好记性不如烂笔头,当你的熟练度提升了,你就会发现做什么都会容易。以上就是小编为大家整理的“程序界的葵花宝典教程CSS创建”一文,更多Web教程尽在开课吧广场Web教程频道。

免责声明:本站所提供的内容均来源于网友提供或网络搜集,由本站编辑整理,仅供个人研究、交流学习使用。如涉及版权问题,请联系本站管理员予以更改或删除。
有用
分享