【web基础day03】CSS部分

最新推荐文章于 2024-08-02 16:11:15 发布

奶昔团子

最新推荐文章于 2024-08-02 16:11:15 发布

阅读量197

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_61971608/article/details/128713324

版权

（5）CSS文本属性--复合属性-font

（6）CSS文本属性

1、如何查询文档（授人以鱼不如授人以渔）

（1）百度

（2）W3school官网：简称W3C：中文版的计算机内容详解

（3）MDN：很权威的一个网站，可以直接输入相关的标签

2、CSS层叠样式表

（1）什么是CSS

CSS简介：CSS是用来美化网页、布局网页的。

（1）html的局限性：放置网页元素的，只关心网页元素，不关心外观样式（总之就是丑）

（2）css网页的美容师：css是层叠样式表的简称。

（3）作用：设置网页的样式、版面的布局和外观显示的样式

（4）css最大的价值：结构和样式相分离；html专注结构，样式交给css

（2）CSS语法规范

（1）CSS语法由２部分构成：选择器＋一条或多条声明

（２）通俗来说：

选择器：就是给谁改样式

声明：该什么样式（比如，改文字大小，改宽度）－＞以键值对的形式出现；属性：属性值；（注意冒号分隔）分号结束样式

语法代码如下：（注意CSS语法格式：html代码写在body标签里面，而css代码写在style标签里面，真正实现了结构和样式的分离）

<style>
        /* 选择器样式：给谁改样式{改什么样式} */
        p{
            /* 修改文字样式：改为红丝 */
            color: red;
            /* 修改文字大小：改为12像素，px表示像素 */
            font-size: 12px;
        }
    </style>
</head>
<body>
    <h3>CSS语法格式：html代码写在body标签里面，而css代码写在style标签里面，真正实现了结构和样式的分离</h3>
    <p>有点意思</p>
</body>

页面展示：

（３）CSS基础选择器

（１）选择器的作用：根据不同的标签将不同的标签选择出来（就是选择标签的）

（２）选择器的分类：分为基础选择器（由单个选择器组成的、包括：标签选择器、类选择器、ｉｄ选择器、通配符选择器）和复合选择器

标签选择器：

（１）以标签名作为选择器；作用：将某一类标签全部选出来；不能差异化设置

（２）标签名 {

属性：属性值；

}

 /* 2、标签选择器：
        标签名 {
            属性：属性值；
        } */
        h4  {
            color: green;
        }
        div {
            color: pink;
        }
        
    </style>
</head>
<body>
    <h4>标签选择器</h4>
    <div>女生</div>
    <div>女生</div>
</body>

页面展示：

类选择器

（１）可以单独选择一个或几个，可以实现差异化设置（结构需要用到class属性）：格式如下

（２）.类名 {

            属性：属性值；

            属性：属性值；

        }

（３）类选择器口诀：样式点定义；结构类调用，开发最常用

注意：

①点后面的类名是随便取得，只要和class的值一样就ok

②起的名字太长，中间可以+一个短横线-分割

③不要使用纯数字、中文，尽量使用英文字母来表示

④命名要有意义

<style>
        /* 3、类选择器：
        .类名 {
            属性：属性值；
            属性：属性值；
        } */
        .red {
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li class="red">西红柿</li>
        <li>橙子</li>
        <li>橘子</li>
        <li class="red">香蕉</li>
        <li>苹果</li>
    </ul>
</body>

页面展示：

课堂案例：利用类选择器来展示三个盒子

<style>
        /* 定义三个有颜色的空盒子 */
        .red{
            background-color: red;
            width: 100px;
            height: 100px;
        }
        .green{
            background-color: green;
            width: 100px;
            height: 100px;
        }
    </style>
</head>

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

类选择器的多类名

一个标签的类名可以指定多个

（1）多类名的使用方式：见代码（多类名之间用空格隔开）

（2）多类名在实际开发中是使用场景：把相同的/公共的样式放在一个类选择器里面

 .green{
            color: green;
        }
        .font35{
            font-size: 35px;
        }
    </style>
</head>
<body>
    <p class="green font35">多类名，类选择器</p>

例如：上述盒子的优化：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 多类名选择器的使用 */
        .box{
            width: 100px;
            height: 100px;
            font-size: 30px;
        }
        /* 定义三个有颜色的空盒子 */
        .red{
            background-color: red;
            
        }
        .green{
            background-color: green;
            
        }
    </style>
</head>

<body>
    <div class="box red"></div>
    <div class="box green"></div>
    <div class="box red"></div>
    
</body>
</html>

id选择器

（1） id选择器的语法格式：（与类选择器差不多）

        #id名{

            属性：属性值；

            属性；属性值；

        }

