一篇讲完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.rhkb.cn/news/430465.html

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

相关文章

sheng的学习笔记-AI-强化学习（Reinforcement Learning, RL）

sheng的学习笔记-AI-强化学习（Reinforcement Learning, RL）

AI目录&#xff1a;sheng的学习笔记-AI目录-CSDN博客 基础知识 什么是强化学习 强化学习&#xff08;Reinforcement Learning, RL&#xff09;&#xff0c;又称再励学习、评价学习或增强学习&#xff0c;是机器学习的范式和方法论之一&#xff0c;用于描述和解决智能体&#…
阅读更多...
【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 核心概念 在安装…
阅读更多...
Blender软件三大渲染器Eevee、Cycles、Workbench对比解析

Blender软件三大渲染器Eevee、Cycles、Workbench对比解析

Blender 是一款强大的开源3D制作平台&#xff0c;提供了从建模、雕刻、动画到渲染、后期制作的一整套工具&#xff0c;广泛应用于电影、游戏、建筑、艺术等领域。 渲染101云渲染云渲6666 相比于其他平台&#xff0c;如 Autodesk Maya、3ds Max 或 Cinema 4D&#xff0c;Blende…
阅读更多...
好用的idea方法分隔符插件

好用的idea方法分隔符插件

好用的idea方法分隔符插件
阅读更多...
频率增强通道注意力机制（FECAM）学习总结

频率增强通道注意力机制（FECAM）学习总结

本文提出了一种新的频率增强通道注意力机制&#xff08;FECAM&#xff09;&#xff0c;旨在解决时间序列预测中傅里叶变换因吉布斯现象导致的高频噪声问题。FECAM基于离散余弦变换&#xff0c;能自适应地模拟信道间的频率依赖性&#xff0c;有效避免预测误差。实验显示&#xf…
阅读更多...
DANN GRL

DANN GRL

域自适应是指在目标域与源域的数据分布不同但任务相同下的迁移学习&#xff0c;从而将模型在源域上的良好性能迁移到目标域上&#xff0c;极大地缓解目标域标签缺失严重导致模型性能受损的问题。 介绍一篇经典工作 DANN &#xff1a; 模型结构 在训练阶段需要预测如下两个任务…
阅读更多...
委托的注册及注销+观察者模式

委托的注册及注销+观察者模式

事件 委托变量如果公开出去&#xff0c;很不安全&#xff0c;外部可以随意调用 所以取消public,封闭它&#xff0c;我们可以自己书写两个方法&#xff0c;供外部注册与注销&#xff0c;委托调用在子方法里调用&#xff0c;这样封装委托变量可以使它更安全&#xff0c;这个就叫…
阅读更多...
SpringBoot3核心特性-核心原理

SpringBoot3核心特性-核心原理

目录 传送门前言一、事件和监听器1、生命周期监听2、事件触发时机 二、自动配置原理1、入门理解1.1、自动配置流程1.2、SPI机制1.3、功能开关 2、进阶理解2.1、 SpringBootApplication2.2、 完整启动加载流程 三、自定义starter1、业务代码2、基本抽取3、使用EnableXxx机制4、完…
阅读更多...
JAVA自助高效安全无人台球茶室棋牌室系统小程序源码

JAVA自助高效安全无人台球茶室棋牌室系统小程序源码

​探索“自助高效安全无人台球茶室棋牌室系统”的奇妙之旅 &#x1f3b1;&#x1f375;&#x1f3b2; &#x1f50d; 初见惊艳&#xff1a;未来娱乐新体验 &#x1f50d; 走进这家无人值守的台球茶室棋牌室&#xff0c;第一感觉就像是穿越到了未来&#xff01;没有繁琐的前台登…
阅读更多...
如何利用 opencv 进行 ROI(感兴趣)获取和实现 VR(虚拟现实) 演播室的播放

如何利用 opencv 进行 ROI(感兴趣)获取和实现 VR(虚拟现实) 演播室的播放

我是从事医疗软件的开发的。 经常需要从拍摄的医疗视频中获取出病理区域。并计算病理区域的周长和面积。 用 opencv 的术语，这就是感兴趣区域的获取。 (因为都是实时视频，所以速度很关键。代码效率很重要) 有时，需要标注出病理区域，并将非病理区域从视频中去除掉。 如果将…
阅读更多...
中电金信 ：基于开放架构的私有云建设实践

中电金信 ：基于开放架构的私有云建设实践

