CSS基本知识点——带你走进CSS的新世界

CSS基本知识点

我们在学习HTML之后,前端三件套第二件便是CSS,但CSS内容较多,我们分几部分讲解:

(如果没有学习HTML,请参考之前文章:HTML知识点概括——一篇文章带你完全掌握HTML>)

CSS作用

如果说HTML为网页提供内容,那么CSS就是为内容进行装饰,为网页进行布局

CSS可以控制整体框架,控制文本字体,大小等诸多事宜

CSS语法

CSS基本语法只有一条:

选择器 {
    声明1;
    声明2;
}

元素显示模式

首先我稍微解释一下元素显示模式:

  • 元素以什么方式进行显示

HTML的元素类型模式:

  • 块元素
  • 行内元素

我们先讲解一下块元素:

  • 块元素包括:h标题系列,p,div,ul,ol,li
  • 块元素特点包括:
    • 自己独占一行
    • 高宽,外距,背景色都可以设置
    • 宽度默认为父类
    • 是一个容器,可以放置行内或行内块元素

我们再来讲解一下行内元素:

  • 行内元素包括:a,strong,b,em,span
  • 行内元素特点包括:
    • 相近元素在一行
    • 无法设置长宽
    • 默认宽度为字宽度
    • 行内元素只能容纳文本和其他行内元素

最后我们介绍一下行内块元素:

  • 行内块元素包括:img,input,td
  • 行内块元素特点:
    • 一行可有多个行内块元素
    • 正常情况宽度为内容宽度
    • 可以设置宽度

这些属性并非都是绑定的,我们可以通过方法进行转换:

display:inline/block/inline-block 分别对应行内元素,块元素,行内块元素

CSS写入的三种方式

CSS作用HTML中一共有三种方法,我们一一介绍:

  • 第一种:行内样式
    • 直接在单个标签中写入style并进行书写
  • 第二种:内部样式
    • 在html文件的head区域写入style进行书写
  • 第三种:外部样式
    • 在css文件中书写,在html文件中的head区域采用link方法导入
    • link语法:

上面三种语法讲究就近原则,当前标签距离谁较近,就是用哪种css

一般情况:行内元素>内部样式>外部样式

下面给出代码示例:

<!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>导入方法</title>
<!-- 注意:这里遵循就近原则,当前标签离哪个近就用哪个样式 -->

    <!-- 内部样式:在HTML的Head部位书写 -->
    <style>
        h1 {
            color: aliceblue;
        }
    </style>
    <!-- 外部样式:在CSS中书写,然后通过Link导入 -->
    <link rel="stylesheet" href="css.css">
</head>
<body>
    <!-- 行内样式:在body中书写标签时直接写入style -->
    <h1 style="color:aqua;"></h1>
</body>
</html>
h1 {
    color: black;
}

CSS的四种选择器

CSS的基本选择器分为四种:

  • 通配符选择器:

    • 针对所有标签进行选择
  • 标签选择器:

    • 针对所有对应的标签进行选择
  • 类选择器(class):

    • 针对所有对应class名的所有类标签进行选择
    • 一个标签可以具有多个类,一个类可以作用于多个标签
  • id选择器(id):

    • 针对对应id名的唯一标签进行选择
    • 一个标签只能有一个id,一个id只能作用于一个标签

三种选择器具有明确的优先级:id选择器>类选择器>标签选择器

下面给出示例代码:

<!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>三种选择器</title>
    <!-- 这里选择器的样式遵循:id选择器>类选择器>标签选择器 -->

    <style>
        /* 
        1.标签选择器:
        样式: 标签名{}
        自动选中所有标签的代码
        */
        h1 {
            color: bisque;
        }
        p {
            color: blueviolet;
            font-size: 30px;
        }

        /* 
        2.类选择器:
        样式:.类名{}
        自动选中所有带类名的代码,可以跨标签,类名定义用class
        */
        .myStyle {
            color: blue;
            font-size: 20px;
        }

        /* 
        3.id选择器:
        样式:#id名{}
        自动选择带有id名的代码,注意id具有全局唯一性
        */
        #w123 {
            color: aquamarine;
            font-size: 40px;
        }

        #w333 {
            color: aquamarine;
            font-size: 40px;
        }

        /* 
        4.通配符选择器
        样式: * {}
        全部锁定,全部标签都带有以上特征
        */
    </style>

</head>
<body>
    <h1>标题1</h1>
    <p>我是30px大小的</p>

    <p class="myStyle"> 我是类选择器</p>

    <p id="w123">我是id选择器</p>

    <p class="myStyle" id="w333"> 我的最高权限是id选择器</p>

    <p class="myStyle">我的最高权限是类选择器</p>
