CSS详解

news2024/11/25 2:23:22

文章目录

        • 1. CSS快速入门
        • 2. 四种CSS导入方式
        • 3. 三种基本选择器
        • 4. 层次选择器
        • 5. 结构伪类选择器
        • 5. 属性选择器
        • 6. CSS样式

HTML(结构)+CSS(表现)+JavaScript(交互)

1. CSS快速入门

<style>可以编写css代码，每一个声明，最好使用分号;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    <link rel = "stylesheet" href="css/style.css">
    /*
    选择器{
        声明1;
        声明2;
        声明3;
    }
    */
        h1{
            color:red;
        }
    </style>
</head>
<body>
<h1>学习前端</h1>
</body>
</html>

CSS的优势

  1. 内容与表现分离
  2. 网页结构表现统一，可以实现复用
  3. 样式十分丰富
  4. 建议使用独立于HTML的CSS文件
  5. 利用SEO，容易被搜索引擎收录

2. 四种CSS导入方式

样式优先级: 就近原则
1.行内样式

<body>
<!--1.行内样式，在标签元素中编写style属性-->
<h1 style="color:green">学习前端</h1>
</body>

2.内部样式

<head>
    <style>
        h1{
            color:red;/*2.内部样式*/
         }
         /*引入外部样式:链接式*/
       <link rel="stylesheet" href="css/style.css">
    </style>
</head>
<body>
<h1>学习前端</h1>
</body>

3.外部样式:链接式

<!--引入外部样式:链接式-->
<link rel="stylesheet" href="css/style.css">

4.外部样式:导入式

<!--css2.1-->
<style>
     @import url("css/style.css");
</style>

3. 三种基本选择器

