前端基础之css
Css
1.css选择器
通过选择器定位然后装饰。
写css样式的三个地方：1.首先在<head>里面可以<style>中写入2.可以在标签上写入增加style 属性3. Link 中rel href=“xx.css”
都存在时的引用关系 以标签为基准由下到上依次查找
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<link rel="stylesheet" href="xx.css">--> 第三种
<style> ####<style>标签就是用来写css样式的 第一种
/*#i1{*/ #进行css样式附着
/*height: 100px;*/
/* 100px;*/
/*background-color: red;*/
/*}*/
/*.c1{*/
/*height: 100px;*/
/* 100px;*/
/*background-color: black;*/
/*}*/
/*div {*/
/*height: 100px;*/
/* 100px;*/
/*background-color: pink;*/
/*}*/
/*div span{*/ #div中span附着
/*background-color: blue;*/
/*}*/
/*.c2 span{*/
/*background-color: aqua;*/
/*}*/
/*#i2 span{*/
/*background-color: antiquewhite;*/
/*#i3,#i4,#i5{*/ ####多个不同id附着同一样式 用逗号连接
/*background-color: red;*/
/*height: 100px;*/
/* 100px;*/
/*}*/
/*.c1{*/ ##### class选择器 以点来定位
/*background-color: black;*/
/*height: 100px;*/
/* 100px;*/
/*}*/
div[name='dsx']{ ###标签选择器针对当前所有div有效 属性选择器
background-color: aqua;
}
</style>
</head>
<body>
<!--id选择器 一个html页面中 不可以存在相同id id以#-->
<!--<div ></div>-->
<!--class选择器 以点来定位-->
<!--<div class="c1"></div>-->
<!--标签选择器 当前html页面的所有div都会受到影响-->
<!--<div></div>-->
<!--标签层级选择器 -->
<!--<div>-->
<!--<span>大师兄</span>--> #如果行内标签无内容不可附着
<!--</div>-->
<!--class 层级选择器-->
<!--<div class="c2">-->
<!--<span>大师兄</span>-->
<!--</div>-->
<!--id 层级选择器-->
<!--<div >-->
<!--<span>22222</span>-->
<!--</div>-->
<!--<div ></div><br>-->
<!--<div ></div><br>-->
<!--<div ></div>-->
<!--<div class="c1"></div><br>-->
<!--<div class="c1"></div><br>-->
<!--<div class="c1"></div>-->
<div name="dsx">2222</div>
<!--<input type="text" placeholder="ssss" name="" value="" dsx="xxxx">-->
</body>
</html>
#####css选择器的优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="s3.css">
<style>
.c1{
background-color: pink;
height: 100px;
100px;
}
</style>
<link rel="stylesheet" href="s3.1.css">
</head>
<body>
<!--从标签为基准 由下到上一次查找-->
<div class="c1" style="background-color: blue;height: 100px; 100px"></div>
</body>
</html>
2.css一些基本样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*.c1{*/
/*height: 100px;*/
/* 100px;*/
/*border: 1px red solid;*/
/*text-align: center;*/ ###水平居中
/*line-height: 100px*/ ###垂直的大小与高度相同，根据外部大小进行了除2操作
/*}*/
/*.c2:hover{*/
/*background-color: red;*/
/*color: black;*/
/*}*/
#id{
border: 1px red solid;
height: 20px;
20px;
background-image: url('http://ui.imdsx.cn/static/image/icon.png');
background-repeat: no-repeat;
background-position: 0 0;
}
</style>
</head>
<body style="margin: 0 auto">
<!--<div style="height: 100px; 100px"></div>--> ###直接style样式
<!--<div style="height: 100px; 100px;border: 1px red solid;font-weight: bolder;font-size: 50px">1</div>-->###solid实线边框 字体宽度和字体大小
<!--<div class="c1">1</div>-->
<!--<div style=" 100px;height: 48px;float: left"></div>-->#####通过filoat的浮动操作，这里向左飘就可以并排（所有都向左飘）
<!--<div style=" 100px;height: 48px; float: left "></div>-->
<!--把块级标签变为了行内标签 行内标签不可以应用宽 高 以及 外边距 内边距-->
<!--<div style="height: 100px; 100px;display: inline-block">1</div>-->##### display属性inline-block把块级标签变为了行内标签，实际变成行内的块 可以用长宽。Black可以将span之类的转为块级标签。
<!--<div style="height: 100px; 100px;display: inline-block">1</div>-->
<!--<div style="height: 100px; 100px;">1</div>-->
<!--<div style=" 100%;height: 100px;border: 1px red solid">-->
<!--<div style=" 100%;height: 40px;background-color: blue;margin-top: 10px"></div>-->##宽度可这么写，margin-top外边距离上方div的距离
<!--</div>-->
<!--<div style=" 100%;height: 100px;border: 1px red solid">-->
<!--<div style=" 100%;height: 40px;padding-top: 10px"></div>-->
<!--</div>-->
<!--<input type="button" value="提交" style="cursor: pointer" >-->
<!--<div class="c2" style=" 100px;height: 100px;border: 1px red solid;color: white">双鱼座</div>-->
<!--<div style="background-color: aquamarine;position: fixed;top: 0;left: 0;right: 0;height: 48px"></div>-->
<!--<div style="height: 10000px; 100%;border: 1px red solid;margin-top: 48px">1111111</div>-->
<!---->
<!--<div style=" 200px;height: 200px;border: 1px red solid;position: relative">-->
<!--<div style=" 200px;height: 200px;position: absolute;z-index: 999"></div>-->
<!--<div style=" 200px;height: 200px;position: absolute;z-index: 888"></div>-->
<!--<div style=" 200px;height: 200px;position: absolute"></div>-->
<!--<div style=" 200px;height: 200px;position: absolute"></div>-->
<!--</div>-->
<!--超过div范围则隐藏掉-->
<!--<div style=" 800px;height: 800px;border: 1px red solid;overflow: scroll">-->
<!--<img src="http://ui.imdsx.cn/static/image/dsx.jpg">-->
<!--</div>-->
<!--<div style=" 800px;height: 800px;border: 1px red solid;overflow: auto">-->
<!--<img src="http://ui.imdsx.cn/static/image/dsx.jpg">-->
<!--</div>-->
<div ></div>
</body>
</html>