css 11-10

最新推荐文章于 2021-09-13 16:11:47 发布
最新推荐文章于 2021-09-13 16:11:47 发布
阅读量79 收藏
点赞数 2
文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44907496/article/details/109597177
版权

CSS_2

1.CSS中常用的属性设置
css格式:
选择器{
css属性名称:属性值；
}
选择器–从htm文件中选中自己需要添加样式的html元素。
1.元素选择器—根据html元素的名称选中被控制的html标记。
2.id选择器–根据给html标记设置的id属性来选中被控制的html标记。
如果要使用id选择器那么首先需要给html标记去设置id属性。
3.类【class】选择器—根据给html标记设置的class属性来选中被控制的html标记。
如果要使用类【class】选择器那么首先需要给html标记去设置class属性。
4.包含选择器–选择所有被父元素包含的子元素。
5.属性选择器–根据html标记的属性来选中被控制的元素
1.元素 [属性名称] { sRules }：选择具有某个属性的元素
2.元素 [属性名称 = value【属性值】 ] { sRules }：选择具有某个属性且属性值等于 value 的元素
6.子元素选择器—选择所有作为E1子对象的 E2 。
7.选择器分组----将同样的样式应用于多个选择器选中的元素上。不同的选择器之间使用“，”分割。
注意:css的选择器在使用的时候，不是单一去应用，而是通过不同的组合形式来使用。
1.1关于字体的css属性设置
color–设置字体颜色[颜色单词/颜色码【#0000ff】]
font-family—设置字体名称[黑体…]
font-size --设置字体大小【数字px】在这里插入代码片
font-style–设置字体倾斜【normal | italic | oblique 】
font-weight–设置字体粗细【整百的数字【100~900】】
text-decoration–设置字体的修饰线【none || underline下划线 || overline上划线 || line-through贯穿线 】
text-shadow–文本的文字是否有阴影及模糊效果
text-transform–文本的大小写转换【none | capitalize | uppercase | lowercase 】
line-height–行高【数字px】
letter-spacing–文字之间的间隔 normal | length 【数字px】
word-spacing–单词之间插入的空隔normal | length 【数字px】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>关于字体的css属性设置</title>
		<style>
			p{
				color:red;
				font-family:楷体;
				font-size:30px;
				font-style:italic;
				font-weight:900;
				text-decoration:underline;
				text-transform:uppercase;
				letter-spacing:10px;
				word-spacing:20px;
				text-shadow:10px 10px 20px red;
				line-height: 30px;
			}
		</style>
	</head>
	<body>
	<body>
		<h1>关于字体的css属性设置</h1>
		<h2 >color--设置字体颜色[颜色单词/颜色码【#0000ff】]</h2>
		<h2>font-family---设置字体名称[黑体.....]</h2>
		<h2>font-size --设置字体大小【数字px】</h2>
		<h2>font-style--设置字体倾斜【normal | italic | oblique 】</h2>
		<h2>font-weight--设置字体粗细【整百的数字【100~900】】</h2>
		<h2>text-decoration--设置字体的修饰线【none || underline下划线 
		|| overline上划线 || line-through贯穿线 】</h2>
		<h2>text-shadow--文本的文字是否有阴影及模糊效果</h2>
		<h3>text-shadow:10px 0px 0px red;</h3>
		<h3>第一个值:水平移动距离 0px 0px red;</h3>
		<h3>第二个值:前后移动距离 0px 0px red;</h3>
		<h3>第三个值:模糊效果</h3>
		<h3>第四个值:阴影颜色</h3>
		<h2>text-transform--文本的大小写转换【none | 
		capitalize | uppercase | lowercase 】</h2>
		<h2>line-height--行高【数字px】</h2>
		<h2>letter-spacing--文字之间的间隔 normal | length 【数字px】</h2>
		<h2>word-spacing--单词之间插入的空隔normal | length 【数字px】</h2>
		<p>测试关于字体的test css属性设置</p>
		<p>测试文字是否有阴影及模糊效果</p>
		<p>测试文字是否有阴影及模糊效果测试文字是否有阴影及模糊效果测试文字是否
		有阴影及模糊效果测试文字是否有阴影及模糊效果测试文字是否有阴影及模糊效果
		测试文字是否有阴影及模糊效果测试文字是否有阴影及模糊效果测试文字是否有阴影及模糊效果
		测试文字是否有阴影及模糊效果测试文字是否有阴影及模糊效果测试文字是否有阴影及模糊效果
		测试文字是否有阴影及模糊效果测试文字是否有阴影及模糊效果</p>
	</body>
</html>

在这里插入图片描述
1.2关于文本属性设置
text-indent :文本的缩进 length 【数字px】
vertical-align：垂直对齐方式top middle bottom
text-align :水平对齐方式left | right | center

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>关于文本属性设置</title>
		<style>
			#p1{
				font-size: 20px;
				text-indent:30px;
			}
			#p2{
				font-size: 20px;
				text-indent:50px;
			}
			tr{
				text-align:right;
				vertical-align:bottom;
			}
		</style>
	</head>
	<body>
		<h1>关于文本属性设置</h1>
		<h2>text-indent :文本的缩进 length 【数字px】</h2>
		<h2>vertical-align：垂直对齐方式top  middle bottom </h2>
		<h2>text-align :水平对齐方式left | right | center </h2>
		<p id="p1">关于文本属性设置关于文本属性设置关于文本属性设置</p>
		<p id="p2">关于文本属性设置关于文本属性设置关于文本属性设置</p>
		<table border="1px" width="600px" height="200px">
			<tr>
				<td>text-align</td>
				<td>水平对齐方式left | right | center</td>
			</tr>
			<tr>
				<td>vertical-align</td>
				<td>垂直对齐方式top  middle bottom</td>
			</tr>
		</table>
	</body>
