前端——CSS

最新推荐文章于 2024-06-14 17:15:13 发布
最新推荐文章于 2024-06-14 17:15:13 发布
阅读量96 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31241107/article/details/104753330
版权

CSS

层叠样式表(CSS)是一种用来表现HTML或XML等文件样式的计算机语言
可以静态地修饰网页，配合各种脚本语言动态地对网页各元素进行格式化
能够对网页中元素位置的排版进行像素级精确控制

CSS引入方式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css引入方式</title>
<!--方式一 引入外部css文件,实现标签内容与标签样式的解耦 -->
<link href="f.css" rel="stylesheet"/>

<!-- 方式二:直接在当前页面的style标签中定义标签样式-->
<style type="text/css">
	p{/*设置所有p标签字体颜色为红色*/
	color: green;
}
</style> 

</head>
<body>
	<p>天空/大海/草原</p>
	<p >天空/大海/草原</p>
	<p >天空/大海/草原</p>
	<p>天空/大海/草原</p>
	<p >天空/大海</p>
	<!-- <p style="color: red">天空/大海</p> 方式三-->
</body>
</html>
<!--
f.css:
p{ 标签选择器,设置所有p标签字体颜色为红色
	color: red;
}
-->

三种引入方式有一定优先级,方式三优先级最高
HTML从上往下加载

CSS选择器

选择器:利用不同的选择方式来选中当前标签,为其设置样式
常用的标签(元素)选择器,类选择器,id选择器

<!--标签(元素)选择器,为所有标签的内容设置字体为14px,颜色为黑色
格式:
标签名{
 	样式值1;
 	样式值2;
}
-->
<head>
<meta charset="UTF-8">
<title>css引入方式</title>
<style type="text/css">
	p{
		color: black;
		font-size: 14px;
	}
</style> 
 
</head>
<body>
	<p >天空/大海/草原</p>
	<p >天空/大海/草原</p>
	<p >天空/大海/草原</p>
	<p>天空/大海/草原</p>
	<p >天空/大海</p>
</body>

<!--类选择器,为一部分标签的内容设置字体为14px,颜色为黑色
格式:
.class属性值{
 	样式值1;
 	样式值2;
}
-->
<head>
<meta charset="UTF-8">
<title>css引入方式</title>
<style type="text/css">

	.ps{
		color: black;
		font-size: 14px;
	}
	/* 设置class属性为ps的p标签样式*/
</style> 
 
</head>
<body>
	<p class="ps">天空/大海/草原</p>
	<p class="ps">天空/大海/草原</p>
	<p class="ps">天空/大海/草原</p>
	<p>天空/大海/草原</p>
	<p >天空/大海</p>
</body>

<!--id选择器,为单独一个标签的内容设置字体为14px,颜色为黑色
格式:
#id属性值{
 	样式值1;
 	样式值2;
}

-->
<head>
<meta charset="UTF-8">
<title>css引入方式</title>
<style type="text/css">

	#id{
		color: red;
		font-size: 14px;
	}
	/* 设置class属性为ps的p标签样式*/
</style> 
 
</head>
<body>
	<p class="ps">天空/大海/草原</p>
	<p id="ids">天空/大海/草原</p>
	<p class="ps">天空/大海/草原</p>
	<p>天空/大海/草原</p>
	<p >天空/大海</p>
</body>

以上选择器可以同时对一个标签使用,但是有优先级
style属性设置的优先级最高
id选择器优先级其次
类选择器优先级再次
标签选择器优先级最低

其它选择器

*{
	/* 通用选择器,设置整个页面统一的字体样式 */
	font-size:14px
}

#ids p{/* 后代选择器 ——子标签
		选择器1  选择器2{
				样式;
		}
*/
	/* 设置id值为ids的标签下子标签中所有的p标签样式 */
	font-size:14px
}

#ids>p{/* 儿子选择器——子标签 */
	/* 设置id值为ids的标签下子标签中第一个p标签样式 */
	font-size:14px
}

#ids+p{/* 相邻选择器 ——同级标签上一个或下一个*/
	/* 设置id值为ids的标签上/下同级的相邻的p标签样式 */
	font-size:14px
}

