CSS的简单使用

最新推荐文章于 2024-05-06 21:49:54 发布
最新推荐文章于 2024-05-06 21:49:54 发布
阅读量188 收藏 2
点赞数 3
分类专栏： 前端 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43336579/article/details/109892039
版权

CSS

什么是CSS?
Cacading Style Sheet :层叠样式表
用来修饰html标签

CSS的使用方式(三种)

  • 行内样式,在html标签中使用
    每一个html标签都有style属性 : 写入样式属性
    弊端:
    1.只能针对某一个html进行修饰
    2.css代码和html标签混到一块,不好管理
<a href="#" style="font-size: 30px;color: green;text-decoration: none;">超链接1</a>
  • 内部样式(内联样式)(自己使用)
    在head标签体中指定style标签,单独书写css代码
    弊端
    比行内样式好一些,但是不好管理
<style>
		body {
		 background: #76b852;
		}
</style>
  • 外部方式(外联样式) (推荐方式)
    在css文件夹下面单独创建一个以后缀名为css文件
    在当前html页面中引入css文件即可
    在head标签体中指定link href=“引入css文件” rel=“stylesheet”
<link href="css/index.css" rel="stylesheet" style="text/css"/>

CSS选择器
优先级:id选择器>类选择器>标签选择器

  • 标签选择器
    选中所有同名的标签
 标签名称{
				样式代码;
		}
div{
			font-size:30px;
			color: #B3B34D;
					
	}
  • class类选择器
    可以选中页面标签中所有的同名的class属性
.class属性值{
						书写样式代码;
			}
.ch1{
				 font-size: 40px;
				 color: red;
	}
  • id选择器
    在页面标签中必须指定唯一的id属性值
    标签中id属性值不能重复
#id属性值{
						css样式代码;
		}
 #d1{
				 font-size: 20px;
				 color: lawngreen;
	 }
  • 并集选择
选择器,选择器2{  //控制多个标签
				css样式代码
			}
 #d1,#d2{
			  font-size: 35px;
			  color: blue;
			  text-decoration: underline;
		  }
  • 交集选择器—后代选择器
选择器1 选择器2{
				css样式代码;
			}
 #d1 span{
			  font-size: 20px;
			  color: greenyellow;
		  }
  • 通用选择器
    *:通配符
*{
				css样式代码
			}
*{
			color:red ;
		}

伪类选择器

  • link状态:鼠标没有访问的状态
  • hover:鼠标经过标签状态
  • active:激活状态 鼠标点击但是没有松开的状态
  • visited:已经的访问过的:点击后松开的状态

提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

格式


选择器:状态{
					
			css样式代码
		 }

示例

 <style>
			 /*没有访问过的状态*/
			 a:link{
				 font-size: 20px;
				 color: red;
			 }
			 
			 /*访问过的状态,点击了并松开了 visited*/
			 a:visited{
			 				 font-size: 20px;
			 				 color: darkgray;
			 				 text-decoration: none;
			 }
			 /*鼠标经过状态:hover*/
			 a:hover{
				 font-size: 25px;
				 color: green;
				 /*文本修饰*/
				 text-decoration: none;
			 }
			 /*鼠标激活状态:点击但是没有松开的状态 active*/
			 a:active{
				 font-size: 30px;
				 color: blue;
				 text-decoration: underline;
			 }
 </style>

效果
link
在这里插入图片描述
hover
在这里插入图片描述
active
在这里插入图片描述
visited
在这里插入图片描述
CSS文本属性

