day12 CSS样式、文字属性、表格

最新推荐文章于 2024-06-12 01:29:39 发布

Feifei_peng

最新推荐文章于 2024-06-12 01:29:39 发布

阅读量129

点赞数

分类专栏：日常作业文章标签： css html 前端

本文链接：https://blog.csdn.net/Feifei_peng/article/details/125646044

版权

日常作业专栏收录该内容

59 篇文章 1 订阅

订阅专栏

form表单标签

<html>
    <head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
    <!--form表单标签，主要应用与登录，注册页面
	能够使input转为按钮之后的功能生效，登录对页面生效，重置对输入文字生效-->
    	<form>
       	 	<input type="password" placeholder="请输入密码"><br>
            <input type="submit" value="登录">
        	<input type="reset" value="重置">
    	</form>
	</body>
</html>

表格标签

<body>
<!--table标签:声明表格
	tr标签：表示表格的每一行,一个tr表示一行
	th标签：表头
	td标题：单元格内容 -->
    <table>
        <tr>
            <td>内容</td>
        </tr>
    </table>
    <!--表格涉及到的属性
	table标签:border-设置表格的外边框的宽度，外边框的粗细
			cellspacing-设置单元格以及单元格到边框的间距
			width-设置宽度
			height-设置高度
			bordercolor-设置边框颜色
			bgcolor-设置背景颜色
			align-调整表格水平位置（左对齐：left 右对齐：right 居中：center）
	tr标签：bgcolor
			align-调整文字水平位置（左对齐：left 右对齐：right 居中：center）
			valign-调整文字垂直位置（左对齐：left 右对齐：right 居中：center）
			height-修改行高度
	td标签:width-修改单元格宽度
			height-修改单元格高度
			align-调整文字水平位置
			valign-调整文字垂直位置(顶部：top;底部:bottom;中间:middle)
	colspan-列合并
	rowspan-行合并
			
</body>

简历
个人信息	姓名	大飞	性别	雄性	出生日期	02-03-23
	民族	金丝猴	籍贯	峨眉山	政治面貌	普通
	身高	75cm	体重	34kg	身体状况	轻微低血糖
	联系电话	88028834	邮箱	234567	现所在地	峨眉山
	求职意向	香蕉品鉴师

div标签

div标签：无语意标签（盒子标签）

一般是把一个范围中涉及到的所有标签放在一起，是调整页面布局前的最后一个标签

CSS样式

css:层叠样式表

css代码写到哪：

1.内部样式表：将style标签放到head标签或者body标签内

2.内联样式：可以把样式直接作为一个标签的属性，写入到标签中，使用style属性

3.外部样式：有一个后缀名为.css的文件专门用来存放CSS代码，使用link标签引入

link标签语法

<link rel="" type="" href=""><link>
<!--1.如果rel为icon，表示给页面标签页设置图标，type为image/图片格式，表示引入XXX格式的图片
rel="icon" type="image/图片格式（png、jpg)" href="图片链接和路径"
2.rel为stylesheet,表示给页面引入样式表，type固定为text/css

CSS样式如何写？

语法：

选择器{

属性：属性值

}

说明：1.选择器：通过标签来选择被修改的内容或者通过属性（id属性、class属性）选择被修改内容

2.{}：固定语法（内部样式、外部样式）

3.内部样式，外部样式，内联样式：修改内容的样式使用属性：属性值; 一定要写分号

这里是h1标签

h1111111

好好好

选择器

CSS选择器：

1.通配符选择器： * -能改变所有标签的样式，常用于消除标签间距

2.标签选择器标签名–不加限定条件，能够修改页面中所有对应标签

3.id选择器 #

4.class选择器 .

一般在页面标签中，会添加id属性和class属性，其对应的属性值一般都是独一无二的或者
同一类数据使用一个属性值；通过调用id属性值或者class属性值变相的等于调用对应的标签
id选择器：#id属性值;

5.父子选择器父标签>子标签看缩进：被修改的是子标签

6.后代选择器祖先标签后代标签：被修改的是后代标签

7.兄弟选择器长兄~弟弟

8.相邻兄弟选择器 +

9.nth-child 选择器 a:nth-child(3) --找每一级下面的第三个标签，并且这个标签是a标签，不是a的就不能修改成功

CSS边框以及文字属性

**CSS边框常用属性： **
border:边框粗细边框的样式(solid 单实线 double 双实线 dashed 虚线 dotted 点) 边框颜色
border-radius:num1(num2 num3 num4)
num1-表示将图形(存在四个角)的四个角统一改为一个弧度。
num1 num2 -num1:表示图形的左上角和右下角，num2表示图形的右上角和左下角
num1 num2 num3 - num1表示左上角，num2:右上角和左下角， num3：右下角
num1 num2 num3 num4-左上、右上。右下、左下

border-top
border-bottom
border-left
border-right
等价与border

CSS文字常用属性

color:修改文字颜色
font-sizae:字体尺寸
font-family:字体
text-align:位置(left、right、center)
text-decoration:在文字的下方或上方或中间添加一个横线（underline、overline、line-throught)

颜色

颜色:三原色:红、绿、蓝;每种颜色有0-255，一共256等级。
1.颜色可以用英语单词表示
2.可以使用三原色的数字等级表示 rgb(0, 0, 0)或者rgba(0,0,0,透明度)
3.可以使用颜色的 #+十六进制符号表示