【笔记整理】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时,该标签不会被显示在页面中*/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值