选择器优先级: id选择器 > class选择器 > 标签选择器
1.标签选择器 h1{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
     <!--1.标签选择器-->
        h1{
             color:green;
             background:wheat;
        }
    </style>
</head>
<body>
<h1>学习Java</h1>
<h1>学习前端</h1>
<h1>学习后端</h1>
</body>
</html>

2.类选择器 .class的名称{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
     <!--2.类选择器,可以多个标签归为一类，同一个class可以复用-->
        .styleone{
                color:green;
                background:wheat;
        }
    </style>
</head>
<body>
<h1 class="styleone">学习Java</h1>
<h1>学习前端</h1>
<h1>学习后端</h1>
</body>
</html>

3.id选择器 #id名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
     <!--3.id选择器,id必须保证全局唯一-->
        #study{
               color:green;
               background:wheat;
        }
    </style>
</head>
<body>
<h1 class="styleone">学习Java</h1>
<h1 id="study">学习前端</h1>
<h1>学习后端</h1>
</body>
</html>

4. 层次选择器

1.后代选择器:在某个元素的后面；如:爷爷-->爸爸-->你-->儿子

/*body下的所有p便签*/
body p{
    background:red;
}

2.子选择器:一代，儿子

/*子选择器*/
body>p{
    background:green;
}

3.相邻兄弟选择器:相邻的兄弟(1个),相邻向下

/*邻弟选择器:只有一个,相邻(往下)的p标签*/
.active + p{
     background:red;
}

<body>
<p class="active">学习Java</p>
</body>

4.通用选择器:当前选中元素的向下的所有兄弟

/*和p标签同级的往下，即该坪标签后面的p标签，不包括该p标签*/
.active~p{
     background:red;
}

<p class="active">学习Java</p>

5. 结构伪类选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 伪类选择器:含义":"的选择器 -->
		<!-- 避免使用class和id选择器 -->
		<style>
			/* ul的第一个子元素 */
			ul li:first-child{
				background: #900999;
			}
			/* ul 的最后一个子元素 */
			ul li:last-child{
				background: yellow ;
			}
			/* 选中p1:定位p元素的父元素，选择父级元素的第一个元素 */
			p:nth-child(1){
				background: springgreen;
			}
			/* 选中父元素下的p元素的第二个类型 */
			p:nth-of-type(2){
				background: bisque;
			}
		</style>
	</head>
	<body>
		<p>part1</p>
		<p>part2</p>
		<p>part3</p>
		<!-- 无序列表ul  li -->
		<ul>
			<li>1-1</li>
			<li>2-2</li>
			<li>3-3</li>
		</ul>
		
	</body>
</html>

在这里插入图片描述

5. 属性选择器

原始代码及效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			a{
				background: greenyellow;
				float:left;
				display: block;
				margin: 5px;
				border-radius: 10px;
				width: 50px;
				height: 50px;
				text-decoration: none;
				text-align: center;
				font:bold 20px/50px Arial;
				margin-right: 5px;
			}
		</style>
	</head>
	<body>
		<p>
			<a href="https://www.baidu.com" class="links items" id="demo">1</a>
			<a href="" class="links items">2</a>
			<a href="imgs/1.jpg">3</a>
			<a href="imgs/word.pdf">4</a>
			<a href="imgs/excel.pdf">5</a>
			<a href="imgs/ppt.jpg">6</a>
			<a href="enormous.doc">7</a>
			<a href="x.png">8</a>
			<a href="nice.html">9</a>
		</p>
	</body>
</html>

在这里插入图片描述常用符号:

符号意义
=绝对等于
*=相对等于
^=以……开头
$=以……结尾

1.存在属性id的元素 a[]{}

/* 1.存在属性id的元素  a[]{} */
/* 用法1 */
a[id=demo]{
	background: pink;
}
/* 用法2 */
a[id]{
	background: pink;
}

在这里插入图片描述2.class中含有links的元素

/* class中含有links的元素 */
a[class*="links"]{
	background: yellow;
}

在这里插入图片描述
3.选中href中以http开头的元素

/* 选中href中以http开头的元素 */
a[href^=http]{
	background: gold;
}

在这里插入图片描述
4.选中以pdf结尾的元素

/* 选中href中以pdf结尾的元素 */
a[href$=pdf]{
	background: aliceblue;
}

在这里插入图片描述

6. CSS样式

为什么需要网页美化?

1.有效的传递页面信息
2.美化网页，页面才能吸引用户
3.凸显页面的主题
4.提高用户的体验

span标签:重点要突出的字，使用span标签套起来

1.字体样式

font-family: 字体类型
font-size: 字体大小
font-weight: 字体粗细
color: 字体颜色
/*RGB 0~F
RGBA A:0~1(代表透明度)
*/

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			/* 用法1 */
			body p{
				font-family: 楷体;
			    color:dimgray;
				font-weight: 500;
				font-size: 20px;
			}
			/* 用法2 */
			p{
				font:oblique bolder 16px "楷体";
			}
		</style>
	</head>
	<body>
		<p>《魔道祖师》讲述了借他人身体复生的魏无羡和蓝忘机在
		寻找一具被肢解的无名尸体的五个部分的过程中，
		穿透重重迷障，戳破金光瑶谋害仙门百家的阴谋，
		并找出无名尸体被肢解、魏无羡十三年前被一步步逼至死路的真相的故事
		<p/>
	</body>
</html>

用法1结果:
在这里插入图片描述
用法2结果:
在这里插入图片描述
2.文本样式

颜色 color:rgb (rgba)
文本对齐方式 text-align:center(常用)
首行缩进 text-indent:
行高 line-height:
装饰 text-decoration:
文本图片水平对齐 vertical-align:middle

3.鼠标状态

颜色 color:rgb (rgba)
文本对齐方式 text-align:center(常用)
首行缩进 text-indent:
行高 line-height:
装饰 text-decoration:
文本图片水平对齐 vertical-align:middle

、/*默认颜色*/
a{
  text-decoration:none;
  color:#000000;
}
/*鼠标悬浮的状态*/
hover{/*重要*/
  color:orange;
  font-size:50px;
}
/*鼠标按住为释放的状态*/
active{
  colro:lightblue;
}

文本样式、鼠标状态应用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			#box{
				width: 330px;
				height: 250px;
				/* background: greenyellow; */
				/* 颜色表示:
				1.单词:green,red,blue
				2.RGB 0~F(16进制)
				3.RGBA(,,,0~1) A代表透明度 */
			}
			h1{
				font-size:25px;
				font-family: 楷体;
				text-align: center;/*文字排版，center居中*/
				margin: 0;
			}
			a{
				font-size: 13px;
				font-family:楷体;
				text-align: center;
				margin-bottom: 10px;
				text-decoration: none;
				color: #000;
			}
			a:hover{
				color: gold;
			}
			p:nth-child(2){
				font-size: 18px;
				font-family:楷体;
				text-align: center;
				margin:5px;
			}
			p:nth-child(3){
				font-size: 18px;
				font-family:楷体;
				text-align: center;
				margin:0;
			}
			p:nth-child(4){
				font-size: 18px;
				font-family:楷体;
				text-align: center;
				margin-top: 5px;/* 顶部外边距 */
				margin-bottom: 0;
			}
			p:nth-child(5){
				font-size: 15px;
				font-family:楷体;
				margin: 5px;
				font-weight: bold;
			}
			p:nth-child(6){
				font-size: 14px;
				font-family:楷体;
				text-indent: 2em;/* 首行缩进两个汉字 */
				letter-spacing: 2px;/* 设置p段落内文字间隔间距 */
				margin-top: 3px;
			}
			
		</style>
	</head>
	<body>
		<div id="box">
		   <h1>春晓</h1>
		   <p><a href="https://baike.baidu.com/link?url=HUv7kLhoV3
		   jGMa64PyFp512yjgX2aePR0MLHSn9HC47uI1pPGOnsJQwDuOW6l7
		   JthjhT3iSS8YSLXNfIH8-Ej-eqz1cRrJI2kj-1DW99QyC4zDdnj
		   T5_Vh1DdB_KxjlT" target="_blank">【作者】孟浩然 【朝代】唐</a></p>
		   <p>春眠不觉晓，处处闻啼鸟。</p>
		   <p>夜来风雨声，花落知多少。</p> 
		   <p>注释:</p>
		   <p>春日里贪睡不知不觉天已破晓，
		   搅乱我酣眠的是那啁啾的小鸟。
		   昨天夜里风声雨声一直不断，
		   那娇美的春花不知被吹落了多少？</p>
		</div>
	</body>
