文章
文章用户

CSS基础笔记

CSS概述

CSS（层叠样式表）用于为HTML文档添加样式，它通过控制元素的布局、颜色、字体、间距等视觉效果，帮助设计出结构清晰、视觉美观的网页。CSS 可以内嵌在HTML文档中，也可以通过外部文件链接引用。

基础认知

CSS 的基本语法结构如下：

css 写在 style 标签中，style 标签一般写在 head 标签里面，title 标签下面

此方法为内嵌式：通过 style 属性直接在HTML标签中定义样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS语法</title>
    <style>
        /* 注释 */
        /* 选择器{css属性} */
        /* 选择器：查找标签 */
        p1{
            /* 文字颜色 */
            color: red;
            /* 字体 px：像素 */
            font-size: 30px;
            /* 背景色 */
            background-color: aqua;
            /* width height */
            width: 200px;
            height: 400px;
        }
    </style>
</head>
<body>
    <p1>p1红色字体标签</p1>
</body>
</html>

引入方式

  1. 内嵌式：css 写在 style 标签中注意：style 标签通常写在 head 标签中
  2. 外联式：css 写在 一个单独的 .css 的文件中注意：需要通过 link 标签在网页中引入
  3. 行内式：css 写在标签的 style 属性中注意：配合 js 使用
引入方式书写位置作用范围使用场景
内嵌式css 写在 style 标签中当前页面小案例
外联式css 写在 一个单独的 .css 的文件中多个页面项目中
行内式css 写在标签的 style 属性中当前标签配合 js 使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>引入式</title>
    <!-- stylesheet：关系为样式表 -->
    <link rel="stylesheet" href="引入式.css">
</head>
<body>
    <!-- 外联式：p1 -->
    <p1>p1标签</p1>
    <!--  行内式-->
    <div style="color: green; font-size: 20px;">div标签</div>
</body>
</html>
/* 选择器 {} */
p1{
    color: red;
}

基础选择器

1. 标签选择器

➢结构：标签名 {css 属性名：属性值；}

➢作用：通过标签名，找到页面中所有这类标签，设置样式

➢注意点:

  1. 标签选择器选择的是一 类标签， 而不是单独某一个
  2. 标签选择器无论嵌套关系有多深， 都能找到对应的标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础选择器</title>
    <style>
         /* 定义基础选择器 */
        p {
            color: red;
            font-size: 66px;
        }
    </style>
</head>
<body>
    <p>标签选择器</p>
</body>
</html>

2. 类选择器

➢结构: . 类名 {css 属性名：属性值；}

➢作用：通过类名，找到页面中所有带有这个类名的标签，设置样式

➢注意点:

  1. 所有标签上都有 class 属性，class 属性的属性值称为类名 (类似于名字)
  2. 类名可以由数字、 字母、下划线、中划线组成，但不能以数字或者中划线开头
  3. 一个标签可以同时有多个类名，类名之间以空格隔开
  4. 类名可以重复，一个类选择器可以同时选中多个标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础选择器</title>
    <style>
         /* 定义类选择器 */
        .red {
            color: red;
        }
 
        .size {
            font-size: 66px;
        }
    </style>
</head>
<body>
    <!-- 类： 定义 和 使用 才能生效 -->
    <p>普通p标签</p>
    <!-- 一个标签可以使用多个类名，需要空格隔开 -->
    <div class="red size">类选择器</div>
    <p class="red">加了class</p>
</body>
</html>

3. id 选择器

➢结构：#id 属性值 {css 属性名：属性值；}

➢作用：通过 id 属性值，找到页面中带有这个 id 属性值的标签，设置样式，配合 js 制作动态效果

➢注意点:

  1. 所有标签上都有 id 属性
  2. id 属性值类似于身份证号码， 在一个页面中是唯一的，不可重复的！
  3. 一个标签上只能有一个 id 属性值
  4. 一个 id 选择器只能选中一个标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>id选择器</title>
    <style>
        /* 定义id选择器 */
        #blue {
            color: skyblue;
        }
    </style>
</head>
<body>
    <div id="blue">蓝色div</div>
</body>
</html>

4. 通配符选择器

➢结构: * {css 属性名：属性值；}

➢作用：找到页面中所有的标签，设置样式

➢注意点:

  1. 开发中使用极少， 只会在极特殊情况下才会用到
  2. 小页面中可能会用于去除标签默认的 margin 和 padding (后续讲解)





字体和文本样式





1. 字体样式





    

  1. 字体大小：font-size 谷歌默认 16px
    2. 




  2. 字体粗细：font-weight 正常 normal/400 加粗 blod/700
    3. 




  3. 字体样式：font-style 倾斜 italic
    4. 




  4. 字体类型：font-family
    5. 




  5. 字体类型：font 属性连写
    6. 






<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体样式</title>
    <style>
        p {
            /* font-size: 18px;
            font-weight: 700;
            font-style: italic;
            font-family: 'Lucida Sans', 'Lucida Sans Regular',  sans-serif; */
 
            /* font: style  weight  size  字体; */
            font: normal 700 66px 宋体;
            /* font: 66px 宋体; 省略style、weight为默认 */
            font-style: italic;
 
 
            /* 一个属性冒号后面书写多个值：复合属性 */
        }
    </style>
</head>
<body> 
    <p>Hello World</p>
</body>
</html>





2. 文本样式





    

  1. 文本缩进：text-indent (1) 数字 + px (2) 数字 + em (推荐：1em = 当前标签 font-size 大小)
    2. 




  2. 文本对齐方式：text-align left 左对齐 center 居中对齐 right 右对齐
    3. 




  3. 文本修饰：text-decoration
    1. underline：下划线 (常用)
    2. line-through：删除线 (不常用)
    3. overline：上划线 (几乎不用)
    4. none：无装饰线 (常用)
    注意：开发中使用 text-decoration : none; 清除 a 标签默认的下划线
    4. 






