CSS基础

最新推荐文章于 2024-10-09 19:16:55 发布

JiangCaifu

最新推荐文章于 2024-10-09 19:16:55 发布

阅读量151

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/JiangCaifu/article/details/95096118

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS基础语法

简单语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="Mycss.css" type="text/css" rel="stylesheet">
</head>
<body>
    <h1>
        应用了样式表
    </h1>
</body>
</html>

选择派生器

CSS文件

li strong{
    color:red;
}
strong{
    color:blueviolet;
}

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="Mycss.css" type="text/css" rel="stylesheet">
</head>
<body>
    <p><strong>p标签hello Css</strong></p>
    <ul>
        <li><strong>li标签 hello css</strong></li>
    </ul>
</body>
</html>

CSSid选择器

css文件

#pid a{
    color:pink;
}
#divid{
    color:red;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="Mycss.css" type="text/css" rel="stylesheet">
</head>
<body>
    <p id="pid">hello css<a href="www.jikexueyuan.com">学院</a></p>
    <div id="divid">这是一个div</div>
</body>
</html>

类选择器

css

.pclass{
    color:red;
}
.divclass{
    color:blueviolet;
}

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="Mycss.css" type="text/css" rel="stylesheet">
</head>
<body>
    <p class="pclass">这是一个class效果<a href="http://www.baidu.com">学院</a></p>
    <div class="divclass">
        hello div <p>p标签</p>
    </div>
</body>
</html>

属性选择器

css文件

.pclass{
    color:red;
}
.divclass{
    color:blueviolet;
}

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css"
        [title]{
          color:blue;}>
        [title=te]{
            color:red;
        }
        </style>
</head>
<body>
    <p title="t">属性选择器</p>
    <p title="te">属性和值选择器</p>
</body>
</html>