05_css选择器的使用

一、css选择器的类型

  • 1、标签选择器

用法:直接写 写标签名:标签名{}

示例:


<html>
	<head>
		<meta charset="utf-8">
		<title>标签选择器title>
		<style type="text/css">
			div {
          text-align: center;
          width: 600px;
          height: 400px;
          color: blue;
          background: blanchedalmond;
			}
		style>
	head>
	<body>
  	
		<div>使用标签选择器添加样式div>
	body>
html>

  • 2、id选择器

用法:元素的id属性:#id名{}

示例:


<html>
	<head>
		<meta charset="utf-8">
		<title>id选择器title>
		<style type="text/css">
			#type {
            text-align: center;
            width: 600px;
            height: 400px;
            color: blue;
            background: blanchedalmond;
			}
		style>
	head>
	<body>
    
		<div id="type">使用id选择器添加样式div>
	body>
html>

  • 3、类选择器

用法:元素的class属性  .class 值{}
(类选择器是使用最多的一种方式)

示例:


<html>
	<head>
		<meta charset="utf-8">
		<title>class选择器title>
		<style type="text/css">
			.type {
            text-align: center;
            width: 600px;
            height: 400px;
            color: blue;
            background: blanchedalmond;
			}
		style>
	head>
	<body>
    
		<div class="type">使用class选择器添加样式div>
	body>
html>

  • 4、层级选择器

用法:按照层级找到对应需要添加化样式的元素名

示例:


<html>
	<head>
		<meta charset="utf-8">
		<title>层级选择器title>
		<style type="text/css">
    div b span {
        text-align: center;
        width: 600px;
        height: 400px;
        color: blue;
        background: blanchedalmond;
			}
		style>
	head>
	<body>
        
		<div >
            <b>
                这时候div标签下面的b标签的内容,
                <span>
                    这时候div标签下面的b标签下面的span的内容
                span>新的内容
            b>
        div>
	body>
html>

  • 5、组选择器

用法:多个元素名,统一使用一个样式

示例:


<html>
	<head>
		<meta charset="utf-8">
		<title>组选择器title>
		<style type="text/css">
			h1,h2,h3 {
        color: blue;
			}
		style>
	head>
	<body>
		<h1>一级标题h1>
		<h2>二级标题h2>
		<h3>三级标题h3>
	body>
html>

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