html基础-CSS

1.id选择器

#id1{    backgroud-color:}<div id="id1">1</div>

2.类选择器

.c1{    backgroud-color:}<div class="c1">1</div>

3.标签选择器

div{    backgroud-color:}<div>1</div>

4.层级选择器

div div{#div下的div    backgroud-color:}<div>    <div>1</div></div>

5.组合选择器

.c1,.c2,.3{    backgroud-color:}<div class=“c1”>1</div><div class=“c2”>2</div><div class=“c3”>3</div>

6.属性选择器

.c1[type="text]{    backgroud-color:}<input type="text" /><input type="password"/>

7.属性
7.1边框

border{1px solid #ff6600  #dotted}

7.2.float

{float:left;float:right;clear:both;#清除浮动}

7.3.display

{#块级标签和行内标签切换display:inline;#转为行内display:block;#转为块级#行内标签无法设置宽度和高度,margin,paddingdisplay:inline-block; display:none;#标签消失}

7.4.padding margin

{margin:外边距padding:内边距}

7.5.text-align

#文字对齐{text-align:center;}

7.6 height,width,line-height

{height:100px;width:20%;line-height:20px;}

7.7.font

{font-size:20px;font-weight:700;}

8.定义整体宽度

body{    width:980px;    margin:0 auto;}

9.css重用

<style>.c{    重用}.c1{    独有}.c2{    独有}<div class="c c1"></div>#应用c和c1的样式<div class="c c2"></div>#应用c和c2的样式</style>

10.自适应media

@media (min-width: 992px){}

11.position
11.1.position:fixed;固定模块

{position:fixed;top:0;left:0;bottom:0;right:0;}

11.2.position:absolute;#绝对定位

{position:absolute；}

11.3.position：relative+absolute

<div style="position：relative">    <div style="position：absolute">11</div>#可以控制内部div相对于上层div移动</div>

11.4.z-index控制显示层级,越大越往上

{<div style="position：relative;z-index:2"></div>}

12.opaciy透明度

{opacity:0.3;}

13.overflow内容超出隐藏或呈现滚动条

{    overflow:hidden;    overflow:auto}

14.:hover用于鼠标悬浮后样式改变
15.background-img，background-repeat，background-position-x,background-position-y使用

#使用了postion，background，display属性<div style="position:relative;height:35px;width:400px;">    <input type="text" style="height: 35px;width: 340px;padding-right: 60px" />    <span style="position:absolute;right:-15px;top:-10px;background-image: url(11.png);background-size:100px 60px;display: inline-block; width: 100px;height: 60px;"></span></div>