</html>

在这里插入图片描述
4.列表状态

/*ul li*/
list-style:
   1.none 去掉原点
   2.circle 空心圆
   3.decimal 数字
   4.square 正方形

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			h1{
				font-size: 25px;
				color:#ff5500;
			}
			ul{
				background:#f3f3f3;
			}
			ul li{
				color:#aa007f;
				list-style:none;/*列表样式*/
				margin:2px;
			}
		</style>
	</head>
	<body>
		<h1>淘宝</h1>
		<ul>
			<li><a href="https://www.taobao.com"></a>天猫新品</li>
			<li><a href="https://www.taobao.com"></a>今日爆款</li>
			<li><a href="https://www.taobao.com"></a>芭芭农场</li>
			<li><a href="https://www.baidu.com"></a>天猫超市</li>
			<li><a href="https://www.taobao.com"></a>阿里拍卖</li>
			<li><a href="https://www.taobao.com"></a>充值中心</li>
			<li><a href="https://www.taobao.com"></a>领淘金币</li>
		</ul>
	</body
</html>

在这里插入图片描述5.图片背景

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			h1{
				font-size:20px;
				color:#ff5500;
			}
			.box1{
				width:400px;
				height:160px;
				border:2px solid red;
				/* 默认图片全部是平铺 */
				background-image:url("js/QQ.png");
			}
			.box2{
				width:400px;
				height:160px;
				border:2px solid yellow;
				background-image:url("js/QQ.png");
				/* 横向平铺 */
				background-repeat: repeat-x;
			}
			.box3{
				width:400px;
				height:160px;
				border:2px solid blue;
				background-image:url("js/QQ.png");
				/* 纵向平铺 */
				background-repeat: repeat-y;
			}
			.box4{
				width:400px;
				height:160px;
				border:2px solid deeppink;
				background-image:url("js/QQ.png");
				/* 不平铺 */
			    background-repeat: no-repeat;
			}
		</style>
	</head>
	<body>
		<h1>图片背景学习</h1>
		<div class="box1">
		</div>
		<div class="box2">
		</div>
		<div class="box3">
		</div>
		<div class="box4">
		</div>
	</body>
</html>

默认平铺
在这里插入图片描述
横向平铺
在这里插入图片描述
纵向平铺
在这里插入图片描述
不平铺
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/53212.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【JavaWeb】Servlet系列 --- HttpServletRequest接口详解（接口方法要记住！！！）

【JavaWeb】Servlet系列 --- HttpServletRequest接口详解（接口方法要记住！！！）

HttpServletRequest接口一、HttpServletRequest接口中有哪些常用的方法&#xff1f;思考&#xff1a;如果是前端的form表单提交了数据之后&#xff0c;你准备怎么存储这些数据&#xff0c;你准备采用什么样的数据结构去存储这些数据呢&#xff1f;二、request接口中四个非常重要…
阅读更多...
FlutterAcivity 包已导入 但是仍然爆红

FlutterAcivity 包已导入 但是仍然爆红