<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本样式</title>
    <style>
        p {
            /* text-indent: 50px; */
            /* 首行缩进两个字大小 */
            text-indent: 2em;
            text-decoration: none;
        }
 
        h1 {
            text-align: left;
            text-align: right;
            text-align: center;
        }
 
        body {
            text-align: center;
        }
 
        /* 文本修饰 */
        div {
            text-decoration: underline;
        }
 
        h2 {
            text-decoration: line-through;
        }
 
        h3 {
            text-decoration: overline;
        }
 
        a {
            text-decoration: none;
        }
    </style>
</head>
<body>
    <h1>拣爱--Love Choice</h1>
 
    <img src="/ytea.png" alt="love choice">
 
    <p>所以英梨梨就算十年前就认识伦也一样没有胜算，我们哪里有游戏里重来的机会，每次的选择都会直通早就定好的结局。所以故事的结局远不如过程重要，我宁愿有一个不圆满的结局也希望有足够让人怀念的过程。剩下的，不过时也命也，人各有处，不必自缚。</p>
 
 
        <!-- 文本修饰 -->
        <div>div</div>
        <p>ppp</p>
        <h2>h2</h2>
        <h3>上划线</h3>
        <a href="https://www.ytea.top" target="_blank">我是一个超链接</a>
</body>
</html>





3. 行高





line-height：控制一行的上下间距





取值：





    

  1. 数字 + px
    2. 




  2. 倍数（当前标签 font-size 的倍数）
    3. 






应用：





    

  1. 让单行文本垂直居中可以设置 line-height : 文字父元素高度
    2. 




  2. 网页精准布局时， 会设置 line-height: 1 可以取消上下间距
    3. 






行高与 font 连写的注意点：





    

  1. 如果同时设置了行高和 font 连写，注意覆盖问题
    2. 




  2. 字体：样式粗细大小/行高系列 ;
    3. 






<!DOCTYPE html>
<html lang="en">
<head> 
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行高</title>
    <style>
        p {
            font-weight: 600;
            font-family: 宋体;
            line-height: 50px;
 
            /* 60px 宋体 倾斜 加粗 行高2倍 */
            font: italic 700 30px/2 宋体;
        }
    </style>
</head>
<body>
    <p>英梨梨就算十年前就认识伦也一样没有胜算，我们哪里有游戏里重来的机会，每次的选择都会直通早就定好的结局。所以故事的结局远不如过程重要，我宁愿有一个不圆满的结局也希望有足够让人怀念的过程。剩下的，不过时也命也，人各有处，不必自缚。</p>
</body>
</html>





拓展





1. 颜色取值





颜色表示方式表示含义属性值
关键词预定义的颜色名红、绿、蓝、 耶洛…..
rgb 表示法红绿蓝三原色。每项取值范围: 0~255rgb（0,0,0）、rgb（255,255,255）、 r2550….
rgba 表示法红绿蓝三原色 + a 表示透明度，取值范围是 0~1RGBA（255,255,255,0.5）、RGBA（255,0,0,0.3….
十六进制表示法#开头，将数字转换成十六进制表示#000000、#f0000、 #e92322， 简写： #000、 #f00





2. 标签水平居中





方法总结：margin : 0 auto





让 div、p、h (大盒子) 水平居中：通过 margin : 0 auto ; 实现，其中 0 为上下间距，auto 为左右间距





注意：





    

  1. 如果需要让 div、 p、h (大盒子) 水平居中，直接给当前元素本身设置即可
    2. 




  2. margin: 0 auto – 般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度
    3. 






<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签水平居中</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>





实践与总结





学习和掌握CSS的基本语法及布局技巧有助于提高前端开发效率，优化网页设计。 HTML语义化和CSS布局技巧是现代前端开发中不可忽视的两项基本技能，它们不仅影响网页的外观，还能提高网页的可访问性、可维护性和SEO表现。 在实际开发中，推荐使用外部CSS文件进行样式管理，避免内联和内嵌样式的过度使用，保持代码的清晰和模块化。


                    


    
            

                

                    

                        
                        
                        
                    

                    

                        
                        
                    

                

            

        

                

                    

                        

                            

                                

                                
网络基础

                                
HTML基础

                                
2024-6-7 13:47:21

                            

                        

                    

                    

                        

                            

                                
网络基础

                                
Linux常见查找命令

                                
2024-5-28 20:00:08

                                

                            

                        

                    

                

            



		

		

			
				0 条回复			
			A文章作者
			M管理员
		

		

			
			
		

	


	

				

						

				
			

			

				

					

						

						

							
							
						

					

					

						
					

				

				

					

						
						
					

					

						
			
													

								

								

									

										

											
											
											
											
										

										

											
											
											
										

									

									

										
										
										
									

								

								

									
									
								

							

											

				

				

					

													
							

															

																			

								
								

									

										
										

											
											
										

									

									

										
										
									

								

							

											

					

						
						
					

				

			

		

			


	


		
    
			
    暂无讨论，说说你的看法吧
    		

			

	

		
	






                        


        
        
    

    
            
            

                
            


            
            

                
            


            
            

            
            

                
            

            
            
            

                
            


            
            

                
            


            
            

                
            


            
            

                
            


            
            

                
            


            
            

                
            


            
            

                
            


            
            

                
            


            
            

                
            


            
            

                
            

        
                
                

                    
                

                    

            

                

                    

                        

                            ❯
                        

                    

                                                            

                                                                                                                                                
                                                    

                                                                搜索
                            

                        
                                            

                    

                                                

                                                        

                                
  • 扫码打开当前页

                            

                        

                        

                                                        返回顶部