快速入门CSS

news2024/11/26 0:33:52

欢迎关注个人主页:逸狼


创造不易,可以点点赞吗

如有错误,欢迎指出~

目录

CSS

css的三种引入方式

css书写规范

选择器分类

标签选择器

class选择器

id选择器

复合选择器

通配符选择器

 color颜色设置 

border边框设置

width/heigth

内/外边距



CSS

CSS(Cascading Style Sheet),层叠样式表,⽤于控制⻚⾯的样式.CSS能够对⽹⻚中元素(页面上所有内容,称之为元素)位置的排版进⾏像素级精确控制,实现美化⻚⾯的效果.能够做到⻚⾯的样式和 结构分离.

选择器+{⼀条/N条声明}

选择器决定针对谁修改(找谁)

 声明决定修改啥.(⼲啥)

声明的属性是键值对.

使⽤;区分键值对,使⽤:区分键和值.

   <style>
        /* 选中所有的p标签 */
        p{
            /* 设置字体颜色 */
            color:red;
            /* 设置字体大小 */
            font-size:30px;
        }
    </style>

    <p>hello</p>
    <p>hello1</p>
    <p>hello2</p>
    你好

这里是选中了所有的p标签中的内容对其做了样式修改

  • CSS要写到style标签中(后⾯还会介绍其他写法)
  • style标签可以放到⻚⾯任意位置.⼀般放到head标签内.(因为HTML文件是从上往下加载,先加载CSS,方便用户使用)
  • CSS使⽤/**/作为注释.(使⽤ctrl+/快速切换)

css的三种引入方式

css符合"就近原则"(元素离最近的css先生效)

  • 内部样式会出现⼤量的代码冗余,不⽅便后期的维护,所以不常⽤.
  • ⾏内样式,只适合于写简单样式.只针对某个标签⽣效.缺点是不能写太复杂的样式.
  • 外部样式,html和css实现了完全的分离,企业开发常⽤⽅式.

css书写规范

  • css 不区分大小写,但是开发时统一使用小写字母
  • 冒号后⾯带空格  
  • 选择器和{之间也有⼀个空格

选择器分类

CSS选择器的主要功能就是选中⻚⾯指定的标签元素.选中了元素,才可以设置元素的属性.

'注意:class可以被多个元素使用,id只能被一个元素使用(class可以重复,id不能重复)

  • 标签选择器

标签名{} 根据标签选择元素

/* 选择所有的a标签, 设置颜⾊为红⾊ */ 
a {
 color: red;
}
/* 选择所有的div标签, 设置颜⾊为绿⾊ */ 
div {
 color: green;
}
  • class选择器

.类名{}  根据类选择元素

    <style>
        .red {
            color: red;
        }
        .green {
            color: green;
        }
    </style>
 

    <p class="red">hello</p>
    <p class="green">hello2</p>
    <p class="blue">hello3</p>
    <span class="red">我是一个span</span>
    <div class="green">我是一个div</div>
  • id选择器

#id{}  根据id选中元素

/* 选择id为submit的元素, 设置颜⾊为红⾊ */ 
#submit {
 color: red;
}
  • 复合选择器

标签名.类{}  多个单选择器的组合

  1. 空格 表示后代
  2. 没空格 表示交集
  3. 逗号 表示并集
  4. > 表示相邻后代 
        /* 1.空格表示后代(儿子或孙子都行) 这里表示要满足ul里中找到li,将li设置为红色 */
        ul li{
            color:red;
        }

        /* 2.没空格 表示交集 这里表示p标签和red类都要满足的设置为 红色*/
        p.red {
            color: red;
        }
        /* 3.逗号表示并集 这里表示red类和green类字体都设为 40px  */
        .red, .green{
            font-size: 40px;
        }
        /*4. >表示相邻后代"只能是父子辈(相隔一代)"不能是爷孙辈  */
        ul>li>a{  /*这里表示ul里的li,li中的a标签生效*/
            color: brown;
        }

  • 通配符选择器

通配符{}

/* 设置⻚⾯所有元素, 颜⾊为红⾊*/ 
* {
 color: red;
}

 color颜色设置 

颜⾊有如下⼏种表达⽅式:

  1. 英⽂单词,如red,blue
  2. rgb代码的颜⾊,如rgb(255,0,0)
  3. ⼗六进制的颜⾊如#ff00ff(相同的两个值可以简写为一个,这里可以简写为#f0f)

border边框设置

边框是⼀个复合属性,可以同时设置多个样式,不分前后顺序,浏览器会根据设置的值⾃动判断

