HTML基础之CSS

HTM的衣服

CSS选择器

css 9大选择器:

1、id选择器

#i1{

  height: 48px;  

  background-color: red;

}

<body>

<div id="i1"><?div>

</body>

2、class选择器

/*class选择器*/
/*.c1{*/
/*height: 100px;*/
/*width: 100px;*/
/**/
/*}*/

3、标签选择器

/*div {*/
/*height: 100px;*/
/*width: 100px;*/
/**/
/*}*/

4、id层级选择器 层级通过空格

#i2 div{

background-color: black;
height: 48px;
}
<!--层级选择器 id选择器下的div标签-->
<div id="i2">
<div></div>
</div>

5、class层级选择器 

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

.c1 div{
background-color: #336699;
height: 48px;
}

6、标签层级选择器 

/*div span {*/
/*height: 100px;*/
/*width: 100px;*/
/**/
/*}*/

7、id组合选择器

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

id z1 z2 z3 共用一套css样式 组合 通过逗号分隔*/
#z1,#z2,#z3{
background-color: chocolate;
height: 48px;
}
<div id="z1"></div>
<div id="z2"></div>
<div id="z3"></div>

8、class组合选择器

/* 组合选择器 class s1 s2 s3 共用一套css样式 组合 通过逗号*/ 

.s1,.s2,.s3{
background-color: darkmagenta;
height:48px;
}
<!-- css class引用-->
<div id="s1"></div>
<div class="s2"></div>
<div class="s3"></div>

9、属性选择器

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

div[s='dsx']{
background-color: darkred;
height: 48px;
}
<div s="dsx"></div>
<div name="nn"></div>
 
css优先级
<!--css样式优先级1、标签中的属性最高其他的从下往上找-->
!--行内标签不能显示宽高只能加数字或者转成块级标签-->
引入方式:
1、body中任意标签中加style属性
2、header中的<style>#i1{ }</style>中配合选择器使用
3、header中<link rel="stylesheet" href="a.css">
<div class="a c b"></div>可以一次引用多个class

CSS属性

 height、width、font-size、font-weight、text-align、line-height、float、display、margin、padding

  <!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="margin: 0;">
<!-- 边框 border:宽度 实线还是虚线 颜色-->
<div style="height: 48px;border: 1px solid red"></div>
<!-- 边框 border 上下左右边框 都可单独配置 -->
<div style="height: 48px;border-left: 1px dotted red"></div>
<!-- height:高 width:宽 -->
<div style="height: 48px;width: 48px;border: 1px solid red"></div>
<!-- 宽高的设定可以是指定的像素 也可以百分比 -->
<div style="height: 48px;width: 80%;border: 1px solid red"></div>
<!-- 字体大小 font-size: 14px font-weight: 字体加粗 bold-->
<div style="height: 48px;width: 80%;border: 1px solid red;font-size: 14px;font-weight: bold"></div>
<!-- 平行方向左右居中 text-align: center -->
<div style="height: 48px;width: 80%;border: 1px solid red;font-size: 14px;text-align: center">大师兄</div>
<!-- 垂直方向居中 line-height:垂直方向要根据标签高度-->
<div style="height: 48px;width: 80%;border: 1px solid red;font-size: 14px;text-align: center;line-height: 48px">大师兄</div>
<!-- float 浮动 块级标签浮动后 相当于分层 都像左浮动 块级标签会便在一行 如果超过宽度超过100则会换行-->
<div style="width: 20%;float: left">1</div>
<div style="width: 20%;float:left;">2</div>
<div style="width: 20%;float:right;">3</div>
<!-- 块及标签的占满100%是相对来说,相对与他外层的div -->
<div style="width: 400px;height: 400px;border: 1px solid black;">
<div style="width: 100px;height: 40px;float:left;"></div>
<div style="width: 100px;height: 40px;float:left;"></div>
<div style="width: 100px;height: 40px;float:left;"></div>
<div style="width: 100px;height: 40px;float:left;"></div>
<div style="width: 100px;height: 40px;float:left;"></div>
</div>
<!-- display 属性 展示属性 块级标签和行内标签之间切换的属性 display:inline 块级标签转换为行内标签-->
<div style="height: 100px;display: inline">外联标签</div>
<!-- display:block 内联标签转换为块及标签-->
<span style="height: 100px;display: block;">内联标签</span>
<!-- 行内标签:无法设置高度、宽度、padding、margin-->
<!-- 块级标签:无法设置高度、宽度、padding、margin-->
<span style="width: 100px;height: 100px;">大师兄</span>
<!-- 通过display:inline-block 可以完美的解决这个问题 &nbsp;他既有行内标签的自己多大就占多大的特性 又有块级标签使用 宽、高、内外边距的特性-->
<span style="width: 100px;height: 100px;display: inline-block;">大师兄</span>
<!-- 让标签消失 &nbsp;display:none-->
<span style="display: none">我不显示的</span>
<!-- 外边距 margin 内边距 padding-->
<!-- margin 外边距 自己针对外围的div产生变化 外边距撑大外层 -->
<div style="border: 1px solid red;height: 100px">
<div style="height: 70px;margin-top: 30px"></div>
</div>
<!-- padding 内边距 自身的边距增加 从上到下增加 内边距扩大自身 -->
<div style="border: 1px solid red;height: 100px">
<div style="height: 70px;padding: 10px">内边距增加</div>
</div>
</body>
</html>
 

