day03
- 文本相关的css属性
- 元素的分类与转换
- 布局核心—》盒模型
在线的css手册网址:
http://css.cuishifeng.cn/text-decoration-line.html
文本相关的css属性
字体大小 颜色 字体粗细 字体斜体正体 字体类型 行高 (行间距) 水平对齐方式 垂直对齐方式 字符间距
词间距 文本格式化输出 首字母操作 缩进 文本修饰
字体属性
字体属性是可继承属性,父盒子有 ,子元素就有
font:字体是否是斜体 字体粗细 字体大小/行高 字体类型;
字体是否是斜体font-style
font-style:normal正/italic 斜体/oblique斜体;
<!--有的字体不支持斜体就不能用oblique-->
字体粗细font-weight
font-weight:100-900 100最细 900最粗 400正常; >400粗 <400细
<!--字体粗细取决于字体类型(微软雅黑和楷体粗细不同)-->
字体大小font-size
font-size: px /em/rem/%; 字体大小不写% 最小12px 默认16px
<!--后见单位尺寸-->
字体类型font-family
font-family:Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
<!--后见字体类型-->
font: normal 400 14px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif; /* normal 400 可省略*/
单位尺寸
px 绝对单位,不会受屏幕大小改变
width:300px;
% 相对单位 相对父元素 字体大小不写%
width:80%; /*相对父元素*/
em 相对单位 ,相对于父元素的字体大小(当自己没有字体大小属性的时候,相对于父元素的字体大小 ,当自己有的时候那就相对于自己 )
.a >.b .a{font-size:12px}
.b: width:20em; /* .b: width:240px; */
rem 相对单位 相对于html根标签的字体大小,与父级元素无关(html字体大小不设置的话就是默认16px)
.a>.b .a:width:20rem; (.a:width=320px;) .b:width:16rem;(.b:width=256px;)
字体类型、家族:font-family
必须包含大小和家族,提供多个字体,作备选
规则:
-
要给多个选项 以,隔开
-
要两个字体:中文字体(Microsoft YaHei…)+英文字体(arial…)
-
汉字字符 一般不建议直接写汉字 “宋体”(不建议)–"\5B8B\4F53"(好)
-
中文字体加"" or ‘’ ,如果字体是两个单词,那么也要加“” or ‘’
-
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GBJSuQfY-1605712318973)(…/…/%E7%AC%AC%E4%B8%80%E9%98%B6%E6%AE%B5/%E8%80%81%E5%B8%88/day03/%E7%AC%94%E8%AE%B0/media/sans-serif.png)]
sans-serif :字体样式,表示是网络体,不是印刷体,方便观看
-
查找可搜索:常用中文字体Unicode编码
行高 line-height
一行文字的高度(看文字的四条线 top middle baseline bottom)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T9nalcMI-1605712318975)(…/…/…/…/AppData/Roaming/Typora/typora-user-images/1605711192246.png)]
行高=行距+字体大小 line-height=行距+font-size
行高改变可以实现在垂直方向上移动文本
单行文本水平居中 垂直居中
text-align:center; /*水平居中*/
line-height:盒子高度; /*垂直居中*/
先声明字体 再写行高
文本水平居中
text-align:center居中/right右对齐/left左对齐
文本变形
text-transform:none/uppercase大写/lowercase小写 /capitalize首字母大写
文本修饰属性text-decoration
text-decoration:none没有线/overline上划线/underline下划线/line-through中划线;
缩进text-indent
用在p 装一大段文字
text-indent:32px/2em; 正值向右缩进,负值向左缩进
文本格式化输出white-space
white-space:normal 正常输出 /pre-wrap换行(pre一样) /nowrap不换行 /pre 格式化输出(空格+换行)
white-space:nowrap强制一行显示!!!!!!!
词间距word-spacing(中文没有间距)
word-spacing:npx;
字间距letter-spacing
letter-spacing:npx;
垂直对齐(图文对齐)vertical-align
<style>
img {
width: 200px;
/* 垂直对齐属性 vertical-align:top顶线/middle中线/baseline基线/bottom底线
图文默认以基线对齐---》图片在上 文字在下
*/
vertical-align: bottom;
}
</style>
</head>
<body>
<img src="./image/timg.jpg" alt="">
<span>yyggaaxxxfff</span>
颜色
1.red,yellow,blue....不用
2.16进制 6位16进制 #6位16进制 16进制(0-9 A-F)
#000 黑色 2位为一组 #xxmmnn xx红色 mm绿色 nn蓝色 #xmn #334455--->#345
#fff白色 #ff0000 #ff1225 红色
#333
3.rgb(red,green,blue) 写10进制 00---ff 0---255
rgb(0-255,0-255,0-255)
rgba(red,green,blue,alpha)alpha透明度 0-1 1完全不透明 0完全透明
rgba(255,0,0,.5)红色透明度为0.5
元素的分类与转换
元素分类大致分为三类:(与布局有关)
块类(display:block)
代表:div,p,h1~h6,ul li,ol li,dl dd dt…
特点:
1、宽高是默认100%,高度由内容撑开,可以设置宽高
2、独立成一行,一行一个,垂直放置(霸道)
3、行高能撑开盒子高度
行内类(display:inline)
span,a,em,i,strong,b,ind,u…
特点:
1、 宽度高度取决于内容的大小 设置宽高不起作用
2、并排放置,放不下不会换行
3、中间有默认间距(一个空格)原因?行内元素具有文本特性
4、 设置行高撑不开盒子高度
行内块类(display:inline-block)
img
特点:
1、可以设置行高
2、并排
3、中间有间距(行内块元素具有文本特性,可以用text-align:center;来实现水平居中)
4、不可以设置行高
元素转换
display:block 块
display:inline;行内
display:inline-block;行内块
布局核心—盒模型
盒模型:描述网页上盒子所占据的区域
组成:盒模型=外边距margin+内边距padding+边框border+有效内容区域width,height
盒模型宽度=左右外边距+左右内边距+左右边框+有效内容区域
盒模型高度=上下外边距+上下内边距+上下边框+有效内容区域
外边距margin
作用: 移动盒子位置 (上和左外边距) 右下外边距不可以移动盒子位置
margin-left:-px 向左移动 +px向右
margin-top:+px 向下移动 -px向上
margin:10px ;四个方向都是10px
margin:10px ;四个方向都是10px
margin:10px 20px; 上下10px 左右20px
margin:10px 20px 30px;上10px 左右20px 下30px
margin:10px 20px 30px 40px;顺时针 上右下左
margin-left:10px;
margin-right
margin-top
margin-bottom:
margin:0 auto;盒子水平居中
盒子水平居中实现
margin:0px auto;盒子水平居中
前提:
- 必须块类型
- 必须有明确宽度 (px,%)
内边距padding
作用;设置内容与边界的距离
padding:10px;
padding:10px 20px; 上下10px 左右20px
padding:10px 20px 30px;上10px 左右20px 下30px
padding:10px 20px 30px 40px;顺时针 上右下左
padding-left
padding-right
padding-top
padding-bottom
-加了内边距 扩大盒模型 盒子可视区域增大 需要内减 减到宽高身上即可!!!!