html基础之css标签

css style: 里面的写的就叫做css，每一个样式的间隔用英文分号，全部相同的时候引用class。

css有三种写法：

1.在head标签中增加style标签，在style标签中去写css样式；

2.在标签当中增加style属性，在属性当中写css样式；

3.通过link标签引入写好的css样式表<link rel="stylesheet" href="xxx.css">

css选择器：

1.id选择器；

2.class选择器；

3.标签选择器；

4.层级选择器（空格）；

5.组合选择器（逗号）；

6.属性选择器（中括号）；

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>双鱼座</title>

    <style>

        /* id选择器 --> */

        #i1{

            height: 100px;

            width: 100px;

            background-color: red;

        }

        /* class选择器 最常用 */

        .c1{

            height: 100px;

            width: 100px;

            background-color: blue;

        }

        /* 标签选择器 */

        span{

            color: red;

            background-color: blue;

        }

        div{

            height: 100px;

            width: 100px;

            background-color: deeppink;

        }

        /* 层级选择器 组合选择器  div标签下面所有span标签颜色改变 层级通过空格*/

        div span{

            background-color: greenyellow;

        }

        /* class 层级选择器 层级通过空格*/

        .c2 span{

            background-color: red;

        }

        /* id 层级选择器 层级通过空格*/

        #i2 span{

            background-color: aqua;

        }

        /* 组合选择器 id i3 i4 i5 共用一套css样式 组合 通过逗号*/

        #i3,#i4,#i5{

            height: 150px;

            width: 150px;

            background-color: green;

        }

        /* 组合选择器 class c3 c4 c5 共用一套css样式 组合 通过逗号*/

        .c3,.c4,.c5{

            height: 100px;

            width: 100px;

            background-color: chartreuse;

        }

        /* 属性选择器 对选择到的标签 在通过属性进行筛选 可以和层级选择器连用*/

        div[name='dsx']{

            background-color: chartreuse;

        }

    </style>

</head>

<body>

    <!--选择器 一个html页面中不可以存在相同的id-->

    <div id="i1"></div>

    <!--class选择器 以点来定位-->

    <div class="c1"></div>

    <!-- 全局标签选择器 -->

    <span>标签选择器</span>

    <!--标签选择器 当前html页面的所有div都会受到影响-->

    <div></div>

    <!--层级选择器  组合标签选择器-->

    <div>

        <span>大师兄</span>

    </div>

    <!--层级选择器 class选择器下的span标签 -->

    <div class="c2">

        <span>大师兄</span>

    </div>

    <!--层级选择器 id选择器下的span标签 -->

    <div id="i2">

        <span>哈哈哈哈哈</span>

    </div>

    <!--id组合选择器 对这三个div进行同样颜色高度宽度的css样式附着，可以用#i3,#i4,#i5{}-->

    <div id="i3"></div><br>

    <div id="i4"></div><br>

    <div id="i5"></div>

    <!--class组合选择器-->

    <div class="c3"></div><br>

    <div class="c4"></div><br>

    <div class="c5"></div>

    <!--属性选择器-->

    <div name="dsx">属性选择器</div>

</body>

</html>

css样式的优先级

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>
    <!-- 引入css样式 -->

    <link rel="stylesheet" href="ss1.css">

    <style>

        .c1{

            background-color: pink;

            height:100px;

            width:100px;

        }

    </style>
    <!-- 引入css样式 -->

    <link rel="stylesheet" href="ss2.css">

</head>

<body>

    <div class="c1" style="background-color: blue;height:100px;width:100px"></div>

</body>

</html>

ss1.css文件中的样式如下：

.c1{

    background-color: black;

    height: 100px;

    width: 100px;

}

ss2.css文件中的样式如下：

.c1{

    background-color: green;

    height: 100px;

    width: 100px;

}

四个不同的css样式运用到了同一个标签中，从标签为基准，由下到上依次查找。浏览器所渲染的着色顺序为blue-->green-->pink-->black

height，高度

width，宽度

background-color，背景色

border，边框属性

font-size，字体大小

font-weight，字体加粗，font-weight:字体加粗 bold:粗体 700 bolder:更粗字体 lighter:更细字体 normal:默认值 400 inherit:从父类继承字体粗细

text-align，水平文本对齐方式，left:文本左对齐 right:文本右对齐 center:中间对齐 inherit:父类继承

line-height，垂直文本对齐方式，line-height的属性直接对应外层div的宽度就可以

