CSS选择器

CSS简介

  • css:层叠样式表(将页面显示效果更美观)
    层叠:一层接一层
    样式:很多的属性和属性值
    css将网页内容和显示样式进行分离,提高了显示功能

css和html的结合方式(四种结合方式)

1.在每个html标签上都加一个属性style,将html和css结合在一起

<h3 style="background: lightblue;">你好!</h3>

2.使用html的一个标签实现< style>,写在head标签中

<head>
	<style type="text/css">	
</head>

3.在style标签里面使用语句@import url(css文件的路径);
第一步:创建一个css文件,在里面写入要使用的css标签
在这里插入图片描述
第二步:在html文件中使用css文件中使用到的标签
(某些浏览器不可用,不推荐)

<head>
	<style>
		@import url(div.css);
	</style>
</head>
<body>
	<div>hello world!</div>

4.使用头标签link,引入外部css文件
第一步先创建css文件
第二步在html文件头标签中使用语句< link rel="stylesheet" type="text/css" href="css文件路径" >

优先级:由上到下,由内到外,优先级由低到高,后加载的优先级高

css选择器:对具体标签里面的数据进行操作

  • 三个基本选择器:
    1.标签选择器:使用标签名作为选择器的名称
    2.class选择器:每个html标签都有一个属性class,在头标签中设置内容样式时,要用.符号设置相关样式
    在这里插入图片描述
    3.id选择器:每个html标签上都有一个属性id,在头标签中设置内容样式时,要用#符号设置相关样式
    在这里插入图片描述

      ***优先级:style标签>id选择器>class选择器>标签选择器***
    
  • css的扩展选择器
    (1)关联选择器
    设置标签内的标签的样式,嵌套标签内部的样式
    在这里插入图片描述

(2)组合选择器
将不同标签设置成相同的样式
在这里插入图片描述
(3)伪元素选择器
css里面提供了一些定义好的样式:原始状态link;鼠标放上的状态hover;点击之后的状态visited;点击active
在这里插入图片描述
点击时: 在这里插入图片描述
点击之后:在这里插入图片描述

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值