JavaWeb学习——CSS基础学习

最新推荐文章于 2019-08-02 21:04:31 发布

穆学习

最新推荐文章于 2019-08-02 21:04:31 发布

阅读量227

点赞数

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/qq_43411550/article/details/92835718

版权

JavaWeb 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

JavaWeb学习——CSS基础学习

1.CSS概念：

CSS，层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。
和 HTML 类似，CSS 也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言，人们可以用它来选择性地为 HTML 元素添加样式。举例来说，要选择一个 HTML 页面里所有的段落元素，然后将其中的文本改成红色，可以这样写 CSS：

p{
  color: red;
}

2.CSS的发展史：

1996年 CSS1.0
1998年 CSS2.0

融入了DIV+CSS的概念，提出了HTML结构与CSS样式表的分离
2004年 CSS2.1

融入了更多高级的用法，如浮动，定位等。
2010年 CSS3.0

它包括了CSS2.1下的所有功能，是目前最新的版本，它向着模块化的趋势发展，又加了很多使用的新技术，如字体、多背景、圆角、阴影、动画等高级属性，但是它需要高级浏览器的支持。由于现在IE 6、IE 7使用比例已经很少，对市场企业进行调研发现使用CSS3的频率大幅增加，学习CSS3已经成为一种趋势.

3.CSS的优势：

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

4.引入CSS的三种方式：

①行内样式

    <!--
        方式一：在标签属性上写style属性，并在style里面写上css代码
            color：字体颜色
            font-family：字体
            font-size：字体大小
    -->
    <span style="color: red;font-family: 楷体;font-size: 50px">
        我是一只快乐的小青蛙
    </span>

效果展示：
在这里插入图片描述
②内部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--
        方式二：在head标签内写上style标签，将css代码卸载style标签中
    -->
    <style>
        span{
            color: red;
            font-family: 楷体;
            font-size: 50px
        }
    </style>
</head>
<body>

    <span>
        我是一只快乐的小青蛙
    </span>

</body>
</html>

效果展示：
在这里插入图片描述
③外部样式表（链接式）

在项目中新建css目录，再新建文本文件将后缀名改为.css，将css代码写入其中
在这里插入图片描述
然后在HTML文件中链接css文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--
        方式三：在head标签中使用link标签链接外部css文件
            href：外部css文件路径
    -->
    <link rel="stylesheet" href="../css/1.css">

</head>
<body>

    <span>
        我是一只快乐的小青蛙
    </span>

</body>
</html>

效果展示：
在这里插入图片描述
③外部样式表（导入式）

    <!--
        方式四：在head标签中写style标签，在style标签里写 @import＋外部css文件路径
    -->
    <style>
        @import "../css/1.css";
    </style>

效果展示：
在这里插入图片描述
注意：外部导入式与链接式是有所不同的，外部导入式是先将html加载完在导入css文件渲染所以我们有可能会看见没有被渲染的网页。但是link就不同了，是先将css文件加载渲染后再将网页展示

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

CSS样式优先级：
行内样式 > 内部样式表 > 外部样式表