HTML学习的第三天

最新推荐文章于 2024-03-06 20:28:35 发布

雪雪在努力了

最新推荐文章于 2024-03-06 20:28:35 发布

阅读量97

点赞数

文章标签： html html5 css3

本文链接：https://blog.csdn.net/xhzm_love/article/details/109790553

版权

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

-加了内边距扩大盒模型盒子可视区域增大需要内减减到宽高身上即可！！！！

雪雪在努力了

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
HTML学习的第三天

day03文本相关的css属性元素的分类与转换布局核心—》盒模型在线的css手册网址:http://css.cuishifeng.cn/text-decoration-line.html文本相关的css属性字体大小颜色字体粗细字体斜体正体字体类型行高（行间距）水平对齐方式垂直对齐方式字符间距词间距文本格式化输出首字母操作缩进文本修饰字体属性字体属性是可继承属性，父盒子有，子元素就有font:字体是否是斜体字体粗细
复制链接

扫一扫