标签：color 文本属性 height width html font border 选择器 left
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>
111111
<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......
标签：color,文本属性,height,width,html,font,border,选择器,left 来源： https://www.cnblogs.com/Untergehen/p/16398509.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。