css

最新推荐文章于 2024-07-03 17:59:27 发布
最新推荐文章于 2024-07-03 17:59:27 发布
阅读量125 收藏
点赞数
分类专栏： 笔记 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44721518/article/details/108120817
版权 
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="Untitled2.css">
  <title>Document</title>
 </head>
 <body>
      <del>原价50元</del>
	  <span>原价50元</span>
 </body>
</html>

在这里插入图片描述
如果添加css如下：

span{
   text-decoration:line-through;
}

在这里插入图片描述

span{
   text-decoration:line-through;
}
del{
   text-decoration:none;
}

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="Untitled2.css">
  <title>Document</title>
 </head>
 <body>
      <a href="www.baidu.com">www.baidu.com</a>
	  <span> www.baidu.com</span>
 </body>
</html>





span{
   color:rgb(0,0,238);
   text-decoration:underline;/*overline上划线*/
   cursor:pointer;/*该属性控制当鼠标移到特殊位置时它会变成什么图标*/
}

在这里插入图片描述
伪类选择器

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="Untitled2.css">
  <title>Document</title>
 </head>
 <body>
      <a href="www.baidu.com">www.baidu.com</a>
	  
 </body>
</html>


a:hover{
  background-color:red;
}

在这里插入图片描述
当鼠标进入该字符串区域时会由原来的颜色变为红色。

[href]:hover{
  background-color:red;
}

效果与上一个一样。只要是选择器：hover即可实线伪类选择器的功能。

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="Untitled2.css">
  <title>Document</title>
 </head>
 <body>
      <a href="www.baidu.com">www.baidu.com</a>
	  <a href="www.taobao.com">www.taobao.com</a>
	  <a href="www.jd.com">www.jd.com</a>

	  
 </body>
</html>


a:hover{
  background-color: #f40;
  color:#fff;
  font-size:16px;
  font-weight:bold;
  font-family:arial;
  border-radius:10px;
}

在这里插入图片描述

原本没有下划线，鼠标点进的时候出现下划线等。

a{
  text-decoration:none;
}
a:hover{
  text-decoration:underline;
  background-color: #f40;
  color:#fff;
  font-size:16px;
  font-weight:bold;
  font-family:arial;
  border-radius:10px;
}

在这里插入图片描述

<!--1.行级(内联)元素 inline
feature:内容决定元素所占位置
         不可以通过css改变宽高
span strong em a del
    2.块级元素 block
feature:独占一行
        可以通过css改变宽高
div p ul ol form address
    3.行级块元素  inline-block
feature:内容决定元素所占位置
        可以通过css改变宽高
img 
-->

分别有display这个属性来控制是什么元素，下图都是默认的，也可以修改。
span{
 display:inline;
}
div{
 display:block;
}
img{
 display:inline-block;
}

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="Untitled2.css">
  <title>Document</title>
 </head>
 <body>
     <span>123</span>123

	  
 </body>
</html>


span{
 display:inline;
}

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="Untitled2.css">
  <title>Document</title>
 </head>
 <body>
     <span>123</span>123

	  
 </body>
</html>


span{
 display:block;
}

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="Untitled2.css">
  <title>Document</title>
 </head>
 <body>
     <img src="123.PNG">
	 <img src="123.PNG">
	 <img src="123.PNG">
	 <img src="123.PNG">


	  
 </body>
</html>



img{

width:100px;
height:200px;


}

凡是带有inline的元素，都有文字特性。效果如下：
在这里插入图片描述

如何使照片之间的间隙消失呢！
方法一：

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="Untitled2.css">
  <title>Document</title>
 </head>
 <body>
     <img src="123.PNG"><img src="123.PNG"><img src="123.PNG"><img src="123.PNG">


	  
 </body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="Untitled2.css">
  <title>Document</title>
 </head>
 <body>
     <img src="123.PNG">
	 <img src="123.PNG">
	 <img src="123.PNG">
	 <img src="123.PNG">


	  
 </body>
</html>


img{

width:100px;
height:200px;
margin-left:-4px;

}

在这里插入图片描述
但该方式放在服务器上解压之后可能有问题，所以常规做法是第一种。

有时候做开发，可以先写html，再写css。，如下：

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="Untitled2.css">
  <title>Document</title>
 </head>
 <body>
    <div class="box1"></div>
	 <div class="box2"></div>
	  <div class="box3"></div>
	   <div class="box4"></div>
	    <div class="box5"></div>
	
	  
 </body>
</html>



.box1{
  width:100px;
  height:100px;
  background-color:red;
}
.box2{
  width:200px;
  height:200px;
  background-color:green;
}
.box3{
  width:300px;
  height:300px;
  background-color:red;
}
.box4{
  width:100px;
  height:100px;
  background-color:green;
}
.box5{
  width:200px;
  height:200px;
  background-color:red;
}

在这里插入图片描述

