css - 基础选择器

最新推荐文章于 2024-07-23 16:23:26 发布

您访问的用户不存在

最新推荐文章于 2024-07-23 16:23:26 发布

阅读量69

点赞数

分类专栏：笔记文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_45793329/article/details/107297391

版权

笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

笔记：
1.类选择器

小练习：

 <html>
  <head>
   <!--！+tab键生成基本格式 只写针对知识点的写法-->
   <title> 练习</title>
   <style>
     .red {
	       background-color: red;
		   width: 100px;
		   height: 100px;
	 
	     }
	.green {
	       background-color: green;
		   width: 100px;
		   height: 100px;
	 
	     }
	
	
   </style
   </head>
   <body>
       <div class="red " > 
	   红色
	    </div>
	   <div class="green " > 
	   绿色
	    </div>
   </body>
   </html>

2.类选择器-多类名
我们可以给一个标签指定多个类名，从而达到更多的选择。这些类名都可以选出这个标签，简单理解就是一个标签可以的有多个名字
多类名的使用方式

红色

1）在标签class属性中可以写多个类名 2）多个类名之前必须用空格区分开

  <head>
   <!--！+tab键生成基本格式 只写针对知识点的写法-->
   <style>
     .red{
	       color: red;
		   
	 
	     }
	.font35{
	       font-size= 35px; 
		 }
   </style
   </head>
   <body>
       <div class="red front35" > 
	   多类名
	    </div>
   </body>

小练习:

<html>
  <head>
   <!--！+tab键生成基本格式 只写针对知识点的写法-->
   <title> 练习</title>
   <style>
     .box {
	       width: 100px;
		   height: 100px;
	     }
     .red {
	       background-color: red;
		  
	 
	     }
	.green {
	       background-color: green;
		   
	 
	     }
	
	
   </style
   </head>
   <body>
       <div class="red box" > 
	   红色
	    </div>
		 <div class="green box " > 
	   绿色
	    </div>
   </body>
   </html>

3.id选择器
id选择器可以为表有特定id的html元素指定特定的样式
html元素以id属性来设置id选择器,css中id选择器以"#"来定义.
#id名{
…:…;
}
eg:

<html>
  <head>
   <!--！+tab键生成基本格式 只写针对知识点的写法-->
   <title> 练习</title>
   <style>
     #pink {
	          color: pink;
		   }
	
   </style
   </head>
   <body>
       <div id="pink"> 
	   粉色
	   </div>
   </body>
   </html>

注意:id属性只能在每个html文档中出现一次(和class的区别)只能调用一次[试了一下,可以显示,但是js好像不可]

4.通配符选择器
使用"*"定义,它表示选取页面中所有元素(标签)

{
…: …;
}
eg:

 <html>
  <head>
   <!--！+tab键生成基本格式 只写针对知识点的写法-->
   <title> 练习</title>
   <style>
    *     {
	          color: pink;
		   }
	
   </style
   </head>
   <body>
       <div > 
	   你
	   </div>
	   <span>
	    我 
	   </span>
	   <div>
	    他
	   </div>
	   <ul>
	     <li>
		  巴拉巴拉
		 </li>
	   </ul>
	  
   </body>
   </html>

注意：这里把html body div span ul li都变了粉色

您访问的用户不存在

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css - 基础选择器

笔记：1.类选择器小练习： <html> <head>  <title> 练习</title> <style> .red { background-color: red; width: 100px; height: 100px; } .green { backgrou
复制链接

扫一扫

专栏目录