2021-5-6 css第一部分-CSDN博客

本文链接：https://blog.csdn.net/weixin_56755680/article/details/116461071

本文详细介绍了CSS的基础知识，包括CSS的三种样式（行内样式、内部样式和外部样式）、基本选择器（标签选择器、类选择器和ID选择器）、字体样式设置（字体大小、颜色、粗细和倾斜）、背景属性（颜色、图片、平铺、位置和依附方式），并结合实例展示了如何使用这些属性来美化网页。此外，还涵盖了组合选择器的用法，如父子选择器、后代选择器和兄弟选择器，帮助读者深入理解CSS在网页布局中的应用。

摘要由CSDN通过智能技术生成

1.css简单介绍

html 是超级文本标记语言搭架子

css 层叠样式 /级联样式美化图片

2.css三种样式

行内样式表

写在开始标签内部 style=".."

 <div style="color: red;">
        俺是div标签
    </div>

内部样式表

写在头部标签 style标签中

    <!-- 内部样式表 -->
    <style>
        p {
            color: red;
        }
    </style>

外部样式表

需要写在外部的 xx.css文件中

不需要再写<style>标签

需要引入<link rel="stylesheet" href="./index.css">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 外部样式表-->
    <link rel="stylesheet" href="./index.css">
    <!-- 内部样式表 -->
    <style>
        p {
            color: red;
        }
    </style>
</head>

3.基本选择器

三种选择器

标签名选择器

选中body里的标签名p

类选择器

.类名

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>
</head>
<body>
    <!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名选择器
        */
        /* 标签名选择器 */
        p{
            color: hotpink;
        }
        /* 类名选择器
            .类名
        */
        .three{
            color: skyblue;
        }
        /*id名选择器 
            #id名
        */
        #five{
            color: red;
            /* 字体大小 */
            font-size: 16px;
            /* 12  14  16 */
        }


    </style>
</head>
<body>
    <p>我是1p</p>
    <p>我是2p</p>
    <!-- 向标签添加类名: 在开始标签中添加 class = "类名" -->
    <p class="three">三个p</p>
    <p class="three">第四个p</p>
    <!-- 添加id: 在开始标签中添加 id ="id名" -->
    <p id="five">第五个最后一个p</p>
</body>
</html>
    
</body>
</html>

4.字体

浏览器默认字体大小是 16px；

px 是像素单位；

字体大小：font-size：30px；

字体粗细：取值程度100~900 加粗程度递增

bold，bolder 加粗相当于700

font-weight：bold；

lighter 细字体

font-weight：lighter

normal 默认常规相当于400

字体倾斜：italic

font-style：italic

font-family:华文彩云;

字体颜色

颜色单词（名称）

rgb(xx,xx,xx) 每一个取值范围是0-255之间，0黑色，255白色

rgba(xx,xx,xx,a) a的取值0-1之间，数字越大越不透明

红绿蓝三个颜色取多少

#xxyyzz

十六进制色系 0-f

当取色为 #xxyyzz 可简写为#xyz

#33aaff #3af

5.背景（结合ps）

先定义一个盒子有多大

            width: 300%;
            height: 3000px;

选择一个背景色

/* 如果容器比背景图大，图片会铺满整个盒子

如果容器比背景图小，图片只会显示局部 */

 background-color: skyblue;

/* 获取到一个图片 */

   background-image: url(./img/logo.png);

/* 背景图是否平铺

/* repeat 默认效果平铺 */

     background-repeat: no-repeat;

      background-repeat: repeat;

/* repeat-x 沿着x轴平铺

repeat-y 沿着x轴平铺 */

            background-repeat: repeat-x;
            background-repeat: repeat-y;
            background-repeat: no-repeat;

/* 背景图位置

top 上方水平居中

bottom 下方水平居中

left 左侧垂直居中

right 右侧垂直居中

center 中in位置(水平方向和垂直方向都居中) */

    background-position: left;

/* x y 通过坐标修改位置

参考位置容器左上角背景图左上角

x的值是背景图左上角的x坐标到容器左上角的x坐标的距离正直往右，负值往左

正直往下，负值向上 */

/* 正直往右，负值往左

正直往下，负值向上 */

background-position: 100px 200px;

/* 背景图的依附方式

fixed 固定在屏幕的某一位置

scroll 跟随页面滚动

 background-attachment: fixed;
 background-attachment: scroll;

/* 背景连写方式 */

/* background：color image repeat attachment position; *

background: hotpink url(./img/pc_new.jpg) no-repeat fixed center;

完整的代码

<!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: 300%;
            height: 3000px;

            /* 背景色 */
            background-color: skyblue;

            /* 如果容器比背景图大，图片会铺满整个盒子
            如果容器比背景图小，图片只会显示局部 */

            /* 获取到一个图片 */
            background-image: url(./img/logo.png);

            /* 背景图是否平铺
             不平铺no-repeat  */
            background-repeat: no-repeat;
            /* repeat 默认效果 平铺 */
            background-repeat: repeat;

            /* repeat-x 沿着x轴平铺
               repeat-y 沿着x轴平铺 */
            background-repeat: repeat-x;
            background-repeat: repeat-y;
            background-repeat: no-repeat;

            /* 背景图位置
            top 上方水平居中 
            bottom 下方水平居中
            left 左侧垂直居中
            right 右侧垂直居中
            center 中in位置(水平方向和垂直方向都居中) */ 
             background-position: left;

             /* x y 通过坐标修改位置
             参考位置 容器左上角 背景图左上角
             x的值  是背景图左上角的x坐标 到容器左上角的x坐标的距离 正直往右，负值往左
             正直往下，负值向上  */

            background-position: 100px 200px;
            /* 正直往右，负值往左 
               正直往下，负值向上 */
           

            /* 背景图的依附方式
             fixed 固定在屏幕的某一位置 
             scroll 跟随页面滚动
             */
            background-attachment: fixed;
            background-attachment: scroll;

            /* 背景连写方式 */
            /* background：color image repeat attachment position; */
            background: hotpink url(./img/pc_new.jpg) no-repeat fixed center;
        }
    </style>

</head>

<body>
    <div class="box"></div>
    <div style="width: 100px; height: 1000px;"></div>

</body>

</html>

6.组合选择器

总共有三种

父子选择器父元素>子元素

后代选择器祖先元素空格后代元素

兄弟选择器

box后面紧挨着的第一个p标签

box后面相邻的所有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>
        p{
            color: red;
        }
        /* 父子选择器 父元素>子元素 */
        .box>p{
           color: skyblue;
        }
        /* 后代选择器 祖先元素 空格 后代元素 */
        .box span{
            color: springgreen;
        }
        /* 兄弟选择器 */
        /* box后面紧挨着的第一个p标签 */
        .box+p{
            color: hotpink;
        }
        兄弟选择器
        box后面相邻的所有p标签
        .box~p{
            color: green;
        }

    </style>
</head>
<body>
    <p>我是box外面的p</p>
    <div class="box">
        <p>box里面的p</p>
        <div class="son2"></div>
        <span>我是son2里边的子元素</span>
        <p>我是son2里的p</p>
    </div>
    <p>我是box外面的p</p>
    <p>我是box外面的p</p>
    <p>我是box外面的p</p>
    <p>我是box外面的p</p>

</body>
</html>