但这样有多少个盒子就要写多少个对应的css，十分的麻烦。如果像上面一样是几种颜色与大小的组合。我们可以转换一下思路，可以先写css，再写html，这样开发效率更高，如下：

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="Untitled2.css">
  <title>Document</title>
 </head>
 <body>
    <div class="red size1"></div>
	 <div class="green size2"></div>
	  <div class="red size3"></div>
	   <div class="green size1"></div>
	    <div class="red size2"></div>
	
	  
 </body>
</html>



.red{
 
  background-color:red;
}
.green{
 
  background-color:green;
}

.size1{
  width:100px;
  height:100px;
}
.size2{
  width:200px;
  height:200px;
}
.size3{
  width:300px;
  height:300px;
}

效果和上一个一样。这是先定义功能，再选择功能，更加灵活，组合更多。
有些标签是带有css样式，我们可以根据自己的需要自定义标签。使用标签选择器初始化标签。例如：

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="Untitled2.css">
  <title>Document</title>
 </head>
 <body>
   <em>123</em>
	  
 </body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="Untitled2.css">
  <title>Document</title>
 </head>
 <body>
   <em>123</em>
	  
 </body>
</html>



em{
font-style:normal;
color:#c00;

}

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="Untitled2.css">
  <title>Document</title>
 </head>
 <body>
   <ul>
      <li>1</li>
	  <li>2</li>
      <li>3</li>
   </ul>
 </body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="Untitled2.css">
  <title>Document</title>
 </head>
 <body>
   <ul>
      <li>1</li>
	  <li>2</li>
      <li>3</li>
   </ul>
 </body>
</html>



ul{
   list-style:none;
  

}

在这里插入图片描述

ul{
   list-style:none;
   padding:0;
   margin:0;

}

在这里插入图片描述
间距，空格都没有了。