.text1{
 border: 1px solid purple;
}

 这里表示选择text1标签设置宽度为1像素,样式为实线的紫色边框

border-width宽度设置,取值顺序

  • 一个值=> 上下左右取值相同
  • 两个值 =>上下  左右  
  • 三个值=>上 左右 下
  • 四个值=> 上 右 下 左(顺时针)

width/heigth

width设置宽度,heigth设置高度

只有块级元素可以设置宽高,块级元素独占一行,行内元素不独占一行

常见块级元素:h1-h6,p,div等

常见行内元素:a span

可以将行内元素改成块级元素

使⽤display属性可以修改元素的显⽰模式.

  • display: block 改成块级元素[常⽤]
  • display: inline 改成⾏内元素[很少⽤]
 /* 将span改为 块级元素 */
        span{
            display: block;
        }

内/外边距

内边距和外边距是相对的概念

确定一个边框为参考边框

  • 边框与内容之间的距离是内边距padding
  • 边框与边框之间的距离是外边距margin

当两个元素(相邻)设置边距的值不一致时,取较大的值

    <style>
        div {
            border: 1px solid red;
            padding: 20px;
            margin: 40px;
        }
    </style>

/* 以整个页面的边框为参考边框 ,内边距为100px*/
        html{
            padding:100px
        }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2232254.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【基础】os模块

前言 1、os是operation system&#xff08;操作系统&#xff09;的缩写&#xff1b;os模块就是python对操作系统操作接口的封装。os模块提供了多数操作系统的功能接口函数。&#xff08;OS模块提供了与操作系统进行交互的函数&#xff09; 2、操作系统属于Python的标准实用程…

Linux---cp命令

Linux cp 命令 | 菜鸟教程 (runoob.com) 命令作用&#xff1a; cp命令主要用于复制文件或目录 语法: cp [options] source dest cp [选项] 源文件 目标文件 source:要复制的文件或目录的名称 dest:复制后的文件或目录的名称 注意&#xff1a;用户使用该指令复制目录时&…

MyBatis-Plus快速入门:从安装到第一个Demo

一、前言 在现代 Java 应用程序中&#xff0c;数据访问层的效率与简洁性至关重要。MyBatis-Plus 作为 MyBatis 的增强工具&#xff0c;旨在简化常见的数据操作&#xff0c;提升开发效率。它提供了丰富的功能&#xff0c;如自动生成 SQL、条件构造器和简单易用的 CRUD 操作&…

【android12】【AHandler】【3.AHandler原理篇AHandler类方法全解】

AHandler系列 【android12】【AHandler】【1.AHandler异步无回复消息原理篇】-CSDN博客 【android12】【AHandler】【2.AHandler异步回复消息原理篇】-CSDN博客 其他系列 本人系列文章-CSDN博客 1.简介 前面两篇我们主要介绍了有回复和无回复的消息的使用方法和源码解析&a…

美发系统——职员绩效和提成——调试过程

一、学会通过现象看本质 首先&#xff0c;通过现象看本质能够让技术研究者更深入地理解问题。在面对技术故障或挑战时&#xff0c;表面的现象往往只是冰山一角&#xff0c;如果只关注表象&#xff0c;可能会采取治标不治本的解决方法。而洞察本质则可以找到问题的根源&#xf…

记一次:Clickhouse同步mysql数据库

ClickHouse可以通过使用MaterializeMySQL引擎来实现与MySQL的数据同步。 前言&#xff1a;因为数据量比较大&#xff0c;既然要分库&#xff0c;为何不让clickhouse同步一下mysql数据库呢&#xff1f; 零、前期准备--mysql的查询和配置 1 查询mysql的配置状态 查询以下语句…

教程:使用 InterBase Express 访问数据库(二)

1. 添加数据模块(IBX 通用教程) 本节将创建一个数据模块(TDataModule),这是一种包含应用程序使用的非可视组件的表单。 以下是完全配置好的 TDataModule 的视图: 创建 TDataModule 后,您可以在其他表单中使用这个数据模块。 2. 添加 TDataModule 要将数据模块添加到…

Matlab实现海马优化算法(SHO)求解路径规划问题

目录 1.内容介绍 2.部分代码 3.实验结果 4.内容获取 1内容介绍 海马优化算法&#xff08;SHO&#xff09;是一种受自然界海马行为启发的优化算法&#xff0c;它通过模拟海马在寻找食物和配偶时的探索、跟踪和聚集行为来搜索最优解。SHO因其高效的全局搜索能力和局部搜索能力而…

