CSS

最新推荐文章于 2025-02-14 21:24:47 发布

Zm1225_

最新推荐文章于 2025-02-14 21:24:47 发布

阅读量213

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端

本文链接：https://blog.youkuaiyun.com/Zm1225_/article/details/79449229

Web前端专栏收录该内容

11 篇文章

订阅专栏

CSS简介

CSS(Cascading Style Sheets)：层叠样式表。用来给html网页设置样式。当多个选择器对同一个元素进行样式设置时，则该元素的样式为多个选择器的叠加效果(当有冲突时，按照优先级设置);

一、CSS的引入方式

方式一：行内样式(在html元素的style属性上设置样式)
例如：
<div style=“background- color:yellow”>
这是第一个CSS页面
</div>

方式二：页面内嵌样式

         在head标签内部声明样式：
         <style type="text/css">
             // CSS样式表
         </style>

方式三：引入外部样式文件
<link rel="stylesheet" type="text/css" href="外部CSS样式文件路径">

二、CSS选择器

1.标签选择器
      标签名{
         CSS属性名:属性值;
         ...

}

 div{
	    	width: 100px;
	    	height:100px;
	    	font-size: 20px;
	    	font-weight: bold;
	    	font-style: italic;
	    	color:red;
	    	background-color: #FAEBD7;
	    }

2.类选择器

      .class类名称{
           CSS属性名:属性值;
           ...

}

.mydiv{
	    	color:blue;
	    	background-color:yellow;
	    }

3.ID选择器

       #ID名称{
           CSS属性名:属性值;
           ...

}

#div1{
        	color:#D2691E;
        }

   优先级：ID选择器 > 类选择器 > 标签选择器
4.复合选择器
       选择器1,选择器2,...{
            CSS属性名:属性值;
            ...

}

 h1,#div1{
            background-color:yellow; 
        }

5. 子选择器(选择父选择器的直接子元素)
       父选择器 > 子选择器{
          CSS属性名:属性值;
          ...
       }

div > strong{
        	background-color:green; 
        }

6. 后代选择器

       祖先选择器后代选择器{
          CSS属性名:属性值;
          ...
       }

div strong{
        	background-color:green; 
        }

7. 伪类选择器(用来设置元素在不同状态下的样式)

       E:hover 鼠标悬浮于元素之上的选择器
       E:link 超链接未访问时状态选择器
       E:active 激活状态时选择器
       E:visited 访问之后的状态选择器

 a:hover{
	    	background-color:yellow; 
	    }
	    a:link{
	    	background-color:#FAEBD7;
	    	color:red; 
	    }
	    a:active{
	    	color:green;
	    }
	    a:visited{
	    	color:#8B4513;
	    }

三、CSS盒子模型(Box模型)

border(边框)
padding(内边距,也叫填充)：元素中的内容与边框(border)之间的距离。
margin(外边距)：与相邻元素或父元素之间的距离。
content(内容)：盒子包含的内容(皇宫)。

四、CSS浮动

1、浮动属性： float:left|right
设置了float属性的元素即为浮动元素，浮动元素脱离了正常的文档流(标准流), 不遵循“从左到右,从上到下，遇块换行”的标准文档流的排布方式。
2、可以清除浮动：clear:left|right|both
3、规律一：
如果某个元素是浮动元素，那么有两种情况：
(1)这个浮动元素的上一个元素是标准流中的元素，则该浮动元素与上一个标准流元素的相对垂直位置不变。
(2)这个浮动元素的上一个元素也是浮动元素，则这两个浮动元素在同一水平位置排列(除非两个浮动元素的宽度和超过水平位置总宽度，这种情况下该浮动元素会被“挤”到下一行)。
4、规律二：

设置了clear属性的元素，主动负责完成清除浮动(移动自身完成目标)。

浮动元素举例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>float浮动元素</title>
	<style type="text/css">
	    #div1{
	    	width:30%;
	    	height:80px;
	    	background-color:#DDA0DD;
	    }
	    #div2{
	    	width:40%;
	    	height:80px;
	    	background-color:#CD853F;
	    	float:left;
	    }
	    #div3{
	    	width:50%;
	    	height:100px;
	    	background-color:#2E8B57;
	    	float:left;
	    }
	    #div4{
	    	width:50%;
	    	height:120px;
	    	background-color:#FA8072;
	    }
	    #div5{
	    	width:50%;
	    	height:130px;
	    	background-color:#FF0000;
	    }
	</style>
</head>
<body>
	<div id="div1">这是div1里面的内容</div>
	<div id="div2">这是div2里面的内容</div>
	<div id="div3">这是div3里面的内容</div>
	<div id="div4">这是div4里面的内容</div>
	<div id="div5">这是div5里面的内容</div>
</body>
</html>

清除浮动举例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>清除浮动</title>
	<style type="text/css">
	    #div1{
	    	width:30%;
	    	height:80px;
	    	background-color:#DDA0DD;
	    	float:left;
	    }
	    #div2{
	    	width:40%;
	    	height:80px;
	    	background-color:#CD853F;
	    	float:left;
	    	clear:left;
	    }
	    #div3{
	    	width:30%;
	    	height:100px;
	    	background-color:#2E8B57;
	    	float:left;
            clear:left;
	    }
	    #div4{
	    	width:50%;
	    	height:120px;
	    	background-color:#FA8072;
	    	float:right;
	    	clear:left;
	    }
	</style>
</head>
<body>
	<div id="div1">这是div1里面的内容</div>
	<div id="div2">这是div2里面的内容</div>
	<div id="div3">这是div3里面的内容</div>
	<div id="div4">这是div4里面的内容</div>
</body>
</html>