Day5- CSS基础-2022-11-23

一、常用文本样式属性

1、font-size
font-size属性用来设置字号,单位通常为px。em、rem单位。 font-size: 30px;
网页文字正文字号通常是16px,浏览器最小支持10px字号。
Day5- CSS基础-2022-11-23_第1张图片

2、font-weight
font-weight属性设置字体的粗细程度,通常就用normal和bold两个值。
font-weight: normal; 正常粗细,与400等值
font-weight: bold; 加粗,与700等值
font-weight: lighter; 更细,大多数中文字体不支持
font-weight: bolder; 更粗,大多数中文字体不支持
3、font-style属性
font-style属性设置字体的倾斜
font-style: normal; 取消倾斜,比如可以把天生倾斜的i、 em等标签设置为不倾斜
font-style: italic; 设置为倾斜字体(常用)
font-style: oblique; 设置为倾斜字体(用常规字体模拟,不常用)
4、text-decoration属性
text-decoration属性用于设置文本的修饰线外观的(下划线、删除线)
text-decoration: none; 没有修饰线
text-decoration: underline; 下划线
text-decoration: line-through; 删除线
5、line-height 行高
/* 垂直居中,行高等于盒子高 */
height: 100px;line-height: 100px;
line-heigh属性以px为单位的数值, line-height: 30px;
line-heigh属性字号的倍数 ,这是最推荐的写法 ,line-height: 1.5;
line-heigh属性也可以是百分数,表示字号的倍数 line-height: 150%;

6、text-align文本水平
/* 水平居中 */
text-align: center;
7、text-indent属性
text-indent属性定义首行文本内容之前的缩进量,缩进两个
字符应该写作text-indent: 2em; em表示字符的宽度。

二、盒模型

1、
盒子的总宽度 = width + 左右padding + 左右border
盒子的总高度 = height + 上下padding + 上下border
width属性:

  • width属性表示盒子内容的宽度。
  • width属性的单位通常是px,移动端开发也会涉及百分数、 rem等单位。
  • 当块级元素(div、h系列、li等)没有设置width属性时,它将自动撑满,但这并不意味着width可以继承。
    height属性:
  • height属性表示盒子内容的高度。
  • height属性的单位通常是px,移动端开发也会涉及百分数、 rem等单位。
  • 盒子的height属性如果不设置,它将自动被其内容撑开,如果没有内容,则height默认是0。
    那BFC的意义是什么?

2、
margin:
margin是盒子的外边距,即盒子和其他盒子之间的距离
margin也有四个方向

  • margin-top :上margin,“向上踹”
  • margin-right :右margin,“向右踹”
  • margin-bottom :下margin,“向下踹”
  • margin-left :左margin,“向左踹”
    margin的塌陷:
    竖直方向的margin有塌陷现象:小的margin会塌陷到大的 margin中,从而margin不叠加,只以大值为准。
    Day5- CSS基础-2022-11-23_第2张图片

扩展:想想overflow:hidden;的作用!!!!

一些元素有默认的margin:

  • 一些元素(比如body、ul、p等)都有默认的margin,在开始制作网页的时候,要将他们清除。
  • 对比三张图的微妙变化:
    Day5- CSS基础-2022-11-23_第3张图片
    Day5- CSS基础-2022-11-23_第4张图片
    Day5- CSS基础-2022-11-23_第5张图片

盒子的水平居中:将盒子左右两边的margin都设置为auto,盒子将水平居中。

.box {
margin: 0 auto;
}

  • 文本居中是text-align: center; 和盒子水平居中是两个概念。
  • 盒子的垂直居中,需要使用绝对定位技术实现。

3、
行内元素和块级元素的相互转换:
行内块:img和表单元素是特殊的行内块,它们既能够设置宽度高度 ,也能够并排显示。
display:block;
display:inline;
display:inline-block; 行内块

display: none;
使用display: none;可以将元素隐藏,元素将彻底放弃位置,如同没有写它的标签一样。
Day5- CSS基础-2022-11-23_第6张图片

visibility: hidden;
使用visibility: hidden;也可以将元素隐藏,但是元素不放弃自己的位置。

Day5- CSS基础-2022-11-23_第7张图片

2022-11-23作业设计图:
Day5- CSS基础-2022-11-23_第8张图片

代码如下:

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>Documenttitle>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 350px;
            height: 183px;
            border: 1px solid #CBD2D7;
            /* 离网页远一点 */
            margin: 100px;
        }
        .box h2 {
            padding-left: 10px;
            height: 36px;
            border-bottom: 2px solid #065D99;
            font:bold 19px/36px '微软雅黑';
            color: #065D99;
        }
        .box ul{
            padding: 10px;
            padding-bottom: 0;
            list-style: none;
        }
        .box ul li{
            height: 33px;
            border-bottom: 1px solid #CBD2D7;
            line-height: 33px;
        }
        .box ul li:last-child {
            /* 去掉最后一个li的下边框线 */
            border-bottom: none;
        }
        .box ul li a{
            font:16px/36px '微软雅黑';
            text-decoration: none;
            color: #3b3d3f;
        }
        .box ul li a:hover {
            color: orange;
            text-decoration: underline;
        }
        .box ul li span{
            font :12px/33px '微软雅黑';
            color: #3b3d3f;
        }
    style>
head>
<body>
    <div class="box">
        <h2>十一月计划表h2>
        <ul>
            <li>
                <a href="">背单词a>
                <span>[2022年11月1日]span>
            li>
            <li>
                <a href="">打羽毛a>
                <span>[2022年11月2日]span>
            li>
            <li>
                <a href="">和大宝贝去爬山a>
                <span>[2022年11月15日]span>
            li>
            <li>
                <a href="">做美食a>
                <span>[2022年11月30日]span>
            li>
        ul>
    div>
body>
html>

实践图如下:
Day5- CSS基础-2022-11-23_第9张图片

你可能感兴趣的:(CSS,css,html,前端)