CSS基础

最新推荐文章于 2024-06-16 09:47:21 发布
最新推荐文章于 2024-06-16 09:47:21 发布
阅读量229 收藏
点赞数
分类专栏： 前端_核心

本博客是在MDN的知识基础上，结合了自己的开发经验所做出的总结
MDN地址：https://developer.mozilla.org/zh-CN/

基础知识

什么是CSS?

css的英文全称是Cascading Style Sheets，它的含义是层叠样式表。它可以为HTML文档增加样式，使HTML有更合理的布局，更美观的画面。
浏览器根据HTML文档生成了DOM树，CSS会寻找DOM树上的节点，将样式一一对应到节点上，生成渲染树，得到渲染树之后，浏览器就会将页面绘制出来了。

CSS的结构

大部分CSS语句是由 一个选择器 + 一组属性 组成的。下面是例子：

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

其中 h1 是选择器， { } 是用来包裹属性的容器，里面的内容是 属性名：属性值，每一个属性后面都需要加分号。

CSS语句

语句作用
@charset规定css文件所使用的字符集；
@import从外部引入css文件；
@media媒体查询；
@document使一些样式仅在在规定的url中生效；
@font-face自定义字体；
@supports根据浏览器对某属性的支持，来使得一些样式生效；

CSS注释

/* 基本元素样式 */
/* -------------------------------------------------------------------------------------------- */
h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

选择器

基础的选择器

选择器说明
元素选择器使用元素的名字作为选择器，如 div span；
id选择器使用 # + id 作为选择器，如 #box；
类选择器使用 . + class 作为选择器，如 .box；
通配符* 表示选择所有元素；

属性选择器

根据元素的 属性及值来匹配元素

使用方式说明
[attr]选择包含 attr 属性的所有元素，不论 attr 的值为何；
[attr=val]选择 attr 属性被赋值为 val 的所有元素；
[attr~=val]选择 attr 属性的值（以空格间隔出多个值）中有包含 val 值的元素；
[attr=val]
[attr^=val]选择attr属性的值以val开头（包括 val）的元素；
[attr$=val]选择attr属性的值以val结尾（包括 val）的元素；
[attr*=val]选择attr属性的值中包含字符串 val 的元素；

伪类

伪类，英文名为 pseudo-class，是一个以冒号(:)作为前缀的关键字，当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类

伪类作用
:link未被访问过的连接;
:visited已被访问过的链接;
:hover鼠标移入;
:active激活过的链接（点击过的）;
:root根元素，等同于html元素;
:focus获得焦点;
:blur失去焦点;
:checked被选中;
:enabled未启用;
:indeterminate状态不确定的表单元素;
:disabled禁用的表单元素;
:default默认状态下的表单元素;
:empty不包含任何文本和子节点的元素;
:not()表示不选择括号内的内容
:first-child第一个元素
:last-child最后一个元素
:nth-child()选择第几个元素，传入 n 作为变量

伪元素

伪元素（Pseudo-element）跟伪类很像，但它们又有不同的地方。它们都是关键字 —— 但这次伪元素前缀是两个冒号 (::) —— 同样是添加到选择器后面达到指定某个元素的某个部分。

伪元素作用
::before在元素的起始位置增加一个元素;
::after在元素的最末位置增加一个元素；
::first-letter元素内文本的首个字母；
::first-line元素内文本的首行；
::selection被用户所选择的文本；

选择器之间的组合

组合方式作用
AB选择同时满足两个选择器的元素;
A,B选择满足A或者满足B的元素；
A B选择A的子集中 符合条件B的元素；
A>B选择A的直接子节点 符合条件B的元素；
A+BB是A的下一个兄弟节点；
A~BB是A之后的兄弟节点中的任意一个；

值和单位

数值

常用的数值单位列表：

单位意义
pxpixels，像素值，绝对单位;
em相对于自身的字体大小;
rem相对于根元素html的字体大小;
vw相对于视窗的宽度;
vh相对于视窗的高度;
deg角度，360deg为一周;
s秒数;
无单位当一个值被设置为0的时候，不需要写单位;

不常用的数值单位：

