CSS(二) 基本特性

最新推荐文章于 2023-07-15 18:06:52 发布

小苏学姐

最新推荐文章于 2023-07-15 18:06:52 发布

阅读量455

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/hlfsunshine/article/details/78169556

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

CSS 基本选择器

1 标记选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标记选择器</title>
<style type="text/css">
    p{
        color: red;
        font-size: 20px;    
    }
</style>
</head>
<body>
<p>爱编程！爱Java</p>
</body>
</html>

2 类别选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>类别选择器</title>
<style type="text/css">
    .r{
        color: red;
        font-size: 20px;    
    }

    .b{
        color: blue;
        font-size: 20px;    
    }
</style>
</head>
<body>
<p class="r">1爱Java</p>
<p class="b">2爱Java</p>
<p class="b">3爱Java</p>
</body>
</html>

3 ID 选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ID选择器</title>
<style type="text/css">
    #p1{
        color: red;
        font-size: 20px;    
    }

    #p2{
        color: blue;
        font-size: 20px;    
    }
</style>
</head>
<body>
<p id="p1">1 爱Java</p>
<p id="p2">2 爱Java</p>
</body>
</html>

HTML 中引入CSS 的方法

1 行内样式
在body中直接使用 style 属性

<p style="color: red;font-size: 20px;">行内样式</p>

2 内嵌式
在 title 中，给相应的选择器赋予相应的属性

<style type="text/css">
    p{
        color: red;
        font-size: 20px;    
    }
</style>

3 链接式
引入当前目录下的red.css，

<link href="red.css" type="text/css" rel="stylesheet">

其中red.css中的内容为：

p{
        color: red;
        font-size: 20px;    
}

4 导入样式（了解）

<style type="text/css">
    @import url(yellow.css)
</style>

和上面的一样，都在title中进行引入，其中yellow.css的样式如下：

p{
        color: yellow;
        font-size: 20px;    
}

5 几种方式的优先级比较
一般来说是就近原则，就是离修饰的选择器越近的，优先级越高

小苏学姐

关注

0
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录