Blogger Information
Blog 8
fans 0
comment 0
visits 5136
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
css简介与盒模型7月3号
珍珠宝宝的博客
Original
652 people have browsed it

一,< a href="" target="">与<iframe>理解target属性与name属性之间的关联是如何实现的

target对应的属性值应该与iframe中name的属性值一致!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联标签/元素</title>
</head>
<body>
<a href="https://www.qq.com/" target="当前">腾讯</a>
<!--ifame内联标签   target指向标签-->
<iframe src="" feameborder="1" name="当前" width="600" height="800"></iframe>
</body>
</html>

二,演示css中的内联样式,内部样式,外部样式的应用场景,理解style属性, style标签, 以及外部样式表的使用方式

1,内联样式>内部样式,示例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联,内部,外部样式</title>
    <style>
        /*内部样式:仅对当前的htlm文档有效*/
 p{color: gold}
    </style>
</head>
<body>
<!--内联样式:用属性来设置元素的样式-->
<p style="color:red">自从我们推出《赞助vip会员,赠送一对一魔鬼训练营课程》以来, </p>
<p>每天大量的咨询报名,虽然我们有完整的学习提示 </p>
<p>但是还是有很多同学,不知道从哪里开始学习,为了更好的服务广大VIP学员,我们特意整理一个清晰的学习指南,请参考!</p>
<p>目前,《赞助vip会员,赠送一对一魔鬼训练营课程》增加了【必修】和【选修】课程,体验更佳,欲报名请速***Q:88526(猪哥)</p>
</body>
</html>

2,外部样式



需要单独写一个stylesheep样式表  ,然后用link标签加载该样式表

stlysheep样式表

p{color: gold}

外部样式表示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <!--样式表地址-->
 <title>外部样式</title>
</head>
<body>
<p>自从我们推出《赞助vip会员,赠送一对一魔鬼训练营课程》以来, </p>
<p>每天大量的咨询报名,虽然我们有完整的学习提示 </p>
<p>但是还是有很多同学,不知道从哪里开始学习,为了更好的服务广大VIP学员,我们特意整理一个清晰的学习指南,请参考!</p>
<p>目前,《赞助vip会员,赠送一对一魔鬼训练营课程》增加了【必修】和【选修】课程,体验更佳,欲报名请速***Q:88526(猪哥)</p>
</body>
</html>

3,style标签和属性

style(元素属性)>id>class>Tag*

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部样式</title>
    <style>
        /*标签选择器Tag*/
 P{color: red}
        /*类选择器class,id(可叠加)*/
 .blue{color: blue}
        .pink{color: pink}
        #gold{color: gold}
        /*style(元素属性)>id>class>Tag*/
 </style>
</head>
<body>
<p class="blue">自从我们推出《赞助vip会员,赠送一对一魔鬼训练营课程》以来, </p>
<p class="blue pink">每天大量的咨询报名,虽然我们有完整的学习提示 </p>
<p id="gold" class="blue">但是还是有很多同学,不知道从哪里开始学习,为了更好的服务广大VIP学员,我们特意整理一个清晰的学习指南,请参考!</p>
<p id="gold" class="blue" style="color: brown">目前,《赞助vip会员,赠送一对一魔鬼训练营课程》增加了【必修】和【选修】课程,体验更佳,欲报名请速***Q:88526(猪哥)</p>
</body>
</html>

三,盒模型中的内外边距和边框都遵循上右下左的设置顺序

边框颜色:border-color:

边框厚度:border-width

边框样式:border-style:

边框圆角:border-radius:

内边距:padding:

外边距:margin:

四,盒模型的每个要素的排列方式是    上   右   下   左!


Correction status:qualified

Teacher's comments:对于各类缩写要多写才能记住
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post