css

程序员文章站 2022-05-26 22:22:33

...

一、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>

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

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>第2个html文件</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>

（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{color：blue} /*后代元素选择器*/

四、伪类：------锚(即指链接)<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（颜色）;

.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>

综合案例

css

<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>

<title>第一个html</title>

.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>

</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)浮动的特点：

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

css

相应代码：

<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

盒子模型的综合案例

css

<!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.盒子的深入

想要的效果

css

可能出现的结果：

css

假设：

父盒子(黑色盒子)：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，如果有叠加，取叠加部分的最大值。

css

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

css

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{背景颜色/背景图片；文本的大小；文本的颜色；文本的字体；行间距}

把整个页面划分结构

css

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” 一般都指的是导航
注意案例中去掉链接下划线的操作

css

<!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选择器
权重	1	10	100

(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>为行元素，设置固定定位之后，就变成了块儿元素)

案例：

css

<!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 相对定位

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

案例：

css

<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>

<head>

<title>Title</title>

</head>

<body>

</body>

</html>

4.html5特点：

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

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

5.html5新增的标签：

(1)标签具有语义化：

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

案例：实现如下效果

css

之前的html

css

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”自动获取焦点---光标自动定位到输入框中

css

(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/

案例效果：

css

遗憾没有实现

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>

上一篇： PHP 运行时漏洞检测

下一篇： CSS