FlutterAcivity 包已导入 但是仍然爆红 这种情况就比较广泛了 我说一下我遇到的这种情况 上一篇 FlutterActivity找不到http://t.csdn.cn/HvgtI 1.大家可以看到我这个FlutterActivity包已导入 但是依然报错 2.可以清楚的看到我这个提示是 LifecycleOwner 找不到我们点Flutter…
阅读更多...
智慧工地安全施工实时监测系统解决方案

智慧工地安全施工实时监测系统解决方案

背景介绍 随着经济的发展&#xff0c;混凝土搅拌车数量有很大增长&#xff0c;但是其超速、超载等原因造成了很多交通事故&#xff0c;给交通安全带来隐患&#xff0c;也给企业造成损失&#xff0c;严重影响了和谐城市建设的进程。 中国电子科技集团第52研究所经过多年研发与…
阅读更多...
React子组件没有随父组件更新问题的解决

React子组件没有随父组件更新问题的解决

前言&#xff1a;今天遇到一个小需求&#xff0c;本来只是修改文案的&#xff0c;结果问题卡了很久很久&#xff0c;想想还是太菜了 问题描述&#xff1a; 根据changePlaceHolder修改AInput的placeholder的默认值&#xff0c;AInput是封装的antd的input组件&#xff0c;期间发…
阅读更多...
图片一键调整工具V1.0-免费版

图片一键调整工具V1.0-免费版

一、工具介绍 这是博主自己开发的图片一键调整工具V1.0,它可以调整图片宽度和高度、压缩图片大小、改变图片背景、转换图片格式和图片透明化&#xff0c;都是很常用的功能。操作起来简单方便。 二、工具操作 1.调整图片背景 首先&#xff0c;把该工具软件和图片放到同一文件…
阅读更多...
Linux基础知识与实操-篇二:初识Linux目录管理与操作

Linux基础知识与实操-篇二:初识Linux目录管理与操作

文章目录文件与目录管理相对路径与绝对路径目录相关操作查阅文件相关操作文件预设权限搜索与文件文件的搜索基本权限与指令最后在经过上篇 篇一:初识Linux文件权限与配置 后&#xff0c;我们已经基本熟悉并使用了Linux关于文件管理相关的内容&#xff0c;本篇则继续从文件深入…
阅读更多...
CrossOver2023虚拟机软件安装双系统教程

CrossOver2023虚拟机软件安装双系统教程

您喜欢切换Windows系统吗&#xff1f;喜欢&#xff1f;好吧&#xff0c;您随意。对于其他人而言&#xff0c;想要不依赖于笨重的 Windows 模拟器就能在您的 Mac 系统上运行微软的应用程序&#xff0c;CrossOver是最简单的方式。讲真&#xff0c;您试过模拟器了吗&#xff1f;您…
阅读更多...
如何使用Python访问和查询Google BigQuery数据

如何使用Python访问和查询Google BigQuery数据

要使用Python查询Google BigQuery数据&#xff0c;需要将Python客户端连接到BigQuery实例。 将会云客户端库用于Google BigQuery API. 假设您已经设置了Python开发环境。(支持3.7-3.11版本)要安装该库&#xff0c;请在命令行中运行以下命令&#xff1a; pip install --upgrade…
阅读更多...
【国际化Intl】Flutter 国际化多语言实践

【国际化Intl】Flutter 国际化多语言实践

目标&#xff1a;实现flutter国际化 提示&#xff1a;这里参考一下几个链接 例如&#xff1a; https://github.com/ThinkerWing/language https://juejin.cn/post/6844903823119482888 这篇也很详细&#xff0c;还有包括兼容中文的繁体简体… 可以看看 feat/use-Flutter-Int…
阅读更多...
python函数进阶

python函数进阶

一、函数多返回值 Q&#xff1a;如果一个函数内两个return&#xff0c;程序如何执行&#xff1f; A&#xff1a;只执行了第一个return&#xff0c;原因是因为return可以退出当前函数&#xff0c;导致return下方的代码不执行 但是如果一个函数需要有多个返回值&#xff0c;该如…
阅读更多...
华为云数据库GaussDB(for Cassandra)揭秘：高性能低成本是什么样的体验？

华为云数据库GaussDB(for Cassandra)揭秘：高性能低成本是什么样的体验？

