css

一、css简介

Css样式(cascading style sheet)层叠样式表

body a .box{}

Css的目的:给html加各种各样的样式-------html结构和css样式进行分离---便于维护和更新

Css的语法

   选择器{属性名:属性值;属性名:属性值;}

             说明:

                        一个css样式包括选择器格式声明语句(包括属性值:属性名)

                        选择器就是选择给哪个html标签加样式

                        格式声明语句要用{}

属性名:由W3C已经定义好,想用的时候直接使用

属性值:不用双引号,属性值的单位通常是以像素px为单位,通常的情况下必须带单位

一些常用的文本属性及属性值:

font-size 设置文本的大小 eg font-size:12px

font-weight 设置文本是否加粗 eg font-weight :bold(加粗);normal(正常)

font-style 文本是否倾斜 eg font-style:italic;倾斜 font-style:normal;正常

font-family 文字的字体 eg font-family:隶书;默认是宋体

text-decoration 文本是否有线条 eg text-decoration:underline(下划线)

                                                                                   text-decoration:overline(上划线)

                                                                        text-decoration:line-through(删除线)

                                                                        text-decoration:none(去掉所有的线条)

text-indent 文本首行缩进 eg text-indent:2em;

color 文本的颜色 eg color:red;

letter-spacing 字母和字母之间的距离 eg letter-spacing:2px;

word-sapcing 单词和单词之间的距离 eg word-sapcing:2px;

text-align: 文本的对齐方式 left center right  eg text-align:center;

 

二、如何在html结构中引入css样式

  1.行内样式表(临时做测试用):

每一个标签都有style属性

格式:<标签 style=”属性名:属性值;”>内容</标签>

行内样式,只能应用当前文档中的当前对应的html标签加样式,或者里面包含的标签加该样式。

               

 2.内嵌样式表(常用):

格式:在head标签中输入

                <style type=“text/css”>

                            选择器:{属性名:属性值}

                </style>

内嵌样式:在当前的文档可以使用该样式,需要的时候可以使用。

3.外部样式表(适用于多个文档都需要使用某种样式)(常用):

格式:<link rel=”stylesheet” href=”外部样式表文件 xx.css”/>  (单标签)

保存的时候,扩展名为css文件

(1)建立一个css页面,保存为扩展名为.css的文件

(2) 在不同的页面引入,<link rel=”stylesheet” href=”外部样式表文件 xx.css”/>

可以应用到多个文档,哪个html标签需要用,就可以引入

4.导入样式表(针对某些大型的网站):管理css样式

格式:@import url(另外一个css样式)

注意:@import是css样式标签,且放在css样式表的最上边

 

三、选择器的分类:

1.标签选择器

选择给哪个标签加样式,它会自动指向该标签。

语法:标签选择器{属性:属性值;}

eg:body{ } p{} div{} table{} td{} ul{}

特点;不用引用,它会把样式自动套到对应的标签,所有的对应标签都加上该样式(若只是想让该种标签的一部分使用该样式,则需要使用类标签)。

2.类选择器(谁用给谁加, 可以多次重复调用)

给一类html标签加样式

语法:类选择器{属性:属性值;} (在head中) (eg:.myclass{} .page_header{} )

           <标签 class=“选择器名(不用加.)”></标签>(在body中)(必须的引用,每一个标签都有一个class属性)

            选择器名称是自己定义,但要起的有意义。

     注意:类选择器的名称不要用中文。  

eg:

<head>

    <meta charset="UTF-8">

    <title>2html文件</title>

    <style type="text/css">

        /*ul{color: red;}*/    /*1.标签选择器*/

        .ul_two{color: blue;font-size: 14px;font-weight: bold;} /*2.类选择器*/

    </style>

</head>

<body>

    <div>

        <h2 class="ul_two">php2</h2>

        <ul>

            <li class="ul_two">>p标签</li>

            <li>metal标签</li>

            <li>link标签</li>

            <li>style标签</li>

        </ul>

   </div>

</body>

3. id选择器:给特定的html的标签加样式。

