CSS学习记录

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

相对定位 在文档流中偏移自身位置

绝对定位 相对于其最近一个有定位设置的父元素进行定位

固定定位 相对于浏览器窗口定位