前端 CSS 笔记1

最新推荐文章于 2024-07-20 13:07:26 发布
最新推荐文章于 2024-07-20 13:07:26 发布
阅读量260 收藏
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wu_yan_zu/article/details/51176068
版权

CSS背景

设置背景颜色  点击打开链接 

<span style="font-size:18px;"><head>
<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
p.no2 {background-color: gray; padding: 20px;}
</style>
</head>
<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<p>这是段落</p>
<p class="no2">这个段落设置了内边距。</p>
</body>
</span>

 文本背景颜色 点击打开链接 

<head>
<style type="text/css">
span.highlight
{
background-color:yellow
}
</style>
</head>

<body>
<p>
<span class="highlight">这里的文本变色。</span> 这里的不变。
</p>
</body><span style="color:#ff0000;">
</span>

图像设置为背景  点击打开链接 

<head>
<style type="text/css">
body {background-image:url(/i/eg_bg_04.gif);}
p.flower {background-image: url(/i/eg_bg_03.gif); padding: 20px;}
a.radio {background-image: url(/i/eg_bg_07.gif);  padding: 20px;}
</style>
</head>

<body>
<p class="flower">我是一个有花纹背景的段落。<a href="#" class="radio">我是一个有放射性背景的链接。</a></p>
<p><b>注释：</b>为了清晰地显示出段落和链接的背景图像，我们为它们设置了少许内边距。</p>
</body><span style="color:#ff0000;">
</span>
重复图像背景  点击打开链接 

<head>
<style type="text/css">
body
{ 
background-image: 
url(/i/eg_bg_03.gif);
background-repeat: repeat
}
</style>
<pre name="code" class="html"></head>
 
 
 
 
 

 

 
 水平或垂直方向重复  点击打开链接 

 

 
 
  

 

 
  
 
background-repeat: repeat-x
 
 
 
  
  
 
 
 
 
 仅显示一次背景 点击打开链接 

 

 
 
  
 
background-repeat: no-repeat
 
 
 
 定位方法  点击打开链接 

 

 
 
  

 

 
  
 
background-position:center;
 
 
 
 
background-position: 30% 20%; 
 
 
 
 
background-position: 50px 100px;
 
 
 
 
 

 

 
 所有背景属性在一个声明之中 点击打开链接 
 
 

 

 
 
  

 

 
 
  

 

 
  
 
<span style="font-size:18px;"><style type="text/css">
body
{  
background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center; 
}
</style></span>
 
 
 
 
 

 

 
 
  

 

 
 
  


                

        

        

    

  


    

      

        

            

              
                
                  一只学酥
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
css课堂笔记前端css课堂笔记

				
			

			

				

					08-05
				

			

		

		

			
				
CSS课堂笔记  本文档详细介绍了CSS的基本概念、语法、选择器、导入方式等知识点，为读者提供了系统的CSS基础知识。  一、CSS概念  CSS（Cascading Style Sheets）是一种用来表现HTML或XML等文件样式的计算机语言。...

			
		

	



                

            
              



	

		

			

				
					
前端笔记汇总

				
			

			

				

					西楼的博客
				

				

					01-06
					
					5693
					
				

			

		

		

			
				
目录

目录

前端基础

HTML

1.基本标签

2.页面结构分析

3.高级标签

CSS

1.基础知识

2.美化网页

JS

1.基础知识

2.数据类型详解

3.函数

4.面向对象编程

5.操作BOM对象(重点)

