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

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

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

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值