HTML笔记 04

第四章 初识 CSS

CSS的引入方式

行内样式

在HTML标签中添加style属性

<li style="font-size:30px;color:red;">唐三藏</li>
内部样式

在HTML中添加<style>标签

<style type="text/css">
  li{
    font-size:30px;
    color:red;
  }
</style>
外部样式

注意:需要先创建.css文件

链接式:在html的<head></head>标签中使用link标签

<link rel="stylesheet" href="css/index.css">

导入式:在内部中写入@import

<style type="text/css"
  @import url("style.css");
</style>

优先级:就近原则

选择器

基本选择器

全局选择器 使用*号,选择所有的HTML标签

标签选择器 使用HTML标签

类选择器 在HTML中使用class属性,在css中使用.操作符

ID选择器 在HTML中使用id属性,在css中使用#操作符(ID通常是唯一的)

交集选择器

并集选择器

层次选择器

E F 后代选择器 选择E下面的所有后代F

E>F 子选择器 选择E的子元素F

E+F 相邻兄弟选择器 选择的E元素后面的相邻F元素

E~F 通用兄弟选择器 选择所有E后面的所有F元素

结构伪类选择器

E:first-child 选择根元素的第一个E元素

E:last-child 选择根元素的最后一个E元素

E F:nth-child(n) 选择E的第n个F元素(n∈Z)

E:first-of-type 选择根元素的第一个具有指定类型E的元素

E:last-of-type 选择根元素的最后一个具有指定类型E的元素

E F:nth-of-type(n) 选择E元素的第n个具有指定类型的元素(n∈Z)

属性选择器

E[attr] 选择E标签内具有attr属性的元素

E[attr=val] 选择E标签内具有attr属性且值为val的元素

E[attr^=val] 选择E标签内属性为attr且以val开头的元素

E[attr$=val] 选择E标签内属性为attr且以val结尾的的元素

E[attr*=val] 选择E标签内属性为attr且属性值包含“val”的元素

注意:属性选择器中间不能有空格

选择器的优先级

行内样式(最高级)>id选择器>类选择器>标签选择器

  • 6
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值