学习css时记录的笔记

最新推荐文章于 2024-08-09 22:10:07 发布

安＿

最新推荐文章于 2024-08-09 22:10:07 发布

阅读量27

点赞数

分类专栏：学习笔记文章标签：学习 css 笔记

本文链接：https://blog.csdn.net/weixin_44277893/article/details/134024562

版权

学习笔记专栏收录该内容

42 篇文章 0 订阅

订阅专栏

CSS

1、什么是CSS，有什么作用？
CSS(Cascading Style Sheet):层叠样式表语言。
CSS的作用是：
修饰HTML页面，设置HTML页面中的某些元素的样式，让HTML页面更好看。
CSS好比是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文件的路径" />
	
	这种方式易维护，维护成本较低。
		xxx.css文件
			1.html中引入了
			2.html中引入了
			3.html中引入了
			4.html中引入了


1.什么是CSS，有什么作用？

CSS(Cascading Style Sheet):层叠样式表语言。
CSS的作用是：
修饰HTML页面，设置HTML页面中的某些元素的样式，让HTML页面更好看。
CSS好比是HTML的化妆品一样。
HTML还是主体，CSS依赖HTML。CSS的存在就是修饰HTML，所以新建的文件还是xx.html文件。

2.CSS我们要求掌握到什么程度？

常见的CSS样式要求会写。
别人写的CSS样式要能看懂。
注意：这里学习基础的CSS2.0 可以查看CSS2.0.CHM文档

3.在HTML页面中嵌套使用CSS的三种方式：
第一种方式：在标签内部使用style属性来设置元素的CSS样式，这种方式称为内联定义方式。
语法格式：
<标签 style=“样式名:样式值;样式名:样式值;样式名:样式值;…”></标签>

第二种方式：在head标签中使用style块，这种方式被称为样式块方式。
语法格式：

第三种方式：链入外部样式表文件，这种方式最常用
（将样式写到一个独立的xxx.css文件当中，在需要的网页上直接引入css文件，样式就引入了）
语法格式：

这种方式易维护，维护成本较低。
xxx.css文件
1.html中引入了
2.html中引入了
3.html中引入了
4.html中引入了

4.HTML中引入CSS样式的第一种方式：内联定义方式
<!doctype html>

HTML中引入CSS样式的第一种方式：内联定义方式

	<!--
		查文档：所有的样式都可以在CSS2.0.CHM文件中的属性中找到

		width 宽度样式
		height 高度样式
		background-color 背景色样式
		display 布局样式（none表示隐藏，block表示显示）

		为div添加边框：
			第一种方式如下"
			border-color : red;border-width : 1px;border-style : solid;
	-->
	<div style="width : 300px; height : 300px; background-color : #CCFFFF; display : block;
	border-color : red;border-width : 1px;border-style : solid;"></div>

	<br><br>

	<!--
		为div添加边框：
			第二种方式如下：
			border:border-width||border-style||border-color;
			border : 1px solid black;
	-->
	<div style="width : 300px; height : 300px; background-color : #CCFFFF; display : block;
	border : 1px solid black;"></div>

</body>

5.HTML中引入CSS样式的第二种方式：样式块和id选择器
<!doctype html>

HTML中引入CSS样式的第二种方式：样式块

	<style type="text/css">
		/*
			css的注释是这样的
		*/

		/*
			id选择器
			语法格式：
				#id{
					样式名 : 样式值;
					样式名 : 样式值;
					样式名 : 样式值;
					...
				}
		*/
		#usernameErrorMsg{
			color : red;
			font-size : 12px;
		}
	</style>
</head>
<body>
	
	<!--设置样式字体大小12px，颜色为红色-->
	<span id="usernameErrorMsg">对不起，用户名不能为空！</span>

</body>

6.标签选择器和类选择器
<!doctype html>

HTML中引入CSS样式的第二种方式：样式块

	<style type="text/css">
		/*
			标签选择器：
				语法格式：
					标签名{
						样式名 : 样式值;
						样式名 : 样式值;
						...
					}
			标签选择器的作用范围比id选择器广，同一标签都可以作用到
		*/
		div{
			background-color : black;
			border : 1px solid red;
			width : 100px;
			height : 100px;
		}
	</style>
	
</head>
<body>
	
	<!--标签选择器：-->
	<div></div>
	<div></div>
	<div></div>

</body>

<!doctype html>

HTML中引入CSS样式的第二种方式：样式块

	<style type="text/css">
		/*
			类选择器：
				语法格式：
					.类名{
						样式名 : 样式值;
						样式名 : 样式值;
						...
					}
			同一类的所有标签可以设置相同的样式
		*/
		.myclass{
			border : 1px solid red; /*设置边框*/
			width : 400px;
			height : 30px;
		}

	</style>
	
</head>
<body>

	<!--类选择器：-->
	<input type="text" class="myclass"/>
	
	<br><br><br>

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

</body>

7.在HTML中使用CSS样式的第三种方式：引入外部独立的css文件

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

	<!--引入css文件-->
	<link type="text/css" rel="stylesheet" href="css/1.css">
	
</head>
<body>
		
	<a href="http://www.baidu.com">百度</a>
	
	<!--
		href="..." 超链接
		src="..."  文件路径
		<img src="...">
	-->
	
	<span id="baiduSpan">点击我链接到百度！</span>
		
</body>

1.css文件
1
/*
使用标签选择器，使百度超链接的下面那条线消失
*/
a{
text-decoration: none;
}

/*
使用id选择器，使"点击我链接到百度！"下有横线，鼠标触碰到变成小手
cursor鼠标样式：hand和pointer都是小手，但是hand有浏览器兼容问题，建议使用pointer
*/
#baiduSpan{
text-decoration: underline;
cursor: pointer;
}

8.列表样式

列表样式

   <style type="text/css">
	/*
	   	使用标签选择器
	   	将列表左边的小圆点去除
	*/
		ul{
			list-style-type: none;
		}
   </style>
   
</head>
<body>
	
	<ul>
		<li>中国
			<ul>
				<li>北京</li>
				<li>上海</li>
				<li>重庆</li>
			</ul>
		</li>
		<li>美国</li>
		<li>俄国</li>
	</ul>
		
</body>

9.CSS样式的绝对定位

CSS样式的绝对定位

	<style type="text/css">
		#div1{
			background-color: red;/*div1的背景色*/
			border: 1px black solid;/*div1的边框设置*/
			width: 300px;/*div1的宽度*/
			height: 300px;/*div1的高度*/
			
			position: absolute;/*绝对定位，以方框左上角那个点来定位*/
			
			left: 100px;/*距离网页的左边100px*/
			top: 100px;/*距离网页的上边100px*/
		}
	</style>
	
</head>
<body>
	
	<div id="div1"></div>
	
</body>