一篇讲完CSS的核心内容

目录

一 、引言

1.1CSS概念

二、 CSS简介

2.1 什么是CSS

2.2 CSS能干什么

2.3 CSS书写规范

2.4 基础语法

三、 CSS导入方式

3.1 内嵌方式(内联方式)

3.2 内部方式

3.3 外部方式

四、 CSS选择器

4.1 基本选择器 [重点]

4.2 属性选择器

五、 CSS属性

5.1 文字属性

5.2 文本属性

5.3 背景属性

5.4 列表属性

5.5 尺寸属性

5.6 显示属性

5.7 定位属性

相对

绝对定位

固定定位

六、 CSS盒子模型[重要]

6.1 边框相关属性

6.2 外边距相关属性

6.3 内边距相关属性

一 、引言

1.1CSS概念

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

二、 CSS简介

2.1 什么是CSS

  • CSS :全称：Cascading Style Sheets 层叠样式表,定义如何显示HTML元素

  • 多个样式可以层层覆盖叠加，如果不同的css样式对同一html标签进行修饰，样式有冲突的应用优先级高的，不冲突的共同作用

2.2 CSS能干什么

  • 修饰美化html网页。

  • 外部样式表可以提高代码复用性从而提高工作效率。

  • html内容与样式表现分离，便于后期维护。

美化前

image-20230307175157869

美化后

2.3 CSS书写规范

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明

  • 选择器通常是您需要改变样式的 HTML 元素。

  • 每条声明由一个属性和一个值组成。

2.4 基础语法

选择器｛属性：值; 属性:值….. ｝

语法示例

css_selector

h1 {color:red;font-size:14px;
}

注意事项：

  • 请使用花括号来包围声明

  • 多个属性声明之间使用分号;分开

  • css对大小不敏感，如果涉及到与html文档一起使用时，class与id名称对大小写敏感

三、 CSS导入方式

Css的导入方式是指,如何在HTML中使用CSS,或者说如何让CSS对HTML生效

3.1 内嵌方式(内联方式)

把CSS样式嵌入到html标签当中，类似属性的用法

 <div style="color:blue;font-size:50px">This is my HTML page. </div>

image-20231113112314702

3.2 内部方式

在head标签中使用style标签引入css

<style type=“text/css”> //告诉浏览器使用css解析器去解析div{color:red;font-size:50px}
</style>

image-20231113112343138

3.3 外部方式

将css样式抽成一个单独文件，使用者直接引用

创建单独文件 div.css
内容示例：div{color:green;font-size:50px}
引用语句写在head标签内部<link rel="stylesheet" type="text/css" href=“div.css" />rel:代表当前页面与href所指定文档的关系[固定]href:css文件地址

image-20231113112503635

四、 CSS选择器

选择器主要就是选到标签,给其加样式

选择器 {属性:值
}

主要用于选择需要添加样式的html元素

  • 但是选择方式不一样,选择的标签不一样

  • 可以选择一个标签,也可以选择同名所有标签,可以选择一类标签,甚至还可以选择后过滤选择

4.1 基本选择器 [重点]

基本选择器

  • 元素选择器(标签名)

  • id选择器

  • 类选择器

元素选择器：(标签名选择器)

  • 在head中使用style标签引入

  • 在其中声明元素选择器

html标签{属性:属性值
}
<style type="text/css">span{color: red;font-size: 100px}
</style>  
  

id选择器：

  • 给需要修改样式的html元素添加id属性标识

  • 在head中使用style标签引入

  • 在其中声明id选择器

     #id{属性:属性值
}
创建id选择器：
    <div id="s1">hello,everyone!</div><div id="s2">hello,everyone!</div><div id="s3">hello,everyone!</div>
根据id选择器进行html文件修饰 

    <style type="text/css">#s1{color: red;font-size: 100px}#s2{color: green;font-size: 100px}#s3{color: blue;font-size: 100px}</style>

class选择器：

  • 给需要修改样式的html元素添加class属性标识

  • 在head中使用style标签引入

  • 在其中声明class选择器

     .class名{属性:属性值
}

