DAY THREE

信奉者z

已于 2022-09-14 01:16:08 修改

阅读量82

点赞数

文章标签：前端 java servlet

于 2022-06-26 02:50:37 首次发布

本文链接：https://blog.csdn.net/m0_55006160/article/details/125452880

版权

本文详细介绍了CSS的基础知识，包括div和span的使用、CSS语法格式、内联和内部样式、外部样式的引入、颜色表示法、背景样式设置以及边框样式实现。此外，还讲解了文本修饰、对齐、行高和间距等文本样式，以及如何利用CSS创建三角形。通过对这些概念和技巧的掌握，读者能够更好地理解和应用CSS进行网页布局与美化。

摘要由CSDN通过智能技术生成

CSS

background-position：背景图片的位置

background-attachment:：背景图随滚动条的移动方式

div与span

div：划分区域

span：修饰文字

		<div>
			<h2><a href="#"><span>怪奇物语</span>（美国2016年NETFLIX出品的科幻惊悚剧）
			_百度百科</a></h2>
			<a href="#"><img src="" alt=""></a>
			<p>《怪奇物语》（Stranger Things），
			是美国NETFLIX公司制作一部的主打科幻惊悚的美剧。
			该剧由年轻的类型片电影制作人Matt Duffer和Russ Duffer编剧并执导，
			由Shawn Levy担任执行制作人， 
			薇诺娜·瑞德，大卫·哈伯，菲恩·伍法德 ，米莉·波比·布朗等人主演。
			本剧故事设定在上世纪80年代，印第安纳州霍金斯 ...</p>
		</div>

CSS语法格式

格式：选择器（属性1：值1；属性二：值2）

单位：px（像素）、%

基本样式：width、background-color、height

	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style>
			div{ width: 100px; width: 100px; background-color: red;}
		</style>
		
	</head>
	<body>
		<div></div>
	</body>

内联样式与内部样式

内联：html标签上添加style

内部（可复用）：在<style>标签内添加

	<body>
		<div style="width: 100px; width: 100px; background-color: red"></div><!-- 内部 -->
	</body>


		<style>
			div{ width: 100px; width: 100px; background-color: red}/* 内联 */
		</style>
		
	</head>
	<body>
		<div>A</div>
		<div>B</div>
	</body>

外部样式及两种写法

引入单独css文件

1.通过link标签引入外部资源，rel属性指定资源跟页面的关系，href属性资源的地址

2.通过@import引入

div{ width: 100px;height: 100px;background-color: red}外部css

		<meta charset="utf-8">
		<link rel="stylesheet" href="new_file.css">
		<title></title>

        
        <style>
            @import url(new_file.css);
        </style>

CSS颜色表示法

输入方法

单词表示法：red

十六进制表示法：#000000

rgb三原色表示法：rgb（255,255,255）取值范围0~255

获取色值办法

拾色器软件

背景样式

background-color:背景颜色

background-image：背景图片（url）(默认全铺)

background-repeat（repeat-x repeat-y no-repeat repeat）：背景图片的平铺方式

background-position：背景图片的位置

x y：number(px、%)、单词

x：left、center、right

y：top、center、bottom

background-attachment:：背景图随滚动条的移动方式

scroll（背景按照当前元素进行偏移）

fixed（背景位置按照浏览器进行偏移）

多背景图操作

背景实现视觉差效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#div1{ width: 1400px;height: 800px;background-image: url(./EL.jpg);
			background-attachment: fixed;}
			#div2{ width: 1400px;height: 800px;background-image: url(./11.jpg);
			background-attachment: fixed;}
			#div3{ width: 1400px;height: 800px;background-image: url(./jane.jpg);
			background-attachment: fixed;}
		</style>
	</head>
	<body>
		<div id="div1">
			<div>
				<h2><a href="#"><span>怪奇物语</span>（美国2016年NETFLIX出品的科幻惊悚剧）
				_百度百科</a></h2>
				<a href="#"><img src="" alt=""></a>
				<p>《怪奇物语》（Stranger Things），
				是美国NETFLIX公司制作一部的主打科幻惊悚的美剧。
				该剧由年轻的类型片电影制作人Matt Duffer和Russ Duffer编剧并执导，
				由Shawn Levy担任执行制作人， 
				薇诺娜·瑞德，大卫·哈伯，菲恩·伍法德 ，米莉·波比·布朗等人主演。
				本剧故事设定在上世纪80年代，印第安纳州霍金斯 ...</p>
			</div>
		</div>
		<div id="div2">
			<form action=""><!-- 提交地址 -->
				<h2>输入框：</h2>
				<input type="text" placeholder="请输入密码">底<!-- 层提示信息 -->
				<h2>密码框：</h2>
				<input type="password">
				<h2>复选框</h2>
				<input type="checkbox" checked>牛蛙<!-- 一开始被选中 -->
				<input type="checkbox" checked>虾滑
				<input type="checkbox" disabled>和牛<!-- 禁止使用 -->
				<h2>单选框</h2>
				<input type="radio" name="gender">基围虾
				<input type="radio" name="gender">黑虎虾
				<h2>上传文件</h2>
				<input type="file">
				<h2>提交按钮和重置按钮</h2>
				<input type="submit">
				<input type="reset">
			</form>
		</div>
		<div id="div3">
			<table border="1" cellpadding="30" cellspacing="30">
				<caption>天气预报</caption>
				<tHead>
					<tr align="right">
						<th colspan="2">日期</th>
						<th>天气情况</th>
						<th>出行情况</th>
					</tr>
				</tHead>
				<tBody>
					<tr>
						<td>2022-6-21</td>
						<td>清晨</td>
						<td><img src="./EL.jpg" alt=""></td>
						<td>天气晴朗</td>
					</tr>
				</tBody>
			</table>
		</div>
	</body>