</body>
</html>

CSS层次选择器

层次选择器分为五种:

  • 并集选择器:

    • 选择器1,选择器2 {}
    • 同时选择多个选择器的标签
  • 后代选择器:

    • 父 子{}
    • 可以选择父类的所有子类标签以及子类标签后的所有标签
  • 子选择器:

    • 父>子{}
    • 只能选择父类的所有子类标签
  • 相邻选择器:

    • .class+兄弟标签类型{}
    • 只能选择.class的父类的下一个兄弟标签
  • 通用选择器:

    • .class~标签类型{}
    • 可以选择.class的父类的下一个之后包括下一个的所有兄弟标签

    下面给出代码示例:

    <!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>层次选择器</title>
        <!-- 层次选择器主要用于后代,下一代,兄弟等 -->
    
        <style>
            /* 
            后代选择器: 
            格式:父类 父类的后代{}
            用于父类的后代所有标签内
            */
            ul li{
                color: rgb(255, 0, 0);
            }
    
            /* 
            子选择器:
            格式:父类 子类{}
            仅用于父类的下一代
            */
            body>p{
                color: aqua;
            }
    
            /* 
            相邻兄弟选择器:
            格式:.class名 + 同辈标签{}
            选定class的标签的相邻标签
            */
            .active + p {
                color: black;
            }
    
            /* 
            通用兄弟选择器:
            格式:.class名 ~ 同辈标签{}
            选定class的标签的以下所有兄弟标签
            */
            .allover ~ p {
                color: rgb(243, 255, 7);
            }
        </style>
    </head>
    <body>
        <p>
            <p>孙子1</p>
        </p>
        <p class="active">儿子2</p>
        <p class="allover">儿子3</p>
        <p>儿子4</p>
        <p>儿子5</p>
        <ul>
            <li>
                <p>我是孙子辈</p>
            </li>
            <li>我是儿子辈</li>
        </ul>
    </body>
    </html>
    

    结构伪选择器

    结构伪选择器主要负责有条件性的标签选择

    下面直接给出代码示例:

    <!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>结构伪类选择器</title>
        <!-- 
        结构伪类选择器在实际开发中并不常用,但我们仍需了解认识
        结构伪类选择器具有条件性,它有条件地选择部分内容进行CSS操作
        具体结构:父类:条件{} 
        -->
        <style>
            /* 例如我们希望在ul中的第一个和最后一个li中单独进行CSS操作 */
            ul li:first-child {
                color: brown;
            }
    
            ul li:last-child {
                color: red;
            }
    
            /* 这里我们以p的父元素为父类,来选择第2个孩子 */
            /* 我们可以通过nth-child(n)来选择第n个元素 */
            p:nth-child(2){
                color: aquamarine;
            }
    
            /* 这里我们以p的父元素为父类,来选择第2个p类型的孩子 */
            /* 我们可以通过nth-of-type(n)来选择第n个元素 */
            p:nth-of-type(2){
                color: antiquewhite;
            }
    
            /* 同时,“:”也具有其他性质;例如a的hover属性表示当鼠标放在a上时的CSS操作 */
            a:hover {
                background-color: black;
            }
        </style>
    </head>
    <body>
        <a href="#">123</a>
        <p>p1</p>
        <p>p2</p>
        <p>p3</p>
        <ul>
            <li>l1</li>
            <li>l2</li>
            <li>l3</li>
        </ul>
    </body>
    </html>
    

    CSS属性选择器

    属性选择器是CSS3新加入的特性,极大程度方便了选择器的利用

    属性选择器的格式如下:

    • 标签[属性名]{}
    • 标签[属性名=属性]{}
    • 标签[属性名*=属性]{}
    • 标签[属性名^=属性]{}
    • 标签[属性名$=属性]{}

下面给出代码示例:

<!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>属性选择器</title>
    <!-- 
    属性选择器
    结构分有五种,分别有不同的作用:
    标签[属性名]{}   
    标签[属性名=属性]{}
    标签[属性名*=属性]{}
    标签[属性名^=属性]{}
    标签[属性名$=属性]{} 
     -->

    <style>
        /* 首先我们把下方连接都变成框框,以便于效果明显(这里后面会涉及,目前不需要深究) */
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: #2700ff;
            text-align: center;
            color: gray;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }
        
        /* 以下操作为防止冲突,均以注释格式出现,请测试时去除注释 */

        /* 
        标签[属性名]{} :该标签内带有该属性的所有标签     

        .demo a[id]{
            background: red;
        } 

        */
        
        /* 
        标签[属性名=属性]{} :该标签内带有该属性,且属性值对应的所有标签(注意:需要完全匹配)

        .demo a[id=w123]{
            background-color: aquamarine;
        }

        .demo a[class="class1 class2 class3"]{
            background-color: black;
        }
        */
        
        /* 
        标签[属性名*=属性]{}:该标签内带有该属性,且属性值对应的所有标签(注意:存在匹配即可) 

        .demo a[class*="class1"]{
            background-color: aqua;
        }

        */
        
        /* 
        标签[属性名^=属性]{}:该标签内带有该属性,且以该属性开头 
        
        .demo a[href^="https"]{
            background-color: red;
        }
        
        */

        
        /* 
        标签[属性名$=属性]{}:该标签内带有该属性,且以该属性结尾 
        
        .demo a[href$="https"]{
            background-color: red;
        }
        
        */
    </style>
