CSS中常用样式总结

目录

1 CSS字体及文本属性

1.1 字体:(font)

1.2 文本(text)

1.3 border 属性有三个修饰属性

 1.4 边框的风格

2 CSS背景

2.1 行高

2.2 背景

3 CSS 行块儿元素

3.1 行元素和块元素

4 其他样式 


1 CSS字体及文本属性

样式调试工具

样式位置:

盒子模型:

1.1 字体:(font

/*字体的颜色*/

color: gray;

/*字体的大小*/

font-size: 12px;

/*字体的加粗*/

/*font-weight: bold;*/

/*字体的风格*/

/*font-family: 宋体;*/

/*字体倾斜*/

/*font-style: italic;*

1.2 文本(text

/*下划线展示*/

text-decoration: underline;

/*去除下划线*/

text-decoration: none;

/*文本居中*/

text-align: center;

1.3 border 属性有三个修饰属性

border-color

border-color:red;

border-top-color:blue;

border-width

border-width: 1px;

border-left-width: 3px;

border-style

border-style: solid

border-bottom-style: solid;

可以使用border统一设置

border: 1px solid red;

border-right: 5px dotted blue;

 1.4 边框的风格

 
测试代码
 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
			.top{
				
				width: 100%;
				
				height: 100px;
				
				border: 1px solid  red;
				
			}
			
			.top_a{
				/*字体的颜色*/
				color: gray;
				
				/*字体的大小*/
				
				font-size: 12px;
				/*
				/*字体的加粗*/
				/*font-weight: bold;*/
				/*字体的风格*/
			    /*font-family: 宋体;*/
				/*字体倾斜*/
				/*font-style: italic;*/
				
				
				/*去除下划线*/
				text-decoration: none;
			}
			
			a:hover{
				
				color: red;
				/*下划线展示*/
				text-decoration: underline;
				
			}
			
			.tips{
				
				width: 100%;
				
				height: 40px;
				
				border:  1px dotted indianred;
				/*背景颜色*/
				background-color: pink;
				
				/*文本居中*/
				text-align: center;
				
				/*行高  行高的高度和div外面的高度一致这时候里面的内容就会垂直居中*/
				line-height: 40px;
				
			}
			
			.center{
				
				width: 100%;
				
				height: 500px;
				
				border: 1px  solid  red;
               /*设置背景图片*/
                background-image: url("http://img30.360buyimg.com/da/jfs/t22399/154/765213112/96035/f94f9605/5b17512dN2de9d722.jpg");
				
				/*设置背景图片不重复*/
				
				background-repeat: no-repeat;
				
				/*调整背景图片的位置   X   Y*/
				background-position: center;
				
				/*调整背景图片的大小   宽  高  */
				/*background-size: 300px  500px;*/
				/*背景颜色    red   #f0000  rgb(255,0,0)  rgba(255,0,0,.5){包含透明度} */
				background-color: rgba(255,0,0,.5);
				
				
			}
			
		</style>
		
	</head>
	<body>
		<!--顶部的位置-->
		<div class="top">
		
		  <a href="" class="top_a">登录页面,调查问卷</a>
		</div>
		
		<!--中间的提示操作-->
		
		<div class="tips">
			
			<span>依据《网络安全法》,为保障您的账户安全和正常使用,请尽快完成手机号验证! 新版《京东隐私政策》已上线,将更有利于保护您的个人隐私。</span>
			
		</div>
		
		<div class="center">
			
			
			
		</div>
		
	</body>
</html>

 

效果:

2 CSS背景

2.1 行高

line-height: 40px;

2.2 背景

/*设置背景图片*/

background-image:

url("http://img30.360buyimg.com/da/jfs/t22399/154/7

65213112/96035/f94f9605/5b17512dN2de9d722.jpg");

/*设置背景图片不重复*/

background-repeat: no-repeat;

/*调整背景图片的位置

X Y*/

background-position: center;

/*调整背景图片的大小 宽 高 */

/*background-size: 300px 500px;*/

/*背景颜色 red

#f0000 rgb(255,0,0)

rgba(255,0,0,.5){包含透明度} */

background-color: rgba(255,0,0,.5);

3 CSS 行块儿元素

3.1 行元素和块元素

行内元素:(多个标签位于同一行)

span font 小标签 img a 等

块元素:(标签可以自动换行的元素是块元素)

div h1-h6 ul p等

4 其他样式 

/*调整透明度的属性 0-1*/

opacity: 0.4;

/*超出隐藏 hidden*/

overflow: hidden;

/*行内元素转块级元素inline block none(隐藏)*/

display: block;

 测试代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.div_1{
				
				width: 200px;
				
				height: 200px;
				
				background-color: rgba(255,0,0);
				
				color: rgba(0,0,255);
				
				/*调整透明度的属性  0-1*/
				opacity: 0.4;
				
				/*超出隐藏  hidden*/
				overflow: hidden;
				
				
			}
			
			#span_1{
				
				width: 100px;
				
				height: 100px;
				
				border: 1px solid red;
				/*行内元素转块级元素   inline   block  none(隐藏)*/
				display: block;
				
			}
			
			ul{
				
				float: right;
				
			}
			
			li{
				/*列表的风格去除*/
				list-style: none;
				
				float:left;
				/*内边距*/
				padding-left: 15px;
			}
			
		</style>
		
	</head>
	<body>
		
		
		<ul>
			<li><a href="">新闻</a></li>
			<li><a href="">hao123</a></li>
			<li><a href="">地图</a></li>
			<li><a href="">视频</a></li>
			<li><a href="">贴吧</a></li>
			<li><a href="">学术</a></li>
		</ul>
		
		<!--<hr />
		
		
		<div class="div_1">
			
			我们都是div我们都是div我们都是div我们都是div我们都是div
			我们都是div我们都是div我们都是div我们都是div我们都是div
			我们都是div我们都是div我们都是div我们都是div我们都是div
			我们都是div我们都是div我们都是div我们都是div我们都是div
			我们都是div我们都是div我们都是div我们都是div我们都是div
			
		</div>
		
		<hr />
		
		<span id="span_1">1234</span>
		
		<hr />
		-->
		
		
	</body>
</html>

效果:

浮动效果就是right从右向左浮动最开头的向右去挤,left是从左向右浮动最开头的向左去挤!
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答1: 可以使用JavaScript来动态修改CSS样式。 首先,用document.querySelector()或document.getElementById()等方法获取要修改样式的元素。 然后,使用element.style.property = value来修改样式属性的值,其element是获取到的元素,property是要修改的样式属性,value是该属性的新值。例如,要修改元素的背景色为红色,可以这样写: ```javascript var element = document.querySelector('.my-element'); element.style.backgroundColor = 'red'; ``` 另外,也可以使用element.setAttribute('style', 'property: value;')来修改元素的style属性,其property和value的含义同上。例如: ```javascript var element = document.getElementById('my-element'); element.setAttribute('style', 'background-color: red;'); ``` ### 回答2: 动态修改CSS样式有多种方式。一种常用的方式是使用JavaScript来修改元素的样式。通过JavaScript可以通过获取元素的引用,然后使用该引用来修改元素的样式。可以使用元素的style属性来直接修改元素的内联样式,也可以使用classList属性来修改元素的类名。通过修改类名,可以通过预先定义好的CSS样式来改变元素的样式。 举例来说,假设我们有一个id为"myElement"的元素,它的颜色是蓝色,现在我们想将它的颜色改为红色。我们可以使用以下JavaScript代码来实现: ```javascript var element = document.getElementById("myElement"); element.style.color = "red"; ``` 以上代码通过getElementById方法获取到id为"myElement"的元素,并将其引用赋值给变量element。然后,通过设置元素的style.color属性为"red",将元素的颜色修改为红色。 另一种方式是使用classList属性来添加、移除或切换元素的类名。我们可以先在CSS定义一个名为"red-color"的类,该类的样式是将颜色设置为红色。然后,通过JavaScript可以将该类名添加到或从元素的classList来改变元素的样式。 ```javascript var element = document.getElementById("myElement"); element.classList.add("red-color"); ``` 以上代码使用classList.add方法将名为"red-color"的类名添加到元素的classList,从而改变元素的样式为红色。 总结起来,动态修改CSS样式可以通过JavaScript来实现,通过直接修改元素的style属性或通过classList来修改元素的类名来改变元素的样式

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

赵广陆

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值