</html>

在这里插入图片描述

1.3关于背景的设置
整个网页的背景设置
1. 整个网页的背景颜色【在body元素中设置bgcolor】
2. 整个网页的背景图片【在body元素中设置background】
Html元素的背景设置
1. Html元素的背景颜色【background-color】
2. Html元素的背景图片【background-image:url(“imgs/banner1.png”);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>关于背景的设置</title>
		<style>
			div{
				width: 300px;
				height: 300px;
				background-color: red;
			}
			p{
				font-size: 40px;
				color: yellow;
				background-color: blue;
				
			}
			table{
				background-image:url("imgs/banner1.png");
			}
			tr{
				font-size: 20px;
				color: #FFFF00;
			}
		</style>
	</head>
	<body background="imgs/timg.jpg">
		<h1>关于背景的设置</h1>
		<h2>1. 整个网页的背景颜色【在body元素中设置bgcolor】</h2>
		<h2>2. 整个网页的背景图片【在body元素中设置background】</h2>
		<h1>关于HTML元素背景的设置</h1>
		<div></div>
		<p>关于HTML元素背景的设置--背景颜色</p>
		<table border="1px" width="600px" height="200px">
			<tr>
				<td colspan="2">关html元素的背景设置</td>
			</tr>
			<tr>
				<td>HTML元素的背景颜色</td>
				<td>background-color:颜色单词/颜色码</td>
			</tr>
			<tr>
				<td>HTML元素的背景图片</td>
				<td>background-image:url("图片路径")</td>
			</tr>
		</table>
	</body>
</html>

在这里插入图片描述
1.3关于html元素的尺寸设置
width : 设置元素的宽度 auto | length
height : 设置元素的高度auto | length
1.4 关于边框设置
border-color : 边框颜色
border-style ：边框样式
border-width：边框粗细
上面这三个属性可以分为4组
border-top-color，border-right-color，border-bottom-color，border-left-color
border-top-style，border-right-style，border-bottom-style，border-left-style
border-top-width，border-right-width，border-bottom-width，border-left-width
我们可以通过border属性设置4边的边框
border:粗细 样式 颜色。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>关于边框设置</title>
		<style>
			div{
				width: 200px;
				height: 200px;
				border: 10px solid red;
			}
			#img1{
				border-top-width:5px ;
				border-top-style: double;
				border-top-color: black;
				border-right-width:10px ;
				border-right-style: solid;
				border-right-color: blue;
				border-bottom-width:15px ;
				border-bottom-style: dashed;
				border-bottom-color: red;
				border-left-width:20px ;
				border-left-style: dotted;
				border-left-color: green;
			}
			#img2{
				border-top:5px double black;
				border-right:10px solid blue;
				border-bottom:15px dashed red;
				border-left:20px dotted green;
			}
		</style>
	</head>
	<body>
		<h1>关于边框设置</h1>
		<div></div>
		<br>
		<img id="img1"  src="imgs/avatar2.png" />
		<br>
		<img id="img2" src="imgs/avatar2.png" />
	</body>
</html>

在这里插入图片描述

1.5 关于列表的设置
列表–1.有序列表


2.无序列表

3.自定义列表