HTML

<p></p> 段落标签

</ br> 换行

年轻,就是拿来折腾的。让自己具备独立生活的能力,具备一技之长的资本,是需要无数个夜晚的静思,无数寂寞时光的堆积而成的。

别在最该拼搏的年纪选择稳定,世界上最大的不变是改变,只有每天进步,才能拥抱生命的无限可能!

你以为你给对方留了电话存了微信,应该彼此也能互相帮忙,却忘记了一件很重要的事情,只有关系平等,才能互相帮助。

不要为了户口丢掉生活,为了稳定丢掉青春,为了平淡丢掉梦想,因为你所谓的稳定,不过实在浪费生命。

真正的勇者不是狼狈的逃脱,而是用闲暇时间,磨练自己。

只有等现实的日子富足了,能力够强了,才可以去追求那些美好的生活状态,才该去追求那些伟大的梦。否则那些梦幻般的生活,都只是空中阁楼,不堪一击。

生活是自己的,自己都不求进取,凭什么让别人给你美好的未来?

<h1></h1> 标题标签h1

<h2></h2> 标题标签h2

<h3></h3> 标题标签h3

<h4></h4> 标题标签h4

<h5></h5> 标题标签h5
<h6></h6> 标题标签h6

<div> </div>

块级标签,整满整行 div是HTML中出场率的标签,特点是没有任何属性,可以通过css进行装饰后成为任何一种标签

 

<span> </span>

行内标签的代表,什么属性都不带,可以通过css进行装饰后成为任何一种标签

污冰你写作业了吗?

<input />

文本框标签,包含多个属性,text、password、button、checkbox、radio、file、submit、reset

  

污冰女朋友的选择标准

男的 1米4 36C 男 

上传文件

  

<form> </form>

表单标签可以理解为载体,承载着所有要像后端提交的数据,通常与input连用,表单提交数据分为get提交和post提交,get提交在url上挂参数,post提交在body中

    

<label> </label>

label 标题标签 与input联合运用,增加input的点击范围 可直接点击文字就输入 for:映射到input的id

 

<textarea> </textarea>

多行文本 textarea 默认值在标签之间

<select></select> <option></option>

select option 下拉框标签 默认选择在option上增加selected size属性显示多少个 多选属性:multiple

单选
  
多选
  
超过4个就出滚动条
 

<select></select> <optgroup></optgroup>

对下拉选项进行分组optgroup 分组,label属性是组的名字,不可选择

<a> </a>

超链接 href属性为跳转的地址,target属性为以什么方式跳转"_blank"新tab跳转,a标签还可以做锚点,通过id进行对应关系的映射 去掉a标签的下划线通过属性text-decoration:none

<img />

img 图片标签 src:图片的位置 图片跳转通过a标签 alt:当图片加载失败时显示alt的文案 title:鼠标悬浮在图片上显示的文字

大师兄

<ul></ul>

列表 ul li · 形式的列表

  • 第一列
  • 第二列
 

列表 ol li 数字形式的列表

  1. 第一列
  2. 第二列

分层列表 dl dd内层 dt外层

黑龙江
哈尔滨
牡丹江
北京
北京

<table> </table>

table 表格标签 thead:表头 th:表头行 tbody:内容 tr:行 td:列 boder:表格的边框 coslpan:td占几列 rowspan:tr占几列

ID用例名称执行人编辑
1 table表格测试 大师兄 详情 编辑
1 table表格测试 详情 编辑
1 table表格测试 大师兄 详情 编辑
1 大师兄 详情 编辑

CSS

CSS

css style: 里面的写的就叫做css 每一个样式的间隔用; 全部相同的时候引用class

style="height: 48px; margin-top: 5px; font-family: "Microsoft YaHei"; font-size: medium;">

ID选择器

# 代表通过id选择器查找

#i1{height: 48px;}

class选择器

. 代表通过class选择器查找

.menu{height: 48px;}

标签选择器

标签名 代表通过标签选择器查找

span {color: red;}

标签层级选择器

标签内的标签 通过标签+空格+标签 代表通过标签选择器查找 例:span标签下面所有div标签颜色改变

span div{color: aqua;}

CLASS层级选择器

通过CLASS标签选择器定位第一层,在通过层级选择器定位第二层

.c1 div{height: 48px;}

ID层级选择器

通过ID标签选择器定位第一层,在通过层级选择器定位第二层

