CSS
使用css的方式
第一种:在标签内部写style的方式叫内嵌css的引用。
<div style="width: 10px;width: 10px"></div>
第二种:在head标签的后面,使用style标签引用css的用法叫内部css。
第三种:引入外部的css文件,使用link标签引入外部的css文件来使用。
最常用的是引入外部的css文件,也就是link。
css的选择器:
要给某一个标签添加css,要先选择到这个标签,就使用到css的选择器
selector{
css:内容
}
标签选择器:直接以标签名称为选择器进行选择,标签选择器,选择的是这个页面中所有的该标签
div{
width: 100px;
height: 100px;
}
类选择器,其中一定要注意“.”,点后面是类名,可以通过长辈元素的class,一层一层的往下找,直到找到该元素,每一个类之间都要用空格隔开。
.test .right .one{
width: 100px;
height: 100px;
}
id选择器:使用"#"后面加id名称,id选择器可以最简单精确的选择到一个标签,但是id不能重复使用
#test1{
width: 100px;
height: 100px;
}
选择器的组合使用:标签选择器和类选择器的组合使用,其中注意空格
.test .right .one a{
color:red;
}
一个标签添加多个类的时候,分别给这个标签的每一个class添加了css
<div class="one add dasdsa">
<a>新闻</a>
</div>
定位:
就对页面中的某个元素实现位置调整
绝对定位:
position: absolute;
当给一个元素添加了绝对定位css后,如果不进行位置调整时,这个元素将在原位不动
如果需要调整位置时:top,bottom,left,right
定位的参考对象:
添加了绝对定位属性后,该元素会找他的父元素,如果他的父元素没有position属性,那么他会找他父元素的父元素,这样逐层找,直到找到包含有position的某一个长辈元素,如果没有找到任何长辈元素有position属性,那么该元素将以body元素为基准进行定位调整
当元素添加了绝对定位后,该元素就脱离了标准文档流
当一个元素进行了绝对定位,并且进行了位移,那么他未进行移动的时候的位置,浏览器将不会给他保留
相对定位:
相对定位:position: relative;
相对定位是,相对于他自己原有的位置进行定位
相对定位的元素是没有脱离标准文档流
当一个元素添加了相对定位后,他移动之后的位置,浏览器会给他保留
定位的口诀:父相子绝
固定定位:
position: fixed;
将一个元素固定在页面中的某一个位置上,不管页面如果滑动,他的位置都不会改变
固定定位的元素会脱离标准文档流
固定定位是根据body为基准进行定位移动的
浮动:
当需要让两个元素排成一行的时候,就可以使用浮动float,让两个元素排列成一整行
但是,如果是块状元素使用了浮动,那么块状元素将不会遵循独自占一整行的规定了。
float:left; 让块状元素向左浮动,添加了float属性后,块状元素将脱离标准文档流
标准文档流:
在页面中,每一个标签都按照他固有的规定排列展开,其中块状元素不管内容多少,都独自占一整行,行内元素不会主动换行。
脱离标准文档流:
块状元素将不遵循独自占一整行的规定,并且他原来该有的位置,浏览器将不会给他保留,这样就导致了,标准文档流的标签会被脱离标准文档流的标签覆盖。
清除浮动:
清除浮动的意思:不是将别个标签的float的css删除,而是以直接为中心,直接的四周所有的float属性对自己的影响,清除掉。
clear: both;/*清除浮动*/
clear:both; 清除浮动,清除的是该元素的四周的浮动属性与该元素的影响。
dispaly 属性
/*将块状元素转换为行内元素*/
display: inline-block;/*行内块状元素:有行内元素的特性:不主动换行;又有块状元素的特性:可以设置宽高*/
display: block;/*block:将一个行内元素转换为块状元素*/
display: none;/*当使用display为none时,该标签不会被显示在页面中*/
其余:
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
/*超出部分自动隐藏,这里超出的部分不一定是文本,也可能是图片*/
box-shadow: -6px -1px 23.4px green;
/*-6px是阴影的x轴方向 -1p是阴影y轴方向 23.4px表示阴影的模糊度 green阴影的颜色*/
background-color: rgb(79,79,117,0.95);
/*rgb就是三原色,其中r是red,g是green,b就是blue;最后0.95就是透明度的数值*/
/*透明度,其中值是从0-1之间的小数,0.1-0.9,0.1最淡,越来越深,透明度越来越小*/
/*当让两个相同的class遵循同一个css的时候,可以使用","隔开,注意","和"."之间是没有空格的*/
.box .bottom .right .login .userName,.password{
}
text-align: center; /*文本左右居中,文字左右居中*/
font-size: 20px; /*文字大小*/
font-weight: 900; /*字重,文字的粗细调整,最小100,最高900*/
line-height: 50px; /*调整文字的上下居中,可以使用行高*/
text-align: center; /*文本内容左右居中*/
list-style: none; /*去除li前面的黑点*/
border: 1px solid white; /*1px 表示 边框的粗细 solid表示边框为实线 边框的颜色*/