首页 > 其他分享> 文章详细

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

2020-12-20 20:31:15 阅读：175 来源： 互联网

标签：浮动 color 标签元素笔记块状 css div 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时，该标签不会被显示在页面中*/

标签：浮动,color,标签,元素,笔记,块状,css,div,CSS
来源： https://blog.csdn.net/qq_42010290/article/details/111461998

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9