</head>
<body>
    <p class="demo">
        <a href="https://www.baidu.com" class="class1 class2 class3" id="w123">1</a>
        <a href="https://www.taobao.com/" class="class1 class2 class3">2</a>
        <a href="#" class="class1 class2 class3">3</a>
        <a href="#" class="class1 class2 class3">4</a>
        <a href="#" class="class1 class2" id="w321">5</a>
        <a href="#" class="class1 class2">6</a>
        <a href="#" class="class1 class2">7</a>
        <a href="#" class="class1">8</a>
        <a href="#" class="class1">9</a>
        <a href="#" class="class1">10</a>
    </p>
</body>
</html>

CSS字体样式

我们依次介绍字体样式 :

  • font-family: 中文字体,英文字体;(这里设置文本字体,可以同时设置英文和中文字体,需要用逗号隔开,也可以只设置一种)
  • font-size: 20px;(这里设置文本大小)
  • font-weight: bold;(这里设置文本粗细,可以采用数字px,也可以采用bold等)
  • font-style:italic;(这里设置文字样式,例如italic斜体,normal正常)
  • color: brown;(这里设置字体颜色)
  • font: 粗细 大小 字体;(这里整合所有font设置,可以一次性设置完毕)
<!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>字体样式</title>

    <style>
    .divclass p{
        /* 我们常用的字体样式就以下四种 */
        font-family: 微软雅黑;
        font-size: 20px;
        font-weight: bold;
        color: brown;
    }
    </style>
</head>
<body>
    <!-- 这里稍微介绍一下div和span,就是简单的盒子,属于行内元素,我们常常用来规范做某些事情 -->
    <div class="divclass">
        <p>123</p>
        <span>123</span>
    </div>
</body>
</html>

CSS文本样式

文本样式主要是对文本进行操作,大致包括以下五种:

  • 颜色:color
  • 文本对齐:text-align
  • 首行缩进:text-indent
  • 行高:line-height
  • 装饰:text-decoration
<!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>文本样式</title>

    <style>
        /* 
        颜色 color 有三种形式 
        1.直接写英文颜色 red 等
        2.以#开头,写000000~ffffff之间的颜色
        3.以RBG来写
        4.以RBGA来写(可写透明度)
        */

        .class1 {
            /* 这里之间为大家举例(这样书写是不对的) */
            color: red;
            color: #121212;
            color: rgb(0, 255, 255);
            color:rgba(0, 255, 255, 0.1);
        }

        /* 
        文本对齐 text-align 有三种情况 
        center 居中对齐
        left 靠左对齐
        right 靠右对齐
        */

        .class2 {
            text-align: center;
        }

        /* 
        首行缩进 text-indent
        通常采用em,em表示一个文字大小,常用2em
        */
        .class3 {
            text-indent: 2em;
        }

        /*
        行高 text-height
        行高常用来使文字位于框架垂直中心
        当行高=框架高度,文字位于垂直中心
        */

        .class4 {
            background-color: #121212;
            height: 300px;
            line-height: 300px;
        }

        /*
        修饰 text-decoration
        可以跟 none underline line-through overline
        因为超链接a自带下划线,我们常使用none去除下划线使其美观  
        */
        a {
            text-decoration: none;
        }
    </style>
</head>
<body>
    <p class="class1">123</p>
    <p class="class2">123</p>
    <p class="class3">123</p>
    <p class="class4">123</p>
    <a href="#">我是链接</a>
</body>
</html>

CSS超链接伪类

在CSS的超链接中会出现动态情况,所以css给出相关伪类来改变超链接各种状态下的形态

下面给出代码示例:

