CSS基础教程-优快云博客

本文链接：https://blog.youkuaiyun.com/xiaobai_learning/article/details/126921355

实际是0919与0920两天学习的内容（主要是课挺多）

预计学习p45---p50+复习p1-p30，实际学习p45---57

评价：为了赶进度、更愿意学习新内容，没安排时间复习，不可取。

p45:css入门

css代码放在style中，要与body中对应使用

    <style>
        /* css注释 */
        /* 选择器{css属性} */
        /* 选择器: 查找标签*/
        p{
            /* 文字颜色 */
            color: red;
            /* 文字变大 */
            font-size: 30px;
            /* 背景颜色 */
            background-color: green;
            /* width  height */
            width: 400px;height: 400px;
        }
    </style>

<body>
    <p>我的第p标签</p>

</body>

p46:css引入方式

内嵌式：css写在style中（见上方）

外联式：css单独写在.css文件中

行内式：css写在标签的style属性中

p47-50:选择器

标签：p{}

类：.red

class="red"

id：#two

id="two"

通配符：*

所有标签一样，主要是清除标签默认margin和padding

p51:文字基本样式

1.1字体大小 font-size

! 写字号一定要带单位px

1.2字体大小 font-weight

关键字：normal正常，bold加粗；400正常，700加粗

<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>字体粗细</title>

    <style>
        p{
            font-weight: 400;
        }
        
        div{
            font-weight: 700;
        }

        h{
            font-weight: normal;
        }

        em{
            font-weight: bold;
        }
    </style>

</head>
<body>

    <p>400</p>
    <div>700</div>
    <h>normal</h>
    <em>bold</em>

    
</body>
</html>

1.3字体倾斜 font-style

normal正常,italic倾斜

p52:文字-字体 font-family: 楷体;

    <style>
        div{
            /* font-family:宋体 */
            /* 如果用户没有安装微软雅黑和黑体，则按任意非衬线字体系列显示 */
            font-family: 微软雅黑,黑体,sans-;
        }
    </style>

</head>
<body>
    <div>
        这是div标签
    </div>
</body>

p53:层叠性

    <style>
        div{
            /* 层叠性即覆盖性,后面覆盖前面 */
            color:red;
            color: blue;
        }
    </style>
</head>
<body>
    
    <div>div</div>

</body>

p54:font复合性

    <style>
        p{
            /* font-size: ;
            font-family: ;
            font-weight: ;
            font-style: ;
            font-family: ; */

            /* font : style weight size 字体; */
            font : italic 700 66px 宋体;

            /* 一个属性冒号后边跟多个值的写法---复合属性 */
        }
    </style>
</head>
<body>
    
    <p>这是p标签</p>
</body>

1.先倾斜后回正会覆盖（回正）

2.可以省略倾斜和加粗

p55-58:文本样式(装饰性)

一、文本缩进 text-indent

取值：数字+px

数字+em
/* text-indent: 100px;
            首行缩进两个字  默认字号16px*/
            text-indent: 32px;
            /* 当字号不是16，则需要改如20字号，想缩进2字则40px */

            /* em:一个字的大小 */
            text-indent: 2em;
            /* em好处：不用管字体大小 */
二、水平对齐方式 text-align

文本、span标签、a标签、input标签、img标签

取值: left 左对齐

center 居中

right 右对齐

三、文本修饰线 text-decoration

取值: underline下划线

line-through删除线

overline上划线

none无装饰线（去除超链接下划线）

! 开发中会使用 text-decoration:none;清除a标签默认的下划线

四、行高line-height

行高（上间距+下间距）

取值: 数字+px

倍数