CSS 样式定位入门学习

最新推荐文章于 2025-02-06 15:01:34 发布

struggle小白

最新推荐文章于 2025-02-06 15:01:34 发布

阅读量147

点赞数

分类专栏：方便类

本文链接：https://blog.youkuaiyun.com/rdz_NNN/article/details/88909839

版权

方便类专栏收录该内容

24 篇文章

订阅专栏

本文介绍了CSS学习的主要内容，包括CSS注释、在HTML中嵌入CSS的方式，如内联样式，以及如何设置字体下划线、鼠标悬停效果、列表样式、margin和padding等基础知识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

![在这里插入图片描述](https://img-blog.csdnimg.cn/20190330114221531.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Jkel9OTk4=,size_16,color_FFFFFF,t_70
1-4 CSS主要掌握以下内容：

CSS注释：在style体内使用/**/
1-5 在html章使用CSS的不同方式
在HTML中嵌入CSS代码
第一种方式：内联嵌入方式
语法：style=”样式名1:样式值1; 样式名2:样式值2;”
在HTML中，大部分标签都有style属性，在该属性中可以设置该标签的CSS样式
示例一：style属性完成a标签的样式：让其有下划线，有鼠标悬停效果手型
字体下划线：text-decoration:underline
鼠标悬停手势效果：cursor:hand;（该样式IE中支持，FireFox中不支持）
鼠标悬停手势效果：cursor:pointer;（该样式都支持，兼容性强）
在这里插入图片描述

设置列表样式

<style>
   ul{ 
     /*list-style-type:none; 列表前面没有圆点*/
	 /*list-style-type:circle; 列表全面是圆圈*/
	 /*list-style-type:upper-roman;列表前面是罗马字母*/
	 /*list-style-type:lower-alpha;列表前面是小写的字母*/
	 list-style-type:square; /*列表前面是方形块*/	
   }
</style>

<ul >
<li>美国</li>
	<li>英国</li>
	<li>中国
	<ul>
		<li>北京</li>
			<li>天津</li>
			<li>上海</li>			
		</ul>	
	</li>
</ul>

margin和padding
margin和padding是在html盒子模型的基础上出现的.margin是盒子的外边距 .也就是盒子和盒子之间的距离.而padding是内边距,也就是盒子的边与盒子内部元素的距离
在这里插入图片描述

<style>
   #myDiv {    
	 width:400px; height:200px; border:#990000 solid 2px;
	 background-color:#00FFCC; 
	 margin-left:100px;   /*距离浏览器的左边框300px*/
	 margin-top:100px;   /*距离浏览器的顶部边框00px*/ 
	 padding-left:100px;  /*距离内部元素的左边框100px*/
	 padding-top:70px;   /*距离内部元素的顶部边框70px*/ 
   }
   #div2{ background-color:#000099; width:200px; height:100px; 
border:blue solid 2px;};
</style>

<div id="myDiv">
<div id="div2"></div>
</div>

设置字体
<style>
   #myDiv {    
	 width:400px; height:200px;
	 background-color:#00FFCC; 
	 font-size:36px	 ; /*设置字体的大小*/	
   }   
</style>

<div id="myDiv">
  我是div中的文字信息
</div>
2-6 设置文本装饰
<style>
   #myDiv {    
	 width:400px; height:200px;background-color:#00FFCC; font-size:18px	 ; 
	 text-decoration:underline; /*文本装饰:有下划线; none:没有装饰*/
   }   
</style>

<div id="myDiv">
  我是div中的文字信息
</div>