叹！
关注
专栏目录
使用 HTML、CSS 和 JavaScript 定制私人版的刮刮乐【一看就会】
孤寒者的博客
08-24 20万+
刮刮乐想必大家都玩过，小时候兜里一有钱，就喊上小伙伴兴冲冲的跑去家旁边的小卖部，用那稚嫩地小手递给老板那被捏的皱巴巴的五毛钱，满眼期待的刮着买来的刮刮乐，心里早已想好中了100块钱大钞要去买好多好多辣条、卡片、陀螺、奥迪双钻的悠悠球… 认认真真看完本文，你就可以用你女朋友的美照实现一个独属于你的刮刮乐哦！（当然如果你没有女朋友的话，也可以用你珍藏多年的美女图片哦！） ⛳️使用HTML、CSS和JavaS实现刮刮卡/刮刮乐♥️别着急，先看演示????使用HTML、CSS和JavaS实现刮刮乐????第①步：
CSS背景图片自适应大小
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
10-06 9033
在CSS中，如果你想让背景图片自适应元素的大小，你可以使用。应该被替换为你想要应用背景图片的元素的选择器。应该被替换为你的图片文件的路径。
46 前端之css
weixin_34185512的博客
05-29 99
css 　　层叠样式表 Cascading Style Sheet ,定义如何显示HTML元素 「1」css语法结构 　　选择器 {属性:属性值;属性:属性值;属性:属性值;} p {color: red；} 标签名｛颜色属性：颜色；｝ 　　　　 「2」css注释 /*注释内容*/ 「3」三种引入css样式的方式 引入：link标签引入外部css文...
QT样式表设置背景色 background-color无效的原因
野生猿-群号1025127672
04-16 2万+
例如我们给一个按钮设置背景色为红色：QPushButton {        background-color: red; }结果发现，按钮的背景色并没有被设置为红色！问题的原因，QT的帮助文档里讲了，比较难找，打开帮助文档，依次展开-&gt;style sheet-&gt;Qt Style Sheets Reference，找到表格中的QPushButton，如下图所示大体意思就是，要想使背景色...
css 实现换行
最新发布
qq_33240556的博客
07-03 2337
在CSS中，实现文本内容的换行非常直接。通常情况下，文本会自动根据其容器的宽度换行，这是默认行为。
css圆角
xjj19999272的博客
05-25 4016
圆角 border-radius属性 border-radius属性的值通常为px单位，表示圆角的半径。示例代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wid
CSS定位
weixin_61789925的博客
10-16 4514
定位，即position，css的基本属性之一，分为相对定位relative，绝对定位absolute，固定定位fixed以及粘性定位sticky，现在来一一介绍。
CSS长度单位
越努力，越幸运！
02-02 2470
前言 说到css的单位，大家应该首先想到的是像素单位px，我们在网页布局中一般都是用px，但是近年来自适应网页布局越来越多，em和百分比也经常用到了。然后随着手机的流行，web app和hybrid app的开发，都用到了css3技术，在css3中，新增了许多单位，rem、vw和vh、vmin和vmax、ch和ex等等，那现在对这些单位分别做一下详细的介绍吧。 一、CSS单位 CSS 有几个不同的单位用于表示长度，一些设置 CSS 长度的属性有 width，margin，padding，font-si
CSS阴影
Joker_ZzzZ_的博客
07-26 4962
css阴影
uni-app 使用 tailwindcss
织网的博客
01-07 9820
tailwindcss 中文文档 windicss 英文文档 <— 推荐使用 我是通过vue-cli创建的项目，HBuilderX没有试过，这里介绍使用vue-cli创建的项目，可查看官方文档。这里有两种配置方式（重置主题和重命名类），目的都是考虑兼容性，您可根据实际情况处理。英文 vue create -p dcloudio/uni-preset-vue my-project 1️⃣ 重置主题 安装依赖 npm install tailwindcss@npm:@tailwindcss/post
css3.0参考手册 css3.0参考手册
06-16
css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css3.0参考手册css...
网页设计期末大作业+html+css
05-25
9个网页布局，学校让做的网站作业，虽然是比较基础的网页静态页面，不过我也希望你能做的规范一些，我们专业制作学生网页作业，div css js 等通过dreamwear的工具实现规范化，比如文件夹的规范，代码写作的规范，...
HTML5+CSS3 精美登陆界面源码
01-19
CSS3引入了许多新功能，如选择器的扩展（如:nth-child()、:hover、:focus等），使得更精细的样式控制成为可能；多列布局（column-count, column-gap等），让创建杂志风格的布局变得轻松；以及最重要的，动画和过渡...
CSS新世界1
08-04
【CSS新世界1】这本书是关于CSS3的深入探索，主要介绍了CSS3的模块化发展以及新特性。书中首先回顾了CSS3出现的历史背景，强调了模块化带来的灵活性和扩展性，让读者对CSS3有一个整体的认识。接着，作者详细讲解了...
postcss-css-variables:PostCSS插件将CSS自定义属性（CSS变量）语法转换为静态表示形式
05-01
PostCSS CSS变量 插件可将语法转换为静态表示形式。 该插件提供了使用大多数CSS变量功能（包括选择器级联和一些警告）的一种面向未来的方式，因为它只能看到CSS，而不能看到应用CSS的潜在动态HTML和DOM。 安装 npm ...
树的遍历（先序、中序、后序详解）
热门推荐
qq_44721518的博客
06-28 4万+
树的遍历主要有三种 1、先序遍历：先遍历根节点，再遍历左节点，最后遍历右节点； 2、中序遍历：先遍历左节点，再遍历根节点，最后遍历右节点； 3、后序遍历：先遍历左节点，再遍历右节点，最后遍历根节点； 总结：先、中、后就表示根节点的遍历处于哪个位置，而总是先左节点后右节点。例如先序遍历，“先”表示根节点最先遍历，再左节点，最后右节点。依此类推中序遍历，后序遍历。 接下来看一个题目，看一下你们是怎么做的。 我们以中序遍历为例来讲（每次以三个节点为一个整体）： 首先从树的根节点开始即C F E 我们再依次来看，
Collections.sort()的详细讲解
qq_44721518的博客
05-29 3万+
Collections.sort()的详细讲解 很多时候都需要对一些数据进行排序的操作。然而那些数据一般都是放在一个集合中如：Map ，Set ，List 等集合中。他们都提供了一个排序方法 sort()，要对数据排序直接使用这个方法就行，但是要保证集合中的对象是 可比较的。 怎么让一个对象是 可比较的，那就需要该对象实现 Comparable 接口啦。然后重写里面的 compareTo()方法。我们可以看到Java中很多类都是实现类这个接口的 如：Integer，Long 等 假设我们有一个学生类，默认需
码分复用的详解
qq_44721518的博客
06-17 1万+
在CDMA中，每个比特时间再划分为m个短的间隔，成为码片，通常m值为64或128，一般m=8 规则如下： 1、使用CDMA的每一个站被指派一个唯一的m bit码片序列，一个站如果要发送比特1，则发送它自己的m bit码片序列，如果要发送0，则发送该码片序列的二进制反码，按照惯例将码片中的0写成-1，将1写成+1、 例如 站点A：0 0 0 1 1 0 1 1 一般写成-1 -1 -1 1 1 -1 1 1 发送比特1，则A站发送码片序列为（0 0 0 1 1 0 1 1）表示发送1 2、【CDMA给每一个站
Spooling（假脱机）系统
qq_44721518的博客
05-01 3326
Spooling（假脱机）系统 多道程序技术：一台物理CPU虚拟为多台逻辑CPU Spooling技术：一台物理I/O设备虚拟为多台逻辑I/O设备 前身：为了缓和CPU的高速性与I/O设备的低速性间的矛盾，引入了脱机输入、脱机输出技术。（例如脱机输入）该技术是利用专门的外围控制机，先将低速I/O设备上的数据传送到高速磁盘上。当处理机需要输入数据时，直接从磁盘中读取数据。 Spooling（Simu...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值