单位意义
mm, cm, in毫米（Millimeters），厘米（centimeters），英寸（inches）;
pt, pc点（Points (1/72 of an inch)）， 十二点活字（ picas (12 points.)）;
ex, ch小写x的高度，数字0的宽度;

百分比

百分比单位，在不同的属性中表示不同的意义

属性意义
width / height相对于父级元素的width / height;
line-height相对于自己的字体大小;
font-size相对于父级元素的字体大小;
margin / padding相对于父级元素的宽度;

颜色

颜色的表示方式：
十六进制： #000000
十六进制简写： #000

英文表示： red

rgb: rgb(255, 255, 255);
rgba: rgba(255,255,255,.4);

hsl(色调、饱和度、明度):hsl(0,100%,50%);
hsla:hsla(240,100%,50%,.5);

不透明度：opacity

函数

属性意义
rgba颜色与不透明度 ;
hsla颜色与不透明度;
rotate旋转;
translate位置平移;
calc计算;
url引入文件;

优先规则

根据选择器

选择器中的权重值计算：

  • id选择器加一百分
  • 类选择器加十分
  • 属性选择器加一分

计算后得到的分数，即为该选择器的权重分，权重分高的选择器中，样式会优先展示。

根据位置

  • 写在style中的样式最优先
  • 内联样式表优先于外部样式表
  • 在同一样式表内，拥有同样权重值的选择器，后面的优先

!important

在一个属性后追加 !important 可以无视选择器的权重计算，强制使该属性优先，这是一个除非不得已，否则不建议使用的方法。
如果想要一个属性 !important 更加优先，则需要在一个权重值更高的选择器上使用 !important

继承规则

自动产生继承的属性

在css中，一些父级拥有的属性会被子级自动继承到，这些属性大部分是字体相关的，下面是可以被继承的属性列表：

属性
font系列
color
cursor
line-height
pointer-events
user-select

与继承相关的值

属性意义
inherit值与与父级相同
initial与浏览器默认的样式相同，若浏览器没有设置默认样式，则与inherit表现相同
unset将属性重置为其自然值，即如果属性是自然继承的，那么它就表现得像inherit，否则就是表现得像initial。
revert属性值被设置成自定义样式所定义的属性（如果被设置）， 否则属性值被设置成用户代理的默认样式。

属性汇总

文本相关

属性意义
color文字颜色
font-family使用的字体类型
font-size文字大小
font-style设置文字斜体
font-weight设置文字粗细
text-decoration设置文字下划线
text-transform设置文字大小写转换
text-shadow设置文字阴影
text-align文本对齐
line-height行高
letter-spacing/word-spacing文字间距
text-indent文本缩进
text-overflow文字超出的设置
white-space对于空白和换行的处理
word-break换行的设置
direction文本方向

https://developer.mozilla.org/zhCN/docs/Learn/CSS/%E4%B8%BA%E6%96%87%E6%9C%AC%E6%B7%BB%E5%8A%A0%E6%A0%B7%E5%BC%8F/Fundamentals

列表相关

属性意义
list-style列表样式，常设置为none用来清空列表样式
list-style-type列表符号的类型
list-style-position列表符号的位置
list-style-image列表符号替换为指定的图片

盒子模型系列

下面是display相关的值：

值意义
block使目标成为块级元素
inline使目标成为内联元素
inline-block使目标成为内联块元素
table使得元素获得table布局的特点
flex弹性盒子布局
grid网格系统布局

盒模型的属性：

属性意义
width/height宽与高
min-width/max-height最大/最小的宽与高
padding内边距
border边框
margin外边距
box-sizing盒子模型对于距离理解的设置

盒模型相关属性：

属性意义
overflow处理溢出的内容
outline类似于border，但是不影响盒子大小

背景相关

属性意义
background所有背景相关设置的简写
background-color背景色
background-image背景图
background-position背景图放置的位置
background-repeat背景图的重复规律
background-size背景图的尺寸
background-attachment当内容滚动时，指定元素背景的行为
background-clip背景图裁剪的位置

边框相关

