Sean's Blog
0%

CSS

发表于 更新于 分类于 ，

视频资源：黑马程序员完整JavaWeb快速入门教程【收藏比赞多系列】_哔哩哔哩_bilibili

格式

写在<style>标签中，<style>标签放在<head>标签之中。

1
2
3
4
5
<style>
	选择器名称｛
    	属性名：属性值；
    ｝
</style>

选择器

元素选择器

以HTML标签名作为选择器名称；

1
2
3
4
标签名,标签名{
	key:value;
	key:value;
}

类选择器

每一个HTML标签都有一个class属性

1
.class{}

id选择器

每一个HTML标签都有一个id属性，id的属性值必须在本页面是唯一的

1
#id{}

通配符选择器

1
*{}

能匹配页面中所有元素

属性选择符

  • [属性名]{}
  • [属性名=“属性值”]{}
  • [ 属性名*=“部分属性值”]{}
  • [属性名^=“以XX开头的属性值”]{}
  • [属性名$=“以XX结尾的属性值”]{}
1
标签[属性名]{}

复合选择器

交集选择器

1
2
lable.class{}
label#id{}

并集选择器

1
选择器1,选择器2{}

后代选择器

1
2
3
4
lable1 lable2：2是1的内部标签
lable>label2：2是的内部一级标签
lable1+lable2：1，2是相邻兄弟标签
lable1~lable2

伪类

UI伪类

元素的状态

链接伪类

  • link：等待点击
  • visited：已点击过
  • hover：鼠标悬停
  • focus：拥有焦点
  • active：鼠标按下还未释放

注意要按上述顺序定义选择符

:focus伪类

1
标签:focus{}

该元素正在获取焦点

:target伪类

选中的元素指向页面中的其他元素，对指定的内容样式进行设定。

结构伪类

元素的某种结构关系，根据元素所处的位置选择元素，通常用于序列型的元素，如列表。

::firstletter

元素的第一个字符

::firstline

元素的第一行

::before&::after

在元素前后插入特殊内容

CSS与HTML结合

内部样式

行内样式

1
<html标签 style=“css样式代码”/>

<style></style>标签方式

1
2
3
<style>
	css样式代码
</style>

外部样式

内嵌式

link标签

1
<link rel="stylesheet" type="text/css" href="css文件路径"/>

rel=”stylesheet” ，固定值，表示样式表
type=”text/css” ，固定值，表示css类型
href=”css文件路径”，表示文件位置

导入式

1
2
3
<style type="text/css">
    @import "css_path"
</style>

基本样式

背景

1
2
3
4
5
background-color:color;
background-img:url();
background-repeat:norepeat/repeat/repeat-x/repeat-y;//是否平铺
background-position:bottom/top/center/left/right/the combined attribute;
background-attachment:scroll/fixed;//是否滚动

文字

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
color:color;
text-indent:文字缩进(单位：inch，cm，mm，em，%pt);
line-height:行高;
text-align:对齐;
word-spacing:词之间的空白;
letter-spacing:字母之间的空白;
text-transform:uppercase/lowercase;大小写
text-decoration:文字修饰;
whitespace:normal/pre/pre-wrap/no-wrap/pre-line;空格处理
direction:书写方向;
font-family:字体;
font-style:倾斜;
font-variant:变体;
font-weight:粗细;
font-size:粗细;
text-shadow:x-offset y-offset shadow-size color;文本阴影
outline:文本轮廓线;

列表

1
2
3
list-style-type:disc/circle/square;项目符号的形状
list-style-image:url();自定义项目符号
list-style-position:inside/outside;项目符号位置

表格

1
2
3
4
5
6
border-width/style/color:;表格的线
border-collapse:collapse;表格边线合并
height/width:;单元格大小
vertical-align/text-align:;表格文字对齐
padding:;文字与线之间
caption-side:top/bottom;标注位置

层叠

继承

当后代的样式在没有设定的情况下默认使用最近祖先的样式

样式来源

  • 浏览器默认样式表
  • 用户样式表
  • 网页作者链接样式表
  • 网页作者内嵌样式表
  • 网页作者行内样式表

顺序

规则

  • 找到元素的的每一个样式申明；
  • 按照样式的顺序和权重确定元素的样式；（！Important！2种顺序：样式表顺序、？）
  • 按照元素的特征度对样式进行排序
  • 顺序决定权重：两条规则，如果优先级相同，后定义的优先级高。

特指度

I-C-E公式：{I:ID, C:Class, E:标签名}，有则＋1

每一级都是绝对压制下一级

CSS盒子模型

结构组成

image-20210925002611535

边框属性