#ids~p{/* 弟弟选择器 ——同级标签下面*/
	/* 设置id值为ids的标签下面同级的所有p标签样式 */
	font-size:14px
}

 div,p{/* 多个选择器样式一致时,用逗号隔开 */
 	color: blue;
 }
 /*
 <p a="b">天空/大海/草原</p>
 自定义一个属性a="b"
 */
[a="b"]{/*自定义属性选择器
		[属性名]或者[属性名=属性值]{
			样式;
		}
	*/
 	color: blue;
 }

伪类选择器

<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style type="text/css">
	a:link {/*超链接未点击的连接显示绿色  */
		color: green;
	
	}
	a:visited {/*超链接已点击且成功访问的连接显示灰色    */
		color: gray;
	}
	a:hover {/*鼠标移动到连接上触发     */
		color: red;
	}

	input:focus {/*文本框获取焦点后样式        */
		color: blue;
		background-color: gray; 
		
	}
</style>
</head>
<body>
	<a href="http://baidu.com">百度</a>
	<a href="http://souhu.com">搜狐</a>
	<input type="text"/>	
</body>

伪元素选择器

<head>
<meta charset="UTF-8">
<title>伪元素选择器</title>
<style type="text/css">
	#p1:before {/*在这个标签之前添加什么文本内容         */
		content: "*";
		color: red;
	}
	#p2:after {/*在这个标签之后添加什么文本内容          */
		content: "用户名不能为空";
		color: red;
	}
	body {
		font-family: ".PingFang sc",微软雅黑,"Microsoft YaHei"; /* 设置多个字体,操作系统不同有的字体可能不存在,所以要设置多个 */
		font-size: 18px; /* 字体大小 */
		text-align: left;/* 字体居中方式  */	
	}
	a{
		text-decoration: none;/* 取消 超链接下划线 */
	}
</style>
</head>
<body>
	<p id="p1"></p>
	<input type="text" name="username"/>
	<p id="p2"></p>
	<br/><br/>
	<span><span  style="color: red">*</span>号项为必填内容</span>
</body>

css文本属性

	.fonts{/*类选择器,设置class属性值为fonts的标签的字体样式*/
		/*常用字体属性*/
		font-family: ".PingFang sc",微软雅黑;/*字体模板*/
		font-size: 24px;/*字体大小*/
		font-weight: 24px;/*字体宽度*/
		overflow: scroll;/*内容溢出设置*/
		/*scroll——溢出的话添加横竖滚轮条滚动查看内容 
		auto—— 溢出的话添加竖滚轮条滚动查看内容
		visible——默认选项,内容会出现在标签框外
		hidden——溢出标签框的内容不可见 		
		*/
		text-align: center;/*内容居中*/
		text-decoration: none;
		/*none	默认的文本,可以取消超链接的下划线
		underline	定义文本下的一条线
		overline	定义文本上的一条线
		line-through	定义穿过文本下的一条线
		blink	定义闪烁的文本。
		*/
	}

css背景属性

.background{	
   		/* 没有高度/宽度设置会无法显示 */
   		width: 1200px;
        height: 1200px;
        border: 1px solid black;
        /* 边框大小1px 实线 黑色 */
        
        background-attachment: fixed;
        /* 固定当前图片在页面的显示,不随页面滚动 */
         background-color: red; /*背景颜色*/
   		background-image: url("2.jpg");
   		/*设置背景图片,通常与下列属性并用,不重复平铺页面*/
   		background-repeat: no-repeat;/* 不重复平铺图片,只显示一张  */
        background-position: center;/* 居中 */
        background-position: 50% 50%;/*背景位置 */
 			
        background: url("2.jpg") no-repeat 50% 50%;
        /*简写多个样式 */
       }

css边框属性

无内容的div标签如果没有高和宽的设置,就无法显示
<div class=“c1”></div>

.c1{	
	height: 120px;/*边框的高*/
    width: 80px;/*边框的宽*/
    background-color: red;/*边框的背景色*/
	border-width: 2px; /* 边框线条的宽度 */
	border-style: solid;/* 边框线条的样式 none——无边框 solid—— 实线 dashed——虚线 dotted——点线   */
	border-top-color: black;/* 边框顶部线条的颜色 */
	border-bottom-color: green;/* 边框底部线条的颜色 */
	/* border-right-color边框右侧线条的颜色
		border-left-color边框右侧线条的颜色*/
	 border-radius: 100%; /*设置圆角边框 设置为长或高的一半即可得到一个圆形 */
	 
		/* 简写版本: */
		border: 2px solid red; /*线条宽度,实线,红色*/
		border-right: 2px solid blue;/* 设置右边框的样式  */
	}

