Java中的CSS（初识）

最新推荐文章于 2024-05-19 10:58:35 发布

奇比翼凡

最新推荐文章于 2024-05-19 10:58:35 发布

阅读量1.5k

点赞数

本文链接：https://blog.csdn.net/wyq1614406553/article/details/92799820

版权

Java中的CSS（初识）

1.什么是CSS
Cascading Style Sheet 层叠样式表，一般被翻译成“层叠样式表”，简称样式表，专门用来控制网页格式，CSS的样式设置页面的格式，可以将页面的内容与表现内容相互分离。
2.CSS的优势

内容与表现分离
网页的表现统一，容易修改
丰富的样式，使得页面布局更加灵活
减少网页的代码量，增加网页的浏览速度，节省网络带宽
运用独立于页面的CSS ，有利于网页被搜索引擎收录

3.CSS的属性可以分为八大块
类型，背景，区块，方格，列表，定位和扩展
注意：在css中注释用/* */

行内样式

<!DOCTYPE html>
<html lang="en" xmlns:>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a{
            color: #ff3d47;
            font-family: 楷体;
            font-size: 50px;
            /*去掉下划线*/
            text-decoration: none;
        }

    </style>

</head>
<body>
<!--行内样式，用style，多个格式中间用分号隔开-->
<h1 style="color: chartreuse">这是我的css</h1>
<p style="color: green;font-size: larger">这又是，一个css</p>
<hr>
<a href="">这个网页很丑</a>
</body>
</html>

弊端：看起来不明显，表现和样式揉在一起

界面效果：在这里插入图片描述

外部导入式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style1.css">



</head>
<body>
<div>
    撸起袖子，加油干
</div>
</body>
</html>

界面效果：在这里插入图片描述

链接式与导入式的区别

标签属于XHTML，@import是属于CSS2.1
使用链接的CSS文件先加载到网页当中，再进行编译显示
使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页
当中
@import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的

CSS样式优先级
采用就近原则先是行内，再是内部再外部
行内样式>内部样式表>外部样式表

4.CSS基础选择器

1.标签选择器
选择器写法和标签是一致的，所有的这些标签会使用统一的样式。

如：

<h1>..<h6>,<p>,<img>

2.类选择器

<标签名 class=“类名称”>标签内容</标签名>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .a{
            font-family: 楷体;
        }
        .b，.c{
            color: #ff3d47;
            font-family: 楷体;
        }
    </style>


</head>
<body>
<p class="a">许巍-蓝莲花</p>
<a href="" class="a">许巍-故乡</a>
<div class="b">张杰-天下</div>
<span class="b">张杰-这就是，爱</span>
<br>
<hua class="c">周杰伦-青花瓷</hua>
</body>
</html>

界面效果：在这里插入图片描述

3.ID选择器

<标签名 id= “id名称”>标签内容<标签名>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #aaa{
            font-size: 50px;
        }
        #bbb{
            font-size: 55px;
            color: #ff3d47;
        }
    </style>



</head>
<body>
<p class="a" id="aaa">西安</p>
<a href="" class="a">北京</a>
<div class="a">深圳</div>
<span class="a" id="bbb">上海</span>

</body>
</html>

界面效果：在这里插入图片描述

注意：id属性全局唯一，不能重名，也不能是数字，我把id设置成数字，没有作用，不知道为啥
总结：标签选择器直接应用于HTML标签
类选择器可在页面中多次使用
网页中的元素id必须唯一，id只能是网页中的元素使用这个样式

奇比翼凡

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Java中的CSS（初识）

Java中的CSS（初识）1.什么是CSSCascading Style Sheet 层叠样式表，一般被翻译成“层叠样式表”，简称样式表，专门用来控制网页格式，CSS的样式设置页面的格式，可以将页面的内容与表现内容相互分离。2.CSS的优势内容与表现分离网页的表现统一，容易修改丰富的样式，使得页面布局更加灵活减少网页的代码量，增加网页的浏览速度，节省网...
复制链接

扫一扫