CSS详细教程

文章目录

  • 前言
  • 一、CSS应用方式
    • 1.在标签上
    • 2.在head标签的style上
    • 3.写在文件中
  • 二、选择器
    • 1.ID选择器
    • 2.类选择器
    • 3.标签选择器
    • 4.属性选择器
    • 5.后代选择器
    • 6.样式覆盖
  • 三、CSS样式
    • 1.高度和宽度
    • 2.块级标签和行内标签转换
    • 3.字体颜色/大小/粗细/样式/对齐/边框
    • 4.浮动
    • 5.背景色
    • 6.内边距
    • 7.边界
    • 8.外边距
    • 9.鼠标悬停效果
    • 10.内容增加
    • 11.位置

前言

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。该博客将详细介绍常见的CSS样式以及相关内容。

一、CSS应用方式

1.在标签上

<img src="..." stype="height: 100px">

2.在head标签的style上

  • 相当于把样式取了一个名字
  • 后续使用直接在标签中添加：class=‘名字’
...
<head><meta charset="UTF-8"><title>Document</title><style>.c1 {color: red;}</style></head>
<body><h1 class="c1">用户注册</h1>
...

3.写在文件中

在common.css文件中（一般放在static文件夹中）

.c1 {color: red;
}

在.html文件中调用

...
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="/static/common.css" /></head>
<body><h1 class="c1">用户注册</h1>
...

二、选择器

1.ID选择器

  • 用id
#c1 {color: red;
}<div id='c1'></div>

2.类选择器

  • 用class
.c1 {color: red;
}<div class='c1'></div>

3.标签选择器

  • 直接对标签进行处理
  • 后续所有该标签全部使用该样式
div{color: red;
}<div>xxx</div>

4.属性选择器

  • 直接对标签的某种属性处理
  • 后续所有该标签的该属性全部使用该样式

样例1

<head><title>Document</title><link rel="stylesheet" href="/static/commons.css"><style>input[type="text"]{border: 1px solid red;}</style>
</head>

样例2

<style>.v1[xx="456"]{color: gold;	<!-- 橙色 -->}
</style>...<body>
...<div class="v1" xx="123">a</div><div class="v1" xx="456">b</div><div class="v1" xx="789">c</div>
...
</body>

5.后代选择器

  • 让子孙都可以使用生效
<style>.zz h2{color:chartreuse;}
</style>
</head><body><div class="zz" ><div><h2>我是div里面的h2</h2></div><h2>我是div外面的h2</h2>
...
  • 只让子使用生效（只生效一层）
<style>.zz > h2{color:chartreuse;}
</style>

6.样式覆盖

  • 当一个标签引用多个样式，会出现属性重复的问题
  • 第一种方式：在head中将优先级最高的写在后面(c3生效)
<style>.c2 {color: darkgoldenrod;}.c3 {color:hotpink;}
</style><body><div class="c2 c3">我是天才</div>
</body>
  • 第二种方式：在head中将优先级高的样式后面添加! important(c2生效)
<style>.c2 {color: darkgoldenrod !important;}.c3 {color:hotpink;}
</style>

三、CSS样式

1.高度和宽度

  • 宽度支持百分比，但是高度不支持，因为高度具有不确定性
  • 行内标签默认无效，块级标签默认有效
.c4 {height: 300px;width: 500px;}

2.块级标签和行内标签转换

  • display: inline-block;让行内标签对height和width生效
  • 而且只占有需要大小，还是有行内标签的属性
<style>
.c4 {display: inline-block;height: 300px;width: 500px;border: 1px solid red;}
</style>...<body><span class="c4">联通</span>
</body>
  • 块级和行内标签相互转换
	<div style="display: inline;">移动</div><span style="display: block;">联通</span>

3.字体颜色/大小/粗细/样式/对齐/边框