float，浮动，块级标签浮动后相当于分层，通过浮动可以将块及标签放到一行，相当于不同层，但是超过100%的宽度就会换行，超过100%的宽度，是相对于外层div来判断的。 none:默认不浮动、inherit:父类继承

display，展示属性，块级标签和行内标签之间切换的属性 display:inline，块级标签转换为行内标签 display:block 行内标签转换为块级标签行内标签无法设置无法设置高度、宽度、padding、margin，可以通过display的display:inline-block，行内标签的自己多大就占多大的特性又有块级标签使用宽、高、内外边距的特性

margin-top，外边距，自己针对外围的div产生变化外边距撑大外层 top left right bottom

padding-top，内边距，自身的边距增加 top：从上到下增加内边距扩大自身 bottom：从下增加 left：从左增加 right：从右增加

cursor，cursor:pointer 鼠标的小手 cursor:move 有很多种样式

hover，hover属性是当鼠标移动到上面后，设置其样式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .c2:hover{

            background-color: red;

        }

    </style>

</head>

<body>

    <!-- height：高 width：宽 -->

    <div style="height: 100px;width: 100px;background-color: chartreuse"></div>

    <!--border：宽度 实线还是虚线 颜色 -->

    <div style="border: 1px solid red"></div>

    <!-- 字体大小 font-size: 14px font-weight: 字体加粗 bold-->

    <div style="height: 100px;width: 100px;font-size: larger;font-weight: bolder">字体大小</div>

    <!-- 水平文本对齐方式   平行方向左右居中 text-align: center -->

    <div style="height: 100px;width: 100px;border: 1px solid red;text-align: center"  >双鱼座</div>

    <!--垂直文本对齐方式   line-height对应外层div的宽度就可以-->

    <div style="height: 100px;width: 100px;border: 1px solid red;text-align: center;line-height: 100px"  >双鱼座</div>

    <!-- float 浮动 块级标签浮动后 相当于分层 都像左浮动 块级标签会便在一行 如果超过宽度超过100则会换行-->

    <div style="height:48px;width: 100px;border: 1px red solid;background-color: red;float: left"></div>

    <div style="height:48px;width: 100px;border: 1px red solid;background-color: black;float: left"></div>

    <!-- display 属性 展示属性 块级标签和行内标签之间切换的属性 display:inline 块级标签转换为行内标签 -->

    <div style="height: 100px;width: 100px;background-color: red;display: inline"></div>

    <!-- 把块级标签变为了行内标签。因为行内标签不可以应用宽 高 以及 外边距 内边距 -->

    <!-- inline-black既是块又是行内，就有多大占多大，如果是块级标签就占整行 -->

    <div style="height: 100px;width: 100px;background-color: red;display: inline-block"></div>

    <!-- display：block 内联标签转换为块及标签-->

    <span style="height: 100px;background-color: red;display: block;">内联标签</span>

    <!-- 块标签转行内标签  block-----inline-block -->

     <span style="height: 100px;width: 100px;background-color: chartreuse;display: inline-block"></span>

    <!-- 外边距 margin 内边距 padding-->

    <!-- margin 外边距 自己针对外围的div产生变化 外边距撑大外层 -->

    <div style="height: 100px;width: 100%;border: 1px red solid">

        <div style="height: 40px;width: 100%;background-color: red;margin-top: 10px"></div>

    </div>

    <!-- padding 内边距 自身的边距增加 从上到下增加 内边距扩大自身 -->

    <div style="height: 100px;width: 100%;border: 1px red solid">

        <div style="height: 40px;width: 100%;background-color: red;padding-top: 10px"></div>

    </div>

     <!--cursor 一些不同的光标 cursor:pointer 鼠标的小手 cursor:move 元素移动 cursor: crosshair截图-->

    <input type="button" style="cursor: pointer" value="鼠标移动的小手">

    <input type="button" style="cursor: move" value="元素移动">

    <input type="button" style="cursor: crosshair" value="截图">

    <!--hover属性是当鼠标移动到上面后，设置其样式-->

    <div class="c2" style="width: 100px;height: 100px;border: 1px red solid;color: white">双鱼座</div>

</body>

</html>

position，分层

position：fixed 固定在窗口的某个位置 top：距离顶部多少像素 left right bottom 见body.html

position：relative 与 position：absolute(绝对定位，单用没什么作用结合relative才牛逼) absolute的定位针对于于relative的定位单独relative没有任何意义见body.html

z-index，分层后通过z-index来记录层级关系越大越在前面