创建class选择器：
    <div class="s1">hello,everyone!</div><div class="s2">hello,everyone!</div><div class="s3">hello,everyone!</div>
根据id选择器进行html文件修饰：

    <style type="text/css">.s1{color: purple;font-size: 100px}.s2{color: pink;font-size: 100px}.s3{color: yellow;font-size: 100px}</style>

备注：以上基本选择器的优先级从高到低：id选择器>class选择器>元素选择器

4.2 属性选择器

  • 根据元素的属性及属性值来选择元素。

  • 在head中使用style标签引入在其中声明

 htm标签[属性='属性值']{css属性:css属性值;}
​html标签[属性]{css属性:css属性值;}
body内容：
    <form name="login" action="#" method="get"><font size="3">用户名：</font><input type="text" name="username" value="zhangsan"><br><font size="3">密码：</font><input type="password" name="password" value="123456"><br/><input type="submit" value="登录"></form>
head中书写：

    <style type="text/css">input[type='text'] {background-color: pink;}input[type='password'] {background-color: yellow;}font[size] {color: green}a[href] {color: blue;}</style>

了解:组合选择,兄弟选择器,层级选择器等等 CSS 选择器参考手册 (w3school.com.cn)

image-20240326104855147

五、 CSS属性

5.1 文字属性

属性名取值描述
font-size数值设置字体大小（像素/百分比）
font-family默体、宋体、楷体等设置字体样式
font-stylenormal正常; italic斜体;设置斜体样式
font-weight100~900数值;bold;bolder;粗体样式

5.2 文本属性

属性名取值描述
color十六进制;表示颜色的英文单词;设置文本颜色
text-indent5px缩进5像素;20%缩进父容器宽度的百分之二十;缩进元素中文本的首行
text-decorationnone;underline;overline;blink;文本的装饰线
text-alignleft;right;center文本水平对齐方式
word-spacingnormal;固定值;像素英语单词之间的间隔,得有空格
line-heightnormal;固定值;像素设置文本的行高

5.3 背景属性

属性名取值描述
background-color16进制;用于表示颜色的英语单词;设置背景色
background-imageurl('图片路径')设置背景图片
background-repeatrepeat-y;repeat-x;repeat;no-repeat;设置背景图的平铺方向
background-positiontop;bottom;left;right ; center;改变图像在背景中的位置
background-size像素;百分比设置图片大小

5.4 列表属性

属性名取值描述
list-style-typedisc等改变列表的标识类型
list-style-imageurl("图片地址")用图像表示标识

阿里巴巴矢量图标库

5.5 尺寸属性

  • width:设置元素的宽度,单位 px %

  • height:设置元素的高度,单位 px %

5.6 显示属性

显示属性display ，以下是常用取值：

  • none:不显示,即隐藏了

  • block:块级显示,占一行

  • inline:行级显示,占部分

5.7 定位属性

使用的是css属性position,属性值有

  • relative (相对)

  • absolute (绝对)

  • fixed (固定)

使用了定位属性后,才可以使用top,bottom,left,right这些位置属性

相对

相对定位(relative)：元素框偏移某个距离，相对于父元素中其正常位置(相对于自己)进行定位。元素仍保持其未定位前的形状，它原本所占的==空间仍保留==。

<head><style type="text/css">h2.pos_left {position: relative;left: -20px}h2.pos_right {position: relative;left: 20px}</style>
</head>
<body><h2>这是位于正常位置的标题</h2><h2 class="pos_left">这个标题相对于其正常位置向左移动</h2><h2 class="pos_right">这个标题相对于其正常位置向右移动</h2><p>相对定位会按照元素的原始位置对该元素进行移动。</p><p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p><p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>

绝对定位

绝对定位(absolute)：元素框==从文档流完全删除==，并相对于最近的定位祖先元素进行定位（祖先元素需要定位）。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框。

<html><head><meta charset="utf-8" /><style type="text/css">h2.pos_abs {position: absolute;left: 100px;top: 150px}</style></head><body><h2 class="pos_abs">这是带有绝对定位的标题</h2><p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p></body>
</html>