<head><meta charset="UTF-8"><title>Document</title><style>.c1 {color: #00FF7F;                   /* 字体颜色 */font-size: 20px;                  /* 字体大小 */font-weight: 600;                 /* 字体粗细 */font-family: Microsoft Yahei;     /* 字体样式 */text-align: center;               /* 水平方向居中 */line-height: 50px;                /* 垂直方向居中 */border: 1px solid red;            /* 边框 */}</style>
</head>

4.浮动

  • 如果在块级标签中，加入了float属性，那么这个块级标签奖不会再占用一整行，而是自己有多大就占用多大
  • 如果你让标签浮动起来之后，就会脱离文档流
  • 解决办法: 在同级子标签的最下面添加 style="clear: both;"
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.item {float: left;width: 280px;height: 170px;border: 1px solid red;}</style>
</head>
<body><div style="background-color: blue;"><div class="item"></div><div class="item"></div><div class="item"></div><div style="clear: both;"></div></div>
</body>
</html>

5.背景色

  • 颜色都有三种表达方式：HTML颜色代码、rgb(x,x,x)、颜色英文
background-color: 颜色;

6.内边距

  • padding-top | padding-left | padding-right | padding-botton
  • 其实上面的四个上下左右的padding可以简写为padding: 20px 20px 20px 20px,顺序为上右下左(顺时针方向)
  • 给自己增加一定距离，会使得该块所占空间增大
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.outer {border: 1px solid red;height: 200px;width: 200px;padding-top: 20px;padding-left: 20px;padding-right: 20px;padding-bottom: 20px;}</style>
</head>
<body><div class="outer"><div>hello</div><div>world</div></div>
</body>
</html>

7.边界

  • border功能：设置边界的像素/样式/颜色
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.left {float: left;}.c1 {height: 200px;width: 300px;border: 3px dotted red;margin: 50px;}.c2 {height: 200px;width: 300px;border: 3px solid red;border-left: 3px solid green;margin: 50px;}.c3 {height: 200px;width: 300px;margin: 50px;background-color: bisque;border-left: 2px solid transparent;  /* 透明色 */}.c3:hover {border-left: 2px solid rgb(35, 211, 19);}</style>
</head>
<body><div class="c1 left">我是虚线~</div><div class="c2 left">我是实线~左边框是绿色,上下右边框是红色</div><div class="c3 left">我是透明色,鼠标碰到我边框会变色哦~</div><div style="clear: both;"></div>
</body>
</html>

8.外边距

  • 给自己和别人之间增加距离，视觉上本块不会增大
  • margin为外边距，及边框外到外部容器的距离，有四种参数设置方式：
    margin:5px;/四边外边距都为5px/
    margin:5px 10px;/上下外边距5px，左右外边距10px/
    margin:5px 10px 15px;/上外边距5px，左右外边距10px，下外边距15px/
    margin:5px 10px 15px 20px;/顺时针方向：上5px，右10px，下15px，左20px/
    margin:0 auto;/上下外边距为0，左右自动，实际效果为左右居中/
<body><div style="height: 200px; background-color: aquamarine;"></div><div style="height: 200px; background-color:blueviolet; margin-top: 20px;"></div>
</body>
  • margin/border/padding/content的关系
    请添加图片描述

9.鼠标悬停效果

  • hover功能：鼠标移动到此会改变某些样式，实现视觉效果
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.c1 {color:brown;}.c1:hover {color: green;font-size: 20px;}.c2 {width: 300px;height: 300px;border: 3px solid red;}.c2:hover {border: 3px solid green;}.download {display: none;}.app:hover .download {display: block;}</style>
</head>
<body><div class="c1">字体碰到鼠标变成绿色</div><div class="c2">边框碰到鼠标变成绿色</div><div class="app"><div>鼠标放我这里触发显示二维码</div><div class="download"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/78c30d4f259ed43ab20e810a522a6249.png" alt=""></div></div>
</body>
</html>

10.内容增加

  • after功能：实现文本内容的增加
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.c1:after {content: "大帅哥"}</style>
</head>
<body><div class="c1">张三</div>
</body>
</html>
  • after一般像下面这样用,不用每次都写stype="clear: both;"
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.clearfix:after {content: "";display: block;clear: both;}.item {float: left;}</style>
</head>
<body><div class="clearfix"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div>
</body>
</html>

11.位置

  • position
  • fixed功能：固定在窗口的某个位置

样例1：返回顶部框

.back {position: fixed;width: 60px;height: 60px;border: 1px solid red;right: 50px;bottom: 50px;}

样例2：中间对话框

  • opacity可以设置透明度
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>body {margin: 0;}.dialog {position: fixed;height: 300px;width: 500px;background-color: white;/*left: 0; 和 right: 0; 分别将元素的左边界和右边界的定位都设为 0，这会使得元素水平居中对齐*//*而 margin: 0 auto; 则会使元素在水平方向上的外边距自动分配，从而实现水平居中*/left: 0;right: 0;margin: 0 auto;/*竖直居中*/top: 200px;z-index: 1000;  /* 防止对话框被mask遮住 */}.mask {background-color: black;position: fixed;left: 0;right: 0;top: 0;bottom: 0;opacity: 0.7;z-index: 999;   /* 防止对话框被mask遮住 */}</style>
</head>
<body><div style="height: 1000px;"></div><!-- 如果css中不加 z-index 设置优先级的话 --><!-- 那么下面的 dialog 如果在 mask 的上面,对话框就显示不出来了 --><!-- 设置优先级可以解决此问题 --><div class="dialog"></div><div class="mask"></div>
</body>
</html>
  • relative和absolute功能：实现相对位置的摆放
  • 父类标签写relative，子类写absolute，实现相对性
...<style>.app{position: relative;}.app .download {position: absolute;display: none;height: 100px;width: 100px;}.app:hover .download {display: block;}</style></head>
<body><div class="header"><div class="container"><div class="menu"><a href="https://www.mi.com">小米商城</a><a href="https://www.mi.com">MIUI</a><a href="https://www.mi.com">云平台</a><a href="https://www.mi.com">有品</a><a href="https://www.mi.com">小爱开放平台</a><a href="https://www.mi.com" class="app">app下载<div class="download"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/78c30d4f259ed43ab20e810a522a6249.png" alt=""></div></a></div><div class="account"><a href="https://www.mi.com">登录</a><a href="https://www.mi.com">注册</a><a href="https://www.mi.com">消息通知</a></div>'<div style="clear: both;"></div></div></div>
...

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

IDEA上的Scala环境搭建

IDEA上的Scala环境搭建

Scala环境搭建 一、搭建Scala开发环境 安装Scala编译器 安装scala-2.12.10.msi 检查scala安装情况 在dos窗口输入scala&#xff0c;检查是否能够进入编译器。进行简单的scala命令计算 在IDEA中进行scala编码 File - Settings - Plugins - MarketPlace中搜索scala插件 安…
阅读更多...
总结mac下解决matplotlib中文显示问题的几种方法

总结mac下解决matplotlib中文显示问题的几种方法

一、前言&#xff1a; 使⽤matplotlib画图时&#xff0c;由于matplotlib默认没有中⽂&#xff0c;显⽰中文时会出现空⽩⼩⽅块。 二、方法&#xff1a; 2.1 matplotlib中使用SimHei字体 1&#xff09;进入终端后查看matplotlib的字体路径&#xff1a; $ python >>&g…
阅读更多...
Mac玩《幻兽帕鲁》为什么打不开D3DMetal？d3d错误怎么办 d3dxl error

Mac玩《幻兽帕鲁》为什么打不开D3DMetal？d3d错误怎么办 d3dxl error

我之前发了一篇讲Mac电脑玩Steam热门新游《幻兽帕鲁》的文章&#xff08;没看过的点这里&#xff09;&#xff0c;后来也看到很多朋友去尝试了&#xff0c;遇到了一些问题&#xff0c;无法进入《幻兽帕鲁》游戏&#xff0c;或者是玩的时候卡顿以及出现黑屏&#xff0c;通过我的…
阅读更多...
jQuery+CSS3自动轮播焦点图特效源码

jQuery+CSS3自动轮播焦点图特效源码

jQueryCSS3自动轮播焦点图特效源码&#xff0c;源码由HTMLCSSJS组成&#xff0c;双击html文件可以本地运行效果&#xff0c;也可以上传到服务器里面 下载地址 jQueryCSS3自动轮播焦点图特效源码
阅读更多...
mac os 配置两个github账号

mac os 配置两个github账号

1. 清空git全局配置的username和email git config --global --unset user.name git config --global --unset user.emailgit config --list 可以查看是否清空了 2. 定义两个标识符，这两个标识符以后会被用来代替“github.com”来使用。 假设两个账号的邮箱地址分别是a@gmai…
阅读更多...
计算机视觉之三维重建（1）---摄像机几何

计算机视觉之三维重建（1）---摄像机几何

文章目录 一、针孔模型和透镜1.1 针孔摄像机1.2 近轴折射模型1.3 透镜问题 二、摄像机几何2.1 像平面和像素平面2.2 齐次坐标下的投影变换2.3 摄像机倾斜2.4 规范化摄像机2.5 世界坐标系2.6 Faugeras定理2.7 投影变换性质&#xff1a; 三、其他投影摄像机模型3.1 弱透视投影摄像…
阅读更多...
深入解析：在 Node.js 中删除文件的正确姿势

深入解析：在 Node.js 中删除文件的正确姿势

引言 在 Node.js 中处理文件尤其是移除文件&#xff0c;对于维护高效应用程序至关重要。储存和秩序当道的今天&#xff0c;删除不必要或冗余的文件能力显得尤为关键。本文深入探讨你会想要使用这个强大功能的时刻和原因&#xff0c;并通过各种案例展示了这个概念&#xff0c;同…
阅读更多...
明远创意生活引领经典家纺品牌“大朴”走向新生

明远创意生活引领经典家纺品牌“大朴”走向新生

十二年前,有一个初创的国产家纺品牌,大胆地向消费者喊出领先于行业的标准——“无甲醛、无荧光增白剂、无致癌物”。凭借这样极致的健康承诺,“大朴”国内销售规模迅速超过一亿人民币,成功引领行业风气,收获了众多忠实粉丝。 2023年,因资金链断裂,“大朴”原公司破产清算,这个…
阅读更多...
滴答拍摄影项目|基于Spring Boot框架+ Mysql+Java+ Tomcat的滴答拍摄影项目设计与实现(可运行源码+数据库+设计文档)

滴答拍摄影项目|基于Spring Boot框架+ Mysql+Java+ Tomcat的滴答拍摄影项目设计与实现(可运行源码+数据库+设计文档)

推荐阅读100套最新项目 最新ssmjava项目文档视频演示可运行源码分享 最新jspjava项目文档视频演示可运行源码分享 最新Spring Boot项目文档视频演示可运行源码分享 2024年56套包含java&#xff0c;ssm&#xff0c;springboot的平台设计与实现项目系统开发资源&#xff08;可…
阅读更多...
使用 stable-diffusion 入门级教程【Mac】

使用 stable-diffusion 入门级教程【Mac】

最近一直在短视频平台刷到AI生成的图片&#xff0c;质量也非常不错。术哥也跟我讲解了下如何安装使用。于是周末试了试。 也差点变成从入门到放弃了&#xff0c;所以也把过程中遇到的问题记录一下。 目前基本上运行正常&#xff0c;只是内存稍微小了点&#xff0c;把质量调低即…
阅读更多...
创建一个electron-vite项目

创建一个electron-vite项目

前置条件&#xff1a;非常重要&#xff01;&#xff01;&#xff01; npm: npm create quick-start/electronlatest yarn: yarn create quick-start/electron 然后进入目录&#xff0c;下载包文件&#xff0c;运行项目 到以上步骤&#xff0c;你已经成功运行起来一个 electr…
阅读更多...
爬虫技术实战案例解析

爬虫技术实战案例解析

目录 前言 案例背景 案例实现 案例总结 结语 前言 作者简介&#xff1a; 懒大王敲代码&#xff0c;计算机专业应届生 今天给大家聊聊爬虫技术实战案例解析&#xff0c;希望大家能觉得实用&#xff01; 欢迎大家点赞 &#x1f44d; 收藏 ⭐ 加关注哦&#xff01;&#x1…
阅读更多...
Flutter-底部弹出框（Widget层级）

Flutter-底部弹出框（Widget层级）

需求 支持底部弹出对话框。支持手势滑动关闭。支持在widget中嵌入引用。支持底部弹出框弹出后不影响其他操作。支持弹出框中内容固定头部和下面列表时&#xff0c;支持触摸头部并在列表不在头部的时候支持滑动关闭 简述 通过上面的需求可知&#xff0c;就是在界面中可以支持…
阅读更多...
机器学习-04-分类算法-04-支持向量机SVM

机器学习-04-分类算法-04-支持向量机SVM

总结 本系列是机器学习课程的系列课程&#xff0c;主要介绍机器学习中分类算法&#xff0c;本篇为分类算法与SVM算法部分。 本门课程的目标 完成一个特定行业的算法应用全过程&#xff1a; 懂业务会选择合适的算法数据处理算法训练算法调优算法融合 算法评估持续调优工程化…
阅读更多...
HTML5球体下落粒子爆炸特效

HTML5球体下落粒子爆炸特效

HTML5球体下落粒子爆炸特效&#xff0c;源码由HTMLCSSJS组成&#xff0c;双击html文件可以本地运行效果&#xff0c;也可以上传到服务器里面 下载地址 HTML5球体下落粒子爆炸特效
阅读更多...
阿里云2核4G4M轻量应用服务器价格165元一年

阿里云2核4G4M轻量应用服务器价格165元一年

阿里云优惠活动&#xff0c;2核4G4M轻量应用服务器价格165元一年&#xff0c;4Mbps带宽下载速度峰值可达512KB/秒&#xff0c;系统盘是60GB高效云盘&#xff0c;不限制月流量&#xff0c;2核2G3M带宽轻量服务器一年87元12个月&#xff0c;在阿里云CLUB中心查看 aliyun.club 当前…
阅读更多...
数据结构—稀疏多项式相加

数据结构—稀疏多项式相加

利用链表实现两个稀疏多项式相加。 代码 #include <iostream> using namespace std;// 定义多项式项结构体 typedef struct {int x; // 系数int y; // 指数 } Elemtype;// 定义链表节点结构体 typedef struct Node {Elemtype data;struct Node* next; } *LinkList, N…
阅读更多...
数据结构中单向链表（无头）的学习

数据结构中单向链表（无头）的学习

一.数据结构 1.定义 一组用来保存一种或者多种特定关系的数据的集合&#xff08;组织和存储数据&#xff09; 程序的设计&#xff1a;将现实中大量而复杂的问题以特定的数据类型和特定的存储结构存储在内存中&#xff0c; 并在此基础上实现某个特定的功能的操…
阅读更多...
VSCode + PicGo + Github 实现markdown图床管理

VSCode + PicGo + Github 实现markdown图床管理

目录 PicGo客户端VSvode插件 PicGo客户端 PicGo 是一个图片上传管理工具 官网&#xff1a;https://molunerfinn.com/PicGo/ github图传使用说明&#xff1a;https://picgo.github.io/PicGo-Doc/zh/guide/config.html#GitHub图床 步骤&#xff1a; 1、创建一个github公开仓库…
阅读更多...
小程序搜索排名优化二三事

小程序搜索排名优化二三事

小程序的优化主要是排名优化和性能优化两个版块。性能优化这方面主要靠开发者自己完善&#xff0c;我们团队提供的服务就是把产品的排名打上去&#xff0c;获得更多的自然流量&#xff0c;实现盈利。 如何提升小程序的搜索排名主要从如下几个方面出发&#xff1a; 首先要知道…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023