格式:id选择器名{属性:属性值;} (在head中)

           <标签 id=”选择器名(不加#)”></标签>(在body中)

            id选择器名开头要加#;选择器名自定义,要起的有意义。

            eg:#myid{}  #myid1{}

id必须的引用方法:每一个标签都有id属性

注意:id只能引用一次, 表示唯一通常id给javascript用,不是用来设置样式的,如果想设置样式,用类选择器。

4. 通用选择器(* 所有)即给所有的标签加样式。

语法:*{属性名:属性值;属性名:属性值;}

不是所有的浏览器都支持

5.复合选择器。

(1)多元素选择器:多个标签共有的属性和属性值,放到一起

语法:选择器,选择器,选择器……{属性值:属性名;属性值:属性名;}

(此中的选择器可以是类选择器,标签选择器等)

(2)后代元素选择器:给html的后代标签加样式

语法:选择器1 选择器2 选择器3{属性:属性值}

<style type="text/css">

                                         /*写法1*/

            .login .login_content_input .login_content_input_out span{

                color: blue;

            }

                         /*写法2*/

                         .login_content_input .login_content_input_out span{

                color: blue;

            }

                         /*写法3*/

 .login_content_input_out span{

                color: blue;

            }

        </style>

虽然这3中写法都可以,但是存在优先级的问题。

    <div class="login">

        <div class="login_content_input">

            <div class="login_content_input_out">

                <span>登录</span>

            </div>

        </div>

</div>

(3)子元素选择器:给html的标签的子标签加样式

格式:选择器1>选择器2{属性值:属性名}

某个标签里的第一层

(如下:div的后代元素选择器为h2,ul; ul的后代选择器为li; li的后代选择器为b)

<div class="main">

        <h2>主题内容的左边栏</h2>

        <ul>

            <li><b></b></li>

            <li>第二行</li>

            <li>第三行</li>

        </ul>

</div>

eg.news>h3{color:blue}   /*子元素选择器*/

.news h3{colorblue}   /*后代元素选择器*/

四、伪类:------锚(即指链接)<a>的伪类(内容必须做好链接)

a:link: 未访问的链接

a:visited 访问过的链接

a:hover 鼠标移动到连接上

a:active 单击鼠标那一刻时的样式

eg:

 

五、背景的属性

background-color 背景颜色 eg background-color:red;

background-img 背景图片 eg  background-img:url(图片的路径)

background-repeat 背景图片是否平铺 取值:no-repeat 不平铺

                                                                           repeat-x横向平铺

                                                                           repeat-y纵向平铺

                                                                           repeat横向纵向都平铺(default)

注意:既有背景图片,又有背景颜色,背景图片的优先级比较高

Background-attachment 背景附件,背景是否随着上方的内容一起滚动

                                                                    取值:fixed 背景固定 scroll 滚动

                                                                   eg background-attachment:fixed;

Background-position 背景图片的展开方式 eg background-position:水平;垂直;

                                                        水平 left center right 垂直 top center bottom

                                                         数值:正值 负值

                                                         eg background-position:left top; == background-position:0 0

                                                        background-position:10px 20px;(距左边10px,上边20px放图片)

                                                       注意:0后边不用带单位px

上述几个背景属性的简写:

background:背景颜色 背景图片 背景图片是否平铺  (附件通常仅用body标签) 水平 垂直(不能颠倒);

注意:只有水平和垂直不能颠倒。其它的属性值的顺序可以颠倒。

eg:

            /*background-color: blue;*/

            /*background-image: url(images/traffic.png);*/

            /*background-repeat: no-repeat;*/

            /*background-position:10px 20px;*/

            /*background-attachment: fixed;*/  /*背景图片固定*/

 等价于

background:blue url(images/traffic.png) no-repeat 10px 20px fixed;

六、列表:

      1.去掉列表前面的项目符号

/*list-style-type: none;*/

等价于
list-style: none;

2. 用小图代表列表前边的符号

List-style-image:url(图片的地址)

七、表格

       1.合并表格的边框线

之前rules=”all” 表格 <table>的属性 合并表格的边框线

CSS样式中,border-collapse: collapse; 合并表格的边框线

eg:

<style type="text/css">

        table{

            width: 800px;

            border: 1px solid blue;/*边框线 1px,实现,蓝色*/

            border-collapse: collapse;

        }

        td{

            border: 1px solid blue; /*单元格的边框线 1px,实现,蓝色*/

        }

</style>

八、边框线(html 标签都可以加边框线,不是只有表格才有边框线)

1.上边框

border-top-color:颜色值;上边框的颜色

border-top-style:线型; solid 实线;dashed虚线;dotted 点状线

border-top-width:粗细;eg:border-top-width:2px;

可简写为: border-top:2px(粗细) solid(线型) blue(颜色);

2.右边框

border-right-color:颜色值;上边框的颜色

border-right-style:线型; solid 实线;dashed虚线;dotted 点状线

border-right-width:粗细;eg:border-top-width:2px;

可简写为: border-right:2px(粗细) solid(线型) blue(颜色);

3.下边框

border-bottom-color:颜色值;上边框的颜色

border-bottom-style:线型; solid 实线;dashed虚线;dotted 点状线

border-bottom-width:粗细;eg:border-top-width:2px;

可简写为: border-bottom:2px(粗细) solid(线型) blue(颜色);

4.左边框

border-left-color:颜色值;上边框的颜色

border-left-style:线型; solid 实线;dashed虚线;dotted 点状线

border-left-width:粗细;eg:border-top-width:2px;

可简写为: border-left:2px(粗细) solid(线型) blue(颜色);

<style type="text/css">

           .box_one{

               width: 500px;

               height: 300px;

               /*border-top-color: blue;*/

               /*border-top-width: 1px;*/

               /*border-top-style: solid;*/

               border-top:1px solid blue;

               border-right:1px solid grey;

               border-bottom:1px dashed orange;

               border-left:1px solid grey;

           }

        </style>

5.上右下左四条边框的样式一样

语法:可以简写为 boder:粗细 线型 颜色

<style type="text/css">
    /*.hao_two{*/
        /*width: 500px;*/
        /*height: 300px;*/
        /*border: 1px solid gray;*/
    /*}*/
    /*.hao_three{*/
        /*width: 100px;*/
        /*height: 50px;*/
        /*border: 1px solid gray;*/
    /*}*/


    /*等价于*/


    .hao_two {
        width: 500px;
        height: 300px;
    }
    .hao_three {
        width: 100px;
        height: 50px;
    }
    /*将相同的放在一块儿,更简洁*/
   
.hao_two,.hao_three{
        border: 1px solid gray;
    }
</style>

 

综合案例

<head>

    <meta charset="UTF-8">

    <title>第2个html文件</title>

    <style type="text/css">

        .news{

            width: 300px;

            height: 300px;

            border: 1px solid grey;

            margin: 100px auto; /*调整div距离上右下左的距离*/

        }

        /*清除原有格式*/

    *{

        margin:0;

        padding: 0;

    }

        .news h1{

            height: 48px;

            color: blue;

            font-size: 16px;

            background: grey;

            line-height: 48px;  /*设置line-height == height 使字体垂直居中*/

        }

        .news ul{

            list-style: none;

        }

        .news ul li{

            line-height: 40px;

            border-bottom: 1px dashed gray;

        }

    </style>

</head>

<body>

    <div class="news">

        <h1>误乐新闻</h1>

        <ul>

            <li>张三</li>

            <li>李四</li>

            <li>王小二</li>

            <li>小二</li>

        </ul>

    </div>



</body>

 

九、盒子模型

1. 内容区: width height

2.边框:boder

3.内边距(内容和边框之间的距离):

(1)padding-top: 数值;内容和上边框之间

(2)padding-right: 数值;内容和上边框之间

(3)padding-bottom: 数值;内容和上边框之间

(4)padding-left: 数值;内容和上边框之间

简写形式:

Padding:10px 20px 30px 40px 内容和上 右 下 左边框的距离

Padding: 10px 20px 30px 内容和上边框的距离为10px 左右边框的距离20px 下边框的距离30px

Padding: 10px 30px 内容和上下边框的距离为10px 左右边框的距离30px

Padding: 10px 内容和上下左右边框的距离都为10px

4.外边距(边框往外的距离)

margin-top: 数值;上边框往外的距离

margin-right:数值;右边框往外的距离

margin-bottom: 数值;下边框往外的距离

margin-left:数值;左边框往外的距离

正常的文档流:即从上往下依次叠加代码,纵向排列

案例

<head>

        <meta charset="UTF-8">

        <title>第一个html</title>

        <!--<meta http-equiv=”refresh” content=”4;http://www.baidu.com”/>-->

        <style type="text/css">

            .block_one{

                width: 400px;

                height: 300px;

                border: 1px solid gray;

                margin-bottom: 80px;

            }

            .block_two{

                width: 300px;

                height: 200px;

                border: 1px solid orange;

                margin-top: 30px;

            }

            /*注意:两个盒子之间的距离是80(取最大的) 而不是80+30(两者相加)*/

        </style>

    </head>

    <body>

       <div class="block_one">

       </div>

       <div class="block_two">

       </div>

</body>

简写:

margin:10px 20px 30px 40px;上边框往外的是10px,右是20px,下是30px,左是40px.

margin:10px 20px 30px; 上边框往外的是10px; 左右边框以外的是20px;下边框以外的是30px

margin:10px 20px; 上下边框往外的是10px; 左右边框以外的是20px;

margin:10px;上下左右边框往外的距离都是10px。

5. 网站布局的一个思想:

网站的结构就是两部分(横向和纵向):

如果是纵向的,就是正常的文档流,设置内容的宽度高度,设置内容和边框之间的距离 padding, 边框往外的部分margin, 以及调节width,height,broder等这些属性等。

如果是横向排列,我们就要使用浮动

(1)浮动:

float:left

float:right

eg:若是要有3个盒子,一般为:左左右 or 左左左

注意:一般不设 右右右,因为这样顺序会乱。

(2)浮动的特点:

  • 设置浮动的元素不占空间
  • 设置浮动的元素层级(即叠放顺序)高于普通元素
  • 设置浮动之后,无论之前是否是块元素,都会变为块元素。(只有块元素才能设置宽和高,行内元素的宽和高不能设定,它的宽和高是由其内容决定的。)
  • 如果在一行中的元素想横向排列,都设置浮动就可以了。

相应代码:

<head>

    <meta charset="UTF-8">

    <title>第2个html文件</title>

    <style type="text/css">

        .box_one,.box_two{

            border: 2px solid blue;

        }

        /*不设置高度和宽度,默认的为100%*/

        .box_one{

            width: 180px;

            height: 150px;

            background: red;

            float: left; /*浮动为左浮动*/

        }

        .box_two{

            width: 250px;

            height: 250px;

            background: yellow;

            float: left;

        }

    </style>

</head>

<body>

    <div class="box_one">

        内容one

    </div>

    <div class="box_two">

        内容two

    </div>

</body>

通常情况下,div里面还有div(外边的div称为父盒子)即盒子里边还有盒子

(3) 如何让盒子在页面水平居中:

 margin: **px auto; eg:margin: 0 auto;  上下边框以外的距离为0,左右自动。

或者:

margin-left:auto; margin-right:auto

盒子模型的综合案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第2个html文件</title>
    <style type="text/css">
        *{
           margin: 0;
            padding: 0;
        }
        .product{
            width: 780px;
            height: 480px;
            border: 1px solid orange;
            margin: 30px auto; /*将左右设置为左右设置为auto 即左右居中(让盒子在窗口中水平居中)*/
        }
        /*不设置高度和宽度,默认的为100%*/
        .product ul{
            list-style: none;
        }
        .product ul li{
            float: left;
            border: 1px solid orange;
            padding: 3px 5px;
            margin: 5px;
        }
        .product p span{

            color: orange;
            font-weight:bold;
        }
        .product p b{
            font-weight: normal;
            padding-top: 10px;
        }
        .product p i{
            font-style:normal;
            font-size: 12px;
            color: gray;
        }
        .product .left{
            float: left;
        }
        .product .right{
            float: right;
        }

    </style>

</head>
<body>
    <div class="product">
        <ul>
            <li>
                <img src="images/Chrysanthemum.jpg" alt="描述信息" width="120" height="120"/>
                <p>
                    <span>&yen;588.00</span><br/>
                    <b>描述该产品的信息</b><br/>
                    <i>已售333</i><br/>
                    <i class="left">baby婴儿用品</i> <i class="right">北京</i>
                </p>
            </li>
            <li>
                <img src="images/Desert.jpg" alt="描述信息" width="120" height="120"/>
                <p>
                    <span>&yen;58.00</span><br/>
                    <b>描述该产品的信息</b><br/>
                    <i>已售333</i><br/>
                    <i class="left">baby婴儿用品</i> <i class="right">北京</i>
                </p>
            </li>
            <li>
                <img src="images/Hydrangeas.jpg" alt="描述信息" width="120" height="120"/>
                <p>
                    <span>&yen;600.00</span><br/>
                    <b>描述该产品的信息</b><br/>
                    <i>已售333</i><br/>
                    <i class="left">baby婴儿用品</i> <i class="right">北京</i>
                </p>
            </li>
            <li>
                <img src="images/Jellyfish.jpg" alt="描述信息" width="120" height="120"/>
                <p>
                    <span>&yen;588.00</span><br/>
                    <b>描述该产品的信息</b><br/>
                    <i>已售333</i><br/>
                    <i class="left">baby婴儿用品</i> <i class="right">北京</i>
                </p>
            </li>
            <li>
                <img src="images/Koala.jpg" alt="描述信息" width="120" height="120"/>
                <p>
                    <span>&yen;588.00</span><br/>
                    <b>描述该产品的信息</b><br/>
                    <i>已售333</i><br/>
                    <i class="left">baby婴儿用品</i> <i class="right">北京</i>
                </p>
            </li>
        </ul>

    </div>
</body>
</html>

(4)浮动造成的影响和解决办法

  • clear:left; 清除左浮动
  • clear:right; 清除右浮动
  • clear:both; 既清除左浮动,又清除右浮动

Div中还包含div,其中外面的div称为父盒子,如果父盒子没有设置固定高,里面设置了浮动,父元素受影响(注意:在不设浮动的情况下,其不受影响),无法正常的计算,如何让父元素得到一个自然高?

  • 在父盒子里面的最下方加一个div,给该div设置清除浮动的属性:clear:both
  • 浏览器的一个bug------在父元素的样式中加入overflow:hidden

 

案例

注意:父盒子maxbox不用设置height,其高根据里边盒子box_left, box_right 来自动确定,适用于子盒子的高度不确定的情况下(比如,实时系统中有时内容多,有时内容少的情况)

<head>
    <meta charset="UTF-8">
    <title>第一个html</title>
    <style type="text/css">
        .maxbox{
            width: 600px;
            /*height: 500px;*/
            border: 1px solid blue;
            margin: 10px auto; /*overflow: hidden; 让父元素得到一个自然高*/
        }

        .box_left{
            width: 250px;
            height: 300px;
            border: 1px solid blue;
            margin: 10px;
            float: left;
        }
        .box_right{
            width: 250px;
            height: 300px;
            border: 1px solid blue;
            margin: 10px;
            float: right;
        }
        .box_clear{
            clear: both;
        }
    </style>
</head>
<body>
<div class="maxbox">
    <div class="box_left"></div>
    <div class="box_right"></div>
    <div class="box_clear"></div>
</div>
</body>

等价于

<head>
    <meta charset="UTF-8">
    <title>第一个html</title>
    <style type="text/css">
        .maxbox{
            width: 600px;
            /*height: 500px;*/
            border: 1px solid blue;
            margin: 10px auto; /*overflow: hidden; 让父元素得到一个自然高*/
            overflow: hidden;
        }

        .box_left{
            width: 250px;
            height: 300px;
            border: 1px solid blue;
            margin: 10px;
            float: left;
        }
        .box_right{
            width: 250px;
            height: 300px;
            border: 1px solid blue;
            margin: 10px;
            float: right;
        }
        /*.box_clear{*/
            /*clear: both;*/
        /*}*/
    </style>
</head>
<body>
<div class="maxbox">
    <div class="box_left"></div>
    <div class="box_right"></div>
    <div class="box_clear"></div>
</div>
</body>

 

6.盒子的深入

想要的效果

可能出现的结果:

假设:

父盒子(黑色盒子):width=1000(即内容区的宽度)

子盒子1(左边的蓝盒子)width:500px ;border:2px;padding:5px;margin:10px

子盒子1总的宽度=内容区的宽度+边框的宽度+padding+margin(左右)=500+2*2+5*2+10*2=534

子盒子2(右边的蓝盒子)width:400px ;border:2px;padding:10px;margin:10px

子盒子1总的宽度=内容区的宽度+边框的宽度+padding+margin(左右)=400+2*2+10*2+10*2=444

534(左边的蓝盒子总的宽度)+444(右边的蓝盒子总的宽度)<1000(父盒子(黑色盒子)),所以可以达到想要的效果。

总的宽度=内容区的宽度width+边框的宽度broder+padding(左右)+margin(左右)

(1)如果是正常的文档流,如下:设置margin,如果有叠加,取叠加部分的最大值。

(2)如果设置了浮动不是正常的文档流,要把所有的margin值相加

6.清除格式

如果不设置width, width默认为100%;如果不设置height,height根据其内容来定

清除所有的html标签的格式,后期如果使用,再重新设置

语法:

*{

margin:0;

padding:0;

}

等价于

body,table,p,ul,li,h1,h2,h3,h4,h5,h6,dd,dl,dt,l,b,a{ Margin:0;Padding:0;}( 把所有想要清除格式的标签都写上)

 

7.设置页面属性 body{}即设置整个页面的整体风格


body{font-size:14px;font-family:宋体;color:black; background-color:gray;}

我们需要考虑的:body{背景颜色/背景图片;文本的大小;文本的颜色;文本的字体;行间距}

把整个页面划分结构

8.行内元素和块元素


(1) 行内元素:输入完标签后不是自己独占一行


        eg:Span b I u strong a 

  •       行内元素的宽和高由内容来决定,width,height不能用         
  •       默认的css样式:display:inline;

 
(2)块元素(标签):输入完标签之后自己独占一行。 
                               

  eg:div p table ul li ol dl dd dt 

  • 可以设置width,height
  • 默认的css样式:display:block;

(3)块元素与行内元素之间的转换

块转换为行内:display:inline;
行内转换块:display:block;
案例:

注意:实现的文本水平居中和垂直居中的方法

<!DOCTYPE html>
<html lang="en" xmlns:svg="http://www.w3.org/2000/svg">
   
<head>
           
    <meta charset="UTF-8">
           
    <title>第一个html</title>
           
    <!--<meta http-equiv=”refresh”
    content=”4;http://www.baidu.com”/>-->
           
    <style type="text/css">
        a,span{
            border: 1px solid blue;
            width: 100px;
            height: 100px;
            display: block;
            float: left;
            text-align: center;/*使标签a中的文本水平居中*/
            line-height: 100px; /*设置line-height == height 使标签中的文本垂直居中*/

        }
        div{
            width:300px;/*不设置height,则该div的高度随着内容的变化而变化*/
            border: 1px solid red;
        }

    </style>
       
</head>
   
<body>
       
<a href="#">产品展示</a><a href="#">产品展示</a><a href="#">产品展示</a><a href="#">产品展示</a>
<a href="#"> 产品展示</a><span>大家好</span>
       
<div>
 设置完绝对定位,不占空间
               
           设置层级高于普通元素
               
           不结合定位坐标,就是在原来的位置
               
           绝对定位如果结合定位坐标,以祖先元素(设置绝对定位,相对定位)作为坐标的参考点。如果祖先没有设置定位,
                他会一直往上找,直到找到body,就以body(即整个窗口)来进行定位(即相对整个窗口来进行定位)。先找到谁有定位,就以谁为参考(
                如下案例,granpa和parent都设定位,而se
           
</div>
   
</body>
</html>

案例:导航的设置 class=“nav” 一般都指的是导航
注意案例中去掉链接下划线的操作

<!DOCTYPE html>
<html lang="en" xmlns:svg="http://www.w3.org/2000/svg">
   
<head>
           
    <meta charset="UTF-8">
           
    <title>第一个html</title>
           
    <style type="text/css">
        .nav{
            width: 700px;
            height: 80px;
            background-color: black;
            margin: 0 auto;
        }
        .nav a:link,.nav a:visited{
            height: 78px;
            padding-left: 10px;
            padding-right: 10px;
            border: 2px solid red;
            margin: 0 auto;
            /*display: block;*/
            float: left;
            line-height: 78px;
            color: white;/*设置文本的颜色*/
            text-decoration: none;/*去掉下划线*/
        }
        .nav a:hover{
            background-color: blue;
        }
    </style>
       
</head>
   
<body>      
    <div class="nav">
        <a href="#">首页</a>
        <a href="#">博客</a>
        <a href="#">学院</a>
        <a href="#">下载</a>
        <a href="#">GitChat</a>
    </div>   
</body>
</html>

9. Overflow 当内容溢出,如何显示

(1)hidden 隐藏

(2)auto 如果盒子装不下,就会出现滚动条

(3)scroll 无论是否能装下都有滚动条边框

10.继承:

外层元素的样式会被里面的元素所继承,哪些标签可以继承?

答:设置文本属性的都可以继承

eg:font-size font-family font-weight font-style:italic text-decoration:none/undering; color:red

注意:自己有的属性,不向上继承,不会继承祖先元素的属性。如:标签<a>中 本来就带颜色,故其不会继承上级的颜色。

11.优先级

(1)单个选择器的优先级

单个选择器包括:标签选择器 类选择器 id选择器

优先级:行内样式表>id选择器>类选择器>标签选择器

比喻:(权重越大,优先级越高)

 标签选择器类选择器id选择器
权重110100

(2) 复合选择器优先级:

比喻:

li-------1

.box ul li--------12

#myid ul li----------102

即写的越精确(权重越高),优先级越高。

案例:

<head>

    <meta charset="UTF-8">
    <title>第一个html</title>
    <style type="text/css">

        .box .one ul li{
            color: blue;
            font-size: 14px;
            line-height: 150%;
        }

        li{
            color: red;
            font-size: 14px;
            line-height: 150%;
        }
    </style>
</head>
<body>

    <div class="box">
        <div class="one">
            <ul>
                <li>锄禾</li>
                <li>锄禾</li>
            </ul>
        </div>
    </div>
</body>

 

十、定位(某些特殊处理的地方才处理定位,一般使用浮动):

1.坐标:偏离目标元素多元的距离

 坐标的属性:left:数值;right:数值;top:数值;bottom:数值;

2. Position: 定位方式有:static 默认fixed 固定  relative相对定位 absolute 绝对定位

(1) static 默认

(2) fixed 固定:

  • 相对于浏览器窗口进行定位
  • 如果不设置定位坐标,就在原来的位置
  • 层级要比普通标签高
  • 如果结合定位坐标,就是相对于目标位置的距离
  • 设置固定定位之后一定是块儿元素(eg:<span></span>为行元素,设置固定定位之后,就变成了块儿元素)

案例:

<!DOCTYPE html>
<html lang="en">
<head>      
    <meta charset="UTF-8">

            <title>第一个html</title>

            <!--<meta http-equiv=”refresh” content=”4;http://www.baidu.com”/>-->

           
    <style type="text/css">
        .one {
            width: 100px;
            height: 100px;
            background: red;
        }

        .two {
            width: 100px;
            height: 100px;
            background: green;
            position: fixed;
            right: 10px;
            bottom: 15px;
        }

        .three {
            width: 100px;
            height: 100px;
            background: blue;
        }

                </style>

       
</head>

   
<body>

      
<div class="one">


          
</div>

      
<div class="two">


          
</div>

      
<div class="three">

               <p>

                   清除所有的html标签的格式,后期如果使用,再重新设置

                   *{

                   margin:0;

                   padding:0;

                   }

                   body,table,p,ul,li,h1,h2,h3,h4,h5,h6,dd,dl,dt,l,b,a{ Margin:0;Padding:0;}( 把所有想要清除格式的标签都写上)

                   //


                   定位(某些特殊处理的地方才处理定位,一般使用浮动):

                   Position: 定位方式有:static 默认

                   fixed 固定

                   relative相对定位 absolute 绝对定位

               </p>

               <p>

                   清除所有的html标签的格式,后期如果使用,再重新设置

                   *{

                   margin:0;

                   padding:0;

                   }

                   body,table,p,ul,li,h1,h2,h3,h4,h5,h6,dd,dl,dt,l,b,a{ Margin:0;Padding:0;}( 把所有想要清除格式的标签都写上)

                   //


                   定位(某些特殊处理的地方才处理定位,一般使用浮动):

                   Position: 定位方式有:static 默认

                   fixed 固定

                   relative相对定位 absolute 绝对定位

               </p>

               <p>

                   清除所有的html标签的格式,后期如果使用,再重新设置

                   *{

                   margin:0;

                   padding:0;

                   }

                   body,table,p,ul,li,h1,h2,h3,h4,h5,h6,dd,dl,dt,l,b,a{ Margin:0;Padding:0;}( 把所有想要清除格式的标签都写上)

                   //


                   定位(某些特殊处理的地方才处理定位,一般使用浮动):

                   Position: 定位方式有:static 默认

                   fixed 固定

                   relative相对定位 absolute 绝对定位

               </p>

          
</div>

   
</body>
</html>

(3)relative 相对定位

  • 相对定位占空间
  • 如果不结合定位坐标,就是在原来位置
  • 如果结合定位坐标,相对于【自身】作为定位的原点
  • 层级高于普通元素

案例:

<head>

        <meta charset="UTF-8">

        <title>第一个html</title>

        <style type="text/css">

            .one{

                width: 100px;

                height: 100px;

                background: red;

            }

            .two{

                width: 110px;

                height: 110px;

                background: green;

                position: relative;

                left: 20px;

                top:30px;

            }

            .three{

                width: 100px;

                height: 100px;

                background: blue;

            }

        </style>

    </head>

    <body>

       <div class="one">



       </div>

       <div class="two">



       </div>

       <div class="three">



       </div>

    </body>

 

(4)absolute 绝对定位

  •        设置完绝对定位,不占空间
  •        设置层级高于普通元素
  •        不结合定位坐标,就是在原来的位置
  •        绝对定位如果结合定位坐标,以祖先元素(设置绝对定位,相对定位)作为坐标的参考点。

       如果祖先没有设置定位,他会一直往上找,直到找到body,就以body(即整个窗口)来进行定位(即相对整个窗口来进行定位)。

      先找到谁有定位,就以谁为参考(如下案例,granpa和parent都设定位,而self是先找到parent的,所以self的定位坐标以parent为参考)。

eg:

<head>

    <meta charset="UTF-8">

    <title>第2个html文件</title>

    <style type="text/css">

        .granpa{

            width: 400px;

            height: 400px;

            border: 2px solid blue;

            margin: 0 auto;

            position: relative;

        }

        .paraent{

            width: 300px;

            height: 300px;

            border: 3px solid red;

            margin-left:10px;

            /*position: relative;*/

        }

        .self{

            width: 100px;

            height: 100px;

            background: blue;

            position: absolute;

            right: 20px;

            bottom: 30px;

        }

    </style>



</head>

<body>

    <div class="granpa">

        <div class="paraent">

            <div class="self">



            </div>

        </div>



        </div>



    </div>

</body>

                                            

十一、Html5介绍:

1.发展历程:

Html-xhtml—htnl5

2.Html5广义------html5+css+js+api

3.Html5的结构:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

 

</body>

</html>

4.html5特点:

(1)Html5语法更加宽松(下列写法均符合要求):

<meta charset="UTF-8"/>

<meta charset="UTF-8">

<meta charset="UTF-8"></meta> html5可以把所有的标签都写成双标签

(2)向下兼容----兼容比html5版本低的版本的语法。

 

5.html5新增的标签:

(1)标签具有语义化:

  • <header> 网页文档的一个区域-----网页的头部
  • <nav>代表网页的导航---链接的那行文本
  • <section>代表网页的一个块----与div相似
  • <article>网页中的文章内容
  • <aside>网页文档的测边栏
  • <footer>代表网页的页脚---版权

案例:实现如下效果

之前的html

Html5实现方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            font-size: 14px;
        }
        header{
            width: 998px;
            height: 100px;
            border: 1px solid gray;
            margin: 0 auto;
        }
        nav{
            width: 998px;
            height: 50px;
            border: 1px solid gray;
            margin: 10px auto;
        }
        section{
            width: 998px;
            height: 1000px;
            /*overflow: hidden;*/
            /*height: auto;*/
            border: 1px solid gray;
            margin: 0 auto;
        }
        footer{
            width: 100%;
            height: 86px;
            background: #121212;
            margin-top: 20px;
        }
        article{
            float: left;
            width: 600px;
            border: 1px solid blue;
            margin: 5px;
            height:600px; /*正常的文档流,height:可以不用设,会随着内容逐渐撑开;*/
        }
        aside{
            float: right;
            width: 350px;
            border: 1px solid red;
            margin: 5px;
            height:600px; /*正常的文档流,height:可以不用设,会随着内容逐渐撑开;*/
        }
    </style>
</head>

<body>
    <header></header>
    <nav></nav>
    <section>
        <article></article>
        <aside></aside>
    </section>
    <footer></footer>
</body>
</html>

 

(2)html5新增的type属性值

  • placeholder=“内容” 输入框的提示信息
  • required=“required”必填项
  • autofocus=“autofocus”自动获取焦点---光标自动定位到输入框中

 

(3)html5新增的表单属性:

email

限定用户输入的必须是email类型

url

限定用户输入的必须是url类型(即网络地址)

data

限定用户输入的必须是日期类型

month

限定用户输入端的是月类型

time

限定用户输入的必须是时间类型

week

限定用户输入的必须是周类型

number

限定用户输入端的必须是数字类型

search

限定用户输入的必须是一个搜索框

color

产生一个颜色选项

range

产生一个滑块

案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .myclass{
            border:1px solid orange;
            width: 150px;
            height: 20px;
            color: red;/*文字的颜色*/
        }
    </style>
</head>
<body>
    <form>
        用户名:<input type="text" name="username" class="myclass" placeholder="用户名/邮箱号/账号"
                   required="required" autofocus="autofocus"><br/>
        邮箱:<input type="email" name="myemail"><br/>
        网站地址<input type="url" name="address"><br/>
        日期:<input type="date" name="mydate"><br/>
        周:<input type="week" name="myweek"><br/>
        数字:<input type="number" name="mynum">个<br/>
        手机号:<input type="tel" name="mytel"><br/>
        颜色:<input type="color" name="co"><br/>
        亮度:<input type="range" name="ran"><br/>
        搜索:<input type="search" name="mysearch"><br/>
        <input type="submit" value="提交">
    </form>
</body>
</html>

十二、CSS3

Css2+新语法,对css2进行扩充 删减 优化

1.选择器

类选择器 id选择器 标签选择器

2.属性选择器:

E(自己定义)—element元素 data-----属性

什么是html元素?

<标签 属性=”属性值“></标签>-------html元素

 

E[data]

选择带有data属性的元素对象,给该元素对象加样式

E[data=”one”]

选择带有data属性的元素对象,并且属性值=”one”加样式

E[data^=”o”]

选择带有data属性的元素对象,并且属性值以o开头的加样式

E[data$=”e”]

选择带有data属性的元素对象,并且属性值以e结尾的加样式

E[data*=”n”]

选择带有data属性的元素对象,并且属性值包含n的加样式

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*.box li[class]{*/
            /*color:red;*/
        /*}*/
        /*.box li[class="col-one"]{*/
            /*color:red;*/
            /*font-size: 30px;*/
        /*}*/
        /*.box li[class^="t"]{*/
            /*color:blue;*/
            /*font-size: 30px;*/
        /*}*/
        /*.box li[class$="e"]{*/
            /*color:red;*/
            /*font-size: 30px;*/
        /*}*/
        /*注意:下方代码的优先级要比上边代码的优先级高,所以css3显示red*/
        li[class*="col-"]{
            color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li class="one">html</li>
            <li class="two">bootstrap</li>
            <li class="three">css</li>
            <li class="four">css3</li>
            <li class="col-one">js</li>
            <li class="col-two">mysql</li>
            <li id="col-md">jquery</li>

        </ul>


    </div>
</body>
</html>

3.伪类结构

(1)E----element 元素

E:first-child{}

给第一个孩子加样式

E:last-child{}

给最后一个孩子加样式

E:only-child{}

给只有一个孩子加样式

E:nth-child{n}

给第n个孩子加样式

E:nth-child(2n+1){}

E:nth-child(odd){}

给奇数孩子加样式

E:nth-child(2n){}

E:nth-child(even){}

给偶数孩子加样式

注意:上述样式的E可以为 li ,tr等

案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li:first-child{
            color:red;
        }
        li:last-child{
            color:blue;
        }
        li:only-child{
            color: green;
        }
        li:nth-child(3){
            color: orange;
        }
        li:nth-child(2n+1){
             color:yellowgreen;
         }
        li:nth-child(odd){
            color:yellowgreen;
        }
        li:nth-child(2n){
            color:orchid;
        }
        li:nth-child(even){
            color:orchid;
        }
        .boxthree table{
            width: 900px;
            border: 1px solid blue;
            /*合并表格边框线*/
            border-collapse: collapse;
        }
        .boxthree table td{
            height: 36px;
            border: 1px solid blue;
        }
        .boxthree tr:nth-child(2n+1){
            background:deepskyblue;
            /*文本颜色*/
            color: yellow;
        }
        .boxthree tr:nth-child(2n){
            background: #1d0c58;
        }
    </style>
</head>
<body>
<div class="boxone">
    <ul>
        <li class="one">html</li>
        <li class="two">bootstrap</li>
        <li class="three">css</li>
        <li class="four">css3</li>
        <li class="col-one">js</li>
        <li class="col-two">mysql</li>
        <li id="col-md">jquery</li>
        <li>php</li>
    </ul>
    <div class="boxtwo">
        <ul>
            <li>我是小鸟</li>

        </ul>
    </div>
    <div class="boxthree">
        <table>
            <tr>
                <td>编号</td>
                <td>发布内容</td>
                <td>状态</td>
            </tr>
            <tr>
                <td>编号</td>
                <td>发布内容</td>
                <td>状态</td>
            </tr>
            <tr>
                <td>编号</td>
                <td>发布内容</td>
                <td>状态</td>
            </tr>
            <tr>
                <td>编号</td>
                <td>发布内容</td>
                <td>状态</td>
            </tr>
            <tr>
                <td>编号</td>
                <td>发布内容</td>
                <td>状态</td>
            </tr>
            <tr>
                <td>编号</td>
                <td>发布内容</td>
                <td>状态</td>
            </tr>
            <tr>
                <td>编号</td>
                <td>发布内容</td>
                <td>状态</td>
            </tr>
            <tr>
                <td>编号</td>
                <td>发布内容</td>
                <td>状态</td>
            </tr>
            <tr>
                <td>编号</td>
                <td>发布内容</td>
                <td>状态</td>
            </tr>
            <tr>
                <td>编号</td>
                <td>发布内容</td>
                <td>状态</td>
            </tr>
            <tr>
                <td>编号</td>
                <td>发布内容</td>
                <td>状态</td>
            </tr>
            <tr>
                <td>编号</td>
                <td>发布内容</td>
                <td>状态</td>
            </tr>
        </table>
    </div>
</div>
</body>
</html>

 

(2)伪元素:

E:first-letter

给第一个(文字)加样式

E:first-line

给第一行(文字)加样式

E::after

在盒子里面的后面插入内容

E::before

在盒子里面的前面插入内容

案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one{
            width: 30%;
            border: 1px solid blue;
        }
        .one:first-line{
            color: red;
        }
        .one:first-letter{
            color: #38a6ff;
            font-size: 30px;
            font-weight: bold;
            float: left;
            padding: 20px;
            text-shadow: 2px 2px 2px red;
        }
        .two::after{
            content: "last";
        }
        .two::before{
            content: "before";
        }
    </style>
</head>
<body>
    <div class="one">
        登录| 客运服务 | 铁路客户服务中心_中国铁路客服服务中心
        中国铁路客户服务中心-客运中心 手机版 我的12306 未完成订单
        已完成订单(改/...3、在12306.cn网站购票、改签和退票须不晚于开车前30分钟;办理“变更到站”业务
    </div>
    <div class="two">
        滴滴答答
    </div>
</body>
</html>

取小标图片的网址:http://iconfont.cn/

案例效果:

遗憾没有实现

4.设置文本的阴影

5.设置盒子的阴影

6.圆角矩形

7.设置半透明颜色:

(1)文字颜色:color:rgba(255,0,0,0.3)

(2)背景颜色 :Background:rgba(0,0,0,0.6)

(3)背景图片的尺寸:(注意图片(不是背景的)可直接在<img>标签中设置width height)

  • background-size:宽度,高度;eg:background-size: 200px 200px;
  • background-size:cover;背景图片会把整个盒子都覆盖上(但背景图片有可能显示不全)
  • background-size:contain;背景图片只把盒子的宽或高覆盖满就停止。
案例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background: url("images/Desert.jpg");
            background-size: 200px 200px;
        }
        .one{
            width: 600px;
            height: 600px;
            margin: 100px auto;
            background: rgba(0,0,0,0.3);
        }
    </style>
</head>
<body>
    <div class="one">

    </div>
    <img src="images/Hydrangeas.jpg" alt="说明" width="100" height="100"/>
</body>
</html>
综合案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 700px;
            height: 600px;
            border: 1px solid gray;
            /*给盒子加投影*/
            box-shadow: 1px 1px 1px darkgray;
            /*将盒子设置为圆角*/
            border-radius: 10px;
            background: url("images/Koala.jpg");
            /*background-size: 500px 350px;*/
            background-size: cover;
            position: relative;
        }
        .text{
            width: 498px;
            height: 50px;
            background: rgba(255,255,255,0.3);
            position: absolute;
            bottom: 0;
            text-shadow: 1px 1px 1px red;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="text">视频广告效果可以看到</div>
    </div>
</body>
</html>

 

 

 

 

 

 

 

 

 

 

 

 

                  

 

 

           

           

 

 

           

           

 

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页

打赏作者

zhao_crystal

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值