【JavaWeb】前端三剑客—CSS基础知识

目录

一、CSS 是什么

二、基本语法规范

三、引入方式

内部样式表

行内样式表

外部样式

​三、选择器

标签选择器

类选择器

id 选择器

四、复合选择器

后代选择器

子选择器

伪类选择器

五、常用元素属性

字体属性

文本属性

六、背景属性

背景颜色

背景平铺

七、Chrome 调试工具

标签页含义

元素的显示模式

块级元素

行内元素/内联元素

盒模型

边框

内边距

外边距


一、CSS 是什么

层叠样式表 (Cascading Style Sheets). CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离.

二、基本语法规范

        选择器 + {一条/N条声明}

        选择器决定针对谁修改 (找谁)

        声明决定修改啥. (干啥) 声明的属性是键值对. 使用 ; 区分键值对, 使用 : 区分键和值.

<head>    
<style>
        p {
            /* 设置字体颜色 */
            color: red;
            /* 设置字体大小 */
            font-size: 80pxs;
        }

    </style>
</head>
  
<body>
<p>hello word</p>
</body>

注意:

CSS 要写到 style 标签中(后面还会介绍其他写法)

style 标签可以放到页面任意位置. 一般放到 head 标签内.

CSS 使用 /* */ 作为注释. (使用 ctrl + / 快速切换) .

三、引入方式

内部样式表

写在 style 标签中. 嵌入到 html 内部. 理论上来说 style 放到 html 的哪里都行. 但是一般都是放到 head 标签中.

行内样式表

<head>   
<style>
       div{
           color: red;
       }

    </style>
</head>
  
<body>
    <div style="color: green;">眼睛需要绿色</div>
</body>
</html>

通过 style 属性, 来指定某个标签的样式. 只适合于写简单样式. 只针对某个标签生效.

缺点: 不能写太复杂的样式. 这种写法优先级较高, 会覆盖其他的样式.

外部样式

实际开发中最常用的方式.

1. 创建一个 css 文件.

2. 使用 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>Document</title>
</head>
    <link rel="stylesheet" href="D:/java2021/前端代码/demo1.css">
<body>
    <div>睡觉</div>
</body>
</html>
div{
    color: rgb(177, 41, 170);
}

三、选择器

标签选择器

<!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>Document</title>
</head>
<style>
    p {
        color: red;
    }
    div{
        color: green;
    }
</style>
<body>
    <p>李白</p>
    <p>李白</p>
    <p>李白</p>
    <div>杜甫</div>
    <div>杜甫</div>
    <div>杜甫</div>
</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>Document</title>
</head>
    <style>
        .blue{
            color: red;
        }
    </style>
<body>
    <div class="bule">小猫</div>
    <div>小狗</div>
</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>Document</title>
</head>
    <style>
        .box{
            width: 200px;
            height: 150px;
        }
        .red{
            background-color: aqua;
        }
        .green{
            background-color: green;
        }
    </style>
<body>
    <div class="box red"></div>
    <div class="box green"></div>
    <div class="box yellow"></div>
</body>
</html>

语法细节:

类名用 . 开头的

下方的标签使用 class 属性来调用.

一个类可以被多个标签使用, 一个标签也能使用多个类(多个类名要使用空格分割, 这种做法可以让 代码更好复用)

如果是长的类名, 可以使用 - 分割.

不要使用纯数字, 或者中文, 以及标签名来命名类名.

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>Document</title>
</head>
    <style>
        #ha{
            color: red;
        }
    </style>
<body>
    <div id="ha">哈哈哈</div>
</body>
</html>

CSS使用#开头表示id选择器

id 选择器的值和 html 中某个元素的 id 值相同

html 的元素 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>Document</title>
</head>
    <style>
        ul li a{
            color: red;
        }
    </style>
<body>
    <ul>
        <li>aaa</li>
        <li>aaa</li>
        <li><a href="##">ccc</a></li>
    </ul>
 
</body>
</html>

又叫包含选择器. 选择某个父元素中的某个子元素

元素 1 和 元素 2 要使用空格分割

 元素 1 是父级, 元素 2 是子级, 只选元素 2 , 不影响元素 1

<!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>Document</title>
</head>
    <style>
        .one li a{
            color: blue;
        }
    </style>
<body>
    <ol class="one">
        <li>dddd</li>
        <li>eeee</li>
        <li><a href="#">fff</a></li>
        <li><a href="%">fff</a></li>
    </ol>
