前端基础 css笔记

最新推荐文章于 2025-09-04 18:55:33 发布

原创最新推荐文章于 2025-09-04 18:55:33 发布 · 265 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #css

css的四种引入方式

1.行内式--显示优先级最高
	<p style="background-color: rebeccapurple">hello</p>  
2.嵌入式
	<head>
	    <meta charset="UTF-8">
	    <title>Title</title>
	    <style>
	        p{
	            background-color: #2b99ff;
	        }
	    </style>
	</head>
3 链接式
	<link href="mystyle.css" rel="stylesheet" type="text/css"/> 
4.导入式
	<style type="text/css">
	          @import"mystyle.css"; //此处要注意.css文件的路径
	</style>
	注意：

         导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，
      如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。
      这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，
      因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，
      然后再显示有样式的网页，这是链接式的优点。

css选择器

基本选择器:

 1.标签选择器	p{color: red;}
 2.id选择器      #id{color:red;}
 3.class选择器   .class{color: red;}
 4.通配选择器    *{color: red;}

组合选择器:

   E , F   多元素选择器
   E   F   后代元素选择器
   E > F   子元素选择器
   E + F   毗邻元素选择器
   E ~ F   普通兄弟选择器

伪类

anchor伪类：专用于控制链接的显示效果

        a:link（没有接触过的链接）,用于定义了链接的常规状态。
        a:hover（鼠标放在链接上的状态）,用于产生视觉效果。
        a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。
        a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。
        伪类选择器 : 伪类指的是标签的不同状态:        
                   a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态
        a:link {color: #FF0000} /* 未访问的链接 */       
        a:visited {color: #00FF00} /* 已访问的链接 */ 
        a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
        a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }


        例：
        <div class="outer">
		    <div class="top">top</div>
		    <div class="bottom">bottom</div>
	</div>


		注意:一定是outer:hover 控制outer里某一个标签,否则无效
	<style>
		.outer:hover .bottom{         //有效
			background-color: yellow;
	        }

	        .top:hover .bottom{		 //无效
	               background-color: yellow;
	        }
	</style>

before after伪类

      :before ----->p:before       在每个<p>元素之前插入内容     
      :after  ----->p:after        在每个<p>元素之后插入内容     

	例：p:before{content:"hello";color:red;display: block;}

选择器的优先级

1.css的继承

CSS继承是有限制的。有一些属性不能被继承，
如：border, margin, padding, background等。

2.css的优先级

 所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。
样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：
		1 内联样式表的权值最高          style=""－－1000；
		2 统计选择符中的ID属性个数。   	#id 	－－100
		3 统计选择符中的CLASS属性个数。 .class  －－10
		4 统计选择符中的HTML标签名个数。p 		－－1
		按这些规则将数字符串逐位相加，就得到最终的权重，
		然后在比较取舍时按照从左到右的顺序逐位比较。

css属性操作

文本颜色：		color:red;
水平对齐方式:	text-align:left;
字体大小：		font-size: 10px;
字体样式：		font-family: 'Lucida Bright';
字体加粗：		font-weight: lighter/bold/border/
行高：			line-height: 200px;
a标签的下划线：	text-decoration:none;
首行缩进150px：	text-indent: 150px;      
字母间距：		letter-spacing: 10px;  
单词间距：		word-spacing: 20px;  
文本转换：		text-transform: capitalize/uppercase/lowercase ; 
				文本转换，用于所有字句变成大写或小写字母，或每个单词的首字母大写

背景：			background-color: red
				background-image: url('1.jpg');		 
				background-repeat: no-repeat;(repeat:平铺满)			 
				background-position: right top（20px 20px）;
边框：
				border-style: solid;  --dotted,	none		  
				border-color: chartreuse;			  
				border-width: 20px;

position(定位)：position：relative;	  相对定位
						  absolute;   绝对定位
						  fixed;      固定位置
dispaly属性：	
				display:none;    		隐藏  
						block,			内联标签设置为块级标签
						inline,			块级标签设置为内联标签
						inline-block	块级标签设置为内联标签
margine外边框：
				
	居中应用：  margin: 0 auto;	

	简写属性：	margin:10px 20px 20px 10px；
				        上边距为10px
				        右边距为20px
				        下边距为20px
				        左边距为10px

				margin:10px 20px 10px;
				        上边距为10px
				        左右边距为20px
				        下边距为10px

				margin:10px 20px;
				        上下边距为10px
				        左右边距为20px

				margin:25px;
				        所有的4个边距都是25px

思考2：margin collapse（边界塌陷或者说边界重叠） 解决方法：overflow: hidden;

	1、兄弟div：
	上面div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里最大值作为显示值

	2、父子div：
	if 父级div中没有border，padding，inlinecontent，子级div的margin会一直向上找，直到找到某个标签包括border，padding，inline content中的其中一个，然后按此div 进行margin；

float属性

所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。

脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位

假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。此外，浮动的框之后的block元素元素会认为这个框不存在，但其中的文本依然会为这个元素让出位置。浮动的框之后的inline元素，会为这个框空出位置，然后按顺序排列。

示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }

        .r1{
            width: 300px;
            height: 100px;
            background-color: #7A77C8;
            float: left;
        }
        .r2{
            width: 200px;
            height: 200px;
            background-color: wheat;
            /*float: left;*/

        }
        .r3{
            width: 100px;
            height: 200px;
            background-color: darkgreen;
            float: left;
        }
    </style>
</head>
<body>
<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>
</body>
</html>

非完全脱离文档流
解决方法：要么都不使用浮动；要么都使用float浮动；要么对没有使用float浮动的DIV设置margin样式。

左右结构div盒子重叠现象，一般是由于相邻两个DIV一个使用浮动一个没有使用浮动。导致DIV
不是在同个“平面”上，但内容不会造成覆盖现象，只有DIV形成覆盖现象。

示例代码： 
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }

        .r1{
            width: 100px;
            height: 100px;
            background-color: #7A77C8;
            float: left;
        }
        .r2{
            width: 200px;
            height: 200px;
            background-color: wheat;

        }
    </style>
</head>
<body>
<div class="r1"></div>
<div class="r2">region2</div>
</body>
</html>

父级坍塌现象
解决方法：1、固定高度
2、清除浮动(推荐)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style type="text/css">
         * {
             margin:0;padding:0;
         }
        .container{
            border:1px solid red;width:300px;
        }
        #box1{
            background-color:green;float:left;width:100px;height:100px;
        }
        #box2{
            background-color:deeppink; float:right;width:100px;height:100px; 
        }
         #box3{
             background-color:pink;height:40px;
         }
</style>
</head>
<body>

        <div class="container">
                <div id="box1">box1 向左浮动</div>
                <div id="box2">box2 向右浮动</div>
        </div>
        <div id="box3">box3</div>
</body>
</body>
</html>

例子如上：.container和box3的布局是上下结构，上图发现box3跑到了上面，与.container产生了重叠，
但文本内容没有发生覆盖，只有div发生覆盖现象。这个原因是因为第一个大盒子里的子元素使用了浮动，
脱离了文档流，导致.container没有被撑开。box3认为.container没有高度（未被撑开），因此跑上去了。