绝对和相对定位: 最主要的区别

  • 相对定位后,原来位置还在

  • 绝对定位后,原来位置没了,其他标签元素内容会顶上

固定定位

固定定位(fixed)：元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>#left {width: 200px;height: 200px;background-color: red;position: fixed;left: 0px;bottom: 0px;}#right {width: 200px;height: 200px;background-color: green;position: fixed;right: 0px;bottom: 0px;}#middle{width: 200px;height: 200px;background-color: blue;position: fixed;left: 40%;bottom: 50%;}</style></head><body><div id="left">左下</div><div id="right">右下</div><div id="middle">中间</div></body>
</html>

六、 CSS盒子模型[重要]

盒子模型图

box

6.1 边框相关属性

属性名取值描述
border-stylesolid;double;dashed;dotted等设置边框的样式
border-color16进制;用于表示颜色的英文;设置边框的颜色
border-width数值设置边框的粗
border同时设置线型,颜色,尺寸

6.2 外边距相关属性

margin：外间距,边框和边框外层的元素的距离 (相对于父级元素定位)

属性名描述
margintop;right;bottom;left四个方向的距离
margin-top数值上间距
margin-bottom数值下间距
margin-left数值左间距
margin-right数值右间距

6.3 内边距相关属性

padding：内间距,元素内容和边框之间的距离((top right bottom left))

属性值取值描述
padding-left
padding-right
padding-top
padding-bottom
padding

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

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

Excel的基本应用__1

Excel的基本应用__1

1. 模拟运算 1.1 单变量求解 1.1.1 步骤 1.1.1 效果 1.2 模拟运算表 1.2.1 步骤 1.2.2 效果 2.选择性粘贴--转至 3. Excel中如何使用和定义名称 使用 相当于全局变量&#xff0c;可以在不同表中调用 3.1名称中使用常量 3.2名称中使用函数 调用 可以在不同的表中调用 3.…
阅读更多...
C语言 | Leetcode C语言题解之第433题最小基因变化

C语言 | Leetcode C语言题解之第433题最小基因变化

题目&#xff1a; 题解&#xff1a; int minMutation(char * start, char * end, char ** bank, int bankSize) {int m strlen(start);int **adj (int **)malloc(sizeof(int *) * bankSize);int endIndex -1;for (int i 0; i < bankSize; i) {adj[i] (int *)malloc(si…
阅读更多...
Dynamic Connected Networks for Chinese Spelling Check(ACL2021)

Dynamic Connected Networks for Chinese Spelling Check(ACL2021)

Dynamic Connected Networks for Chinese Spelling Check(ACL2021) 一&#xff0e;概述 文中认为基于bert的非自回归语言模型依赖于输出独立性假设。不适当的独立性假设阻碍了基于bert的模型学习目标token之间的依赖关系&#xff0c;从而导致了不连贯的问题。为些&#xff0c…
阅读更多...
CORS解决浏览器跨域请求（同源策略）限制原理、后端springboot CROS跨域解决方案

CORS解决浏览器跨域请求（同源策略）限制原理、后端springboot CROS跨域解决方案

文章目录 1 浏览器的同源策略1.1 什么是源&#xff08;origin&#xff09;&#xff1f;1.2 跨域请求&#xff1f;1.3 同源策略&#xff08;跨域限制&#xff09;是什么&#xff1f;1.3.1 同源策略的具体限制&#xff1f;1.3.2 浏览器CORS校验 2 CORS解决Ajax跨域问题2.1 CORS概…
阅读更多...
【JavaEE】——内存可见性问题

【JavaEE】——内存可见性问题

阿华代码&#xff0c;不是逆风&#xff0c;就是我疯&#xff0c;你们的点赞收藏是我前进最大的动力&#xff01;&#xff01;希望本文内容能够帮助到你&#xff01; 目录 一&#xff1a;内存可见性问题 1&#xff1a;代码解释 2&#xff1a;结果分析 &#xff08;1&#xf…
阅读更多...
分享开源且强大的HTML5网页视频播放器

