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>

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

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

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

<div></div>

<div>
<span>大师兄</span>
</div>

<div class="c2">
<span>大师兄</span>
</div>

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

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

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

<link rel="stylesheet" href="ss1.css">
<style>
.c1{
background-color: pink;
height:100px;
width:100px;
}
</style>

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

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

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

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

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

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

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

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


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

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

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


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

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

<input type="button" style="cursor: pointer" value="鼠标移动的小手">
<input type="button" style="cursor: move" value="元素移动">
<input type="button" style="cursor: crosshair" value="截图">

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

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

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

<div style="height: 100px;width: 100px;border: 1px red solid;overflow: hidden">
<img src="http://ui.imdsx.cn/static/image/dsx.jpg">
</div>

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

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


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

<div id="i5"></div>
<div id="i6"></div>
</body>
</html>