前端学习之CSS(02)选择器

CSS选择器

一、标签选择器

  • 功能:样式\选择器的名字就是标签的名字
  • 代码:
body{background-color: aquamarine;
	text-align: center;
	font-size: 15px;}
h1{font: "黑体";font-size: 20px;}
p{color: red;font-size: 16px;}
hr{width: 200px;}

<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	head>
	<body>
		<h1>标题h1>
		<hr >
		<p>正文的段落p>
		版权所有
	body>
html>
  • 效果:
    前端学习之CSS(02)选择器_第1张图片

二、类别选择器

  • 功能:将样式进行分类,使相同的标签也可以有不同类型的样式。
  • 格式:类别的名字以.开头,后面带有的样式类别名称可以自己定义;引用时用class属性引用,可以多次引用。
  • 代码:
p{color: black;}
.one{color: blue;}
.tow{color: red;}

<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	head>
	<body>
		<p>无类别p>
		<p class="one">类别1p>
		<p class="tow">类别2p>
		<p class="one">类别1p>
		<p class="tow">类别2p>
	body>
html>
  • 效果:
    前端学习之CSS(02)选择器_第2张图片

三、ID选择器

  • 功能:直接定义自己想要的样式并设置ID名,然后需要调用就直接用ID名引用就可以了。
  • 格式:#开头+样式名字+内容
  • 代码:
#first{font-size: 12px;color: blue;}
#second{font-size: 24px;color: green;}

<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	head>
	<body>
		<p id="first">文字1p>
		<p id="second">文字2p>		
		<p id="second">文字2p>
		<p id="first">文字1p>
	body>
html>
  • 效果:
    前端学习之CSS(02)选择器_第3张图片
  • 拓展:类别选择器和ID选择器的区别
  1. 在一个HTML文档中,ID选择器只能使用一次,而且仅一次。而类选择器可以使用多次。
  2. 可以为一个元素同时设多个样式,但只可以用类选择器的方法实现,ID选择器是不可以的(不能使用 ID 词列表)。

四、嵌套声明

  • 功能:即在标签内部某一段需要更换样式时,可以使用嵌套声明的方法。
  • 代码:
h1 span{color: blue}
p span{color: red;}

<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	head>
	<body>
		<h1>学习的<span>毅力span>h1>
		<p>学习需要<span>持之以恒span>,坚持不懈。p>
	body>
html>
  • 效果:
    前端学习之CSS(02)选择器_第4张图片

五、集体声明

  • 功能:当多个标签需要使用同一个样式时,可以使用集体声明的方法。
  • 代码:
h1,p{text-align: center;color: greenyellow;}

<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	head>
	<body>
		<h1>学习的<span>毅力span>h1>
		<p>学习需要<span>持之以恒span>,坚持不懈。p>
	body>
html>
  • 效果:
    前端学习之CSS(02)选择器_第5张图片

全局声明

  • 功能:规定整个页面的的样式声明,针对所有的网页元素规定出来的样式。
  • 代码:
* {
	text-align: center;color: blue;
}

<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	head>
	<body>
		<h1>欢迎访问论坛h1>
		<p>下面是本论坛的主要内容,欢迎积极参与!p>
	body>
html>
  • 效果:
    前端学习之CSS(02)选择器_第6张图片

混合使用

  • 多个class选择器混用,用空格分开
<div class="one yellow left">......div>
  • id和class混用
<div id="my" class="one left blue">......div>
  • id选择器不可以多个使用

你可能感兴趣的:(css)