div格式设置,CSS学习第3天

By admin in 4858美高梅 on 2019年4月11日

<!DOCTYPE html>
<html>
    <head>
        <meta charset=”UTF-8″>
        <title></title>
        <style type=”text/css”>
            /*标签名查找,名称1致,格式相同*/
            span{
                color: coral;
            }
            /*id名查找,名称不可重复*/
            #a{
                width: 100px;
                height: 100px;
                background-color: #5F9EA0;
            }
          
 /*class查找,名称可重复,格式相同*/

            .b{
                width: 100px;
                height: 100px;
                background-color: #8A2BE2;
                border: 1px solid green;
            }
            /*并称用“
,”格式相同*/

            #c,.d{
                width: 100px;
                height: 100px;
                background-color: #FF0000;
                border: 1px solid green;
            }
            /*父级,子级用空格*/
            #fu #zi1,#zi2{
                width: 100px;
                height: 100px;
                background-color: black;
                border: 1px solid green;
            }
        </style>
    </head>
    <body>
        <span >
            标签名查找
        </span>
        <div id=”a”></div>
        <div class=”b”></div>
        <div class=”b”></div>
        <div id=”c”></div>
        <div class=”d”></div>
        <div id=”fu”>
            <div id=”zi1″></div>
            <div id=”zi2″></div>
        </div>
    </body>
</html>

2018.三.2九 div格式设置,201捌.三.2九div格式

<!DOCTYPE html>
<html>
    <head>
        <meta charset=”UTF-8″>
        <title></title>
        <style type=”text/css”>
            /*标签名查找,名称一致,格式相同*/
            span{
                color: coral;
            }
            /*id名查找,名称不可重复*/
            #a{
                width: 100px;
                height: 100px;
                background-color: #4858美高梅 ,5F9EA0;
            }
            /*class查找,名称可重复,格式相同*/
            .b{
                width: 100px;
                height: 100px;
                background-color: #8A2BE2;
                border: 1px solid green;
            }
            /*并列用“ ,”格式相同*/
            #c,.d{
                width: 100px;
                height: 100px;
                background-color: #FF0000;
                border: 1px solid green;
            }
            /*父级,子级用空格*/
            #fu #zi1,#zi2{
                width: 100px;
                height: 100px;
                background-color: black;
                border: 1px solid green;
            }
        </style>
    </head>
    <body>
        <span >
            标签名查找
        </span>
        <div id=”a”></div>
        <div class=”b”></div>
        <div class=”b”></div>
        <div id=”c”></div>
        <div class=”d”></div>
        <div id=”fu”>
            <div id=”zi1″></div>
            <div id=”zi2″></div>
        </div>
    </body>
</html>

div格式设置,201捌.三.2玖div格式 !DOCTYPE
html html head meta charset=”UTF-8″ title/title style type=”text/css”
/*标签名查找,名称相同,格式相同*/ span…

4858美高梅 1

第2部分 CSS样式表

CSS(Cascading Style Sheets,层叠样式表),功能是美化HTML网页。

div格式设置,CSS学习第3天。    /*注释*/    注释语法

后天是CSS学习的率后天,老师讲了CSS的着力协会和写法,总起来依然比较简单的,但依然要多加练习~

贰.1、样式表的基本概念

CSS  层叠样式表

二.1.1、样式表分类

壹、内联样式表

    和html联合显示,控制规范,但是可重用性差,冗余多。

    例:<p style=”font-size:1四px;”>内联样式表</p>

贰、内嵌样式表

    作为三个独门区域内嵌在网页里,必须写在head标签里边。

<style type= “text/css”>

p    //格式对p标签起功用

{

     样式;

}

</style>

3、外部样式表

   
新建叁个CSS文件,用来放样式表。假如要在HTML文件中调用样式表,须求在HTML文件中式点心右键→CSS样式→附加样式表。壹般用link连接情势。

 

   
有个别标签有个别默许的边距,一般写样式表代码的时候都会先去除(也能够安装任何样式),如下:

<style type=
“text/css”>

*   
//格式对具备标签起效果