6.操作DOM对象(重点）

7.操作form表单

8. jQuery

9.总结

前端基础

课程听的是b站狂神说：狂神说    笔记有些是借鉴：夜里的雨

HTML

1.基本标签


<!DOCTYPE html>
<html...

			
		

	



              


  
              

                


	

		

			

				
					
前端学习笔记

				
			

			

				

					m0_54828595的博客
				

				

					04-23
					
					2377
					
				

			

		

		

			
				
前端学习笔记

前端第一阶段代码由三部分组成：
1.文件头（类似于c语言的#include<… .h>）
2.head部分，其中又包括title部分
3.body部分。
<!DOCTYPE html>//文件头
<html>
    <head>
        <title>我的第一个网页</title>//负责网页的标签内容
    </head>
    <body&g...

			
		

	





	

		

			

				
					
前端基础学习笔记

				
			

			

				

					weixin_52840684的博客
				

				

					02-22
					
					335
					
				

			

		

		

			
				
前端基础学习笔记

			
		

	



		

			
		



	

		

			

				
					
前端知识笔记

				
			

			

				

					mjs677的博客
				

				

					04-23
					
					2274
					
				

			

		

		

			
				
一.html
1.html基础
1.1html标题
html设置了-级标题
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

1.2html段落
html段落由标签进行定义
<p>This is a paragraph.</p>
<p>This is another paragraph.&

			
		

	





	

		

			

				
					
前端自己总结笔记

				
			

			

				

					qq_42717015的博客
				

				

					06-02
					
					1421
					
				

			

		

		

			
				
无摘要

			
		

	





	

		

			

				
					
html+css前端学习笔记.zip

				
			

			

				

					01-01
				

			

		

		

			
				
html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习...

			
		

	





	

		

			

				
					
黑马前端css笔记.zip

				
			

			

				

					08-14
				

			

		

		

			
				
总结，"黑马前端css笔记.zip"包含了CSS3的重要知识点，如选择器扩展、媒体查询、响应式设计、渐变效果、布局技术（Flexbox和Grid）以及动画过渡等。这些内容对于前端开发人员深入理解和运用CSS3至关重要，能帮助他们...

			
		

	





	

		

			

				
					
html+css学习笔记 前端
 CSS
 html

				
			

			

				

					11-02
				

			

		

		

			
				
学习了一个月的前端笔记

			
		

	





	

		

			

				
					
前端三件套css学习笔记分享

				
			

			

				

					02-24
				

			

		

		

			
				
前端三件套css学习笔记分享

			
		

	





	

		

			

				
					
前端学习笔记（一）：HTML+CSS基础

				
			

			

				

					憬淮的博客
				

				

					11-16
					
					2360
					
				

			

		

		

			
				
前端笔记01，web端html+css基础

			
		

	





	

		

			

				
					
前端的学习笔记(部分)

				
			

			

				

					m0_52403880的博客
				

				

					07-27
					
					3371
					
				

			

		

		

			
				
前端

这是自己通过B站学习所记录的前端笔记，仅供个人使用
如果你也想学习课程，下面这里是传送门:传  送  门！！！

HTML
网页
网站
网站是指在因特网上更具一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。
网页是网站中的一"页",通常是HTML格式的文件，它要通过浏览器来阅读。
网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频、等元素组成。通常我们看到的网页，常见以**.htm或.html后缀接吻的文件，因此将其俗称为HTML文件**。
HTML
HTML指的是超文本

			
		

	





	

		

			

				
					
日常整理的一些前端知识点笔记

				
			

			

				

					ThinkPet
				

				

					07-27
					
					898
					
				

			

		

		

			
				
Babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在老版本的浏览器执行。这意味着，你可以用 ES6 的方式编写程序，又不用担心现有环境是否支持Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了`Promise`对象。所谓`Promise`，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。

			
		

	





	

		

			

				
					
html5——前端笔记

				
			

			

				

					qq_48721706的博客
				

				

					09-02
					
					2900
					
				

			

		

		

			
				
html笔记

			
		

	





	

		

			

				
					
前端学习笔记（三）：js基础

				
			

			

				

					憬淮的博客
				

				

					12-03
					
					2909
					
				

			

		

		

			
				
前端学习js基础

			
		

	





	

		

			

				
					
边学边总结的前端笔记（JavaScript基础篇）

				
			

			

				

					segegefe的博客
				

				

					03-10
					
					1316
					
				

			

		

		

			
				
「学习笔记」JavaScript基础
前言
最近一直研究JavaScript内容，遂把这一阶段的学习内容整理成笔记，巩固所学知识，同时也会参考一些博客，书籍上的内容，查漏补缺，给自己充充电???

文章内容如有错误，欢迎指正批评

工欲善其事，必先利其器，为了提高开发效率，选用VScode。


管理-设置-常用设置-字体Consolas, ‘微软雅黑 Light’, monospace


Chinese汉化Vscode


Prettier格式化代码(缩进2格)


Auto Rename Tag同步修

			
		

	





	

		

			

				
					
前端开发学习笔记

					
最新发布

				
			

			

				

					m0_57002446的博客
				

				

					07-20
					
					1494
					
				

			

		

		

			
				
前端常用组件：HTML，CSS，JavaScript，JQuery，BootStrapHTML->实现网站的骨架，CSS->使网站点缀更好，JavaScript->让网页动起来，JQuery->第三方模块，能够用少量的代码简单实现动态效果，相当于帮你封装了很多JavaScript的功能，BootStrap->为我们提供了很多CSS+JavaScript效果，帮你实现了80%的功能。

			
		

	





	

		

			

				
					
前端基础（HTML，CSS，JavaScript）知识笔记，附，面试需要讲什么

				
			

			

				

					
				

				

					04-13
					
					730
					
				

			

		

		

			
				
列表定义一个无序列表代表无需列表中的每一个元素有序列表：ol,li定义列表：__，定义列表通常和 和 标签一起使用7. 表格标签_表格标签_表格的一行表格的表头单元格表格合并，同一行内，合并几列colspan=“2”，同一列内，合并几行rowspan=“3”8. 表单标签_表单标签表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。action，浏览者输入的数据被传送到的地方 method，数据传送的方式输入标签。

			
		

	





	

		

			

				
					
前端新手必备：CSS全套笔记详解

				
			

			

				

					
				

			

		

		

			
				
"这是一份全面的前端CSS学习笔记，非常适合初学者阅读。笔记内容包含了CSS的基本组成部分、代码风格规范以及基础选择器的讲解。同时，还提到了使用VSCode进行代码格式化的快捷键（Shift+Alt+F）以及如何通过大前端...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值