2.CSS3.(1).html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<!-- 使用外部样式 -->

<!-- <link rel="stylesheet" href="./xxx.css"> -->

<style>

/* 字体属性 */

p{/* 元素选择器 */

color: rgba(0,0,0,1);/*文本颜色*/

font-size: 30px;/* 文本大小 */

font-weight: lighter;/*文本粗细*//*bold:粗体;

bolder:更粗的;

lighter:更细的;

100~900:400同默认,700同bold*/

font-style: normal;/*文本字体样式*//*normal:默认;italic:斜体字*/

font-family: "Microsoft YaHei";/*指定一个元素的字体*//*"Microsoft YaHei":微软雅黑*/

}

/* 背景属性 */

.box1{/* 类选择器 */

width:300px;

height:300px;

background-color: #ffff00;/* 背景颜色 */

background-image: url("xxx.jpg");/* 背景图像 */

background-repeat: no-repeat;/*背景图像如何平铺*//*repeat:默认;

repeat-x:向水平方向平铺;

repeat-y:向垂直方向平铺;

no-repeat:不平铺*/

background-size: 50% 50%;/* 背景图像大小*//*length:第一个值宽度,第二个值高度;

percentage:计算相对位置区域的百分比;

cover:背景图像覆盖整个元素;

contain:背景图像完整显示在元素内*/

background-position: center;/*设置背景图像的起始位置*//*x% y%:第一个值是水平位置,第二个值是垂直位置,

左上角是0% 0%,右下角是100% 100% 。

如果只指定了一个值,其他值默认是50%。

默认是0% 0% */

}

/* 文本属性 */

.p2{/* 优先级:类选择器 > 元素选择器 */

text-align: left;/* 指定元素文本的水平对齐方式 *//* left:文本居左排列,默认值;

right:把文本排列到右边;

center:把文本排列到中间 */

text-decoration: underline;/* underline:定义下划线;

overline:定义上划线;

line-through:定义删除线 */

text-transform: lowercase;/* 控制文本的大小写 *//* captialize:定义每个单词开头大写;

uppercase:定义全部大写字母;

lowercase:定义全部小写字母 */

text-indent: 50px;/* 规定文本块中首行文本的缩进 */

}

/* 表格属性 */

/* 指定CSS表格边框,使用border属性 */

table, td { border: 1px solid black; }

/* border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开 */

table { border-collapse:collapse; }

table,td { border: 1px solid black; }

/* width和height属性定义表格的宽度和高度 */

table { width:100%; }

td { height:50px; }

/* text-align属性设置水平对齐方式,向左,右,或中心 */

td { text-align:right; }

/* 垂直对齐属性设置垂直对齐 */

td { height:50px; vertical-align:bottom; }

/* 下面的例子指定边框的颜色,和th元素的文本和背景颜色 */

table, td, th { border:1px solid green; }

td { background-color:green; color:white; }

</style>

</head>

<body>

<p>我来学习字体属性</p>

<div class="box1"></div>

<p class="p2">准考证开放打印时间为9月3日,请考生届时按照准考证要求进行相应准备。

The admission ticket printing will be available starting from September 3rd.

Candidates are requested to make the necessary preparations according to the requirements stated on the admission ticket.

</p>

<table>

<tr>

<td>单元格</td>

<td>单元格</td>

<td>单元格</td>

</tr>

<tr>

<td>单元格</td>

<td>单元格</td>

<td>单元格</td>

</tr>

<tr>

<td>单元格</td>

<td>单元格</td>

<td>单元格</td>

</tr>

</table>

</body>

</html>

相关推荐
是一碗螺丝粉15 分钟前
React Native 运行时深度解析
前端·react native·react.js
Jing_Rainbow16 分钟前
【前端三剑客-9 /Lesson17(2025-11-01)】CSS 盒子模型详解:从标准盒模型到怪异(IE)盒模型📦
前端·css·前端框架
爱泡脚的鸡腿20 分钟前
uni-app D6 实战(小兔鲜)
前端·vue.js
青年优品前端团队22 分钟前
🚀 不仅是工具库,更是国内前端开发的“瑞士军刀” —— @qnvip/core
前端
北极糊的狐30 分钟前
Vue3 中父子组件传参是组件通信的核心场景,需遵循「父传子靠 Props,子传父靠自定义事件」的原则,以下是资料总结
前端·javascript·vue.js
看到我请叫我铁锤1 小时前
vue3中THINGJS初始化步骤
前端·javascript·vue.js·3d
q***25211 小时前
SpringMVC 请求参数接收
前端·javascript·算法
q***33371 小时前
Spring Boot项目接收前端参数的11种方式
前端·spring boot·后端
烛阴1 小时前
从`new()`到`.DoSomething()`:一篇讲透C#方法与构造函数的终极指南
前端·c#
还债大湿兄1 小时前
阿里通义千问调用图像大模型生成轮动漫风格 python调用
开发语言·前端·python