{

     margin:0px;

     padding:0px;

}

</style>

 

二种体制

2.1.2、选择器

1、标签选拔器。用竹签名做采用器。

     <style type=
“text/css”>

     p   
//格式对p标签起成效

     {

          样式;

     }

     </style>

 

2、class选择器。都是“.”开头。

    <head>

    <style
type=”text/css”>

    .main    
/*概念样式*/

    {

          height:42px;

          width:100%;

         
text-align:center;

    }

    </style>

    </head>

    <body>

    <div class=”main”>  
    <!–调用class样式–>

    </div>

    </body>

 

3、ID选择器。以“#”开头

    <div
id=”样式名”>

    <head>

    <style
type=”text/css”>

    #main    
/*概念样式*/

    {

          height:42px;

          width:100%;

         
text-align:center;

    }

    </style>

    </head>

    <body>

    <div id=”main”>      
<!–调用id样式–>

    </div>

    </body>

 

四、复合选取器。

    1)、用“,”隔离,表示并列。

    <style
type=”text/css”>

    p,span  
 /*标签p、span两者同样的样式*/

    {

          样式;

    }

    </style>

 

    2)、用空格隔绝,表示后代。

    <style
type=”text/css”>

    .main p  
 /*找到使用样式“main”的标签,在该标签里的P标签使用该样式*/

    {

        样式;

    }

    </style>

 

    3)、筛选“.”。

    <style
type=”text/css”>

    p.sp  
 /*在标签p中的class=”sp”的价签,执行以下样式*/

    {

          样式;

    }

    </style>

 2.贰体裁属性

1、内联式 写在body内 

二.二.一、背景与前景

    background-color:#F90;    /*背景观,样式表优先级高*/

    background-image:url(路径);    /*安装背景图片(暗中认可)*/

    background-attachment:fixed;    /*背景是原则性的,不随字体滚动*/

    background-attachment:scroll;    /*背景随字体滚动*/

    background-repeat:no-repeat;   
/*no-repeat,不平铺;repeat,平铺;repeat-x,横向平铺;repeat-y,纵向平铺*/

    background-position:center;   
/*背景图居中,设置背景图地方时,repeat必须为“no-repreat”*/

    background-position:right top;   
/*背景图放到右上角(方位能够协调改变)*/

    background-position:left 100px top 200px;   
/*离右边100像素,离上边200像素(能够设为负值)*/

 

    字体

    font-family:”新宋体”;    /*字体。常用微软雅黑、陶文。*/

    font-size:12px;   
/*字体大小。常用像素1二px、14px、18px。仍是可以够用“em”,“二.5em”即:暗许字体的二.五倍。还是能够用百分数*/

    font-weight:bold;    /*bold是加粗,normal是正常*/

    font-style:italic;    /*倾斜,normal是不倾斜*/

    color:#03C;    /*颜色*/

    text-decoration:underline;   
/*下划线,overline是上涂鸦,line-through是剔除线,none是去掉下划线*/

    text-align:center;   
/*(水平对齐)居中对齐,left是左对齐,right是右对齐*/

    vertical-align:middle;   
/*(垂直对齐)居中对齐,top是顶部对齐,bottom是底层对齐。一般安装行高后选取。*/

    text-indent:28px;    /*首行缩进量*/

    line-height:24px;    /*行高。一般为1.5~二倍字体大小。*/

    display:none;   
/*none,不出示;inline-block,显示为块,不自动换行,宽高可设;block,显示为块,自动换行;inline,效果同span标签,不自行换行,宽高不可设。*/

    visibility:hidden;   
/*可视性。hidden,隐藏可是占空间;visible,显示。*/

 

语法(属性式)  style:”样式:样式值;”  
其独到之处是决定标准,缺点是不活络,代码冗余

二.二.二、边界和边框

border(表格边框、样式等)、margin(表外间距)、padding(内容与单元格间距)

    border:5px solid blue;   
/*四边框:五像素宽、实线、紫藤色(也正是以下3行)*/

    border-width:5px;

    border-style:solid;

    border-color:blue;

    border-top:5px solid blue;   