#i2 div{height: 48px;}

ID组合选择器

ID组合选择器,应用于以id选择器进行css样式设置的,可以通过id z1 z2 z3 共用一套css样式 组合 通过逗号间隔

#z1,#z2,#z3{height: 48px;}

CLASS组合选择器

CLASS组合选择器,应用于以CLASS选择器进行css样式设置的,可以通过CLASS s1 s2 s3 共用一套css样式 组合 通过逗号间隔

.s1,.s2,.s3{height:48px;}

属性选择器

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

div[s='dsx']{height: 48px;}

CSS优先级

标签中style优先级最高,其次在代码中就近找,也就是重下往上找

 

引入CSS样式表

CSS可以写在三个地方,分别是1、标签中增加属性style,2、header中添加标签style标签,在标签中添加CSS,3、引入CSS样式表,实际就是将header中的style标签复制到一个以css为结尾的文件中,通过在header中添加link标签,引入css样式表<link rel="stylesheet" href="tmp.css">

 

height

高度

width

宽度

font-size font-weight

font-size:字体大小 px font-weight:字体加粗

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

字体大 字体粗

text-align

text-align 水平文本对齐方式

left:文本左对齐 right:文本右对齐 center:中间对齐 inherit:父类继承

1

line-height

line-height 垂直文本对齐方式

line-height的属性直接对应外层div的宽度就可以

1

float

float 浮动 块级标签浮动后 相当于分层

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

左边
并列左边
最右边
 

display

display 展示属性

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

外联标签
内联标签大师兄 大师兄

margin

margin 外边距

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

 

padding

padding 内边距

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

内边距增加

position 分层

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

eg:

<!--<body  style="margin: 0">-->
<!--&lt;!&ndash;position 分层111&ndash;&gt;-->
<!--&lt;!&ndash;position:fixed 固定在窗口的某个位置&ndash;&gt;-->
<!--<div style="height:48px;position: fixed;top: 0;left: 0;right: 0"></div>-->
<!--<div style="height: 1000px;margin-top:48px">44444</div>-->
<!--</body>-->
<!--relative 与 position:absolute(绝对定位,单用没什么作用 结合relative
才牛逼) absolute的定位针对于于relative的定位 单独relative没有任何意义 见body.html-->
<!--<div style="height: 500px;width:500px;border: 1px solid;position: relative">-->
<!--<div style="height: 50px;width: 50px;position: absolute;right: 0;bottom: 0"></div>-->
<!--<div style="height: 50px;width: 50px;position: absolute;right: 0;top: 0"></div>-->
<!--<div style="height: 50px;width: 50px;position: absolute;left: 0;top: 0"></div>-->
<!--<div style="height: 50px;width: 50px;position: absolute;left: 0;bottom: 0"></div>-->

<!--</div>-->
<!--<div style="height: 100px;width: 100px;position: absolute;top: 100px;left: 100px"></div>-->
<!--<div style="height: 1000px;margin-top:48px">44444</div>-->

<!--z-index 层级关系
分层后通过z-index来记录层级关系 数值越大越在前面-->
<div style="height: 100px;width:100px;position: relative">
<div style="height: 100px;width: 100px;background-color: blue;position: absolute;z-index:2"></div>
<div style="height: 100px;width: 100px;background-color: red;position: absolute;z-index: 1"></div>
</div>
<!--cursor
cursor 一些不同的光标 cursor:pointer 鼠标的小手 cursor:pointer小手,cursor:move (移动),
cursor:crosshair(截图)有很多种样式 知道干嘛的就行了-->
<!--<input type="buttom"value="登陆"style="cursor: pointer">-->

<!--overflow:auto当内容超出后自动出现滚动条,hidden溢出的部分自动截取掉
scroll强制添加滚动条-->
<!--<div style="height: 100px;width: 100px;overflow: auto">-->
<!--<img src="dsx.jpg">-->
<!--</div>-->
背景图:
<style>
.c1{
height: 20px;
width: 20px;
border: 1px solid;
background-image: url('http://ui.imdsx.cn/static/image/icon.png');
/*讲div看做一个窗户,图片在窗户外移动用于切图*/
/*background-position-y: 10px 纵向移动图片 background-position-x: 10px 横向移动图片。也可以不写x或y,默认第一个为x的值 第二个位y的值,background-position:10px 10px。
可以通过background直接简写,background 简写 参数分别为 颜色 背景图 postion横向 纵向 是否堆叠*/
background-position-x: 10px;
background-position-y: 10px;
}
</style>

</head>
<body>
<!--background-image背景图是堆叠的;background-repeat: no-repeat不堆叠,repeat-x横轴堆叠-y纵轴堆叠-->
<!--<div style="height: 1000px;width:100%;background-image: url('dsx.jpg');background-repeat: repeat-x"></div>-->
posted @ 2018-04-27 17:16  D.零下的小书屋  阅读(277)  评论(0编辑  收藏  举报