body{
				/*color:设置文本颜色*/
				color: red;
				/*direction:设置文本方向:
				默认值:ltr*/
				direction: ltr;
				/*line-height:设置行高 :行间距*/
				/* line-height: 5px; */
				/*letter-spacing:字符间距*/
				letter-spacing: 10px;
				/*设置的对齐方式 text-align*/
				text-align: center;
				/*text-decoration:设置文本修饰
					none:默认值
					line-through:中划线
					overline:上划线
					underline:下划线
				*/
				text-decoration:none;
				/* word-spacing:单词间距
					系统默认两个字组成一个单词
				*/
				word-spacing: 10px;

					/*font-family :字体系列
					是字体库中的有字体
				*/
			   /*
			   font-family: "楷体";
			   */
			   /*font-size:字体大小*/
			   /*
			   font-size: 30px;
			   */
			   /*font-style:字体风格
				默认值:normal :正常的字体
				
			   */
			  /*
			 font-style: italic; 
			*/
			/* font-style: oblique; */
			/*font-weight:设置字体的粗细程度
				bold 等价700px 适当加粗
			*/
		   /*
			font-weight: bold;
			*/
		   
		   /*
		   font字体的简写属性:将所有的字体属性在声明中定义
		   font:font-style font-weight font-size  font-family
		   */
		   /*
		  font:italic bold 40px "楷体";
		  */
	}

效果
在这里插入图片描述
CSS背景属性

body{
			
			/*背景颜色:background-color*/
			/*
			background-color: darkgray;
			*/
			/*background-image:设置图像为背景*/
			/*
			background-image: url(img/高圆圆.jpg);
			*/
			/*background-repeat:设置图像是否重复以及如何重复
				repeat:水平方向/垂直方向重复
				repeat-x:水平方向重复
				repeat-y:垂直方向重复
				no-repeat:不重复
			*/
		   
		   /* background-repeat: no-repeat; */
		   /*
			如果设置图像不重复,默认的位置 top left
			backgroun-position:top left
			
			图像的位置
			  top
			  center
			  bottom
			  
			 图像放置在浏览器的位置
			 left
			 center
			 right
					
		   */
		 /* background-position: top left; */
		 
		 /*
			背景的简写属性:background
			background:background-color background-position 
			background-repeat background-image
		 */
		background: red top center no-repeat url(img/高圆圆.jpg);
		}

CSS列表属性

ul{
				/*list-style-type :设置列表前面的标记图形*/
				/* list-style-type: none; */
				/*list-style-image:自定义图形*/
				/* list-style-image: url(img/start.jpg); */
				
				/*list-style简写属性
					list-tyle:list-style-type list-style-image
				*/
			   list-style: none url(img/start.jpg);
			}

CSS表格属性

table{
				/*border-collapse :设边框和单元之间空隙 
					指定为collapse
				*/
			   border-collapse: collapse;
			}

CSS边框属性

 #d1{
				 /*边框有四个边:给四个边分别设置颜色
				 
				注意事项:
				     1) 某个边框没有设置颜色,宽度或者样式,它会补齐对边的颜色,宽度以及样式
					
					2)默认的方向:边框的颜色/边框的宽度/边框的样式:上  右  下 左
					border-top-color
					border-left-color
					border-right-color
					border-bottom-color
				 */
				/*
				border-top-color: #F00;
				border-left-color: #00F;
			    border-right-color: #0F0;
				 border-bottom-color: #c90; 
				 *
				/*边框颜色的简写属性*/
			/* 	border-color: #F00; */
				/*
					边框的宽度:四个边框的宽度大小
					border-top-width
					border-left-width
					border-right-width
					border-bottom-width
				*/
			   /* border-width: 10px; */
			   /*
			   border-top-width: 10px;
			   border-left-width: 20px;
			   border-right-width: 30px;
			   border-bottom-width: 40px;
			   */
			  
			  
			   
			   /*
			   边框的四个边要想显示出来必须设置
						边框的样式属性:必须存在 
						border-top-style
						border-left-stylee
						border-rigth-style	
					    border-bottom-style
			   */
			  /*
			  border-top-style: solid;
			  border-left-style: double;
			  border-right-style: dotted;
			  border-bottom-style: dashed;
			  */
			 
			 /*边框样式的简写属性*/
			 /* border-style: solid; */
			 
			 
			 /*边框的简写属性:
				border:border-width border-style border-color
			 */
			border:5px solid #000;
			width: 100px;
			height: 100px;
					
					
				 
			 }

CSS浮动属性

