使用css样式的方式

最新推荐文章于 2022-11-12 23:41:27 发布

「已注销」

最新推荐文章于 2022-11-12 23:41:27 发布

阅读量164

点赞数

本文链接：https://blog.csdn.net/weixin_44575514/article/details/105842024

版权

title

date

使用css的方式

段内导入

<p style="background-color:red;">hello world</p>

`head`中定义

<style>
    p{
        background-color: gold;
    }
</style>

之后这个文件中所有的<p>都会为gold颜色

导入其他的css文件

在css文件夹下新建base.css文件在<head>中导入：

导入方式一

<link rel="stylesheet" href="css/base.css" />

导入方式二

<style>
    @import url("base.css");
</style>

基础选择器

通用选择器

通用选择器是一个符号*，像通配符

<style>
    *{
        background-color: red;
        margin: 0px;    /*取消所有的外间距*/
    }
</style>

id选择器

id在文件中最好是唯一的

<head>
    <style>
        /*使用#指定对应的id，多个id使用逗号隔开*/
        #d1, #p1{
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <div id="d1">你好，世界!</div>
    <br />
    <div id="p1">你好世界!</div>
</body>

类选择器

<head>
    <style>
        /*使用.指定类，多个类之间用逗号隔开*/
        .cls1, .cls2{
            background-color: purple;
            margin: 3px;
        }
    </style>
</head>
<body>
    <h1 class="cls1">你好</h1>
    <h2 class="cls1">你好</h1>
    <p class="cls2">你好</p>
    <br />
    <a href="www.baidu.com" class="cls2">百度</a>
</body>

另外一个标签可以属于多个类，多个类之间用空格隔开

<h2 class="cls1 cls2">你好</h1>

标签选择器

即指定对应的标签给定样式

<style>
    /*给所有的input标签指定样式*/
    input{
        background-color: red;
    }
</style>

选择器的优先级

id>class>标签>通配符

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

使用css样式的方式

使用css的方式

段内导入

head中定义

导入其他的css文件

基础选择器

通用选择器

id选择器

类选择器

标签选择器

选择器的优先级

`head`中定义