使用css样式的方式

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

「已注销」

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

阅读量149

点赞数

本文链接：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
评论
使用css样式的方式

title date tags categories description 使用css样式的方式和基础选择器 2019-10-10 13:27:42 -0700 css基础 css css如何导入到网页中进行使用 ...
复制链接

扫一扫