html基本认识+文字文本属性+盒子模型+子代选择器
2022/6/21 23:23:51
本文主要是介绍html基本认识+文字文本属性+盒子模型+子代选择器，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
1.html的基本认识。快速创建页面用!+enter，标签有嵌套关系以及并列关系。标签选择器可以直接选择所有同名的标签，格式为标签名{属性：属性值；}类名选择器类似，且类名可以重复，一个标签可以有多个类名。
<!-- 快速创建页面
1.!+enter -->
<!-- 标签
1.嵌套关系
2.并列关系 -->
<!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>
<style>
/ 1.标签选择器：选择所有同名的标签
格式：标签名{
属性：属性值；
} /
div {
height:200px;
width:200px;
background-color:pink;
}
/ 2.类名选择器：会选择所有相同的类名
格式： .类名{
属性：属性值
}
类名可以重复；
一个标签可以有多个类名；
/
.son </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 300px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 300px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
background-color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> yellowgreen</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
.sson</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
background-color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> darkblue</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
</head>
<body>
<!-- 嘿嘿嘿
<div style="height: 200px;width:200px;background-color: black;">
<div style="height: 100px;width:100px;background-color:cornflowerblue;"></div>
</div>-->
<div class="son sson"></div>
<div></div>
1111111
</span><span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="demo"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
</body>
</html>
2.文字属性。font可以设置文字的各个属性，例如font-size:12px;可以设置字体大小为12，还有font-weight、font-family等指令可设置文字加粗、字体等。
<!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>
<style>
.demo{
height: 200px;
width: 200px;
background-color: yellowgreen;
/* 文字属性
1.font-size 文字大小
*/
font-size: 12px;
/* 2.font-weight 文字加粗
bold 加粗 */
font-weight: bold;
/* 3.font-family 字体*/
font-family: "宋体";
}
</style>
</head>
<body>
<div class="demo">
今天星期二
</div>
</body>
</html>
3.文本属性。设置文本对齐方式、行高（文本垂直居中）、字间距等。text-align:center;为居中，左对齐右对齐分别是text-align:left/right;行高设置是line-height:200px;可以通过line-height=height实现文本垂直方向上居中。字间距为word-spacing:40px;。
<!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>
<style>
.demo{
height: 200px;
width: 500px;
background-color: pink;
<span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;"> 1.text-align 文本对齐方式
left 左对齐
center 居中
right 右对齐</span><span style="background-color: #f5f5f5; color: #008000;">*/</span><span style="background-color: #f5f5f5; color: #ff0000;">
text-align</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">center</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;"> 2.line-height 行高
line-height=height 实现文本垂直方向上居中</span><span style="background-color: #f5f5f5; color: #008000;">*/</span><span style="background-color: #f5f5f5; color: #ff0000;">
line-height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 200px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;"> 3.word-spacing 字间距
</span><span style="background-color: #f5f5f5; color: #008000;">*/</span><span style="background-color: #f5f5f5; color: #ff0000;">
word-spacing</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 40px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
</head>
<body>
<div class="demo">
主页 热点 新闻 个人中心
</div>
</body>
</html>
4.盒子模型。标准盒子模型：content(height+width)+padding+border+margin。
padding中按照上右下左的顺序设置，例如padding:10px 20px;就是上下10px，左右20px，padding:10px 20px 30px;就是上10左右20下30，padding:10px 20px 30px 40px;上10右20左30右40。
margin用法和padding类似，单独改变某一条边的内边距用margin-left/right/top/bottom，例如margin-left:50px;。margin还可以实现水平居中：margin:auto;。同时可以通过margin-top/bottom/left/right来调整自己的位置。
border标准写法：border:width style color例如：border:2px solid red;设置某一条边框：border-left/right/top/bottom:10px solid pink;设置某一条边框样式：border-left/right/top/bottom-width/style/color。另：border-top-style:dashed;设置边框为虚线，border-right-style:dotted;设置边框为圆点。border-radius实现边框圆角，
border-radius:50%;border-top-left-radius:20px;。
盒子模型：
<!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>
<style>
.fa{
width: 234px;
height: 420px;
padding: 20px 0;
background-color: #A2A0A0;
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
}
.son{
width: 204px;
height: 42px;
padding-left: 30px;
/* background-color: red; */
line-height: 42px;
color: #ffffff;
font-size: 14px;
word-spacing: 120px;
}
</style>
</head>
<body>
<div class="fa">
<div class="son">手机 ></div>
<div class="son">电视 ></div>
<div class="son">笔记 ></div>
<div class="son">出行 ></div>
<div class="son">耳机 ></div>
<div class="son">家电 ></div>
<div class="son">智能 ></div>
<div class="son">电源 ></div>
<div class="son">健康 ></div>
<div class="son">生活 ></div>
</div>
</body>
</html>
5.子代选择器。用于选择所有同名的子代，格式：选择器>选择器{属性：属性值}。
.fa>div {
width: 204px;
height: 42px;
padding-left: 30px;
background-color: red;
line-height: 42px;
color: #fff;
font-size: 14px;
}
小技巧：1.div*10快速写出十对<div>
2.QQ截图ctrl+c可以直接复制颜色色号
To be continued......
这篇关于html基本认识+文字文本属性+盒子模型+子代选择器的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-12-21动态面包屑教程：新手入门指南
- 2024-12-21动态主题处理教程：新手必读指南
- 2024-12-21富文本编辑器教程：新手入门指南
- 2024-12-21前端项目部署教程：从零开始的全面指南
- 2024-12-21拖拽表格教程：轻松入门指南
- 2024-12-21Element-Plus教程：新手入门与实战指南
- 2024-12-21TagsView标签栏导航教程：轻松掌握标签栏导航
- 2024-12-21动态表格实战：新手入门教程
- 2024-12-21动态菜单项实战：一步步教你实现动态菜单项
- 2024-12-21动态面包屑实战：新手教程
