1、第二天内容的补充:span标签
span标签
文本内容标签本身没有任何的效果是用来插入更改部分文本的css样式
<span></span>
2、选择器
标签名 元素选择器,标记选择器、类型选择器
<div></div> css div{} 网页里所有的div标签
id选择器
<div id="box"></div> css #box{} id名为box的内容,唯一性,名字不能重复使用
class选择器(类选择器)
<div class="box"></div> css .box{} 选中class名为box的内容,可以重复设置
高级用法:一个class可以设置多个值,用空格隔开
通配符选择器
css * 网页内的所有内容
*{
margin:0px;
padding:0px;
/* 设置内容的外边距和内边距都清零 */
}
包含选择器
父子选择器(通过父元素选择子元素)
父元素 > 子元素
后代选择器(只要是包含关系就都能选中)
祖先元素 后代元素
伪类选择器
设置内容在不同的状态下选择内容
a:link 设置内容访问前的状态
a:visited 设置内容访问后的状态
a:hover 设置内容鼠标移入的状态
a:active 设置鼠标按下时的状态(鼠标激活的状态)
3、选择器的权重
内联样式表 1000 》 id 0100 》 class 0010 》 标记选择器 0001 》 通配符选择器 0000
包含选择器的权重
包含选择器的权重是计算所有选择器的权重值和
群组选择器是不会造成权重冲突
伪类选择器 10
总结:
1 、css样式冲突的时候,谁的权重高设置谁
2、如果权重值相同,跟顺序有关,谁在后面设置谁
3、css的继承(就近原则)
自己的样式 》 父元素的样式 》 祖孙元素的样式
4、浮动
float:
left
right
none
1、浮动的图文环绕效果
2、让垂直的内容水平排列
清除浮动有两种作用
1:套一个父元素设置高度隔开
2:
clear 清除浮动 (给受影响的盒子设置清除浮动)
left 清除左浮动
right 清除有浮动
none 不清除
both 清除两边浮动