列表的设置就是改变一下列表的前面的标识。
list-style-image : 设置标识图标none | url ( url ) 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>关于列表的设置</title>
		<style>
			ul li a{
				font-size: 50px;
				text-decoration: none;
				color: black;
			}
			ul{
				list-style-image:url("imgs/home.PNG");
			}
		</style>
	</head>
	<body>
		<h1>关于列表的设置</h1>
		<h2>list-style-image : 设置标识图标none | url ( url ) </h2>
		<ul>
			<li><a href="#">用户信息管理</a></li>
			<li><a href="#">部门信息管理</a></li>
			<li><a href="#">职位信息管理</a></li>
		</ul>
	</body>
</html>

在这里插入图片描述
1.6 关于表格的设置
border-collapse :设置表格单元格之间的边框合并[ separate | collapse相邻边被合并]
border-spacing :表格边框独立时，行和单元格的边在横向和纵向上的间距。 【数字px】
empty-cells :当单元格中没有内容时,单元格的边框是否显示 show | hide

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格属性设置</title>
		<style>
			table{
				width: 800px;
				height: 400px;
				border-collapse:separate;
				border-spacing:10px;
				empty-cells:show;
			}
			table tr{
				font-size: 20px;
				text-align: right;
				vertical-align: bottom;
			}
			
		</style>
	</head>
	<body>
		<h1>表格属性设置</h1>
		<h2>border-collapse :设置表格单元格之间的边框合并[ separate | collapse相邻边被合并] </h2>
		<h2>border-spacing :表格边框独立时，行和单元格的边在横向和纵向上的间距。 【数字px】</h2>
		<h2>empty-cells :当单元格中没有内容时,单元格的边框是否显示 </h2>
		<table border="1px">
			<tr>
				<td colspan="3"><h1>表格属性设置</h1></td>
			</tr>
			<tr>
				<td>border-collapse</td>
				<td>设置单元格是否合并</td>
				<td>separate | collapse相邻边被合并</td>
			</tr>
			<tr>
				<td>border-spacing</td>
				<td>框独立时，单元格之间的间距</td>
				<td>数字px</td>
			</tr>
			<tr>
				<td>empty-cells</td>
				<td>当单元格中没有内容时,单元格的边框是否显示</td>
				<td></td>
			</tr>
		</table>
	</body>
</html>

在这里插入图片描述
1.7 关于补丁的设置
补丁–子元素和父元素之间的距离
如果设置的是父元素—内补丁【padding】
如果设置的是子元素—外补丁【margin】
padding:12px 15px 28px 35px
四个参数值，将按上－右－下－左的顺序作用于四边。
padding:12px
提供一个，将用于全部的四边
padding:12px 15px
两个，第一个用于上－下，第二个用于左－右
padding:12px 15px 28px
提供三个，第一个用于上，第二个用于左－右，第三个用于下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>补丁设置</title>
		<style>
			div{
				width: 500px;
				height: 400px;
				background-color: black;
			}
			#div1{
				padding: 50px;
			}
			#img2{
				margin: 50px;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<img id="img1" src="imgs/avatar2.png" />
		</div>
		<br>
		<div id="div2">
			<img id="img2" src="imgs/avatar5.png" />
		</div>
	</body>
</html>

在这里插入图片描述