</html>

边框样式

border-style：边框的样式

border-width：边框的大小

border-color：边框的颜色

边框可以针对某一边进行单独设置（border加l、r、t、p）

			div1{width: 300px;height: 300px;
			border-style: solid;border-color: red;
			border-width: 1px;}

			div2{width: 300px;height: 300px;
			border-right-style: dotted;border-left-color: black;
			border-bottom-width: 10px;}

边框实现三角形

透明颜色：transparent

			div{width: 0px;height: 0px;
			border-top-color:transparent ;
			border-top-style: solid;
			border-top-width:30px ;
			border-right-color:transparent ;
			border-right-style: solid;
			border-right-width:30px ;
			border-bottom-color:transparent ;
			border-bottom-style:solid;
			border-bottom-width:30px ;
			border-left-color:blue ;
			border-left-style: solid;
			border-left-width:30px ;}

family字体类型

字体类型：font-family

英文：Arial、Times New Roman（空格需要加引号）

中文：宋体（SimSun）

多字体可以让计算机识别更多

衬线体与非衬线体

div{font-family: 'Times New Roman',楷体;}

字体大小粗细样式

font-size（字体大小一般为偶数）默认16px

font-weight:正常、加粗（bold、normal、数值100~500正常，600~900加粗）

font-style：正常、斜体（normal、italic/oblique）

color

文本修饰与文本大小写

text-decoration：文本装饰 underline line-through overline（下划线、删除线、上划线）

text-transform：英文段落文本大小写（lowercase uppercase capitalize 小写、大写、只针对首字母大写）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			p{text-decoration: underline line-through overline; /* 添加多个文本修饰通过空格隔开 */
			text-transform: lowercase uppercase capitalize;}
		</style>
	</head>
	<body>
		<p>本剧故事设定在上世纪80年代，印第安纳州霍金斯小镇上的一个男孩神秘失踪，
		他的朋友、
		家人以及当地的警察开始寻找答案，随着拥有超能力的女孩Eleven的出现，
		一个关于秘密实验和超自然力量的神秘事件被逐渐揭开。</p>
	</body>
</html>

文本缩进与文本对齐

首行缩进：text-indent（em相对缩进、不适合中英混搭）

文本对齐方式：text-align: right center left justify（两端对齐）

			p{text-indent: 2em;
			text-align: right center left justify;}

文本的行高

第一行文字的下边距=第二行文字的上边距

行高：line-height（默认不是固定值）px、scale（比例值，跟文字大小成比例）

文本间距与英文折行

字体间距：letter-spacing

词间距（针对英文）：word-spacing

强制折行（针对英文、数字）：word-wrap: break-word（非常强烈的折行）word-break: break-all（不是那么强烈的折行，会产生空白区域）

			p{letter-spacing: 2;
			word-spacing: 10px;}
			
			div{word-wrap: break-word;
			word-break: break-all;}

css复合样式

通过空格实现复合、先写复合再写单一

无需关心顺序

background：red url() repeat 0 0;

border：border-right: 2px black solid

需要注意顺序

font（至少要有两个值size family按顺序）：font: 30px 宋体

weight style size/line-height family

			div{background: red url(./EI.jpg) no-repeat center center;
			border-right: 2px black solid;
			font: bold italic 30px/100px 宋体;}

信奉者z

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DAY THREE

div：划分区域span：修饰文字CSS语法格式格式：选择器（属性1：值1；属性二：值2）单位：px（像素）、%基本样式：width、background-color、height内联样式与内部样式内联：html标签上添加style内部（可复用）：在标签内添加外部样式及两种写法引入单独css文件通过link标签引入外部资源，rel属性指定资源跟页面的关系，href属性资源的地址CSS颜色表示法输入方法单词表示法：red十六进制表示法：#0000......
复制链接

扫一扫