</body>
</html>

 可以是任意基础选择器的组合. (包括类选择器, 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>Document</title>
</head>
    <style>
        .two a{
            color: aqua;
        }
    </style>
<body>
    <div class="two">
        <a href="#">链接1</a>
        <p><a href="*">链接2</a></p>
    </div>
</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>Document</title>
</head>
    <style>
        .cat ul li a{
            color: red;
        }
    </style>
<body>
    <div class="cat">
        <ul>
            <li><a href="*">小猫</a></li>
            <li><a href="*">小猫</a></li>
        </ul>
       
    </div>
</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>Document</title>
</head>
    <style>
        a:link{
            /* 去掉a的标签 */
            color: black;
        }
        a:visited{
            color: green;
        }
        a:hover{
            color: red;
        }
        a:active{
            color: blue;
        }
    </style>
<body>
    <a href="#">小猫</a>
</body>
</html>

a:link 选择未被访问过的链接

a:visited 选择已经被访问过的链接

a:hover 选择鼠标指针悬停上的链接

a:active 选择活动链接(鼠标按下了但是未弹起)

五、常用元素属性

字体属性

<!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>Document</title>
</head>
<style>
    .font-family .one {
        font-family: 'Microsoft YaHei';
   }
    .font-family .two {
        font-family: '宋体';
   }
</style>
<body>
    <div class="font-family">
        <div class="one">
            微软眼黑
        </div>
        <div class="two">
            宋体
        </div>
    </div>
</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>Document</title>
</head>
    <style>
        .color{
            color: red;
        }
    </style>
<body>
    <div class="color">你还村民怕是</div>
</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>Document</title>
</head>
    <style>
        .text.one{
            text-align: left;
        }
        .text.two{
            text-align: right;
        }
        .text.three{
            text-align: center;
        }
    </style>
<body>
    <div class="text">
        <div class="one">左对齐</div>
        <div class="two">右对齐</div>
        <div class="three">居中对齐</div>
    </div>
</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>Document</title>
</head>
    <style>
    .text-decorate .one {
        text-decoration: none;
   }
    .text-decorate .two {
        text-decoration: underline;
   }
    .text-decorate .three {
        text-decoration: overline;
   }
    .text-decorate .four {
        text-decoration: line-through;
   }

    </style>
<body>
    <div class="text-decorate">
        <div class="one">啥都没有</div>
        <div class="two">下划线</div>
        <div class="three">上划线</div>
        <div class="four">删除线</div>
    </div>    
</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>Document</title>
</head>
<style>
    body {
        background-color: #f3f3f3;
   }
    .bgc .one {
        background-color: red;
   }
    .bgc .two {
        background-color: #0f0;
   }
    .bgc .three {
        /* 背景透明 */
        background-color: transparent;
   }
</style>
<body>
    <div class="bgc">
        <div class="one">红色背景</div>
        <div class="two">绿色背景</div>
        <div class="three">透明背景</div>
    </div>
</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>Document</title>
</head>
<style>
     .bgr .one {
        background-image: url(rose.jpg);
        height: 300px;
        background-repeat: no-repeat;
   }
    .bgr .two {
        background-image: url(rose.jpg);
        height: 300px;
        background-repeat: repeat-x;
   }
    .bgr .three {
        background-image: url(rose.jpg);
        height: 300px;
        background-repeat: repeat-y;
   }
</style>
<body>
    <div class="bgc">
    <div class="one">不平铺</div>
    <div class="two">水平平铺</div>
    <div class="three">垂直平铺</div>
    </div>
</body>
</html>

七、Chrome 调试工具

标签页含义

elements 查看标签结构

console 查看控制台

source 查看源码+断点调试

network 查看前后端交互过程

application 查看浏览器提供的一些扩展功能(本地存储等)

元素的显示模式

块级元素

<!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>Document</title>
</head>
    <style>
    .demo1 .parent {
        width: 100px;
        height: 100px;
        background-color: green;
   }
   .demo1 .child {
        /* 不写 width, 默认和父元素一样宽 */
        /* 不写 height, 默认为 0 (看不到了) */
        height: 100px;
        background-color: red;
   }
    </style>
<body>
    <div class="demo1">
        <div class="parernt">
            <div class="child">
                child1
            </div>
            <div class="child">
                child2
            </div>
        </div>
    </div>
</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>Document</title>
</head>
    <style>
    .demo2 span {
        width: 200px;
        height: 200px;
        background-color: red;
   }
    </style>
<body>
    <div class="demo2">
        <span>child1</span>
        <span>child2</span>
        <span>child3</span>
    </div>    
</body>
</html>

盒模型

每一个 HTML 元素就相当于是一个矩形的 "盒子" 这个盒子由这几个部分构成

边框 border 内容 content 内边距 padding 外边距 margin

边框

<!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>Document</title>
</head>
<style>
    div{
        width: 500px;
        height: 250px;
        border-width: 10px;
        border-style: solid;
        border-color: green;
    }
</style>
<body>
    <div>text</div>
</body>
</html>

粗细: border-width

样式: border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框

颜色: border-color

内边距

<!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>Document</title>
</head>
<style>
    div{
        height: 200px;
        width: 300px;
        padding-top: 5px;
        padding-left: 50px;
        border-width: 50px;
        border-style: solid;
        border-color: green;

    }
    div{
        height: 200px;
        width: 300px;
    }
</style>
<body>
    <div>text</div>
</body>
</html>

默认内容是顶着边框来放置的. 用 padding 来控制这个距离 可以给四个方向都加上边距

padding-top padding-bottom padding-left padding-right

外边距

<!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>Document</title>
</head>
<style>
    div{
        background-color: red;
        width: 100px;
        height: 100px;
    }
    .first{
        margin-bottom: 20px;
    }
</style>
<body>
    <div class="first">哈哈</div>
    <div>呵呵</div>
</body>
</html>

控制盒子和盒子之间的距离. 可以给四个方向都加上边距

margin-top margin-bottom margin-left margin-right

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>