属性意义
border所有边框相关设置的简写
border-width边框的粗细
border-style边框的样式
border-color边框的颜色
border-radius边框的圆角
border-top(left/right/bottom)上下左右的边框
border-top(left/right/bottom)-width(style/color)所有边框相关设置的简写
border-image使用图片作为边框
border-image-source图片的地址
border-image-slice图片的切片大小
border-image-repeat图片重复的规律
border-image-width调整边界图像
border-image-outset定义边界内部和内边距之间的额外空间的大小

表格相关

属性意义
table-layout规定布局方式
border-collapse规定表格中边框的呈现方式，通常使用collapse合并边框
table-layout规定布局方式

其他的修饰

属性意义
box-shadow盒子的阴影
filter滤镜
background-blend-mode将单个元素的多重背景图片和背景颜色设置混合在一起
mix-blend-mode将一个元素与它覆盖的那些元素各自所设置的背景（background）和内容(content)混合在一起

布局

正常的文档布局流

正常布局流是指在不对页面进行任何布局控制时，浏览器默认的HTML布局方式。

浮动float

浮动的元素会脱离文档流
浮动使得布局更加方便，也可以做出文本环绕、首字下沉这样优雅的效果。

浮动的元素有几个特点：
- 脱离文档流
- 所有浮动元素获得块级元素的特点
- 默认的宽度和高度会变为0
- 当父级宽度不足时，会自动换行
- 可以做出文本环绕的效果

浮动相关的属性：

属性意义
float使得元素产生浮动，拥有三个值none、left、right
clear使得元素可以清除周围的浮动，拥有三个值both、left、right
overflow设置值为hidden，可以清除子级的浮动

最常用的清除浮动的方式是给父级的::after元素加上clear:both;属性

定位position

定位的知识：

  • 使用positiong来将一个元素设置为定位元素
  • position有四个值：static表示没有定位，absolute表示绝对定位，relative表示相对定位，fixed表示固定定位
  • absolute（绝对定位）是相对于定位父级产生的定位
  • relative（相对定位）是相对于自身产生的定位
  • fixed（固定定位）是相对于浏览器视窗的定位
  • 定位父级是指拥有绝对或相对定位的父级，页面中最上层的定位父级是html元素
  • 在元素拥有定位后，需要使用top/bottom/left/right来规定他们的位置
  • 具有定位的元素，层级比较高的元素会呈现在页面的前面
  • 默认情况下，子级元素的层级高于父级元素，后面的元素层级高于前面的元素
  • 可以使用z-index属性来规定元素的层级

拥有absolute绝对定位的元素，元素本身会发生一点变化：

  • 会拥有块级元素的特点
  • 默认的宽高变为0

CSS3中新增了一种定位方式sticky，现在还没有被广泛支持，允许定位的元件像它被相对定位一样动作，直到其滚动到某一阈值点（例如，从视口顶部10像素），之后它变得固定。对于制作粘性布局很有帮助。

弹性盒子flex

推荐阮一峰老师的博客：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

父级属性：

属性意义
display:flex;使得该元素称为弹性盒子
flex-direction:row/row-reverse/column/column-reverse规定排列方向
flex-wrap:nowrap/wrap/wrap-reverse规定换行规则
flex-flowflex-direction与flex-wrap两个属性的简写
justify-content:flex-start/flex-end/center/space-between/space-around水平方向的对齐规则
align-items:flex-start/flex-end/center/baseline/stretch竖直方向的对齐规则
align-content规定了多根轴线的对齐方式

子级属性：

属性意义
order定义项目的排列顺序。数值越小，排列越靠前，默认为0
flex-grow定义项目在存在剩余空间时的放大比例，默认为0
flex-shrink定义项目在存在剩余空间时的缩小比例，默认为0
flex-basis定义了在分配多余空间之前，项目占据的主轴空间，默认值为auto
flexflex-grow, flex-shrink 和 flex-basis的简写
align-self:auto/flex-start/flex-end/center/baseline/stretch相对于父级的align-items

网格布局grid

网格布局的思想类似于bootstrap中的栅格布局，但是它的功能比栅格布局要强大的多，现在还没有被支持。
参考：https://www.jianshu.com/p/d183265a8dad

块级格式化上下文BFC