#dl1{
				width: 200px;
				height: 200px;
				border:1px solid #000 ;
				background-color: #F00;
/* 
				浮动属性:float
				    值:left:左浮动  right:有浮动
					一旦元素设置了浮动属性,就会脱离文档流
				 */
				float:left;
			}
			#dl2{
				width: 200px;
				height: 200px;
				border:1px solid #000 ;
				background-color: #00F;
				float:left;
			}
			

		#dl3{
				width: 200px;
				height: 200px;
				border:1px solid #000 ;
				background-color: #0F0;
			}
			#clear{
				/*清除浮动属性
					clear:
					 left:左边不浮动
					 right:右边不浮动
					 both:左右两边浮动
					 
				*/
			}
				
			#clear{
				clear:both;
			}

CSS定位属性
position属性:定位

  • absolute:绝对定位
  • relative:相对定位

CSS盒子模型

盒子模型:万物皆盒子
将任意标签 看成是一个盒子---- 容量大小、厚度、内边距、外边距
在这里插入图片描述

为了让代码跑起来的我现在信了佛
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap CSS使用方法
11-30
Bootstrap中CSS的使用方法，供大家参考，具体内容如下 1、GitHub上这样介绍 bootstrap： :ballot_box_with_check: 简单灵活可用于架构流行的用户界面和交互接口的html、css、javascript工具集。 :ballot_box_with_...
CSS初级入门：样式的单独调用
zgqtxwd的专栏
04-30 330
<!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--><script type="text/javascript"
【Web前端入门】CSS知识详解——附源码
HTML网页设计
08-23 538
CSS 指层叠样式表 (Cascading Style Sheets)。样式定义如何显示 HTML 元素样式通常存储在样式表中外部样式表可以极大提高工作效率，通常存储在CSS文件中多个样式定义可层叠为一个p{color:red;}
css 学习
lduzhenlin的专栏
04-21 170
什么是“块”标签，什么是“内联”标签。 “块”标签，可以理解为，和div类似的标签，定义width height 有效果的标签。 “内联”标签，可以理解为，和span类似的标签，定义width height 没有效果的标签。 （“块”标签一般用于网页布局，“内联”标签用于修饰文本） 选择器的种类和用法，以及优先顺序。 style关联>id选择器>class选择器>htm...
CSS简单使用
菜鸟-翡青
05-15 4809
CSS简单使用标签 ： 前端技术 CSS(Cascading Style Sheet : 层叠样式表单)用来定义网页显示效果. 可以解决HTML代码对样式定义的重复,提高后期样式代码的可维护性,并增强网页的显示效果. 即:CSS将网页内容与显示样式分离,增强了显示功能. CSS与HTML结合CSS与HTML结合的方式有四种: style属性: 在每个HTML标签上均有一个style属性, 将样
使用 HTML、CSS 和 JavaScript 的简单模拟时钟
热门推荐
努力是为了站在万人之中，成为别人的光
08-16 3万+
如果你想使用 JavaScript 制作一个模拟时钟，那么本文将对你有所帮助。我们都知道时钟有两种，一种是模拟的，一种是数字的。虽然数字时钟被广泛使用，但模拟时钟也被很多人所喜爱。 ????使用 HTML、CSS 和 JavaScript 的简单模拟时钟???? JavaScript 模拟时钟 [现场演示]???? 使用 HTML、CSS 和 JavaScript 的简单模拟时钟???? 第 1 步：创建时钟的基本结构???? 第 2 步：在时钟上标记 1 到 12???? 第 3 步：制作三只指针来指示
使用CSS脉动星球效果
12-19
使用CSS脉动星球效果，CSS（层叠样式表）是一种用来表现HTML（标准通用标记语言的一个应用）...样式通常保存在外部的 .css 文件中，我们只需要编辑一个简单的 CSS 文档然后引用该文档就可以改变所有页面的布局和外观。
简单介绍CSS hack的使用
01-19
但是，随着工作中的不断实践，改变了我的观点，css hack 虽然不能通过 w3c 标准认证，但适当是使用很有可能会使你的 HTML 结构更紧凑、有效的减少无语义标签或带来其他好处。 1.IE条件注释法该方法安全性好，但是不...
使用css绘制的iphoneX界面
06-05
使用css绘制的苹果X手机界面，配合JQ可以体现出更多效果
Vue 插槽
体系化很难，碎片归纳很简单。
05-06 579
Vue插槽是一种特殊的语法，用于在组件中定义可复用的模板部分。它允许开发者在组件的标记中声明一个或多个插槽，然后在使用该组件时，可以根据自己的需求将内容插入到这些插槽中。Vue插槽分为默认插槽和具名插槽两种。
前端科举八股文-CSS篇
星海拾遗
04-25 1166
BFC 块级格式化上下文，它是指页面的一块独立的渲染区域，和其他区域相互独立出来互不干扰。它可以解决外边距折叠和高度塌陷的问题。根据它的定义，可以设置position不为static，overflow不为visible，或者设置浮动都可以设置BFC。
CSS悬浮动画
最新发布
L_Y_J_21的博客
05-06 169
【代码】CSS悬浮动画。
今日分享【CSS中的经典使用】
fengGer的博客
05-06 440
css中的经典样式案例，双飞翼布局
【css】好看的标签栏
Mozifei73的博客
05-06 122
【代码】【css】好看的标签栏。
探索CSS中的贝塞尔曲线cubic-bezier()函数：掌握自定义动画曲线的艺术
艾恩小灰灰的博客
05-03 570
cubic-bezier函数是CSS中用于定义动画速度变化的一种时间函数，属于属性的值之一。它通过四个参数定义了一个三次贝塞尔曲线，决定了动画在不同时间段的速度变化。这四个参数分别代表了贝塞尔曲线的两个控制点坐标，决定了动画的加速、减速模式。想象一下，我们要创建一个具有弹跳效果的动画，我们可以这样定义.bounce {在这个例子中，我们定义了一个初始快速上升，随后缓慢下降再快速回弹至原位的弹跳动画效果。掌握函数，意味着你拥有了创造丰富动画体验的钥匙。
HTML_CSS学习：定位
m0_74972727的博客
05-06 389
【代码】HTML_CSS学习：定位。
CSS 中的 Clamp 函数：掌握动态布局的秘籍
艾恩小灰灰的博客
05-02 446
clamp()函数是一种CSS数学函数，用于将一个值限制在一个指定的区间内。minimum: 允许的最小值。value: 基于某些计算或变量的期望值。maximum: 允许的最大值。当计算出的值小于minimum时，返回minimum；当计算值大于maximum时，返回maximum；如果计算值在两者之间，则返回该值本身。clamp()函数是CSS中一个强大的工具，它在提升网页响应性和用户界面设计的灵活性方面发挥着重要作用。
flex动态变化失效
IT_moshang的博客
05-06 154
问题：父级设置了display:flex，子级下面的dom节点个数会动态变化，每个子节点都是flex:1，会出现flex:1失效的问题。
CSS Web服务器、2D、动画和3D转换
2302_77099705的博客
05-06 763
服务器(我们也会称之为主机)是提供计算服务的设备，它也是一台计算机。在网络环境下，根据服务器提供的服务类型不同，服务器又分为文件服务器、数据库服务器、应用程序服务器、Web服务器等。Web服务器一般指网站服务器，是指驻留于因特网上某种类型计算机的程序，可以向浏览器等Web客户端提供文档，也可以放置网站文件，让全世界浏览；也可以放置数据文件，让全世界下载。以下服务器我们主要指的是Web服务器。根据服务器在网络中所在的位置不同，又可以分为本地服务器和远程服务器。
css如何使用
05-31
以下是一个简单的 CSS 代码示例，它会将页面中所有段落的文本颜色设置为红色： ```css p { color: red; } ``` 在这个例子中，`p` 是选择器，用于选择页面中所有的段落元素。`color` 是属性，用于设置文本颜色的值...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值