在我们的日常理念中&#xff0c;追求性价比是最为常见的&#xff0c;但是你知道购买低配置还能享受高性能、低延时、超低价的数据库有哪些吗&#xff1f;今天我们就用数据说话&#xff0c;带你深入了解GaussDB(for Cassandra)挑战高性价比&#xff01; 众所周知&#xff0c;有…
阅读更多...
Android开发者们想想：到底是市场饱和？还是你们技术饱和？

Android开发者们想想：到底是市场饱和？还是你们技术饱和？

根据我的不客观数据体验来看&#xff0c;最饱和的是iOS&#xff0c;同样发布一个职位iOS是其他技术岗位10倍的投递量。当然Android作为一个已经市场化将近十几年的技术门类&#xff0c;它必然早已经是成熟常态。这样的技术行业都不再会有爆炸式的增长。连同Android硬件、手机、…
阅读更多...
Go学习之路：方法和接口（DAY 3）

Go学习之路：方法和接口（DAY 3）

文章目录前引方法和接口1.1、方法/声明方法1.2、方法/捆绑其他类型1.3、方法/方法常用指针传递1.4、方法/普通函数指针传递和方法指针传递区别2.1、接口/方法签名集合2.2、接口/接口断言2.3、接口/switch case练习题、接口/stringer实现字符串打印2.4、接口/错误前引 昨天终于算…
阅读更多...
机器学习5数据归一化Feature Scaling

机器学习5数据归一化Feature Scaling

文章目录一、为什么要数据归一化&#xff1f;二、解决方案数据归一化&#xff0c;解决方案1&#xff1a;最值归一化normalization&#xff1a;解决方案2&#xff1a;均值方差归一化standardization;三、最值归一化处理normalization四、均值方差归一化Standardization一、为什么…
阅读更多...
ICMP协议（3层网络层协议：IP、ARP、ICMP）

ICMP协议（3层网络层协议：IP、ARP、ICMP）

1、ICMP协议端口号&#xff1f; 没有端口号&#xff0c;向TCP/UDP这些都是没有端口号只有协议号&#xff0c;只有应用层才有端口号。 2、ICMP协议是干什么的&#xff1f; 网络探测与回馈机制 1&#xff09;网络探测 2&#xff09;路由跟踪&#xff0c;windows命令&#xff1a;…
阅读更多...
ABP：内置logger and 第三方库serilog 之间的关系

ABP：内置logger and 第三方库serilog 之间的关系

今天在看项目的日志记录功能&#xff0c;比较疑惑为什么项目中有的地方使用 Logger< T > _logger 然后又在资源文件下看见日志的第三方库 Serilog 解答&#xff1a; ASP.NET Core Build-in Logging ASP.NET Core 提供了 Logging 的抽象接口, third party 都会依据抽象来…
阅读更多...
DJ 12-3 程序控制指令

DJ 12-3 程序控制指令

目录 1. 无条件转移指令 JMP &#xff08;1&#xff09;段内直接转移 &#xff08;2&#xff09;段内间接转移 &#xff08;3&#xff09;段间直接转移 &#xff08;4&#xff09;段间间接转移 2. 条件转移指令 3. 循环控制指令 &#xff08;1&#xff09;LOOP 指令 &…
阅读更多...
R语言中不同类型的聚类方法比较

R语言中不同类型的聚类方法比较

聚类方法用于识别从营销&#xff0c;生物医学和地理空间等领域收集的多变量数据集中的相似对象。我们围绕聚类技术进行一些咨询&#xff0c;帮助客户解决独特的业务问题。它们是不同类型的聚类方法&#xff0c;包括&#xff1a; 划分方法分层聚类模糊聚类基于密度的聚类基于模…
阅读更多...
Qt Creator 的 Shadow build(影子构建)

Qt Creator 的 Shadow build(影子构建)

目录 一、什么是影子构建 二、如何取消影子构建 一、什么是影子构建 做wpf项目时&#xff0c;项目里面会有bin文件夹&#xff0c;里面有debug和release文件夹&#xff0c;生成的exe就在debug或release里面&#xff0c;但第一次做qt时&#xff0c;发现项目文件夹里面只有源码文…
阅读更多...
2022 JuiceFS 社区用户调研结果出炉

2022 JuiceFS 社区用户调研结果出炉

为了使 JuiceFS 的发展更贴合用户的真实需求&#xff0c;我们在三周前向社区发出了一份调研问卷。此次调研面向已经将 JuiceFS 应用于生产环境的用户&#xff0c;了解其在应用 JuiceFS 前和使用中的体验与评价。 参与此次调研的用户&#xff0c;大型企业占比最高&#xff0c;有…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023