1
2
3
border-color:
border-width:thick/thin/medium/%/px
border-style:none/dotted/dashed

边距

内边距

padding-top/bottom/left/right

外边距

margin-top/bottom/left/right

外边距叠加：在垂直方向上，两个元素的之间的距离由外边距最大的值确定

Content

浮动与清除

标准流

  • 展示方式：上到下，左到右

  • 块级元素独占一行，垂直放置

    1
    div,p,form,ul,li,ol,dl,address,fieldset,table,hr

  • 行级元素在水平方向上为左到右

    1
    span,strong,em,img,a,input,label,select,textarea,cite

块元素vs行内元素

类型 宽度 属性 边距
块元素 自动填满其父元素宽度 可以设置width，height属性 可以设置margin，padding
行内元素 宽度随元素内容变化 设置无效 水平方向有效，即left/right

浮动

将元素从标准流取出来，使其向左/右移动，直至其外边缘碰到包含父元素的框或另一个浮动框。

图文绕排

必须先定义图片，再写环绕它的文本

默认文本行框围绕浮动框，若要阻止则对该框应用clear属性

左右分栏

？

清除

清除浮动≠回到文档流

目的：改变该元素自身的位置，并且只针对排在该元素前面的元素。即：让该元素的左/右没有浮动元素

解决高度坍塌问题

1
2
1.overflow:hidden
2.父元素{float:left}→让父元素一起浮动起来

定位position

position属性取值：

  • static：静态定位（默认）；
  • fixed：固定定位，以浏览器窗口为基准；
  • relative：相对定位，以原位置为基准；
  • absolute：绝对定位，以父元素为基准。

布局

浮动+定位

display

display属性的取值：

  • block：块级元素的显示方式；
  • inline：内联元素显示方式；
  • inline-block：both；
  • table：块级table的显示特点；
  • table-cell：tr，td的显示特点；可以解决分栏不等高的问题
  • flex：弹性盒子布局；
  • grid：网格布局。

流动布局

相关标记

image-20210925145731343

flex布局

https://www.runoob.com/w3cnote/flex-grammar.html

给予容器控制内部元素高度和宽度的能力。

直接在css中设置flex属性：display:flex/-webkit-flex

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

属性：

flex-direction:主轴方向

  • row(default)：→
  • row-reverse：←
  • column：↓
  • column-reverse：↑

flex-wrap换行

  • nowrap(default)
  • wrap：第一行在上方
  • wrap-reverse：第一行在下方

flex-flow: flex-direction flex-wrap

justify-content：容器内元素在主轴上的对齐方式，以row为例

  • flex-start(default)：左对齐
  • flex-end
  • center
  • space-between：两端对齐
  • space-around：每个项目两侧的间隔相等

align-items：在交叉轴上的对齐，以row为例，其交叉轴为column（必须为容器设定高度）

  • flex-start：交叉轴的起点对齐（上对齐）。
  • flex-end：交叉轴的终点对齐。
  • center：交叉轴的中点对齐。
  • baseline: 项目的第一行文字的基线对齐。
  • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content：多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
  • strech

容器内item属性

  • order: <interger>：order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
  • flex-grow: <number>：flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
  • flex-shrink: <number>：缩小比例，默认为1
  • flex-basis：在分配多余空间之前，项目占据的主轴空间，默认auto
  • flex：前三个的简写
  • align-self：可覆盖align-items属性

Grid布局

http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

display: grid

注意：column, float, clear和vertical-align对网格容器没有效果。

术语

  • 网格容器(grid container)
  • 网格元素(grid item)：容器内的子元素
  • 网格线(grid line)
    • 行网格线(row grid lines)
    • 列网格线(column grid lines)
  • 网格轨道(grid track)：可认为是网格的行或列
  • 网格单元(grid cell)
  • 网格区(grid area)：由若干网格单元组成

流程

  1. div封装
  2. display: grid/inline-grid/subgrid
    • grid:块级网格
    • inline-grid:行内网格
    • subgrid:继承父级网格容器的列，行大小
  3. grid-template-columns&grid-template-rows：行和列的大小
  4. grid-column&grid-row：子元素的位置

属性

  • grid-template-columns&grid-template-rows

    1
    2
    3
    4
    grid-template-columns: [name] size	//可以没有name
    grid-template-columns: [name1 name2] size	//可以有多个name
    grid-template-columns: repeat(number,[name] size)
    grid-template-columns: 1fr 1fr 1fr;	//特殊单位fr，设置为份数

    image-20211017160033332

  • grid-template-areas

  • grid-column-gap/grid-row-gap/grid-gap：子项间距离

  • justify-items/align-items:start/end/center/stretch：与行/列轴对齐

  • justify-content/align-content