HTML基础之CSS

HTM的衣服

CSS选择器

css 9大选择器：

1、id选择器

#i1{

　　height: 48px;　　

　　background-color: red;

}

<body>

</body>

2、class选择器

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

3、标签选择器

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

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

#i2 div{

background-color: black;

height: 48px;

}

</div>

5、class层级选择器

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

.c1 div{

background-color: #336699;

height: 48px;

}

6、标签层级选择器

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

7、id组合选择器

id z1 z2 z3 共用一套css样式组合通过逗号分隔*/

#z1,#z2,#z3{

background-color: chocolate;

height: 48px;

}

8、class组合选择器

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

.s1,.s2,.s3{

background-color: darkmagenta;

height:48px;

}

9、属性选择器

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

div[s='dsx']{

background-color: darkred;

height: 48px;

}

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>

<head>

<title>Title</title>

</head>

</div>

<span style="display: none">我不显示的</span>

</div>

<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

<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 数字形式的列表

第一列
第二列

分层列表 dl dd内层 dt外层

黑龙江: 哈尔滨; 牡丹江

北京: 北京

<table> </table>

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

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

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:父类继承

line-height

line-height 垂直文本对齐方式

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

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.零下的小书屋阅读(276) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

D.零下的小书屋

学而废者，不若不学而废者。学而废者恃学而有骄，骄必辱。不学而废者愧己而自卑，卑则全勇多于人谓之暴，才多于人谓之妖.

HTML基础之CSS

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

<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 数字形式的列表

分层列表 dl dd内层 dt外层

<table> </table>

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

CSS

CSS

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

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样式表

height

高度

width

宽度

font-size font-weight

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

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

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

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

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

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

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

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

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

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

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

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

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

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