分享开源且强大的HTML5网页视频播放器

随着互联网技术的飞速发展&#xff0c;视频内容已成为现代网络体验中不可或缺的一部分。无论是在线教育、娱乐还是企业宣传&#xff0c;高质量的视频播放器都是确保用户获得良好观看体验的关键。HTML5的出现极大地推动了网页视频播放技术的进步&#xff0c;逐渐取代了传统的Fla…
阅读更多...
MySQL篇（日志）

MySQL篇（日志）

目录 一、错误日志 二、二进制日志 1. 简介 2. 作用 3. 参数说明 3.1. 两个参数 3.2. 格式 3.3. 查看 3.4. 删除 4. 查询日志 三、慢查询日志 一、错误日志 错误日志是 MySQL 中最重要的日志之一&#xff0c;它记录了当 mysqld 启动和停止时&#xff0c; 以及服务器…
阅读更多...
三菱FX5U PLC故障处理(各种出错的内容、原因及处理方法进行说明。)

三菱FX5U PLC故障处理(各种出错的内容、原因及处理方法进行说明。)

对使用系统时发生的各种出错的内容、原因及处理方法进行说明。 故障排除的步骤 发生故障时&#xff0c;按以下顺序实施故障排除。 1.确认各模块是否正确安装或正确配线。 2、确认CPU模块的LED。 3.确认各智能功能模块的LED。(各模块的用户手册) 4、连接工程工具&#xff0c;启…
阅读更多...
kubernetes网络(三)之bird的路由反射器的使用

kubernetes网络(三)之bird的路由反射器的使用

一、摘要 上一篇文章中我们用 bird 程序实现了三台服务器之间的BGP full mesh。本文我们将实验把full mesh方式改为RR 路由反射器方式 &#xff0c;让宿主的BIRD相互学习到对方的容器网段&#xff0c;从而达到容器网段能相互通信的目的。 二、bird 实验 bird简介 BIRD 实际…
阅读更多...
操作系统 | 学习笔记 | | 王道 | 5.3 磁盘和固态硬盘

操作系统 | 学习笔记 | | 王道 | 5.3 磁盘和固态硬盘

5.3 磁盘和固态硬盘 5.3.1 磁盘 磁盘结构 磁盘&#xff1a;磁盘的表面由一些磁性物质组成&#xff0c;可以用这些磁性物质来记录二进制数据 磁道&#xff1a;磁盘的盘面被划分成一个个磁道。这样的一个“圈”就是一个磁道 扇区&#xff1a;一个磁道又被划分成一个个扇区&am…
阅读更多...
828华为云征文 | 在华为云X实例上安装部署企业Wiki知识分享平台的实践

828华为云征文 | 在华为云X实例上安装部署企业Wiki知识分享平台的实践

目录 前言 1. 华为云X实例介绍 1.1 华为云Flexus云服务概述 1.2 Flexus云服务器X实例的特点 2. MM-Wiki知识分享平台介绍 2.1 什么是MM-Wiki 2.2 MM-Wiki的功能特点 3. 安装部署环境 4. MM-Wiki安装部署步骤 4.1 下载与准备工作 4.2 安装MM-Wiki 4.3 启动与运行 5…
阅读更多...
[spring]MyBatis介绍 及 用MyBatis操作简单数据库

[spring]MyBatis介绍 及 用MyBatis操作简单数据库

文章目录 一. 什么是MyBatis二. MyBatis操作数据库步骤创建工程创建数据库创建对应实体类配置数据库连接字符串写持久层代码单元测试 三. MyBatis基础操作打印日志参数传递增删改查 四. MyBatis XML配置文件配置链接字符串和MyBatis写持久层代码方法定义Interface方法实现xml测…
阅读更多...
从入门到精通：QT 100个关键技术关键词

从入门到精通：QT 100个关键技术关键词