参考：http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html

BFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

与BFC相对应的，还有IFC（Inline Formatting Contexts、内联格式化上下文）、GFC（GridLayout Formatting Contexts、网格布局格式化上下文）、FFC（Flex Formatting Contexts、自适应格式化上下文）

以下情况下会产生BFC布局：

  • 浮动元素，float 除 none 以外的值
  • 绝对定位元素，position（absolute，fixed）
  • display 为以下其中之一的值 inline-blocks，table-cells，table-captions
  • overflow 除了 visible 以外的值（hidden，auto，scroll）
ruby_array
关注
专栏目录
深入理解CSS的display属性
DLQFHL的博客
07-25 917
在布局中，display属性是最重要的CSS属性之一。其最常见的属性值有block,inline,none,table以及inline-block。最近的新宠为flex,因为它是专门为布局创建的display属性。新出现的grid(最近仍比较活跃)是另外一个指定的布局属性，其很快就会广泛被使用。 这篇文章比我预期的要长很多，你可以选择性进行阅读，但是我更希望你可以静下心来阅读整篇文章。 表内容...
html标记ruby,html5 ruby标签的定义及使用方法详解（内有实例介绍）
weixin_39644494的博客
06-11 593
本篇文章主要为大家讲解了html5中一个新标签，html5 ruby标签，虽然不算是新的，但也是在html5里新的标签，html5 ruby标签的定义和具体的用法实例都在这篇文章中，希望大家认真阅读html5 ruby标签的定义和用法： 标签定义 ruby 注释(中文注音或字符)。在东亚使用，显示的是东亚字符的发音。与 以及 标签一同使用：ruby 元素由一个或多个字符(需要一个解释/发音)和...
css学习（4）
gua_Piter的博客
12-03 169
表现形态都是 文本加粗 和 文本斜体 1. 2.引用标签 1. 3.iframe标签 可以引入其他的html到当前html中显示。 1. 4. br 与 wbr 1. 5. pre 与 code 针对网页中的程序代码的显示效果。 1. 6.map 与 area 给特殊图形添加链接，area能添加的热区的形状：矩形、圆形、多边形。 1. 7. embed 与 object 给flash和一些插件进行渲染操作的标签。 1. 9. 文字注解 ruby标签定义ruby注释(中文注音或字符），rt标签
**解锁Ruby世界的CSS解析神器——Crass**
最新发布
gitblog_00028的博客
06-16 331
解锁Ruby世界的CSS解析神器——Crass crassA Ruby CSS parser that's fully compliant with the CSS Syntax Level 3 specification.项目地址:https://gitcode.com/gh_mirrors/cra/crass 在技术的海洋中，总有那么一些小众而强大的工具能够引起我们的兴趣与探索欲。今天，我们...
Less.rb - 简化CSS编程的Ruby库
gitblog_00002的博客
03-13 682
Less.rb - 简化CSS编程的Ruby库 去发现同类优质开源项目:https://gitcode.com/ 是一个 Ruby 库，它允许您编写更简洁、更具可维护性的 CSS 代码。基于流行的 Less.js 编译器，Less.rb 将您的 Less 代码编译成标准的 CSS，以便在 Web 浏览器中轻松应用。 什么是 Less.rb？ Less.rb 是一个用于 Ruby 的 Less CS...
CSS基础知识.pdf
10-04
【CSS基础知识详解】 CSS，全称为Cascading Style Sheets，中文通常翻译为“层叠样式表”，是用于控制网页布局和样式的规范。它弥补了HTML在表现层设计上的局限性，让网页设计更加灵活多样。自IE 3.0开始，浏览器...
前端CSS基础-常规流练习.rar
04-09
在"前端CSS基础——常规流中练习对应图片代码"中，你可能会看到如何通过CSS控制元素在常规流中的位置和大小。例如，可以使用`display`属性来改变元素的行为，将一个内联元素转换为块级元素，或者创建一个内联块级...
CSS基础入门总结（很详细的哟）
10-25
（1）基础选择器 （i）标签选择器 （ii）类选择器 （iii）id选择器 （iv）通配符选择器 （2）复合选择器 （i）后代选择器 （ii）子代选择器 （iii）并集选择器 （iv）伪类选择器 三、CSS字体属性 （1）字体大小 （2...
CSS基础代码
03-27
**CSS基础代码详解** 在网页设计中，CSS（Cascading Style Sheets）是不可或缺的一部分，它用于控制网页的布局和样式。本资料包包含了作者学习CSS时编写的代码，非常适合CSS初学者作为学习素材。通过阅读和理解这些...
css基础教程之CSS基础语法
09-25
CSS（层叠样式表）是用于控制网页元素外观的关键技术。在本教程中，我们将深入探讨CSS的基础语法，包括如何应用样式以及选择器的使用。...为了创建美观且易于管理的网页，掌握CSS基础语法至关重要。
Ruby Stylus: 一款强大的 CSS 预处理器
gitblog_00019的博客
03-16 703
Ruby Stylus: 一款强大的 CSS 预处理器 ruby-stylus(DEPRECATED) Ruby interface for Stylus项目地址:https://gitcode.com/gh_mirrors/ru/ruby-stylus Ruby Stylus 是一个基于 Ruby 的 CSS 预处理器，它提供了更高级的语法、变量、嵌套规则等特性，让你能够编写出更加优美、简洁且...
css规则中区块block,CSS 定位详解
weixin_36398921的博客
08-04 2740
CSS 有两个最重要的基本属性，前端开发必须掌握：display和positionposition 属性的作用position属性用来指定一个元素在网页上的位置，一共有5种定位方式，即position属性主要有五个值staticrelativefixedabsolutesticky1. static (默认值)static是position属性的默认值。如果省略position属性，浏览器就认...
css
ruby 闲谈
06-24 210
Blueprint 前端框架 bootstrap 前端框架 getskeleton
css注意
ruby 闲谈
01-05 104
1： span不能设置大小，div可以设置大小 2： #form中有两个div，他们浮动， 此时的#form不能自适应大小，那么我们需要在#form元素中添加overflow:hidden;
css规则中区块block,css常用属性总结：背景background下篇
weixin_42514752的博客
08-04 676
前言：这段时间天天加班到10:30之后，简直是x了。在上一篇文章中，分别解析了background各个属性的用法和注意细节。如果我们在项目上使用背景效果，如果使用下面的写法，你可能抓狂。body{background-color:#ccc;background-image:url(bg123.gif);background-repeat:no-repeat;background-position:...
CSS的层叠性、继承性以及行高的继承
剑来的博客
03-22 2400
前端学习
css选择器几种查找方式整理
onionnmmn的博客
07-14 3725
css 选择器 1.通过标签查找 通过p标签获取 print(soup.select('p')) #使用的bs4 select 方法，seleniumdriver.find_elements(By.CSS_SELECTOR,'p') 类似 2.通过类名查找 在类的前面加一个点“.” 例如： 查找 class=onion的标签 print(soup.select('.onion'...
CSS属性详解
qq_43540348的博客
09-28 787
CSS属性组：   动画、背景、网格、边框轮廓、超链接、分页、框、线框、Ruby、颜色、字幕、页面媒体、定位等等 动画属性 @keyframes:定义一个动画，@keyframes定义的动画名称用来被animation-name所使用 animation:复合属性。检索或设置对象所应用的动画特效 animation-name:检索或设置对象所应用的动画名称，必须与规则@key...
#HTML+CSS基础课程# 第四课：CSS选择器
04-10 305
“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素 类选择器： .类选器名称{ css样式代码; } 使用步骤： 第一步：使用合适的标签把要修饰的内容标记起来，如下： 胆小如鼠 第二步：使用class="类选择器名称"为标签设置一个类，如下： 胆小如鼠 第三步：设置类选器css样式，如下： .stress{color:red;}/*类前面要加
XHTML与CSS基础知识入门指南
本篇教程是关于XHTML与CSS基础知识的教学，旨在为有一定HTML和CSS基础的网页开发者提供一个从表格布局向Web标准（div+css）过渡的学习路径。对于初次接触网页制作的新手，需要具备基本的网页基础知识，包括了解表格...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值