css学习系列------css引用、优先级、选择器、继承和层叠

写在前面

  • CSS基础语法
  • CSS引用
    • 行内样式
    • 内部样式
    • 外部样式
    • CSS导入式
  • 优先级
  • 选择器
  • CSS继承
  • CSS层叠

一、CSS基础语法

(1)CSS:层叠样式表(Cascsding Style Sheets)

(2)CCS样式:CSS样式规则是由选择器+声明构成,例如:p{font-size:16px;color:blue;}

(3)注释:/*注释内容*/


二、CSS引用

(1)、行内样式(内联样式)

  • 位置:在开始标签内添加
  • 例如:<p style="font-size:25px">内容</p>

(2)、内部样式(嵌入样式)

  • 位置:写在<head>标签内
  • 例如:
<head>
	<style type="text/css">
		css样式...
	</style>
</head>

(3)外部样式(外联样式)

  • 位置:一个单独的文件,*.css
  • 例如:<link href="*.css" rel="stylesheet" type="text/css" />

(4)、CSS导入式

  • 位置:<style>标签内部
  • 例如: @import url(*.css) 或 @import “外部CSS样式"
<style type="text/css">
	@import url(*.css)
</style>

三、优先级

  • 行内样式>内部样式>外部样式
  • 链入外部样式表和内部样式表是依据就近原则

四、选择器

  • 标签选择器
    • 以HTML标签作为选择器。例如 h6
  • 类选择器
    • .class1
    • 伪类::Link:Visited:Hover:Active
  • ID选择器
    • #id1
  • 全局选择器
    • *
  • 群组选择器
  • 后代选择器

五、CSS继承

从父元素那继承部分CSS属性


六、CSS层叠

(1)层叠规则

  • css一个元素可以定义多个样式;

  • 当样式之间不冲突时,多个样式可叠加显示

  • 当样式之间冲突时,按不同样式规则优先级来应用样式

    • ID选择器 > 类选择器 > 标签选择器

    • 多次定义同类样式,后定义的优先级高

    • 同一样式表中:(1)权值相同:就近原则(2)权值不同: 选择权值高的

(2)选择器权值:

  • 标签选择器:1 > 类选择器和伪类:10 > ID选择器:100 > 通配符选择器:权值为0 > 行内样式:权值为1000

  • 注意:!important优先级高于行内样式,例如:p{font-size:16px !important;}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值