01开放架构私有云诞生背景 随着国产化创新建设的深化&#xff0c;产业侧行业软件持续进行云原生改造&#xff0c;金融机构拥抱云和容器技术&#xff0c;实现数智化转型已是大势所趋。近年&#xff0c;云原生技术以及架构发展速度更是惊人&#xff0c;私有云开始有了新架构、有了…
阅读更多...
小柴冲刺软考中级嵌入式系统设计师系列一、计算机系统基础知识（6）可靠性与系统性能评测基础

小柴冲刺软考中级嵌入式系统设计师系列一、计算机系统基础知识（6）可靠性与系统性能评测基础

目录 1、计算机可靠性 串联系统 并联系统 2、计算机系统的性能评价 性能评测的常用方法 基准测试程序 flechazohttps://www.zhihu.com/people/jiu_sheng 小柴冲刺嵌入式系统设计师系列总目录https://blog.csdn.net/qianshang52013/article/details/139975720?spm1001.2…
阅读更多...
潮玩宇宙大逃杀宝石游戏搭建开发

潮玩宇宙大逃杀宝石游戏搭建开发

潮玩宇宙大逃杀的开发主要涉及以下方面&#xff1a; 1. 游戏概念和设计&#xff1a; 核心概念定义&#xff1a;确定以潮玩为主题的宇宙背景、游戏的基本规则和目标。例如&#xff0c;玩家在宇宙场景中参与大逃杀竞技&#xff0c;目标是成为最后存活的玩家。 玩法模式设计&a…
阅读更多...
基于Es和智普AI实现的语义检索

基于Es和智普AI实现的语义检索

1、什么是语义检索 语义检索是一种利用自然语言处理&#xff08;NLP&#xff09;和人工智能&#xff08;AI&#xff09;技术来理解搜索查询的语义&#xff0c;以提供更准确和相关搜索结果的搜索技术&#xff0c;语义检索是一项突破性的技术&#xff0c;旨在通过深入理解单词和…
阅读更多...
如何使用GLib的单向链表GSList

如何使用GLib的单向链表GSList

单向链表是一种基础的数据结构&#xff0c;也是一种简单而灵活的数据结构&#xff0c;本文讨论单向链表的基本概念及实现方法&#xff0c;并着重介绍使用GLib的GList实现单向链表的方法及步骤&#xff0c;本文给出了多个实际范例源代码&#xff0c;旨在帮助学习基于GLib编程的读…
阅读更多...
前端vue-作用域插槽的传值，子传父，父用obj对象接收

前端vue-作用域插槽的传值，子传父，父用obj对象接收

阅读更多...
uni-app快速入门

uni-app快速入门

目录 一、什么是 uni-app二、快速创建 uni-app 项目1.创建 uni-app2.运行 uni-app 三、uni-app 相对传统 H5 的变化1.网络模型的变化2.文件类型变化3.文件内代码架构的变化4.外部文件引用方式变化5.组件/标签的变化6.js的变化&#xff08;1&#xff09;运行环境从浏览器变成v8引…
阅读更多...
Leetcode—329. 矩阵中的最长递增路径【困难】

Leetcode—329. 矩阵中的最长递增路径【困难】

2024每日刷题&#xff08;165&#xff09; Leetcode—329. 矩阵中的最长递增路径 dfs dp实现代码 class Solution { public:int longestIncreasingPath(vector<vector<int>>& matrix) {// 9 9 4// 6 6 8// 2 1 1// 1 1 2// 2 2 1// 3 4 2int m …
阅读更多...
fastadmin 根据选择数据来传参给selectpage输入框

fastadmin 根据选择数据来传参给selectpage输入框

文章目录 js代码php代码&#xff1a;完结 js代码 $(document).on(change,#table .bs-checkbox [type"checkbox"],function(){let url$(#chuancan).attr(data-url)urlurl.split(?)[0]let idsTable.api.selectedids(table)if(ids.length){let u_id[]ids.forEach(eleme…
阅读更多...
CSS文档流以及脱离文档流的方法

CSS文档流以及脱离文档流的方法

文档流 文档流是文档中可显示对象在排列时占用的位置/空间。例如&#xff1a;块元素自上而下摆放&#xff0c;内联元素从左到右摆放。&#xff08;文档流中限制非常的多&#xff0c;导致很多页面效果无法实现)。 常见文档流限制 高低不齐&#xff0c;底边对齐 <head>&…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023