weixin_44907496
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS基础入门总结（很详细的哟）
10-25
一、CSS语法规范 二、CSS选择器 （1）基础选择器 （i）标签选择器 （ii）类选择器 （iii）id选择器 （iv）通配符选择器 （2）复合选择器 （i）后代选择器 （ii）子代选择器 （iii）并集选择器 （iv）伪类选择器 三、CSS字体属性 （1）字体大小 （2）字体名称（字体系列） （3）字体粗细 （4）字体样式 （5）字体 四、CSS文本属性 （1）文本颜色 （2）文本对齐 （3）文本缩进 （4）文本修饰 （5）文本行高 五、CSS的引入方式 （1）行内样式表 （2）内部样式表 （3）外部样式表 六、CSS的综合案例
CSS list-style-type属性使用方法
09-25
10. `lower-greek`：小写希腊字母计数，如α, β, γ等。 11. `lower-latin`：小写拉丁字母计数，如a, b, c等。 12. `upper-latin`：大写拉丁字母计数，如A, B, C等。 13. `armenian`：亚美尼亚数字计数。 14. `...
CSS基础学习总结（1）
JavaAlliance
05-22 5401
CSS基础学习总结（1） 一、引入CSS样式表（书写位置） 内部样式表 内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下： <head> <style type="text/CSS"> 选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} </style> </head&g...
css 基础总结
没有如果的博客
10-10 311
css样式学习 一. 位置和布局 1. 相对定位：relative 用途： 就是微调元素位置的.让元素相对自己原来的位置,进行位置的微调. 特性： 不脱离标准文本流,真实位置是在老家,只不过影子出去了,可以到处飘. 移动: 可以用left,right来描述盒子右,左的移动，可以用top,bottom来描述盒子的下,上的移动. position:relative; left
CSS基础总结
败天一子的博客
01-26 155
CSS基础总结 引入样式的方法 行内式：在标签的style属性上设置样式 &lt;标签名 style=" 属性 : 属性值 ; "&gt; 内嵌式：将CSS代码写在HTML文件的head标签中，用style标签包裹 &lt;head&gt; &lt;style type="text/CSS"&gt; 选择器 { 属性 : 属性值;} 选择器2 { 属性 : 属...
postcss-windicss:Windi CSS的PostCSS集成
04-01
postcss-windicss :test_tube: 过期的。 :warning: 不鼓励使用此软件包，因为PostCSS的API存在一些限制。 将我们用于每个专用框架/构建工具，以获取最佳的开发经验和性能。 该插件应该是使用Windi CSS的最后选择...
css-grid-polyfill:用于Internet Explorer 11的有限实验CSS网格polyfill
05-18
CSS网格Polyfill笔记： 该polyfill是开发中的，高度实验性的，并且功能不完整。安装克隆此存储库： git clone https://github.com/svenvandescheur/css-grid-polyfill.gitcd css-grid-polyfill 安装实时服务器： npm...
css-border-effects.zip
07-03
10. **伪元素与边框**：CSS的伪元素如`:before`和`:after`可用于创建复杂的边框效果，例如在元素内部添加额外的装饰性边框。 11. **响应式边框**：在移动设备上，可以使用媒体查询(`@media`)来根据屏幕尺寸改变边框...
css-vars-ponyfill：在旧版和现代浏览器中客户端对CSS自定义属性（也称为“ CSS变量”）的支持
02-05
css-vars-ponyfill 一个 ，可在旧版和现代浏览器中为（也称为“ CSS变量”）提供客户端支持。 （CodePen） 产品特点 从客户端将CSS自定义属性转换为静态值 在现代和旧版浏览器中实时更新运行时值 转换<link> ...
css基础总结
cui2839255227的博客
11-08 322
 CSS创建：  插入样式表方式有三种：1）外部样式表 路径">                               2）内部样式表                               3）内联式样式表 CSS backgrounds(背景):  background-image:url('图片路径')  background-color:(背景颜色)
[ CSS ] CSS基础总结
丹的博客
05-15 180
选择器的权重: *通用选择器 0 标签需选择器 1 类选择器 10 id选择器 100 行内样式 1000 CSS文本属性: 颜色: color 字体: font-family 行高: line-height 大小: font-size 加粗: font-wight 倾斜: font-style: italic 首行缩进:text-indet: 水平对齐:text-align: center 文字修饰: text-decoration: ...
【css】基础总结
WHUZXQ的博客
03-03 340
外边距与内边距1 元素的背景会延伸到内边距中，但不会延伸到外边距。 因此，为元素指定的内边距和外边距会影响元素的背景何时结束。 2 对元素的外边距设置百分数值，百分数是相对于父元素的width计算而来的(即使margin-top也是) 3 上下外边距，正常流中垂直相邻的外边距会合并， 4 外边距可以应用到行内元素，对行高没有任何影响，由于外边距是透明的，所以没有任何视觉效果，其原因就在于行内
CSS基础知识总结
m0_53725419的博客
09-13 313
前言：学习Vue要求要有中级的html,css和js的基础，来补一下css的基础 一、CSS简介 1.1页面美容师 功能：美化网页，布局页面 CSS是层叠样式表的简称，也是一门标签语言 最大价值：让HTML专心去做结构，结构（HTML）与样式（CSS）分离 ...
CSS基础学习总结
rotation博客
07-15 524
CSS概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一 优点 样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的...
EWN-8822CSS3AH 无线模块规格说明书
"EWN-8822CSS3AH 是一款集成了 IEEE802.11b/g/n/a/ac 无线标准与 Bluetooth 2.1/3.0/4.2/5.0 技术的 SDIO 模块，由 Earda Technologies Co., Ltd. 制造。该模块适用于 Wi-Fi 和蓝牙功能的集成应用，如无线网络连接和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值