Qt基础概念 Qt Framework - 一个跨平台的C图形用户界面应用程序开发框架。它不仅提供了丰富的GUI组件&#xff0c;还包括网络、数据库访问、多媒体支持等功能。 Qt Creator - Qt官方提供的集成开发环境&#xff08;IDE&#xff09;&#xff0c;集成了代码编辑器、项目管理工具、…
阅读更多...
Linux网络之UDP与TCP协议详解

Linux网络之UDP与TCP协议详解

文章目录 UDP协议UDP协议数据报报头 TCP协议确认应答缓冲区 超时重传三次握手其他问题 四次挥手滑动窗口流量控制拥塞控制 UDP协议 前面我们只是说了UDP协议的用法,但是并没有涉及到UDP协议的原理 毕竟知道冰箱的用法和知道冰箱的原理是两个层级的事情 我们首先知道计算机网…
阅读更多...
【RabbitMQ】RabbitMQ 的概念以及使用RabbitMQ编写生产者消费者代码

【RabbitMQ】RabbitMQ 的概念以及使用RabbitMQ编写生产者消费者代码

目录 1. RabbitMQ 核心概念 1.1生产者和消费者 1.2 Connection和Channel 1.3 Virtual host 1.4 Queue 1.5 Exchange 1.6 RabbitMO工作流程 2. AMQP 3.RabbitMO快速入门 3.1.引入依赖 3.2.编写生产者代码 ​3.3.编写消费者代码 4.源码 1. RabbitMQ 核心概念 在安装…
阅读更多...
【Redis】Linux下安装配置及通过C++访问Redis

【Redis】Linux下安装配置及通过C++访问Redis

文章目录 一、Linux Centos 7.0版本下的安装及配置二、通过C访问Redis 一、Linux Centos 7.0版本下的安装及配置 通过源来安装&#xff0c;此次安装的版本为 redis 5.0 的&#xff0c;要通过其他源进行安装&#xff0c;首先安装 scl 源 yum install centos-release-scl-rh再安…
阅读更多...
LED显示屏驱动电源：恒流与恒压，谁更胜一筹？

LED显示屏驱动电源：恒流与恒压，谁更胜一筹？

LED显示屏&#xff0c;作为现代电子显示技术的重要代表&#xff0c;已经在我们的生活中无处不在。无论是商场的广告牌、体育场的计分板&#xff0c;还是家庭中的智能电视&#xff0c;LED显示屏都以其鲜艳的色彩、高清晰度和长寿命赢得了我们的青睐。然而&#xff0c;在这背后&a…
阅读更多...
爬虫逆向学习(七)：补环境动态生成某数四代后缀MmEwMD

爬虫逆向学习(七)：补环境动态生成某数四代后缀MmEwMD

声明&#xff1a;本篇文章内容是整理并分享在学习网上各位大佬的优秀知识后的实战与踩坑记录 前言 这篇文章主要是研究如何动态生成后缀参数MmEwMD的&#xff0c;它是在文章爬虫逆向学习(六)&#xff1a;补环境过某数四代的基础上进行研究的&#xff0c;代码也是在它基础上增…
阅读更多...
Python在AI中的应用--使用决策树进行文本分类

Python在AI中的应用--使用决策树进行文本分类

Python在AI中的应用--使用决策树进行文本分类 文本分类决策树什么是决策树 scikit算法 使用scikit的决策树进行文章分类一个文本分类的Python代码使用的scikit APIs说明装入数据集决策树算法类类构造器&#xff1a; 构造决策树分类器产生输出评估输出结果分类准确度分类文字评估…
阅读更多...
如何从格式化的笔记本电脑或台式机中恢复照片

如何从格式化的笔记本电脑或台式机中恢复照片

您想学习如何从已格式化的笔记本电脑或台式机中恢复已删除的照片吗&#xff1f;这篇文章解释了如何使用最佳格式的照片恢复软件来做到这一点。您可以通过简单的步骤格式化计算机后恢复已删除的图像。 将照片保存在笔记本电脑或 PC 硬盘上是很常见的。与相机存储卡和 USB 闪存驱…
阅读更多...
最新文章

Copyright @ 2022~2023