【笔记整理】CSS引用及浮动应用

CSS的引用：

内嵌css

第一种方式：在标签内部使用：
<p class="secondP" style="color: red;font-size: 60px">我是第二个</p>

内部css

第二种方式：
使用style标签，引用css，在head的后面使用
<style>css</style>

外部css：

第三种方式：
使用<link rel="stylesheet" href="index.css">
标签，引入外部的css
rel=“stylesheet” 规范引入的css的文件格式，href引入的css的文件路径

img标签比较特殊

img标签的属性width和height，和他的css：width，height 属性和css名称一样，当属性宽高和css的宽高同时存在是，css将约束标签的宽高，而属性不起作用

内嵌的css的优先级最高

内部和外部引用的css，谁后加载，就用谁

背景：

background:url("timg.jpg")   white     no-repeat 1px              2px;
			背景图片          背景颜色    平铺      1px代表x轴       2px代表y轴

选择器：

*{    
	font-size: 20px;   全局选择器，整个页面所有标签都遵循这个css
}
p,div{    所有的p标签和所有的div
            color: #4a74d8f0;/*color：字体颜色*/
            font-size: 20px;
        }
        div p{   选择到所有的div标签包含的p标签
            color: black;
        }
		div>p{  选择父元素为div的所有的p标签
            color: blue;
        }
		div+p{   选择所有div之后的p标签
            color: palevioletred;
        }
		p[class]{   选择所有有class属性的p标签
            color: violet;
        }
		p[class=firstP]{   选择所有class等于firstP属性的p标签
            color: violet;
        }
伪类选择器
    p:hover{   当鼠标悬停到标签上时触发的选择器，鼠标移开恢复原样

    } 
	input:focus{   当input标签被选择，出现可以输入的光标时触发的选择器，失去焦点时，恢复原样
            height: 100px;
        }

浮动float和display：

标准文档流：页面中元素按照其原有的特性进行排列

脱离标准文档流：给块状元素添加了浮动之后，块状将不会按照标准文档的排列顺序进行排列，而会进行位置移动

当需要让块状元素排成一行时，可以给块状元素添加float的css，这样这些块状元素将脱离标准文档流，并且排成一行，同时他也会覆盖掉标准文档的标签

float:left;    让块状元素向左浮动，添加了float属性后，块状元素将脱离标准文档流
clear:both;    清除浮动，清除的是该元素的四周的浮动属性与该元素的影响

dispaly 属性
/*将块状元素转换为行内元素*/
display: inline-block;/*行内块状元素：有行内元素的特性：不主动换行；又有块状元素的特性：可以设置宽高*/

display: block;/*block：将一个行内元素转换为块状元素*/

display: none;/*当使用display为none时，该标签不会被显示在页面中*/