示例:

<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.fimg {
         width: 100px;
         height: 80px;
         border: 2px solid red;
         border-radius: 100%;
         /*父级边框以圆形展示 */
         
         overflow: hidden;
/*父级边框以圆形展示时,图片溢出了部分时,改为溢出部分不可见 */
        }
        img {
            max-width: 100%;/*不允许图片超出父级标签总宽度*/
/*当图片的大小超过父级的div框大小时可以设置最大宽度为父级边框的100% */
        }
</style>
</head>
<body>
<div class="fimg">
    <img src="2.jpg" alt="图片未找到">
</div>
</body>

display属性

display:"none"	在浏览器中不显示该标签。
				一般用于配合JavaScript代码使用。
display:"block"	按块级元素显示,默认占满整个页面宽度
display:"inline"按行内元素显示，行内元素不能设置宽和高
				默认以标签内容的宽和高为准
display:"inline-block"	使元素同时具有行内元素和块级元素的特点。

<style type="text/css">
	.s{/*将列表元素放在一行展示*/
		display: inline;
	}
</style>
</head>

<body>
<ul >
	<li class='s'>首页</li>
	<li class='s'>游戏</li>
	<li class='s'>漫画</li>
	<li class='s'>音乐</li>
</ul>
</body>

盒子模型

margin:外边距  元素边框与元素边框之间的距离
padding:内边距   内容与边框之间的距离   
Border(边框):     边框。
Content(内容):   边框内容

*{
	margin:0;
/*不同的浏览器有不同的默认外边距设置 ,此处统一取消默认设置    */
	padding:0;
	}
.d1{
	margin:0 auto
	/*标签框内容居中
	第一个表示top(上边框)和bottom(下边框)，
	第二个表示left和right
	0 auto
	上下边界为0，左右则根据宽度自适应相同值（即居中）
	*/
}

浮动属性

float浮动属性,
值为left(向左浮动),right(向右浮动),none(默认不浮动),
inherit(从父元素继承 float 属性)

css中任何元素都是可以浮动的
浮动元素会生成一个块级框,无论它本身是什么元素
浮动就是块级框不再单独占据一行,
能浮动的元素尽量放在一行,具体看页面总宽度与浮动元素宽度之和的比较
不能放在一行的就放在下一行
浮动的块级框会覆盖不浮动的元素框

清除浮动:clear属性 left(清除左侧浮动)
				  right(清除右侧浮动)
				  both(清除左右浮动)
				  none(默认不清除)
在浮动标签的后一个标签中添加clear属性
例如clear:left 清除左侧浮动——如果左侧有浮动标签就换到下一行
这样左侧就没有浮动
所谓的清除浮动只是影响当前标签框的位置,
不是清除浮动元素的浮动样式
不会影响其它标签

<!-- 
d1是浮动框,面积小的黑色图 , 
d2是非浮动框,面积大的红色
浮动的d1会覆盖非浮动框d2的一部分
-->
<style type="text/css">
	*{/* 取消浏览器默认边距设置 */
		margin: 0;
		padding: 0;
	}
	.d1{
		height: 100px;
		width: 80px;
		float:left;
		background-color: black;
	}
	.d2{
		height: 120px;
		width: 120px;
		background-color: red;
	}
	.d2{/*清除左侧浮动*/
		clear: both;
	}
</style>
</head>
<body>
<div class="">
	<div class="d1"></div>
	<div class="d2"></div>
</div>
</body>

浮动框导致父级框无法显示

<!--
如果一个标签框内部全是浮动框,那么当前标签框的样式就无法显示
默认高度为0
子标签的浮动框的样式无法撑起当前标签的高度
解决方式一:
在子标签最后添加一个非浮动标签用于支撑父级框的高度

.d2{/*清除左侧浮动,所以当前标签换行,高度为0,
页面表现方式就是父级边框的下边框的线条*/
		clear: both;
	}
