发表于： 2019-08-07 12:42:39
2 861
11 文字对齐与颜色首行缩进文本修饰字母间距单词间距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
h3{
/* width: 1000px;
注释此条后进入强制不换行*/
/* width: 100px; */
height: 50px;
border: 1px solid skyblue;
line-height: 50px;
white-space: nowrap;
font-family: '黑体';
}
h3:nth-child(1){
color:red;
text-align: right;
/* 文本右对齐 */
}
h3:nth-child(2){
color: yellow;
text-align: center;
/* 文本居中对齐 */
}
h3:nth-child(3){
color: blue;
/* 文字颜色 */
text-align: left;
/* 文本左对齐*/
text-indent: 3em;
/* 缩进了3个字 （不管字体多大始终缩进3个字） */
text-decoration: underline;
/*下划线 */
/* letter-spacing: 10px; 注释 为了展现word-spacing才注释此条！！*/
/* 文字与文字之间的间距 */
word-spacing: 10px;
/* 每个单词之间的间距 中文中用空格来隔开每个词语才能被浏览器解析 */
}
</style>
</head>
<body>
<!-- color 文字颜色
text-align 文本对齐方式
left(默认值)
right
center
text-indent 首行缩进 （em缩进字符）
em是根据字体大小来决定的
1em是一个字的大小（不管文字如何变化）
text-decoration 文本修饰
underline 下划线
none 正常
letter-spacing 字母间距
每个字之间的间距
word-spacing 单词间距 （以空格解析为单位）
在中文里用空格来隔开每个词语才能被浏览器解析
white-space 强制不换行
nowrap 不换行
normal 正常
一个空格有多大？
宋体字体下文字大小的一半
空格的大小
测量文字大小时最好是从上到下进行测量
每个文字与文字之间会有1像素的间隔
一个空格的大小是8像素;
记录
默认16px 8px
12px 6px
字体格式font-family 格式不一样时 空格大小不一致
font-family为宋体时空格大小: 是字体大小的一半
-->
<h3>This is a liaomin</h3>
<h3>This is a huanghua</h3>
<h3>This is a zhangsan</h3>
</body>
</html>
12 文字着重文字倾斜 字体大小行高字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
height: 40px;
line-height: 40px;
border: 1px solid red;
/* font-weight: normal;
font-style: normal;
font-size: 20px;
font-family: 'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet MS', sans-serif; */
font: bold normal 30px/39px '楷体';
/* 复合样式
！！！！font复合样式需要注意书写顺序
font-style
font-weight
font-size
font-family
*/
}
h3{
border: 1px solid red;
line-height: 25px;
}
</style>
</head>
<body>
<!-- font :
font-weight : 文字粗细
bold:加粗
normal:正常
font-style :字体倾斜
italic:斜体
font-size :字体大小
line-height :行高
文字在一行里面所占用位置
当行高的值与容器高度一致时文字会垂直显示；
多行文字测量行高的方法:
1.确认文字大小
2.确认两行文字之间的空隙大小
3.空隙大小除以2，得出来的值就是每行 文字的上下的空隙大小；
3.1 当行高为奇数时，那么文字的上方要比下方少一个像素；
4.通过辅助线测量多行文字的行高
font-family :字体样式（中文默认宋体） -->
<div> hello word</div>
<h3>This is a lisa</h3>
<h3>This is a xiaoming</h3>
<h3>This is a huage</h3>
</body>
</html>
13 行间样式-内联样式表.-外部样式表
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
float: left;
}
.div2{
width: 300px;
height: 400px;
background-color: violet;
/* 内联样式表 只在写小dome的时候用 其他时候不赞同使用 请使用外部样式表
*/
}
</style>
</head>
<body>
<!-- 样式出现的位置：
1：行间样式
<div style="....."></div>
行间样式：给单独的标签添加样式
2: 内联样式：
<style>....样式写在这里 </style>
3： 外部样式表：
<link href="beas.css"rel="stylesheet"/>
-->
<div style="width:100px; height:100px; background:red;">div1</div>
<div class="div2">div2</div>
<div id="div3">div3</div>
<!-- 行间样式 ：
权重值最高；1000
最先执行；
不赞同使用 请使用外部样式表-->
</body>
</html>
14 选择器的优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>选择器的优先级</title>
<style>
div div{
/* 标签选择器 优先级为 1 */
height: 100px;
background-color: blue;
}
#box div{
/* ID选择器 优先级 100 */
background-color: green;
}
.box1 div{
/* class 类选择器 优先级 10 */
background-color: pink;
}
/* 行间样式--ID选择器--class类选择器--标签选择器 */
/* 选择器优先级 权重值
行间样式： 1000
ID选择器 100
class类选择器 10
标签选择器 1
*/
</style>
</head>
<body>
<div id="box" class="box1" style="background-color:red;">
<div></div>
</div><!--行间样式 优先级1000 -->
</body>
</html>
15 ID选择器，类选择器，标签选择器，群组选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>常用的css选择器</title>
<style>
#box {
/*以(#)开头 匹配所有id名字的元素, ID名唯一性 每个ID名字只能在页面出现一次, 加权值100
*/
width: 100px;
height: 100px;
background-color: skyblue;
}
.box1 {
/* 以(.)开头 为class选择器 匹配所class名称的元素 可以有多个class名字相同的名字 称为类，加权值 10； */
width: 100px;
height: 100px;
background-color: red;
margin: 10px 0;
}
span {
/* 行内元素 无法添加宽高 需要转换成 块元素 或者行内块元素 由内容撑开宽高。。不会独占一行
标签选择器 加权值为 1； */
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
border: 1px solid #000;
}
h1,h2,h3,h4,h5,h6{
/* 群组标签选择器 用逗号（,）来隔开 可以使用多个标签来使用同一种样式, 可以用于CSS reset 样式初始化 */
height: 50px;
background-color: green;
line-height: 50px;
}
</style>
</head>
<body>
<div id="box"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<span>样式区分</span>
<h1>this is a title</h1>
<h2>this is a title</h2>
<h3>this is a title</h3>
<h4>this is a title</h4>
<h5>this is a title</h5>
<h6>this is a title</h6>
</body>
</html>
16 margin属性 padding属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* div {
width: 100px;
height: 100px;
background-color: pink;
/* margin: 100px 50px 30px 20px; */
/* 设置两个值时第一个值表示上下 第二个是左右 */
/* 设置三个个值时第一个值表示上边 第二个是左右 第三个是下边*/
/* 设置三个个值时第一个值表示上边 第二个是右边 第三个是下边*/
/* } */
#box {
background-color: red;
border: 1px solid blue;
}
#div3 {
height: 50px;
background-color: pink;
margin: 100px 100px 200px 200px;
border: 1px solid blue;
}
#div4 {
height: 50px;
background-color: yellow;
margin: 100px;
border: 1px solid blue;
}
</style>
</head>
<body>
<!-- margin :外边距
盒子与盒子之间的间隔称为外边距
margin外边距问题
1 上下外边距会叠压
2 父子级包含的时候子级的margin会传递给父级
1 margin-top传递
解决方法：给父级添加边框解决传递问题
2 margin上下叠压
解决技巧：还是使用margin 可以将某个元素方向设置成预想的值 margin叠压会取最大的margin值；
外边距复合：margin :top right bottom left -->
<!-- <div>1</div>
<div>2</div> -->
<div id="box">
<div id="div3">3</div>
<div id="div4">4</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 400px;
height: 300px;
background-color: pink;
/* padding: 100px; 内填充 */
/* 设置padding后会撑开盒子 */
/* padding-top: 100px; */
/* 设置某个方向的padding 单一样式*/
/* padding-right: 100px;
padding-bottom: 100px;
padding-left: 100px; */
padding: 50px 100px 30px 20px;
/* 设置两个值时第一个值表示上下 第二个是左右 */
/* 设置三个值时第一个值表示上边 第二个是左右 第三个是下边*/
/* 设置三个值时第一个值表示上边 第二个是右边 第三个是下边*/
}
</style>
</head>
<body>
<!-- padding 内边距:
padding-top:
padding-right:
padding-bottom:
padding-left:
padding: top right bottom left;
注意:内边距相当于给一个盒子加了填充厚度会影响盒子的大小 -->
<div>
啦啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
</div>
</body>
</html>
返回列表
评论