002-Kotlin界面开发之Kotlin旋风之旅

Kotlin旋风之旅 Compose Desktop中哪些Kotlin知识是必须的&#xff1f; 在学习Compose Desktop中&#xff0c;以下Kotlin知识是必须的&#xff1a; 基础语法&#xff1a;包括变量声明、数据类型、条件语句、循环等。面向对象编程&#xff1a;类与对象、继承、接口、抽象类等。…

Unity XR Interaction Toolkit 开发教程(2):导入 SDK【3.0 以上版本】

文章目录 &#x1f4d5;课程总结&#x1f4d5;安装 Unity 编辑器与打包模块&#x1f4d5;导入 OpenXR&#x1f4d5;导入 XR Interaction Toolkit&#x1f4d5;打包发布 获取完整课程以及答疑&#xff0c;工程文件下载&#xff1a; https://www.spatialxr.tech/ 视频试看链接&a…

clickhouse运维篇(二):多机器手动部署ck集群

熟悉流程并且有真正部署需求可以看一下我的另一篇简化部署的文章&#xff0c;因为多节点配置还是比较麻烦的先要jdk、zookeeper&#xff0c;再ck&#xff0c;还有各种配置文件登录不同机器上手动改配置文件还挺容易出错的。 clickhouse运维篇&#xff08;三&#xff09;&#x…

RabbitMQ交换机类型

RabbitMQ交换机类型 1、RabbitMQ工作模型2、RabbitMQ交换机类型2.1、Fanout Exchange&#xff08;扇形&#xff09;2.1.1、介绍2.1.2、示例2.1.2.1、生产者2.1.2.2、消费者2.1.2.3、测试 2.2、Direct Exchange&#xff08;直连&#xff09;2.2.1、介绍2.2.2、示例2.2.2.1、生产…

MoonNet基准测试更新

基准测试 引言&#xff1a;为了展示MoonNet网络库支持的动态负载均衡功能&#xff0c;我进行了吞吐量测试&#xff0c;以突出其性能表现。由于该库的动态负载均衡策略包括动态线程调度&#xff0c;测试中的线程数变化是不稳定的。这种动态调整使得直接与其他库采用固定线程数的…

RHCE——笔记

nfs服务器 一、简介 NFS&#xff08;网络文件系统&#xff09; 允许网络中的计算机&#xff08;不同的计算机、不同的操作系统&#xff09;之间通过TCP/IP网络共享资源&#xff0c;主要在unix系列操作系统上使用。在NFS的应用中&#xff0c;本地NFS的客户端应用可以透明地读…

2023年SCRM系统排名分析及市场趋势解读

内容概要 当前&#xff0c;SCRM&#xff08;社交客户关系管理&#xff09;系统在企业运营中的重要性日益凸显&#xff0c;尤其是在快速发展的数字经济环境中。2023年的SCRM市场展现出多元化与专业化的趋势&#xff0c;不同企业在客户关系管理方面的需求各有不同&#xff0c;这…

上云管理之Git/GitHub/GitLab 详解(一)

上云管理之Git/GitHub/GitLab 详解(一&#xff09; 引言1. GIT软件安装2.初始化配置与提交代码2.1. 初始化配置2.2 本地仓库代码提交2.2.1 初始化仓库并提交代码2.2.2 再次提交已修改的代码2.2.3 文件夹层次结构代码提交 2.3 GIT 的文件状态 3.GIT 分支3.1. 分支的切换与删除3.…

10款录屏软件来助你视频回放!!

现在互联网的普及&#xff0c;实时在线视频交流已是家常便饭&#xff0c;有时我们需要进行视频回顾&#xff0c;这就需要借助录屏软件。不管是用于游戏录制、课程制作、教学培训还是项目汇报等&#xff0c; 一款好的录屏软件都能起到事半功倍的效果。今天&#xff0c;我就来跟大…

Python复习2

一、封装函数 #自己封装len函数 s1 "hello,python" print(f"s1的长度为{len(s1)}")def my_len(data):count0for i in data:count 1print(f"{data}的长度为{count}")my_len(s1) 二、容器的排序&#xff08;排序之后的结果都会变成列表&#xf…

利用EasyExcel实现简易Excel导出

目标 通过注解形式完成对一个方法返回值的通用导出功能 工程搭建 pom <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance&qu…

基于java+SpringBoot+Vue的校园资料分享平台设计与实现

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; Springboot mybatis Maven mysql5.7或8.0等等组成&#x…