博客列表 >css简介与盒模型7月3号

css简介与盒模型7月3号

珍珠宝宝的博客
珍珠宝宝的博客原创
2019年07月08日 19:43:13653浏览

一,< 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:

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


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议