HTML之选择器和边框

最新推荐文章于 2024-07-24 11:16:38 发布

无处安放的小曾

最新推荐文章于 2024-07-24 11:16:38 发布

阅读量704

点赞数 2

文章标签： css html 前端

本文链接：https://blog.csdn.net/m0_51152186/article/details/123307486

版权

一、图片路径。

如何写路径：
如：
视频文件夹-》视频文件
源码-》源码文件
（视频文件夹与源码是兄弟关系）
当在源码时：
视频文件夹/视频文件
当在源码文件时：
../ 返回上一层（经常用）
../视频文件夹/视频文件
将文字放在<body></body>中与标签中无差别，目的是通过标签修改样式。

二、css: 层叠样式表。

css定义如何显示HTML元素的

样式的书写方式：
1.行内样式 style="样式"
给p标签写样式就直接在p标签那一行写样式

页内样式与外链样式都是通过选择器：给标签取名字，按名字给标签加样式
2.页内样式:<style></style>
在index页面里面写样式
页内样式放在<head></head>里面

3.外链样式
新建一个css文件，在css中写样式。
<link href=" " rel="stylesheet" type="text/css" />

行内样式都要写在双引号里，样式和样式之间要用分号隔开
color 颜色

三、选择器。

标签选择器：p{ 写样式 }
类选择器：class="" .class
ID选择器：
#id{}

class选择器允许重复命名
id选择器不允许重复命名
写样式要用class选择器

背景：
background-color:blue

文本样式：
color: 字体颜色
text-align：
文本对齐方式
值：
1.center 居中
2.right 右侧
3.left 左侧

line-height:50px;
行高
经常和文本对齐方式一起使用，实现上下左右居中效果，实现上下居中，行高的属性值一般给外侧包裹盒子的高度。

注释：
html

css /*注释*/

四、文本修饰。

text-decoration:;
值：
none 默认
underline 下横线
overline 上横线
line-through 贯穿横线
blink 闪烁文本
wavy 波浪线
dotted 点虚线

文本转换：
text-transform:
值：
uppercase 大写
lowercase 小写
capitalize 开头字幕大写

文本缩进：
text-indent

字体：
<font></font>

字体大小
font-size: 50px;
1em=16px
font-family 文字字体

字体粗细：
font-weight
normal-400 默认的
bold-700 粗体
bolder 更粗
lighter 变细
100--900
400默认

五、背景：

背景颜色：
background-color
值：
1.英文：red blue
2.十六进制：#e61818
0-9
A B C D E F
#000000白色
#FFFFFF黑色
3.rgb(111,111,111)
取值：
0-255之间

背景图片：
background-image
url()
背景重复：
background-repeat
值：
no-repeat 不重复
repeat-x 沿X轴重复
repeat-y 沿Y轴重复

背景定位：
background-position
值： x y
1. top left
2. 0% 0%

简写：
background:url(img/0.jpg) no-repeat right bottom

背景图片大小
background-size
值：
x y
100% 100%
px px

六、边框。

border

边框样式：
border-style:
dashed:虚线
solid 实线
dotted 点虚线

边框颜色
border-color
边框粗细
border-width

给单独一条边框加样式：
左边框的颜色
border-left-color: ;
上边框的类型
border-top-style:
下边框的粗细
border-bottom-width:

方向单词可改： top left bottom right

七、练习代码。

index2.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- <style>
			p{
				font-size: 6.25rem;
				/* font-family: "新宋体"; */
				font-weight: bolder;
				width:1000px;
				height: 1000px;
				/* background-color: #7FFFD4; */
				background-color: rgb(111,111,110);
				/* p标签中加背景图片,区别body中加背景图片 */
				background-image: url(img/02.jpg);
				/* 背景图片不重复 */
				background-repeat: no-repeat;
			}
		</style> -->
		<style>
			body{
			/*多张背景图的应用， 最上层的图片位置在前,依次往下写	 */
			background-image: url(img/02.jpg),url(img/02.jpg),url(img/01.png);
			height: 50rem;
			background-repeat: no-repeat,no-repeat,repeat;
			background-position: center,left top;
			/* background-size: 100% 100%; */
			/* 背景图片不重复 */
			/* background-repeat: repeat-x; */
			/* 沿x轴铺满 */
			/* background-repeat: no-repeat; */
			/* 0% 0%对应top left,设置完位置后要给它一个高度,否则图片只显示部分 */
			/* background-position: 50% 50%; */
			/* 简写 */
			/* background:url(img/01.png) no-repeat center; */
			}
		</style>
		
	</head>
	<body>
		<p>
			孤山远影碧空静
		</p>
		
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 清空所有浏览器自带的内外边距(要写在样式的最上侧) */
			*{margin:0;padding: 0;}
			div{
				width:6.25rem;
				height: 6.25rem;
				background-color: aquamarine;
				/* margin-bottom:1.5625rem; */
				/* margin: 0.625rem 1.25rem 1.875rem 2.5rem;
				padding-left: 6.25rem;
				padding-top: 6.25rem; */
				/* 左右给auto为居中，上下无auto */
				/* margin: 0rem auto; */
				/* border: #0000FF 0.3125rem;
				border-style: dashed dotted double groove; */
				/* background-color: #0000FF; */
				/* 边框三元素:粗细,颜色,类型 */
				/* border-style:dotted;
				border-color: #7FFFD4;
				border-width: 3.125rem;
				border-top-color: #FF0000; */
				/* 边框简写中,这三个元素顺序无区别 */
				/* border:3.75rem solid #0000ff; */
				/* border-left-style: dotted; */
				/* 简写设置指定边框线 */
				/* border-top: 0.1875rem #7FFFD4 solid; */
				/* 改变盒子四个角的弧度，100%或大点的px值，正方形会变成圆，长方形会变成椭圆*/
				/* border-radius: 100%; */
				/* border-bottom-right-radius: 3.125rem; */
				/* 盒子阴影,四个参数,x轴偏移量,y轴偏移量,阴影模糊半径值越大阴影越模糊,阴影颜色 */
				/* box-shadow: 1.875rem 3.125rem 0.3125rem gray; */
				/* 文字阴影 */
				/* text-shadow: 0.3125rem 0.3125rem 0.1875rem gray;	 */
			}
			
		</style>
	</head>
	<body>
		<div>我是内容</div>
		<!-- <div></div> -->
	</body>
</html>

无处安放的小曾

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML之选择器和边框

一、图片路径。如何写路径：如：视频文件夹-》视频文件源码-》源码文件（视频文件夹与源码是兄弟关系）当在源码时：视频文件夹/视频文件当在源码文件时：../ 返回上一层（经常用）../视频文件夹/视频文件将文字放在<body></body>中与标签中无差别，目的是通过标签修改样式。二、css: 层叠样式表。css定义如何显示HTML元素的样式的书写方式：1.行内样式 style="样式"给p标签写样式就直接在p标签那一行写样式页内样式...
复制链接

扫一扫