• css发展史、快速入门、导入方式

    目录

    1.什么是CSS

    1.1 简述

    1.2 发展史

    2.快速入门

    2.1 项目搭建

    2.2 css的优势

    3.三种css导入方式

    1.什么是CSS

    1.1 简述

    Cascading Style Sheet 层叠样式表 【回顾html：超文本标记语言】
    CSS：表现层（美化网页）
    主要美化对象：字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动

    1.2 发展史

    CSS1.0：最初于 1996 年发布，由用于添加字体属性的属性组成，例如字体和文本的强调颜色、背景和其他元素。

    CSS2.0：DIV（块）+CSS，提出了HTML与CSS结构分离的思想使网页变得简单，如：SEO（搜索引擎优化）

    CSS2.1：融入一些更高级的元素：浮动，定位

    CSS3.0：圆角边框、阴影、动画…浏览器兼容性

    2.快速入门

    2.1 项目搭建

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.  
    8.     <style>
    9.         h1{
    10.             color: blueviolet;
    11.         }
    12.     style>
    13.  
    14. head>
    15. <body>
    16. <h1>我是标题h1>
    17. body>
    18. html>

    样式分离：建议使用这种规范（单独写一个css文件，用link标签引入css文件效果）

    2.2 css的优势

    • 内容和表现分离
    • 网页结构表现统一，可以实现复用
    • 样式十分丰富
    • 建议使用使用独立于html的css文件
    • 利用SEO（搜索引擎优化），容易被搜索引擎收率

    3.三种css导入方式

    1）行内样式 （不符合结构与样式分离的规范）

    2. <h1 style="color: red">我是标题h1>

    2）内部样式

    css中的注释为：/*..........*/

    2.     <style>
    3.         h1{
    4.             color: blueviolet;
    5.         }
    6.     style>

    3）外部样式

    1. /*外部样式*/
    2. h1{
    3.     color: chartreuse;
    4. }

    总结：优先级：就近原则（最高的是行内样式）

    举例：

    此时内部样式离基准元素更近，参照内部样式来

     此时外部样式离基准元素最近，参照外部样式 

     4）拓展外部样式的两种写法

    a.连接式（ link标签）

    b.导入式

    @import是CSS2.1特有的！

    弊端：当网页样式特别多的时候会先展现出结构，然后再去渲染

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.  
    7.     <style>
    8.         @import url("css/style.css");
    9.     style>
    10.  
    11. head>
    12. <body>
    13. <h1>biuh1>
    14. body>
    15. html>
  • 相关阅读:
    利用Pairwise算法自动生成测试用例的
    Web字体
    05c++呵呵老师【FPS游戏准备】
    python中的继承
    深入了解百度爬虫工作原理
    蓝桥杯-修建灌木
    人脸识别系统——Face recognition 人脸识别
    卡尔曼时间序列预测
    uniapp小程序：使用uni.getLocation通过腾讯地图获取相关地址信息详情（超详细）
    快速入门Git
  • 原文地址：https://blog.csdn.net/qq_61727355/article/details/126472592