JavaWeb——css基础知识与它的三种使用方法和三种选择器

最新推荐文章于 2024-07-26 08:00:00 发布

かわいいの喵小忍

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量1.7k

点赞数 3

分类专栏： JavaWeb 文章标签： css html javascript

本文链接：https://blog.csdn.net/qq_44025396/article/details/105951086

版权

JavaWeb 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

什么是css

css，全称Cascading Style Sheets，中文名：层叠样式表。它是一种用来表现（表现，指的是这些内容在页面上的展示形式。比如说。布局，颜色，大小等等）HTML或XML等文件样式的计算机语言，是用于增强控制网样式并允许将样式信息与网页内容分离的一种标记性语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

css的语法规则

css通常要写成这样的格式：
选择器{
属性:值;
属性:值;
}
选择器：浏览器根据“选择器”决定受CSS样式影响的HTML元素（标签,id或者类）
属性（ property）是你要改变的样式名，并且每个属性都有一个值。属性和值被冒号分开，并由大括号包围，当有多个属性时需要使用分号隔开，这样就组成了一个完整的样式声明。还需要注意的是css的注释使用和java多行注释样式相同，和html的注释样式不同。
如：

p{
	/*为30px的红色字体*/
	color:red;
	font-size:30px;
}

代表的就是p标签的内容是大小为30px的红色字体。

css的三种使用方法

1.在标签上的style属性上直接设置

  <span style="color: red;font-size:30px ">span</span>

运行效果
在这里插入图片描述
缺点：

使用这种方法修改样式，会造成代码量巨大
不易读
难以复用

2.在head标签中，使用style标签来设置

<!--head标签中-->
<style type="text/css">
        div{
            color: green;
            font-size: 40px;
        }
    </style>
<!--body标签中-->    
<div>div1</div>
<div>div2</div>

运行效果
在这里插入图片描述
缺点：

只能在同一页面中使用这个css样式
在实际项目中，维护起来不方便

3.使用单独的css文件，通过link标签引入设置

p{
    color: black;
    font-size: 50px;
}

<!--head标签中-->
 <link rel="stylesheet" type="text/css" href="1.css"/>
<!--body标签中-->    
<p>p1</p>
<p>p2</p>

运行效果
在这里插入图片描述
全部代码1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css的使用方式</title>

    <!-- 第二种在head标签中使用-->
    <style type="text/css">
        div{
            color: green;
            font-size: 40px;
        }
    </style>
    <!--第三种使用css文件   -->
    <link rel="stylesheet" type="text/css" href="1.css"/>
</head>
<body>
    <!--第一种直接使用-->
    <span style="color: red;font-size:30px ">span</span>
    <!-- 第二种在head标签中使用-->
    <div>div1</div>
    <div>div2</div>
    <!--第三种使用css文件   -->
    <p>p1</p>
    <p>p2</p>
</body>
</html>

p{
color: black;
font-size: 50px;
}

在这里插入代码片

css的三种选择器

标签名选择器

标签名选择器的格式是：
标签名{
属性：值；
}
标签名选择器，可以决定哪种标签可以使用这个样式。
上文中我们介绍css的三种使用方式就是使用的这种选择器，这里不在重复介绍。

id选择器

id选择器的格式是：
#d属性值{
属性：值；
}
id选择器，可以让我们通过id属性选择性的去使用这个样式。

<!--head标签中-->
 <style type="text/css">
        #id001{
            color: red;
            font-size: 20px;
        }
        #id002{
            color: blue;
            font-size: 30px;
        }

    </style>
<!--body标签中-->    
<div id="id001">div</div>
<div id="id002">p</div>

运行效果
在这里插入图片描述

类选择器

class类型选择器的格式是：
lass属性值{
属性：值；
}
class类型选择器，可以通过class属性有效的选择性地去使用这个样式。和id选择器的区别是id属性的唯一的，class属性可以相同。

<!--head标签中-->
   <style type="text/css">

        .class001{
            color: yellow;
            font-size: 40px;
        }

    </style>
</head>
<!--body标签中-->    
<span class="class001">span</span>
<p class="class001">p</p>

运行效果
在这里插入图片描述

将三种选择器组合起来

选择器1，选择器2，选择器n{
属性：值；
}
组合选择器可以让多个选择器共用同一个css样式代码，这里要记住这些选择器是或的关系不是且的关系。这样就可以更高效的使用css样式。
全部代码2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css选择器</title>
    <style type="text/css">
        #id001{
            color: red;
            font-size: 20px;
        }
        #id002{
            color: blue;
            font-size: 30px;
        }
        .class001{
            color: yellow;
            font-size: 40px;
        }


    </style>
</head>
<body>
<!--id选择器-->
<div id="id001">div1</div>
<div id="id002">div2</div>
<!--class选择器-->
<span class="class001">span</span>
<p class="class001">p</p>
</body>
</html>

希望对看到这里的诸位有所帮助，如果喜欢这篇个人理解不妨点一个赞，谢谢~。

かわいいの喵小忍

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb——css基础知识与它的三种使用方法和三种选择器

什么是csscss，全称Cascading Style Sheets，中文名：层叠样式表。它是一种用来表现（表现，指的是这些内容在页面上的展示形式。比如说。布局，颜色，大小等等）HTML或XML等文件样式的计算机语言，是用于增强控制网样式并允许将样式信息与网页内容分离的一种标记性语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。css的语法规则css通常...
复制链接

扫一扫

专栏目录