（2）VS类选择器：类可以被多个人使用（例如名字可以重复）；but id只能使用一次（相当于一个人只有一个身份证）

（3）id选择器口诀：样式通过#定义；结构通过id调用；只能调用一次，别人（别的标签就不要允许使用了）切勿使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* id选择器的语法格式：
        #id名{
            属性：属性值；
            属性；属性值；
        } */
        #pink{
            color: pink;
        }
    </style>
</head>
<body>
    <!-- id选择器：通过#来定义；通过id属性来调用 -->
    <div id="pink">杰克逊</div>

</body>
</html>

页面展示

通配符选择器

（1）通配符选择器：通过*来定义，表示选取页面中的所有元素（标签）

（2）通配符选择器语法格式：

        * {

            属性：属性值；

            属性：属性值；

        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 通配符选择器语法格式：
        * {
            属性：属性值；
            属性：属性值；
        } */
        * {
            color: red;
        }
    </style>
</head>
<body>
    <!-- 通配符选择器：通过*来定义，表示选取页面中的所有元素（标签） -->
    <div>我的</div>
    <span>我的</span>
    <ul>
        <li>还是我的</li>
    </ul>
</body>
</html>

页面展示

（4）CSS字体属性

（1）给页面中的文字做一些样式效果：大小、粗细、倾斜

（2）CSS使用font-family属性

①字体：font-family ='宋体/微软雅黑';

②字号：font-size（字体大小）=xxx px;

③字体的粗细：font-wight=normal（正常）/bold（粗体）/bolder

写数字的时候：400是正常；700是加粗，注意数字后面不跟单位

④文字样式：font-style=normal(正常）=italic（斜体）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* CSS的字体属性 */
        h3 {
            font-family: '微软雅黑';
        }
        /* 多个字体用逗号分隔开，最好是英文，单引号双引号都可以 */
        p {
            font-family: '微软雅黑','宋体';
            /* 浏览器中有第一个字体就用第一个字体，没有就用第二个字体，尽量使用系统都有的字体 */
            font-size:30px;
            font-weight: bold;
            /* 实际开发中更提倡数字 */
        }
        .normal{
            color: red;
            font-weight: bold;
            font-weight: 700;
            /* 这个700的后面不要跟单位， 等价于bold 都是加粗的效果 */
        }
       .style {
            font-style: italic;
        }
    </style>
</head>
<body>
    <h3>咏鹅</h3>
    <p>鹅,鹅,鹅</p>
    <p>曲项向天歌</p>
    <p>白毛浮绿水</p>
    <p>红掌拨清波</p>
    <p class="normal">pink</p>
    <p class="style">您好hello
</body>
</html>

页面展示

（5）CSS文本属性--复合属性-font

（1）语法格式：

body{

font ： font-style font-width font-size font-family；

}

（2）复合属性注意事项：

①font属性，必须按照上面顺序书写，不可更改，每个属性之间空格隔开

②不需要的属性可以省略，但必须保留font-size和font-family属性，否则font属性不起作用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        /* 想要div里面的文字：变倾斜、加粗 字号设置为16像素 and 微软雅黑 */
    div{
        font-style: italic;
        font-weight: 700;
        font-size: 16px;
        font-family: 'Microsoft yahei';
    }
    /* 下面是复合属性的替代 
    复合属性格式要求：（简写方式）
     font：font-style  font-weight font-size/line-height font-family;
     注意：使用复合属性不能随意颠倒顺序；每个属性之间以空格隔开*/
     div{
         font:italic 700 16px 'Microsoft yahei';
     }
    </style>
</head>
<body>
    <div>三生三世十里桃花，一心一意百行代码</div>

    </p>
</body>
</html>

字体属性总结：font-size：字号（加单位px）font-family：字体（例如微软雅黑）font-weight：字体粗细（700或者bold是加粗）font-style：字体样式（normal正常italic倾斜）font：字体连写（有顺序）