【JavaWeb】前端开发之CSS(上)

     <style>
        p{
            /*设置字体颜色*/
            color: red;
            /*设置字体大小*/
            font-size: 20px;
        }
     </style>
     <p>
        hello CSS
     </p>

解释这里的p就是选择器此处就表示选择页面中的所有p标签{}里面表示的就是键值对结构表示CSS中的各种属性键值对之间使用 ""来分割键和值之间使用 : 来分割。/* */是CSS中的注释。

运行结果

CSS引入方式

1、内部样式表

通过style标签来写CSS虽然不太常见但是对于一般的CSS代码来说这样写没啥毛病。

2、内联样式

通过HTML标签中的style属性来应用。

    <p style="color: green;">Hello CSS</p>

运行结果

这种写法属于一种比较特殊的写法通常呢会搭配JS来使用只适合于样式特别简单的情况因为对于一些复杂的案例这样写的话显得代码非常乱。同时这种写法只针对当前元素生效。

3、外部样式

这种样式是实际开发中最常使用的就是把CSS文件单独提取出来放到一个.css文件中然后在通过HTML中的代码通过link标签来引入该css文件。

test.css文件

p {
    color: blue;
}

.html文件(注意这行代码通常放在head标签中)

<link rel="stylesheet" href="test.css">
<body>
    <p>
        hello css
    </p>
</body>

运行结果

敲黑板

注意html和css都是不区分大小写的习惯上在写代码的时候统一使用小写。

选择器

选择器的功能就是选中页面的元素可以一次选择一个也可以一次选中一批。

一、基础选择器

1、标签选择器

写的选择器p就是一个html的标签名。

2、类选择器

这个就非常牛了通过这个选择器可以任意的选择想要的元素那么有人就会问了那有这一种选择器就可以了呀为什么还需要其他的选择器呢

理论上是这样但是为了使代码更简单还是引入了很多各种其他的选择器。这就像我们的电脑有CPU同时还有GPU。

使用方法

首先我们需要在css代码中创建一个类名在对应的html元素中通过class属性来引用这个类名。那么具有这个类名的元素就都会应用上相关的属性。

比如我们想让HTML中的元素都是绿色的

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>这是CSS的代码</title>
    <!--外部样式-->
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <style>
            .green {
        color: green;
    }
    </style>
    <p class="green">
        hello 类名
    </p>
    <p class="green">
        hello java
    </p>
</body>
</html>

注意代码中的 .类名 { } 这个.后面的就是类名使用class属性来引入类名。

运行结果

3、id选择器

即给被选中的元素设置个id属性id属性前面使用#来表示id在一个页面里面不能重复。

    <style>
        #isid{
            color: blue;
        }
    </style>
    <p>
        这不是id属性
    </p>
    <p id="isid">
        这是id属性
    </p>

运行结果

4、通配符选择器

使用 * 的定义 , 选取所有的标签。

代码

    <style>
        * {
            color: red;
        }
    </style>
    <p>
       这是1
    </p>
    <p>
        这是2
    </p>
    <p>
        这是3
    </p>

即页面的所有内容都会被改成红色不需要被页面结构调用。

运行结果

这个选择器的最大作用就是在进行前端开发的时候要求咋们的页面不要依赖浏览器的默认样式。

二、复合选择器

1、后代选择器

即通过多个选择器的组合能够选中某个元素里面的子孙/后代。

样式选择器1 选择器2{ }

注意中间必须有空格选择器1和2都可以是标签选择器/类选择器/id选择器

正确代码演示:

ul .houdai{
    color: red;
}

找ul标签里面看是否有class为houdai的元素。

错误代码演示

ul.houdai{
    color: red;
}

这个代码ul和.houdai之间就没有空格意思就是找ul同时class为houdai的元素。

2、子选择器

通过多个选择器的组合能够选中某个元素里面的子元素。

样式选择器1>选择器2

        ul>houdai{
            color:green;
        }

3、并集选择器

并列的写多个选择器中间用逗号来分割这里的并集选择器里面可以写简单的选择器也可以写复杂的选择器。

        ul>li,ol>li{
            color: blue;
        }

关于CSS的后序学习可以关注一个网站W3school这上面基本涵盖了所有的CSS知识。方便大家的后序学习

在线文档w3school官网

那么关于CSS的选择器是十分庞大的有好几十种那么博主也就是简单介绍一些常用的毕竟博主是个搞后端的哈哈关于CSS的选择器我们就先介绍到这里下期博主会继续更新CSS的下半部分内容包括元素属性文本属性背景属性盒模型弹性布局等等学会了这些基本CSS语法完全可以大致能看懂前端部分CSS的代码。OK那么今天就到这里我们下期再见

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6