CSS基本语法和选择器

CSS是指层叠样式表(cascading style sheets),样式定义如何显示HTML元素,是真正能够做到网页表现和内容分类的一种语言。

【1】CSS基本语法

【2】CSS两种结合方式

【3】几种选择器

基本语法

基本语法也就两种,在head中使用选择器选择,然后在body中使用,如下中的样式属性键:样式属性值1 样式属性值2...是多个属性值的连用。

<!DOCTYPE html>
<html>
  <head>
    <title>02-结合方式2.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!-- 语法1:
	
	选择器{
		样式属性键: 样式属性值;
		样式属性键:样式属性值1 样式属性值2 样式属性值3...;
		/* 
		注释内容!
		*/
	 语法2:
		style="样式属性键: 样式属性值;"
	}
	
 -->
 	<style type="text/css">
 		p{
 			color:red;
 		}
 	</style>
  </head>
  
  <body>
   <p  > This is my HTML page. </p>
  </body>
</html>


两种结合方式

<!DOCTYPE html>
<html>
  <head>
    <title>01-结合方式1.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 	<!--下面是第二种结合方式-->  
  	<style type="text/css">
 		p{
 			color:blue;
 		}
 	</style>
  </head>
  
  <body>
   <p style="color:red;" > 我是在body中直接使用的结合方式 </p>
   <p> 我是使用表标签选择器的结合方式了</p>
  </body>
</html>

标签选择器

使用的是html的标签,比如p、h1、a等,也可以是html

<span style="font-size:18px;"><!DOCTYPE html>
<html>
  <head>
    <title>02-结合方式2.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
<!-- 
	标签选择器:
		标签名称{
			
		}
	}
 -->
 	<style type="text/css">
 		a{
 			color:blue;
 			background:red;
 			padding:99;
 		}
 		p{
 			color:#FFFF00;
 		}
 	</style>
  </head>
  
  <body>
   <a> This is my HTML page. </a>
   <p> This is my HTML page. </p>
  </body>
</html>
</span>


ID选择器

以一种独立于文档元素的方式来指定样式

<!DOCTYPE html>
<html>
  <head>
    <title>06-CSS选择器2.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<!-- 
	id选择器:
		#标签id{
		}
	
	注意: 使用id时.要保证id的值在页面中是唯一的
 -->
 	<style type="text/css">
 		#one{
 			color:yellow;
 		}
 		#five{
 			size:88;
 		}
 	</style>
  </head>
  
  <body>
   <a id="one" > This is my HTML page. </a><br>
   <a id="five" > This is just a test. </a><br>
   <a> This is my HTML page. </a>
  </body>
</html>


类选择器

其实类选择器是和ID选择器想类似的

<!DOCTYPE html>
<html>
  <head>
    <title>07-CSS选择器3.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">   
<!-- 
	class选择器:
		.class名称{
		}
	
	注意: 使用class选择器,前面要有一个.号	
 -->
 	<style type="text/css">
 		.three{
 			color:green;
 		}
 	</style>
  </head>
  
  <body>
   <p>This is my HTML page.</p>
   <p class="three" >This is my HTML page.</p>
   <a class="three" > This is my HTML page. </a><br>
   <a> This is my HTML page. </a>
  </body>
</html>


伪类选择器

这个可以控制标签的的某些状态,配合其他选择器来共同使用

<!DOCTYPE html>
<html>
  <head>
    <title>07-CSS选择器3.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
<!-- 
	伪类选择器:
		选择标签的某个状态.需要配合其他选择器来使用
		l link	<span style="white-space:pre">	</span>未访问过
		v visited	访问过
		h hover	<span style="white-space:pre">	</span>悬浮
		a active	激活,点击
	
 -->
 	<style type="text/css">
 		a:link{
 			color:green;
 		}
 		a:visited{
 			color:black;
 		}
 		
 		a:hover{
 			color:white;
 		}
 		a:active{
 			color:pink;
 		}
 	</style>
  </head>
  
  <body>
 	<a href="01-结合方式1.html" >点我,看我的状态变化</a>
  </body>
</html>


复合选择器

将ID、类、元素结合在一起来使用,可以看到在body中是分开使用的,在style中是结合在一起的。

<!DOCTYPE html>
<html>
  <head>
    <title>09-CSS选择器5.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
 	<style type="text/css">
 		#one,.two,font{
 			color:green;
 		}
 	</style>
  </head>
  
  <body>
 	<a id="one" >我是ID选择器</a><br>
 	<a class="two" >我是类选择器</a><br>
 	<font>我是元素选择器</font>
  </body>
</html>


已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页