CSS基础

Css

作用:用来修饰HTML页面,设置元素的样式,让html页面更加美观

一、引入css的三种方式

1、内联定义:在对象的标记内使用

&#x8BED;&#x6CD5;&#x683C;&#x5F0F;&#xFF1A;<标签 style="&#x201C;&#x6837;&#x5F0F;&#x540D;&#xFF1A;&#x6837;&#x5F0F;&#x503C;&#xFF1B;&#x6837;&#x5F0F;&#x540D;&#xFF1A;&#x6837;&#x5F0F;&#x503C;...&#x201D;"></标签>

2、定义内部样式快对象(在head标签中使用style块)

<head>
   <style type="text/css">
        选择器{
            样式名:样式值;
            样式名:样式值;
                 ...

        }

   </style>
</head>

3、链入外部样式表文件

&#x8BED;&#x6CD5;&#x683C;&#x5F0F;&#xFF1A;<link type="text/css" rel="stylesheet" href="css&#x6587;&#x4EF6;&#x7684;&#x8DEF;&#x5F84;">

二、id选择器 | 标签选择器 | 类选择器

1、标签选择器

&#x8BED;&#x6CD5;&#x683C;&#x5F0F;
        &#x6807;&#x7B7E;&#x540D;{
                &#x6837;&#x5F0F;&#x540D;&#xFF1A;&#x6837;&#x5F0F;&#x503C;&#xFF1B;
                &#x6837;&#x5F0F;&#x540D;&#xFF1A;&#x6837;&#x5F0F;&#x503C;&#xFF1B;
                    ...
        }

2、id选择器

&#x8BED;&#x6CD5;&#x683C;&#x5F0F;
        #id{
                &#x6837;&#x5F0F;&#x540D;&#xFF1A;&#x6837;&#x5F0F;&#x503C;&#xFF1B;
                &#x6837;&#x5F0F;&#x540D;&#xFF1A;&#x6837;&#x5F0F;&#x503C;&#xFF1B;
                    ...
        }

3、类选择器

&#x8BED;&#x6CD5;&#x683C;&#x5F0F;
        .&#x7C7B;&#x540D;{
                &#x6837;&#x5F0F;&#x540D;&#xFF1A;&#x6837;&#x5F0F;&#x503C;&#xFF1B;
                &#x6837;&#x5F0F;&#x540D;&#xFF1A;&#x6837;&#x5F0F;&#x503C;&#xFF1B;
                    ...
        }

引入外部文件的实例。

引入外部文件
css文件

a {
    text-decoration: none;
}

html页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/my.css" type="text/css">
    </head>

    <body>
        <a href="https://www.baidu.com">&#x767E;&#x5EA6;</a>
    </body>

</html>

结果

CSS基础

Original: https://www.cnblogs.com/zheng-yuzhu/p/16634206.html
Author: 郑-某
Title: CSS基础

原创文章受到原创版权保护。转载请注明出处:https://www.johngo689.com/609235/

转载文章受原作者版权保护。转载请注明原作者出处!

(0)

大家都在看

  • day04-1群聊功能

    多用户即时通讯系统04 4.编码实现03 4.5功能实现-群聊功能实现 4.5.1思路分析 群聊的实现思路和私聊的实现非常类似。 不同的是:私聊时,服务端接收到消息后,只需要找出接…

    Java 2023年6月15日
    081
  • h5项目(特别是vue)缓存严重的解决方案,配合nginx

    默认情况下使用nginx作为h5静态资源的服务器时,这些资源在浏览器端是会有缓存的,特别是微信浏览器中,缓存非常严重。 所以项目开始部署阶段就需要配置好nginx禁止这些资源的缓存…

    Java 2023年5月30日
    079
  • springboot mybatis plus多数据源轻松搞定 (上)

    在开发中经常会遇到一个程序需要调用多个数据库的情况,总得来说分为下面的几种情况: 下面针对第一种情况,提供一个解决方案。 因为两个数据库的功能和结构不一样,所以可以根据功能和结构把…

    Java 2023年6月7日
    089
  • 使用MyBatis拦截器后,摸鱼时间又长了。🐟

    场景 在后端服务开发时,现在很流行的框架组合就是SSM(SpringBoot + Spring + MyBatis),在我们进行一些业务系统开发时,会有很多的业务数据表,而表中的信…

    Java 2023年6月7日
    078
  • LinkedList

    LinkedList 双向链表 线程不安全 实现Dueue接口,提供了更多方法 offer() peek() poll()等 public class LinkedList<…

    Java 2023年6月5日
    0116
  • MySQL8免安装版下载安装与配置(windows)

    一、MySQL8下载 官网下载地址:MySQL :: Download MySQL Community Server 点击免安装版的”Download”跳转…

    Java 2023年6月8日
    0106
  • 「SpringBoot」如何优雅地启动管理SpringBoot项目

    本文主要讲述一下如何优雅地管理SpringBoot项目。 背景 课堂上,当小明形如流水地回答完沐芳老师提出来的问题时,却被至今没有对象的胖虎无情嘲讽了? 沐芳老师:小明,你平时是如…

    Java 2023年6月13日
    097
  • Spring Boot + Spring Cloud 实现权限管理系统 后端篇(十七):登录验证码实现(Captcha)

    登录验证码 登录验证是一般系统都会有的功能,验证的方式也多种多样,比如输入式验证码,拖动式验证条,拖动式验证拼图等等。 我们这里先实现常规的输入验证码的方式,右边显示验证码图片,点…

    Java 2023年5月30日
    091
  • Delphi 多线程的例子

    unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Contr…

    Java 2023年5月29日
    086
  • 集合

    1、Abstract开头的类用于设置自己的类库,其中已有部分实现,比直接实现接口方便得多。 2、迭代器在调用next()方法之前必须先调用hasNext()方法,否则将抛出 NoS…

    Java 2023年6月9日
    067
  • 集合

    集合分为单列集合和双列集合。 Collection&#x96C6;&#x5408;&#x7684;&#x4F53;&#x7CFB;&…

    Java 2023年6月6日
    069
  • java 中的原始类型与原始封装类型

    Java 提供两种不同的类型:引用类型和原始类型(或内置类型)。比如:Int是java的原始数据类型,Integer是java为int提供的封装类。Java为每个原始类型提供了封装…

    Java 2023年5月29日
    0105
  • Dubbo学习

    Dubbo 前言 1.1 大型互联网项目架构目标 1.2 集群和分布式 概念 集群:很多”人”一起,干一样的事。 一个业务模块,部署在多台服务器上。 分布式…

    Java 2023年6月8日
    088
  • java创建对象的5种方式

    1、使用new关键字 2、利用反射手段,调用java.lang.Class或者java.lang.reflect.Constructor类的newInstance()实例方法 3、…

    Java 2023年6月7日
    051
  • Skywalking-07:OAL原理——解释器实现

    OAL 解释器实现 OAL 解释器是基于 Antlr4 实现的,我们先来了解下 Antlr4 Antlr4 基本介绍 Antlr4 使用案例 参考Antlr4的使用简介这篇文章,我…

    Java 2023年6月5日
    091
  • 人生苦短,我用python之三

    HTTP协议及Requests库的方法 requests库的主要方法:requests.request()构造一个请求 requests.get()获取HTML网页的主要方法,对应…

    Java 2023年6月7日
    083
亲爱的 Coder【最近整理,可免费获取】👉 最新必读书单  | 👏 面试题下载  | 🌎 免费的AI知识星球