overflow，overflow属性设置当div内的内容溢出div的高宽时，如何处理默认会出现在元素框之外 hidden：溢出部分截取掉 scroll：超出就出现滚动条

background

background-image，背景图片，图片大小如果小于div的大小。则无限堆叠水平垂直都堆叠

background-repeat，属性对是否堆叠进行设置 no-repeat(不堆叠) repeat-y(纵向堆叠) repeat-x(横向堆叠)

background-position，针对div设置图片展示的位置。background-position-y: 10px 纵向移动图片 background-position-x: 10px 横向移动图片。也可以不写x或y，默认第一个为x的值第二个位y的值，background-position:10px 10px

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        /*background-image：背景图片*/

        #i1{

            height: 500px;

            width: 500px;

            border: 1px red solid;

            background-image: url('http://ui.imdsx.cn/static/image/dsx_Small.jpg')

        }

        /*图片大小如果小于div的大小。则无限堆叠 水平垂直都堆叠。*/

        /*可通过background-repeat属性对是否堆叠进行设置 no-repeat(不堆叠) repeat-y(纵向堆叠) repeat-x(横向堆叠)*/

        #i2{

            height: 500px;

            width: 500px;

            border: 1px red solid;

            background-image: url('http://ui.imdsx.cn/static/image/dsx_Small.jpg');

            background-repeat:no-repeat

        }

        #i3{

            height: 500px;

            width: 500px;

            border: 1px red solid;

            background-image: url('http://ui.imdsx.cn/static/image/dsx_Small.jpg');

            background-repeat:repeat-x

        }

        #i4{

            height: 500px;

            width: 500px;

            border: 1px red solid;

            background-image: url('http://ui.imdsx.cn/static/image/dsx_Small.jpg');

            background-repeat:repeat-y

        }

        /*background-position 设置背景图像的起始位置，可用于图片的切片，下面是两种方式*/

        #i5{

            height: 20px;

            width: 20px;

            border: 1px red solid;

            background-image: url('http://ui.imdsx.cn/static/image/icon.png');

            background-repeat: no-repeat;

            background-position:

        }

        #i6{

            height: 20px;

            width: 20px;

            border: 1px red solid;

            background-image: url('http://ui.imdsx.cn/static/image/icon.png');

            background-repeat: no-repeat;

            background-position-x: ;

            background-position-y:

        }

    </style>

</head>

<body style="margin: 0 auto">

<!--position:fixed 绝对定位-->

<div style="background-color: red;height: 48px;top: 0;left:0;right:0;position: fixed"></div>

<div style="height: 10000px;width: 100%;border: 1px red solid;margin-top: 48px"></div>

<!--absolute的定位针对于于relative的定位 单独relative没有任何意义-->

<div style="width: 200px;height: 200px;border: 1px red solid;position: relative">

    <div style="height: 30px;width: 30px;background-color: red;position: absolute;bottom: 0;right: 0"></div>

    <div style="height: 30px;width: 30px;background-color: blue;position: absolute;bottom: 0;left: 0"></div>

    <div style="height: 30px;width: 30px;background-color: yellow;position: absolute;top: 0;right: 0"></div>

    <div style="height: 30px;width: 30px;background-color: green;position: absolute;top: 0;left: 0"></div>

</div>

<!--overflow  超过div部分隐藏起来-->

<div style="height: 100px;width: 100px;border: 1px red solid;overflow: hidden">

    <img src="http://ui.imdsx.cn/static/image/dsx.jpg">

</div>

<!--当外层div大于图片时，scroll还会加上滚动条，只是无法滚动而已，而auto就不会，所以应该用auto-->

<div style="height:800px;width: 800px;border: 1px red solid;overflow: scroll">

    <img src="http://ui.imdsx.cn/static/image/dsx.jpg">

</div>

<div style="height: 800px;width: 800px;border: 1px red solid;overflow: auto">

    <img src="http://ui.imdsx.cn/static/image/dsx.jpg">

</div>

<!--background-image：背景图片-->

<div id="i1" ></div>

<!--图片大小如果小于div的大小。则无限堆叠 水平垂直都堆叠。-->

<!--可通过background-repeat属性对是否堆叠进行设置 no-repeat(不堆叠) repeat-y(纵向堆叠) repeat-x(横向堆叠)-->

<div id="i2" ></div>

<div id="i3"></div>

<div id="i4"></div>

<!--background-position 设置背景图像的起始位置，可用于图片的切片-->

<div id="i5"></div>

<div id="i6"></div>

</body>

</html>

巴特西

html基础之css标签

最新文章

热门文章