<!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>超链接伪类和阴影</title>
    <!-- 我们先解释一下超链接伪类 -->
    

    <style>
        /* 正常情况下超链接伪类是很丑的且带下划线 */
        /* 首先我们对a进行修正 */
        a {
            /* 取消下划线,修改颜色 */
            text-decoration: none;
            color: black;
        }
        
        /* 我们来讲解一下a的一些伪类操作 */
        /* 这里表示当鼠标触及到超链接的状态 */
        a:hover{
            color: yellow;
        }  
        /* 这里表示当鼠标点击超链接且未松开的状态 */
        a:active{
            color: green;
        }
        /* 这里表示当鼠标未点击超链接的状态(可能与a发生冲突,尽量不要使用) */
        /* 
        a:link{
            color:blue;
        } 
        */
        /* 这里表示鼠标已点击过的状态 (可能与a发生冲突,尽量不要使用)*/
        /* 
        a:visited{
            color:red;
        } 
        */
    </style>

    <!-- 我们稍微介绍一下阴影 -->

    <style>
        /* text-shadow: 阴影颜色 阴影水平移动大小 阴影垂直移动大小 阴影光晕半径 (移动大小是可以写负数的) */
        #price{
            text-shadow: blue 10px 10px 2px;
        }
    </style>
</head>
<body>
    <p>
        <a href="#"> <img src="../../../../Resources/picture/1.jpeg" alt="纱雾老师"></a>
    </p>
    <p>
        <a href="#">纱雾老师</a>
    </p>
    <p>
        <a href="#" id="price">¥99</a>
    </p>
</body>
</html>

CSS表单常用focus伪选择器

input:focus选择器专用于表单input中:用来表示当点击该表单时的标签状态

<!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>表单选择器</title>

    <style>
        /* 用来表示选中该input标签时的状态 */
        input:focus{
            background-color: orange;
        }
    </style>
</head>
<body>
    <input type="text">
    <input type= "button">
</body>
</html>

CSS列表简单美化

在css基本课程中,我们给出列表的一些简单美化步骤

下面内容稍微阅读理解即可,后面我们会给出更加美观详细的步骤

下面给出代码示例:

<!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>简单列表练习</title>
    <!-- 与css链接 -->
    <link rel="stylesheet" href="ccs.css">
</head>
<body>
    <!-- div是一个盒子,用来控制整体大小 -->
    <div id="nav">
        <h2>淘宝销售</h2>
        <ul>
            <li><a href="#">女装</a>&nbsp;&nbsp;<a href="#">男装</a>&nbsp;&nbsp;<a href="#">童装</a>&nbsp;</li>
            <li><a href="#">女鞋</a>&nbsp;&nbsp;<a href="#">男鞋</a>&nbsp;&nbsp;<a href="#">童鞋</a>&nbsp;</li>
            <li><a href="#">手机</a>&nbsp;&nbsp;<a href="#">电脑</a>&nbsp;&nbsp;<a href="#">数码</a>&nbsp;</li>
        </ul>
    </div>
</body>
</html>
/* 首先设置最上方标题 */
h2{
    background-color: blanchedalmond;
    font-size: 20px;
    font-weight: bold;
    text-indent: 2em;
    line-height: 35px;
}

/* 然后我们设置盒子大小 */
#nav {
    width: 300px;
    background-color: gray;
}

/* 然后我们对li做出调整 */
ul li{
    /* 
    首先我们去掉前方的索引号 
    list-style:
    none 无
    circle 空心圆
    decimal 数字
    square 方形
    */
    list-style: none;
    height: 30px;
    text-indent: 1em;
}

/* 最后我们设置a和a:hover */
a {
    text-decoration: none;
    color:black;
    font-size: 14px;
}

a:hover{
    color: orange;
}

CSS背景

CSS背景主要分为两部分:

  • 背景颜色
  • 背景图片

我们的解释主要围绕这两部分展开:

<!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>背景</title>
    <!--  -->
    <style>
        /* 背景颜色:background-color: transparent*/
        /* 
        背景图片:background-image: none/url("图片地址") 
        背景图片可以选择其展示样式:
        background-repeat:选择是否平铺
        repeat平铺 no-repeat不平铺 repeat-x水平平铺 repeat-y垂直平铺
        背景图片可以选择位置:
        background-position:x y;选择x,y位置
        x:top/center/bottom   y:left/center/right
        背景图片可以选择是否固定:
        background-attachment:选择背景图片是否固定
        scroll可滚动 fixed固定
        背景图片具有复合写法:
        background:颜色 地址 平铺 是否固定 位置
        背景图片可选择透明度:
        background:rgba(,,,a)a是透明度
        */
    </style>
</head>
<body>
    <div id="nav"></div>
</body>
</html>

结束语

关于CSS的基本知识点,我们就简单介绍到这里,后面我会逐渐更新CSS三大特性,盒子浮动等内容,请多多关注,谢谢

张贴在2