小学毕业都能学会的2023前端教程CSS第一章

亮有一技
179 阅读4分钟

Css

1 Css定义

层叠样式表 （Cascading Style Sheets,缩写为Css），是一种样式表语言，用来描述Html文档的呈现（美化内容）。

  • 书写位置：title 标签下方添加style双标签，style标签里面书写Css代码。
  • Css初体验 
        <head>
    <title>Css初体验</title>
    <style>
        /*Css代码*/
        /* 选择器{属性名：属性值；} */
        /* 属性名和属性值成对出现-键值对 */
        p {
            /* Css属性 */
            /* 文字颜色 */
            color: red;
            /* 字号（文字大小）*/
            font-size: 30px;
        }
    </style>
    </head>

    <body>
        <p>体验Css</p>
    </body>

2 Css引入方式

  • 内部样式：一般用来学习使用（展现比较直观）
    • Css代码写在style标签里面
  • 外部样式表：开发中使用
    • Css代码写在单独的Css文件中(.css)
    • 在Html使用linke标签引入 
      <linke rel="stylesheet" href="./my.css">
  • 行内样式：配合JavaScript使用
    • CSS 写在标签的 style 属性值里 
      <div style="color:red;ront-size:20px;">这是div标签</div>

3 选择器

作用：查找标签， 设置样式。

3.1 标签选择器

  • 标签选择器：使用标签名 作为选择器->选中同名标签设置相同的样式。
  • 例如：p,h1,div,a,img…… 
    <style>
p {
    color:red
    }
 <style>

3.2 类选择器

  • 作用：查找标签，差异化 设置标签的显示效果。
  • 步骤：
    • 定义类选择器 -> .类名
    • 使用类选择器 -> 标签添加 class="类名"
    <head>
        <style>
            /*定义类选择器*/
            .red {
                color:red
                }
        </style>
            .size {
            font-size:50px
                   }
    </head>
    <body>
        <!--使用类选择器--!>
        <div class="red">这是div标签</div>
        <!--一个标签可以使用多个类名,用空格隔开--!>
        <p class="red size">666777</p>
    </body>
  • 注意：
    • 类名自定义，不要用纯数字或中文，尽量用英文名
    • 一个类选择器可以给多个标签使用。
    • 一个标签可以使用多个类名，class属性值可写多个类名，类名用空格隔开。
  • 开发习惯：类名见名之意，多个单词可以用-链接，例如：news-hd

3.3 id选择器

  • 作用：查找标签，差异化设置标签的显示效果。
  • 场景：id选择器一般配合javascript使用，很少用来设置css样式。
  • 步骤：
    • 定义id选择器 -> #id名
    • 使用id选择器 -> 标签添加 id="id名"
    <head>
        <title>id选择器</title>
            <style>
                /* 定义id选择器 */
                #red {
                    color: red
                }
            </style>
    </head>

    <body>
        <!-- 使用id选择器 -->
        <div id="red">这是一个div标签</div>
    </body>
  • 规则：同一个id选择器在一个页面只能使用一次

3.4通配符选择器

  • 作用：查找页面所有标签，设置相同的样式。
  • 通配符选择器：*，不需要调用，浏览器自动查找页面所有标签，设置相同的样式。
    <head>
        <style>
            * {
                color:red;
                }
        </style>
    </head>
    <body>
    
    </body>

3.5画盒子

  • 目标：使用合适的选择器画盒子

  • 属性：

    20231208184024.png

  • 代码案例：

        <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>画盒子</title>
        <style>
            .red {
                /* 背景颜色 */
                background-color: brown;
                /* 宽度 */
                width: 100px;
                /* 高度 */
                height: 100px;

            }

            .orange {
                background-color: orange;
                width: 200px;
                height: 200px;
            }
        </style>
    </head>

    <body>
        <div class="red">div</div>
        <div class="orange">div</div>
    </body>

  • 案例效果：

20231208190145.png

4文字控制属性

4.1字体大小

  • 属性名：font-size
  • 属性值：文字尺寸，pc端网页最常用的单位px
p {
    font-size: 26px;
    }
  • 经验：
    1. 谷歌浏览器文字有默认大小 16px
    2. font-size 属性必须有单位，否则属性不生效

4.2字体粗细

  • 属性名：font-weight
  • 属性值:
    • 数字（开发使用）： 20231208191827.png
    • 关键字：
      20231208191842.png
/*不加粗*/
font-weight: 400;
/*加粗*/
font-weight: 700;

4.3字体是否倾斜

  • 作用：清楚文字默认倾斜效果
  • 属性名：font-style
  • 属性值：
    • 正常(不倾斜)：normal
    • 倾斜：italic
  • 注：可以清除em和i标签的倾斜效果。

4.4 行高

  • 作用：设置多行文字的间距。
  • 属性名：line-height
  • 属性值：
    • 数字+px;
    • 数字（当前标签font-size属性值的倍数）
line-height:30px;
/* 当前标签字体大小为16px，行距为16px的2倍*/
lint-height:2;
  • 行高的组成：

20231209090117.png

  • 行高的测量该方法：从一行文字的最顶端(最低端)量到下一行文字的最顶端(最低端)。

4.4.1行高-垂直居中

20231209091037.png

  • 垂直居中技巧：行高属性等于盒子高度属性值。
  • 注：只适合单行文字垂直居中。

4.5字体族

  • 属性名：font-family
  • 属性值：字体名
font-family:楷体;
  • 实用案例：
font-family:Microsoft YaHei,Heiti sc,tahoma,arial,"\5B8B\4F53,sans-serif;
  • 案例解析：font-family属性值可以书写多个字体名，各个字体名用逗号隔开，执行顺序是从左向右依次查找，如果都找不到，按默认字体显示。

4.5 font复合属性

  • 复合属性：属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开。
  • font：是否倾斜 是否加粗 字号/行高 字体（必须按顺序书写）
div {
    font:italic 700 30px/2 楷体;
    }
  • 注意：字号和字体值必须书写，否则font属性不生效

4.6文本缩进

20231209214624.png

  • 属性名：text-indent
  • 属性值：
    • 数字 + px
    • 数字 + em(推荐：1em=当前标签的字号大小)
p {
    text-indent: 2em;
    }

4.7文本对齐方式

  • 作用：控制内容水平对齐方式
  • 属性名：text-align
  • 属性值：

20231209220931.png

4.8水平对齐方式-图片

text-align本质是控制内容的对齐方式， 属性要设置给内容父级。

    <head>
        <style>
            div {
                text-align: center;
            }
        </style>
    </head>

    <body>
        <div>
            <img src="./images/css.jpg" alt="">
        </div>
    </body>

4.9文字的修饰线

  • 属性名：text-decoration

20231210090433.png

  • 注意：常用none和underline

4.10文字颜色

  • 属性名：color
  • 属性值：

20231210092945.png

avatar
文章
阅读
粉丝