css基础----CSS的引入与选择器

最新推荐文章于 2022-11-03 11:17:55 发布

小白_小可

最新推荐文章于 2022-11-03 11:17:55 发布

阅读量235

点赞数

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

本文链接：https://blog.csdn.net/Layfolk_XK/article/details/109391324

版权

笔记专栏收录该内容

42 篇文章 1 订阅

订阅专栏

在前面的文章中,我们曾提到过web网页是由三个部分组成的:框架(HTML),布局样式(CSS),行为(JavaScript),关于HTML的内容我们已经讲解的差不多了,还有什么不懂得可以再回过头来复习一下或者大家一起讨论

废话不多说,进入我们今天的正题----CSS

CSS的三种引入方式

三种引入方式分别为:行内样式,内部样式,外部样式
第一种方式:外链式
我们在html的<head>中使用<link>标签来定义一个CSS外链式样式的引入

<link rel="stylesheet" type="text/css" href="css文件的url">

这种方法在我们的编程过程中是最常使用的,这样写起来比较清晰明了
外链式的优点:
1.实现结构与样式的分离
2.实现模块化实现公用
3.减少不必要的代码

第二种方式:内嵌式
我们依旧是在html的<head>中,但是这次使用的是<style> </style>标签来定义一个CSS内嵌式样式的引入

<style type="text/css">
        选择器 {
            属性:属性值;
            属性:属性值;
        }
    </style>

这中方法在编程中可能不是那么的明了,但是在我们的练习和学习过程中还是比较方便的,而这里的选择器我们在接下来的学习中会逐步进行讲解

第三种方式:行内样式
行内样式就比较简单易懂了,我们直接在标签元素中添加标签style="",然后在style中添加属性即可

<a href="www.baidu.com" style="font-size: 50px;color: green;">百度一下D</a>

这种方法虽然理解起来比较简单,但是在真正使用起来是真滴麻烦,所以推荐大家了解就好,真正使用还是推荐以上的两种方式

而当这三种方式同时修改一个标签时,优先级最大的是行内样式,内部样式和外部样式的优先级是相同的,谁在下面结果就是谁

其中属性值的单位px这是像素的单位,像素是计算机的分辨率

选择器

选择器能够在我们需要修改样式时,快速而准确的选到我们需要的那个元素,格式为:

选择器 {
	属性: 属性值;
}

1.标签选择器:
我们直接使用标签{属性:属性值;}的方法来定义,但是值得注意的一点是,比如我们在这里写了一个连接<a>的标签,使用标签选择器的话应该写为:

a {
	color: red;
}

但这样写的话我们就会将所有的<a>标签都定义了这个color属性,就不能实现个别的差异性

2.class类选择器
在我们定义元素的时候,可以在标签中添加class=""属性,在需要选择的时候就可以使用.class类名的方法进行选择

css中:
.bg1 {
	background-color: red;
}

html中:
<div class="bg1">这是一个div</div>

但是这样的话是不是每个元素都只能有一个class类名呢?并不是的,这就会用到接下来的这个----多类名选择器

3.多类名选择器
在给元素标签定义class属性的时候,我们可以采用class="类名1+空格+类名二"的方法来实现一个元素标签的多类名

css中:
.bg1 {
	background-color: red;
}
.fs {
	font-size: 60px;
}

html中:
<div class="bg1 fs1">这是一个div</div>

多类选择器的优点:
1.减少代码量
2.方便代码的后期维护
3.多类名与css的先后顺序有关系,与html机构里面的class名顺序没有关系
4.多类名的添加以空格的形式

4.id选择器:
在定义元素标签时使用id=""就可以在选择这个元素时使用#id的方法来进行选择

css中:
#bg1 {
	background-color: red;
}

html中:
<div id="bg1">这是一个div</div>

id选择器与类选择器的区别:
id中的名字是唯一的(这将会在之后的javascript中会体现),而类名可以任意多个

5.通配符选择器:
这个就比较简单了在css中使用*{属性:属性值;}就可以将所有的元素标签选择,一般只有测试时才会使用

案例:

设计一个网页搜索记录的网页
HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索记录</title>
    <link rel="stylesheet" href="CSS/搜索历史css样式.css" type="text/css">
</head>
<body>
    <table width="250">
        <tr>
            <td>
                <form action="#">
                    <input type="text" value="请输入歌名.." class="textarea">
                    <input type="submit" name="搜索" value="搜索">
                </form>
                <hr>        <!--定义水平线-->
            </td>
        </tr>
        <tr>
            <td>
                <h3>历史搜索记录</h3>
                <ul>
                    <li>野狼disco</li>
                    <li>芒种</li>
                    <li>嚣张</li>
                </ul>
                <h3>热门搜索</h3>
                <ol>
                    <li>漂洋过海来看你</li>
                    <li>银河护卫队</li>
                    <li>小苹果</li>
                    <li>匆匆那年</li>
                </ol>
            </td>
        </tr>
    </table>
</body>
</html>

CSS:

table {
    border-color: white;
    background-color: lightgray;
}
hr {
    color: white;
}
.textarea {
    height: 30px;
    width: 185px;
}

在这里插入图片描述

小白_小可

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css基础----CSS的引入与选择器

在前面的文章中,我们曾提到过web网页是由三个部分组成的:框架(HTML),布局样式(CSS),行为(JavaScript),关于HTML的内容我们已经讲解的差不多了,还有什么不懂得可以再回过头来复习一下或者大家一起讨论废话不多说,进入我们今天的正题----CSSCSS的三种引入方式三种引入方式分别为:行内样式,内部样式,外部样式第一种方式:外链式我们在html的<head>中使用<link>标签来定义一个CSS外链式样式的引入<link rel="styleshe
复制链接

扫一扫