CSS
1 css导入方式
1.1 行内模式
优先级最高
<h1 style=" color: red; position: absolute;">hahaha</h1>
1.2 内部样式
<style>
h1{
color: aqua;
}
</style>
1.3外部样式
h1{
color: black;
}
1.4 优先级
就近原则,哪种样式谁离的近就听谁的。行内最近 内部跟外部要看引入的顺序
如下所示 外部样式离得近会覆盖内部样式 故由外部样式定义
<style>
h1{
color: aqua;
}
</style>
<link rel="stylesheet" href="../css/test.css">
2 css选择器
2.1基本选择器
标签选择器
<style>
h1{
color: aqua;
}
</style>
类选择器
. +类名 可以复用
.myh1{
color: beige;
}
.myh2{
color: aqua;
}
id选择器
不能重复
#h1_1{
color: red;
}
基本选择器优先级
id 》类 》标签
2.2层次选择器
后代选择器
body后面所有的p标签
body p{
color: red;
}
子选择器
自能选择父标签后的一代(后代的后代不是我的后代)
/*子选择器*/
body>p{
background: aqua;
}
相邻兄弟选择器
选择目标元素的相邻元素为作用对象 (向下寻找)
/*相邻兄弟选择器 只选择一个*/
.p1 +p{
background: black;
}
/*选中元素的下方所有指定对象 下方全部*/
.p1 ~p{
background: red;
}
2.3 结构伪类选择器
用 冒号 ,后面会有伪类可供选择
/*伪类选择器*/
ul li:first-child{
background: red;
}
ul li:last-child{
background: black;
}
/*nth-child 选择父节点的第二个元素,并且 是当前的元素类别才可生效*/
p:nth-child(2){
background: aqua;
}
li:hover{
background: darkgreen ;
}
2.4 属性选择器
标签名【属性=属性值】
= 绝对等于
*= 包含这个元素
^= 以这个开头
$= 以这个结尾
/* 属性选择器 []中填 元素的属性 也可以给属性赋值
标签名【属性=属性值】
*/
a[id]{
background: gray;
}
a[id=a2]{
background: paleturquoise;
}
a[class*="links"]{
background: darkcyan;
}
a[href$="jpg"]{
background-color: red;
}
3 样式
3.1 字体样式
font-family :字体
font wight 字体粗细
font size 字体大小
font color 颜色
3.2 文本样式
1 颜色 : background
2 对齐方式: text-align
3 首行缩进 text-indent 2em
4 行高 line-height
5 装饰 text decoration 下划线 之类
3.3 列表
4 display
还是在文档流中
5 float
不在文档流中,会导致边框塌陷
clear: 设置左右是否可有浮动元素
解决边框塌陷
1 设置父元素高度
2 增加一个空div:
在塌陷元素(div)的下面设置一个空div
div 设置 内外边距为0 clear设置为both
3 overflow:
在父级元素中增加一个overflow属性 overflow:hidden
6 position
相对定位 在文档流中偏移自身位置
绝对定位 相对于其最近一个有定位设置的父元素进行定位
固定定位 相对于浏览器窗口定位