解决方式二:
	不需要添加一个额外的子标签
	.当前标签class属性值:after{ 在当前标签内部最后添加一个样式 
	content : "";
	clear:both; 清除左右浮动 
	display: block;默认占满页面宽度  
	/*多数标签都会用到清除浮动,可以抽取出来*/
	}
-->
<style type="text/css">
	*{/* 取消浏览器默认边距设置 */
		margin: 0;
		padding: 0;
	}
	.d1{/*浮动框*/
		height: 100px;
		width: 80px;
		float:left;
		background-color: black;
	}
	
	.fa{/*父级框*/
		background-color: gray;
	}
	 /*  .fa:after {
		content: "";
		clear: both;
		display: block;
	}   */
	
</style>
</head>
<body>
<div class="fa">
	<div class="d1"></div>
</div>
</body>

简单导航栏示例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页1</title>
<style type="text/css">
	.d1{/*背景颜色为灰色*/
		background-color: gray;
	}
	.d1:after{
	/*导航栏全是浮动框,需要以下代码来撑起导航栏的高度*/
		content : "";
		clear:both; /*清除左右浮动,即换行*/
		display: block;/*以块级框的形式显示,独占一行*/
	}
	
	li{/*列表元素在一行显示,字体为白色*/
		display: inline;
		color: white;
	}
	.l1,.l2{/*左右侧标题栏共同样式*/
		height: 50px;
        width: 80px;
		text-align:center;/*文字居中*/
		padding-right:10px;/*内填充间距*/
		padding-left:10px;
		padding-top:10px;
	}		
	.l1{
		float: left;/*左浮动*/
	}
	.l2{
        float: right;/*右浮动*/
	}
	.l1:hover {/*鼠标移动到超链接上触发     */
		color: red;
	}		
	.l2:hover {/*鼠标移动到超链接上触发     */
		color: blue;
	}		
	a{/* 去掉超链接的下划线 */
		text-decoration: none;
	}
</style>
</head>
<body>
<div class="d1">
	<ul class="u1">
		<a href="#"><li style="font-size: 20px " class="l1">首页</li></a>
		<a href="#"><li class="l1">手机数码</li></a>
		<a href="#"><li class="l1">家用电器</li></a>
		<a href="#"><li class="l1">箱包</li></a>
		<a href="#"><li class="l1">孕婴产品</li></a>
		<a href="#"><li class="l1">水果</li></a>
		<a href="#"><li class="l1">食品</li></a>
	</ul
	<ul class="u2">
		<a href="#"><li class="l2">登录</li></a>
		<a href="#"><li class="l2">注册</li></a>
		<a href="#"><li class="l2">购物车</li></a>
	</ul>
