CSS笔记--- CSS概述;HTML引入CSS样式的三种方式;列表样式;绝对定位

Posted 猿头猿脑的王狗蛋

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS笔记--- CSS概述;HTML引入CSS样式的三种方式;列表样式;绝对定位相关的知识,希望对你有一定的参考价值。

楔子


1、什么是CSS,有什么作用?

1)CSS(Cascading Style Sheet):层叠样式表语言。

2) CSS的作用是:

    修饰HTML页面,设置HTML页面中的某些元素的样式,让HTML页面更好看。

HTML还是主体,CSS依赖HTML。CSS的存在就是修饰HTML,所以新建的文件还是xx.html文件。

 

2、CSS需要掌握到什么程度?

     第一,常见的CSS样式会写,第二,别人写的CSS样式能看懂。

 

3、在HTML页面中嵌套使用CSS的三种方式:

     第一种方式:在标签内部使用style属性来设置元素的CSS样式,这种方式称为内联定义方式。

            语法格式:

                  <标签 style="样式名:样式值;样式名:样式值;样式名:样式值;..."></标签>

     第二种方式:在head标签中使用style块,这种方式被称为样式块方式。

            语法格式:

                  <head>
                      <style type="text/css">
                          选择器
                              样式名 : 样式值;
                              样式名 : 样式值;
                              .....
                         
                          选择器
                              样式名 : 样式值;
                              样式名 : 样式值;
                              .....
                         
                      </style>
                  </head>

     第三种方式:链入外部样式表文件,这种方式最常用(将样式写到一个独立的xxx.css文件当中,在需要的网页上直接引入css文件,样式就引入了)。

            语法格式:
                        <link type="text/css" rel="stylesheet" href="css文件的路径" />
        
            这种方式易维护,维护成本较低。

 

 正文:


1、HTML引入样式的第一种方式:内联定义方式:

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML引入样式的第一种方式:内联定义方式</title>
	</head>
	<body>
		<!--宽500像素,高60像素,背景颜色为“#CCFF”-->
		<div style="width: 500px;height: 60px;background-color: #CCFFFF;"></div>
		
		<br /><br />
		
		<!--
			样式display
				为none,则图片有隐藏
				为block,则显示图片
		-->
		
		<div style="width: 500px;height: 60px;background-color: #CCFFFF;display: none;"></div>
		
		<br /><br />
		
		<div style="width: 500px;height: 60px;background-color: #CCFFFF;
		border-color: red;border-width: 1px;border-style: solid;"></div>
		
		<br /><br />
		
		<!--
		border-color: red;border-width: 1px;border-style: solid;
		可以整合为
		border: red 1px solid;
		-->
		<div style="width: 500px;height: 60px;background-color: #CCFFFF;border: red 1px solid;"></div>
	</body>
</html>

 

谷歌浏览器:

 

 

2、HTML中引入CSS样式的第二种方式:样式块:

代码:

<!doctype html>
<html>
	<head>
		<title>HTML中引入CSS样式的第二种方式:样式块</title>
		
		<!--固定格式-->
		<style type="text/css">

			/*
				id选择器
				
				语法格式:
					#id
						样式名 : 样式值;
						样式名 : 样式值;
						样式名 : 样式值;
						....
					
			*/
			#usernameErrorMsg 
				color : red;
				font-size : 12px;
			

			/*
				标签选择器
				
				语法格式:
					标签名 
						同上(id选择器)
					
				标签选择器作用的范围比id选择器广。
			*/
			div 
				background-color : black;
				border : 1px solid red;
				width : 100px;
				height : 100px;
			

			/*
				类选择器
				
				语法格式:
					.类名
						同上上(其他俩个选择器)
					
			*/
			.student 
				border : 1px solid red;
				width : 400px;
				height : 30px;
			

		</style>
	</head>
	<body>
		
		<!--
			设置样式字体大小12px,颜色为红色
		-->
		<span id="usernameErrorMsg">对不起,用户名不能为空!</span>

		<div></div>
		<div></div>

		<!--class相同的标签可以认为是同一类标签。-->
		
		<br><br><br>
		
		<input type="text" class="student"/>

		<br><br><br>

		<select class="student">
			<option>专科</option>
			<option>本科</option>
		</select>

	</body>
</html>

 

谷歌浏览器:

 

3、在HTML中使用CSS样式的第三种方式:引入外部独立的css文件:

html代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>在HTML中使用CSS样式的第三种方式:引入外部独立的css文件</title>
		
		<!--引入css-->
		<!--rel,type都是固定写法,href后加引入的css路径-->
		<link rel="stylesheet" type="text/css" href="css/1.css" />
		
	</head>
	
	<body>
		
		<a href="http://www.baidu.com">百度</a>
		
		<span id="baiduSpan">点击我链接到百度哦!</span>
	</body>
</html>

 

css代码:

/*
  标签选择器
*/
a 
	/*
      使下划线消失
    */
    text-decoration : none;


/*
	cursor : 鼠标样式,pointer是小手,hand也是,但是hand有浏览器兼容问题,建议使用pointer
*/

/*
  id选择器
*/
#baiduSpan 
    /*
      下划线;
      鼠标光标变为小手
    */
	text-decoration: underline;
	cursor: pointer;

 

谷歌浏览器:(小手没截成功。。。)

 

4、列表样式:

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表样式</title>
		
		<style type="text/css">
			/*
				标签选择器
			*/
			ul
				/*
				让列表中的标志消失
				list-style-type: none;
				*/
			   
				/*
				让列表中的标志变为空心圈圈
				list-style-type: circle ;
				*/
			   
			    /*让列表中的标志变为黑心方块*/
				list-style-type: square ;
			
		</style>
	</head>
	<body>
		<ul>
			<li>中国
				<ul>
					<li>北京</li>
					<li>上海</li>
					<li>重庆</li>
				</ul>
			</li>
			<li>美国</li>
			<li>俄国</li>
		</ul>
	</body>
</html>

 

谷歌浏览器:

 

5、CSS样式的绝对定位:

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS样式的绝对定位</title>
		<style type="text/css">
			/*id选择器*/
			#div1
				background-color: red;
				border: 1px black solid;
				width: 300px;
				height: 300px;
				position : absolute; /*绝对定位*/
				left: 100px;
				top: 100px;
			
		</style>
	</head>
	<body>
		
		<div id="div1"></div>
		
	</body>
</html>

 

谷歌浏览器:

   

以上是关于CSS笔记--- CSS概述;HTML引入CSS样式的三种方式;列表样式;绝对定位的主要内容,如果未能解决你的问题,请参考以下文章

CSS笔记

CSS复习笔记引入和语法

css学习笔记 5

笔记2

HTML&CSS基础学习笔记1.28-给网页添加一个css样式

前端——CSS笔记