/*上面框:5像素宽、实线、丁香紫(分写同上)*/

    border-bottom:5px solid blue;  
/*下边框:5像素宽、实线、紫铜色(分写同上)*/

    border-left:5px solid blue;   
/*左边框:五像素宽、实线、暗蓝(分写同上)*/

border-right:5px solid blue;   
/*左侧框:5像素宽、实线、木色(分写同上)*/

 

    margin:10px;     /*四边外边框宽度为10像素。auto,居中。*/

    margin-top:10px;    /*下边外边框宽度为10像素;别的三边边框类似*/

margin:20px 0px 20px 0px;    /*上-右-下-左,肆边外边框顺时针顺序*/

 

    padding:10px;    /*内容与边框的四边间距为十像素*/

    padding-top:10px;   
/*剧情与边框的上距离为10像素;别的三边间距类似*/

padding:20px 0px 20px 0px;  
/*上-右-下-左,内容与边框的四边间距顺时针顺序*/

 

2、内嵌式 写在head内

2.二.三、列表与方块

   
width、height、(top、bottom、left、right)只有在相对坐标情况下才有用

    list-style:none;    /*撤消序号*/

    list-style:circle;    /*序号变成圆圈,样式相当于冬季*/

    list-style-image:url(图片地址);    /*图表做序号*/

    list-style-position:outside;    /*序号在内容外*/

    list-style-position:inside;    /*序号跟内容在①齐*/

 

采取器{样式:样式值}    其亮点是代码精简  缺点是 控制不准确

贰.2.四、格式与布局

1、position:fixed

    锁定地点(相对于浏览器的职责),例如有些网址的右下角弹窗

 例:

<head>

<title>123</title>

<style
type=”text/css”>

#a

{

    border:5px solid
blue;

    width:100px;

    height:100px;

    margin:10px;

   
background-color:#0F3;

    left:30px;

    bottom:20px;

    position:fixed;

}

</style>

</head>

<body>

    <div id=”a”>a

    </div>

</body>

呈现如下

 4858美高梅 2

 

2、position:absolute

    一)、外层未有position:absolute(或relative);,那么div绝对于浏览器定位,如下图中b(距离浏览器的左侧框50像素,距离浏览器的底下框20像素)。

    二)、外层有position:absolute(或relative);,那么div相对于外层边框定位,如下图中bb(距离d的右边框50像素,距离d的上边框20像素)。

代码:

<head>

<title>123</title>

 

<style
type=”text/css”>

.b

{

    border:5px solid
blue;

    width:100px;

    height:100px;

    margin:10px;

   
background-color:#0F3;

    right:50px;

    bottom:20px;

    position:absolute;
/**/

}

.c

{

    border:2px solid
red;

    width:400px;

    height:200px;

}

</style>

<style
type=”text/css”>

.d

{

    border:2px solid
red;

    width:400px;

    height:200px;

    position:absolute;

}

</style>

</head>

<body>

<div class=”c”>c

    <div
class=”b”>b

    </div>

</div>

<div class=”d”>d

    <div
class=”b”>bb

    </div>

</div>

</body>

4858美高梅 3

 

3、position:relative

   
相对于暗许地方的运动。如下图,a在用relative移动前的任务,aa为用relative移动后的职位,aa距原位置上部间距50像素,距原岗位左侧距20像素。

代码:

<head>

<title>123</title>

<style
type=”text/css”>

#a

{

    border:5px solid
blue;

    width:100px;

    height:100px;

    margin:10px;

   
background-color:#0F3;

    position:fixed;

}

#aa

{

border:5px solid blue;

width:100px;

height:100px;

margin:10px;

background-color:#0F3;

left:20px;

top:50px;

position:relative;

}

</style>

</head>

<body>

<div id=”a”>a

</div>

<div id=”aa”>aa

</div>

</body>

来得如下

 4858美高梅 4

 

4、分层(z-index)

    在Z轴方向分层,能够知道为分成壹摞纸,层数越高越靠上。

   
在上头relative的以身作则中,大家来看aa盖住了a,那是因为后写代码的会盖住前面包车型客车,那么在不更改代码顺序的事态下何以让a盖住aa,如下:

<head>

<title>123</title>

<style
type=”text/css”>

.a

{

    border:5px solid
blue;

    width:100px;

    height:100px;

    margin:10px;

   
background-color:#0F3;

    position:fixed;

    z-index:2;  
 /*此间做一下改动,默认景况下,都是第一层*/

}

.aa

{

    border:5px solid
blue;

    width:100px;

    height:100px;

    margin:10px;

 
  background-color:#0F3;

    left:20px;

    top:50px;

    position:relative;

}

</style>

</head>

<body>

<div class=”a”>a

</div>

<div class=”aa”>aa

</div>

</body>

呈现如下

 4858美高梅 5

 

5、float:left,right

 

    overflow:hidden;    //超出部分隐藏;scroll,显示出滚动条; 

    <div style=”clear:both”></div>    截断流

 

附:

    overflow:hidden;   
/*超出范围时隐藏;scroll,超出范围时出滚动条。*/

 

超链接样式:

     <style
type=”text/css”>

     a:link   
/*貌似链接*/

     {

         color:blue;

     }

    

     a:visited   
/*做客过的链接的格式*/

     {

         color:green;

     }

    

     a:hover   
/*设置鼠标指向链接时的样式*/

     {

         color:red;

     }

     </style>

 

cursor:pointer    鼠标指到上边时的形状。

©    版权符号©

 

半透明效果

    <div class=”box”>透明区域</div>

    //样式表中代码:

    .box

    {

        opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50) 

    }

三、外部体制表  写在head内

<link rel=”stylesheet”  href=”路径”> 优点是 精简html的公文代码 
缺点是决定不够标准

四、注释的语法

/* 注释的内容 */

标签选取器

ID选择器    #ID名

类选取器     .class名

复合选拔器   逗号  空格  点

代码示例:<style>
            p{width: 200px; height: 200px; background-color:
darkmagenta;}
            #name1{width: 200px; height: 200px; background-color:
coral;}
            .name2{width: 200px; height: 200px; background-color:
aquamarine;}
            li.name3{width: 200px; height: 200px; background-color:
cornflowerblue;}
            li#name4{width: 200px; height: 200px; background-color:
bisque;}
            ol li{width: 200px; height: 200px; background-color:
chartreuse}
        </style>

报表样式:

代码示例:<style type=”text/css”>
        *{margin: 0px; padding: 0px;}
        table{background-color: aqua;}
        td{background-color: chartreuse;}
    </style>

页面包车型大巴格式布局

            position:fixed;  固定 top(必须设置)   left  right 
bottom      z-index
            position:absolute;  相对定位
            1、唯有小编:在页面中一定(依据top属性来)
            二、有嵌套关系 
a.嵌套他的价签未有position:照旧在页面中一定
                        
b.嵌套他的标签有position:在嵌套他的标签里面定位
            position:relative;  相对稳定

做的示范小演习

<!DOCTYPE html>
<html>
    <head>
        <meta charset=”UTF-8″>
        <title></title>
        <style type=”text/css”>
            *{position: fixed;
              position: absolute;
              position: relative;
            
            }
            #a{width: 400px; height: 100px; background-color:
#00FFFF;position: fixed; top: 10px; border: 2px solid green}
            #b{width: 400px; height: 100px; background-color:
antiquewhite;position: fixed; top: 110px;border: 2px solid red}
            #c{width: 90px; height: 40px; background-color:
black;position:absolute;border: 2px solid coral;top: -80px; left:
10px;}
            #d{width: 90px; height: 40px; background-color:
lavenderblush;position:absolute; bottom: 10px; border: 2px solid
darkgray;right: 20px;}
            #e{width: 90px; height: 40px; background-color:
hotpink;position:relative; left: 480px;border: 2px solid dodgerblue;top:
60px;}
        </style>
    </head>
    <body>

        <div id=”a”></div>
        <div id=”b”>
            <div id=”c”></div>
            <div id=”d”></div>
            <div id=”e”></div>
        </div>
    </body>
</html>

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有