HTML_CSS的基本选择器的使用及其作用范围和优先级

目录

  • ✨CSS的使用:
      • 行内样式
      • 内部样式
      • 外部样式
  • ✨CSS基本选择器:
      • id选择器
      • class选择器
      • 标签选择器
  • ✨优先级:
      • 选择器的优先级
      • 样式表的优先级

✨CSS的使用:

根据定义CSS的位置不同,分为行内样式、内部样式和外部样式

行内样式

也称为内联样式
直接在标签中编写样式,通过使用标签内部的style属性;

一般在测试的时候使用居多:
语法:
<标签 style="样式1:值1;样式2:值2;....样式N:值N;">hello my css标签>
案例:
<div style="color: red; width: 100px; height: 100px;background-color: #acacac" >第一个divdiv>

运行结果:

HTML_CSS的基本选择器的使用及其作用范围和优先级_第1张图片

弊端:只能对当前的标签生效,没有做到内容和样式相分离,耦合度太高。

内部样式

定义在head标签内,通过style标签,该标签内容就是CSS代码

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<style>
  div{
    color: red;
  }
style>
<body>
<div>第一个divdiv>
body>
html>

外部样式

1、提前定义css资源文件
2、在head标签内,定义link标签引入外部样式文件。

try.css文件定义在与html页面同级的css文件夹中 例如:
HTML_CSS的基本选择器的使用及其作用范围和优先级_第2张图片
写入:

div {
color: red;
}

html文件中写入:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
  <link rel="stylesheet" href="demo1.css">
head>

<body>
<div>第一个divdiv>
body>
html>

同样的样式作用在同一个标签身上:就近原则;不同样式作用在同一个标签身上:叠加生效。

✨CSS基本选择器:

筛选具有相似特征的元素

id选择器

选择具有相同id属性值的元素,建议html页面中的id值唯一

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		
		<style>
			#myDiv{
				color: aqua;
			}
		style>
	head>
	<body>
		<div id="myDiv">文字1div>
		<div id="myDiv">文字2div>
	body>
html>


class选择器

选择具有相同的class属性值的元素

class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示:

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		
		<style>
			.myClass{
				color: #800080;
			}
		style>
	head>
	<body>
		<div class="myClass">文字1div>
		<div class="myClass">文字2div>
	body>
html>

标签选择器

选择具有相同标签名称的元素。

定义选择器语法:标签名称{};

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>title>
		
		<style>
			p{
				color: chartreuse;
			}
		style>
	head>
	<body>
		<p>文字1p>
		<p>文字2p>
	body>
html>

✨优先级:

选择器的优先级

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

当多个选择器作用在同一个标签上的时候,如果属性冲突,看优先级;如果不冲突,样式叠加生效。

样式表的优先级

行内样式 > 内部样式 >外部样式

同样,三个样式表中都有内容作用在同一个html标签的时候,如果属性冲突,看优先级;如果不冲突,样式叠加生效。

你可能感兴趣的:(html,css,前端)