</div>		
</body>
</html>
qq_31241107
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Web前端——CSS盒模型
qq_25592087的博客
09-21 466
元素选择器{ /* 选中要修改地元素 */属性名:属性值;/* 属性名：修饰语法*/属性名:属性值;/* 属性值：属性的取值*/}
前端——CSS中常用的定位方式
Bingtangbgd的博客
07-03 1484
前端——CSS中常用的定位方式
前端——CSS新手基础篇2
wmy030921的博客
06-14 945
前端——CSS新手基础篇2
Web前端——CSS基础
硝酸童不酸的博客
08-25 1324
CSS的一些简单知识
Web前端——css中hack是什么
正在路上
04-07 1416
css中hack是什么 在软件系统中意思翻译为：基于程序的基础，对其代码进行增加、删除或者修改、优化，使之在功能上符合新的需求; 在前端中理解为：不同厂商的浏览器不同厂商的浏览器对CSS的解析不同，会导致生成的页面效果不同，这时候需要针对不同的浏览器去编写不同的CSS额外代码兼容所有浏览器，这个编写过程叫做css hack。 针对不同浏览器编写css前缀代码是css hack：属性前缀法(类内部hack)；选择器前缀法(选择器hack)；条件注释法（这种方式是IE浏览器专有的hack方式，微软官方
Web前端——CSS常用选择器
qq_25592087的博客
10-03 295
Web前端——CSS常用选择器Web前端——CSS常用选择器Web前端——CSS常用选择器Web前端——CSS常用选择器Web前端——CSS常用选择器Web前端——CSS常用选择器Web前端——CSS常用选择器Web前端——CSS常用选择器。
b前端——CSS常用选择器性盒子Web前端
qq_25592087的博客
10-05 299
b前端——CSS常用选择器性盒子Web前端性盒子Web前端性盒子Web前端性盒子Web前端。
前端系列——CSS
qq_51553982的博客
08-29 629
px是指像素的意思，1px就是一个像素点，是我们常用的长度单位。
前端——css——id 和 class 选择器
小白龙白龙马的博客
06-12 179
前端——CSS3上课笔记1
qq_43457854的博客
06-18 165
前端——CSS3上课笔记1CSS3 CSS3
前端学习（二）——css3学习
08-09
前端学习（二）——css3学习
web前端——CSS实现加载页面效果
cloudYun的博客
07-29 2178
先上图 html代码 <div class="container"> <div class="trans"> <span>加载中...</span> </div> </div> 其中container是背景，trans是加载是旋转的正方形 CSS基本样式 * { margin: 0; padding: 0; } html, body { width: 100%; height: 100
秒达开源多功能中文工具箱源码：自部署 全开源 轻量级跨平台 GPT级支持+高效UI+Docker
最新发布
09-09
【秒达开源】多功能中文工具箱源码发布：自部署、全开源、轻量级跨平台，GPT级支持+高效UI，Docker/便携版任选，桌面友好+丰富插件生态 这是一款集大成之作，专为追求高效与便捷的用户量身打造。它不仅支持完全自部署，还实现了彻底的开源，确保每一位开发者都能深入了解其内核，自由定制与扩展。 【秒达开源工具箱】以其轻量级的架构设计，实现了在各类设备上的流畅运行，包括ARMv8架构在内的全平台支持，让您无论身处何地，都能享受到同样的便捷体验。我们深知用户需求的多样性，因此特别引入了类似GPT的智能支持功能，让您的操作更加智能、高效。 与此同时，我们注重用户体验，将高效UI与工具箱功能高度集成，使得界面简洁直观，操作流畅自然。为了满足不同用户的部署需求，我们还提供了Docker映像和便携式版本，让您可以根据实际情况灵活选择。 值得一提的是，我们的工具箱还支持桌面版应用，让您在PC端也能享受到同样的强大功能。此外，我们还建立了丰富的开源插件库，不断扩展工具箱的功能边界，让您的工具箱永远保持最新、最全。 【秒达开源】多功能中文工具箱，作为一款永远的自由软件，我们承诺将持续更新、优化，为
双极 AMI 的加扰以及 B8ZS 和 HDB3 加扰simulink.rar
09-09
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。
C项目开发资源.docx
09-09
对于C/C++项目开发，有许多资源和工具可以帮助开发者提高效率、保证代码质量以及实现项目的自动化构建和部署。以下是一些具体的资源和工具： 1. **集成开发环境(IDE)**: - **CLion**: 专为C和C++开发设计的跨平台IDE，提供了代码分析、调试、版本控制集成等功能。 - **Eclipse CDT**: 基于Eclipse的C/C++开发工具，支持代码补全、调试和项目管理。 - **Visual Studio**: Windows平台上功能强大的IDE，提供了丰富的C++开发支持。 - **Code::Blocks**: 开源的C/C++ IDE，体积小且可定制。 - **KDevelop**: 另一个功能丰富的开源IDE，主要针对Linux平台。 2. **代码编辑器**: - **Visual Studio Code**: 通过C/C++扩展插件，如C/C++插件包，提供智能感知、代码调试等功能。 - **Sublime Text**: 轻量级的文本编辑器，支持大量插件，包括C/C++编译和语法高亮。 3. **编译
基于ssm的在线购物系统的设计与实现设计与实现.docx
09-09
基于ssm的在线购物系统的设计与实现设计与实现.docx
python-对Excel数据处理做可视化分析.zip
09-09
灵敏度分析
logisim-hust-20200118.zip
09-09
logisim-hust-20200118.zip
springboot小说阅读平台的设计毕业论文.docx
09-09
springboot小说阅读平台的设计毕业论文.docx
免费学习：前端开发必读——CSS+DIV样式与布局详解
本书首先介绍了CSS的基础概念，如CSS的全称——层叠样式表单（Cascading Style Sheets），它的作用是控制网页元素的样式，通过将样式信息从内容中分离出来，使设计更具灵活性。CSS通过链入外部样式表文件、定义内部...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值