CSS基础知识（一）

最新推荐文章于 2024-06-07 19:12:10 发布

 火炏焱燚

最新推荐文章于 2024-06-07 19:12:10 发布

阅读量190

点赞数

本文链接：https://blog.csdn.net/Dansingle_java/article/details/93141111

版权

一、CSS的概念

CSS(Cascading Style Sheet，层叠样式表）是一种表现HTML文件样式的语言，CSS语言可以写在style 标签中，包括字体、颜色、边距、高度、宽度、背景图片、网页定位等设定。目前主流的版本是CSS 3.0。

二、CSS的优势

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

三、引入CSS的三种方式

1、行内样式，使用style属性引入CSS样式；

2、内部样式表，CSS代码写在的

3、外部样式表，包括链接式和导入式。

<!--导入方式一：行内样式
   style属性引入 ,-->
   <h1 style ="color: #96ffe6">你好,CSS</h1>
   <p style="color: #ff5f5d;font-weight: bold">Farewell My University</p>

<!--导入方式二：内部样式表-->
<style>
    g2 {
        color: #5263d7;
        font-style: oblique;
        /*oblique: 斜的*/
        font-size: 200px;
    }
    g3{
        color: #aa256a;
        font-palette: light;
        font-size: 50px;
    }
</style>
<g2>张先生</g2>
<g3>爱学java</g3>
</body>`

  <!--导入方式三:外部导入式
    需要使用  link标签
    -->
    <link rel="stylesheet" href="../resources/css/Style.css">
    <style>
        @import url("../resources/css/Style.css");
    </style>

</head>
<body>
<div>
热爱生活，热爱Java！
</div>
  </body>

四、CSS样式优先级

行内样式 > 内部样式表 > 外部样式表
例：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../resources/css/Style.css">
    <style>
        span{
            color: blue;
            font-family: 楷体;}
            url{"../resource/stylyshee.css"}
      
    </style>
</head>
<body>
<span style="color: green">
猜猜本字体是什么色？
</span>

结果字体颜色为绿色，因为行内样式为绿色。如图
在这里插入图片描述

五、CSS基础选择器

标签选择器
HTML标签作为标签选择器的名称.
类选择器
<标签名 class =“类名称”>标签内容</标签名>

3.ID选择器
<标签名 id=“id名称”>标签内容</标签名>

 火炏焱燚

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础知识（一）

一、CSS的概念CSS(Cascading Style Sheet，层叠样式表）是一种表现HTML文件样式的语言，CSS语言可以写在style 标签中，包括字体、颜色、边距、高度、宽度、背景图片、网页定位等设定。目前主流的版本是CSS 3.0。二、CSS的优势1、内容与表现分离；2、网页的表现统一、容易修改；3、丰富的样式，使得页面布局更灵活；4、减少页面代码量，增加网页的浏览速度，节...
复制链接

扫一扫