CSS——每周总结

阿选不出来

已于 2023-01-14 12:06:41 修改

阅读量312

点赞数 3

文章标签： css css3 html

于 2021-11-07 09:33:46 首次发布

本文链接：https://blog.csdn.net/m0_63300737/article/details/121184172

版权

CSS语法

在这里插入图片描述
声明总是以（分号）；结束、以{}（花括号）括起来。

选择器

id和class选择器

id选择器为标有特定 id 的 HTML 元素指定特定的样式，以 # 开头
class 选择器用于描述一组元素的样式，以.开头
两种选择器都不能以数字开头

CSS的三种形式

外部样式表

使用标签链接到样式表，浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

它能在任何文本编辑器中进行编辑，不能包含任何的 html 标签，样式表应该以 .css 扩展名进行保存。

html 引入 icon 图标

1.将需要的图标加入购物车，放入一个你的项目中。
2.打开下该项目，生成链接，选中 font class ，将生成的链接(XXXXXXXX)引入html头部，

<link rel="stylesheet" href="http:XXXXXXXX"

3.在body中使用i标签引入图标名
图标名在你创建的项目中获取

<i class="iconfont XXX"></i>

内部样式表

在文档头部使用style 标签来定义。

内联样式表

在相关的标签内使用样式（style）属性。
多重样式
如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来
优先级
内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

几种重要属性

背景

`background-color`

简写 background
其值的表达方式如下
十六进制 - 如：“#ff0000”
RGB - 如：“rgb(255,0,0)”
颜色名称 - 如：“red”

背景颜色半透明 rgba（0，0，0，0.x）最后一个参数是alpha透明度，取值范围在0~1之间，习惯把0.x的0省掉，记为（0，0，0，.x）

opacity   让盒子里面的内容都透明

`background-image`

背景图像

background-image: url('')

默认情况下背景图像将平铺重复显示覆盖整个页面

`background-repeat`

背景平铺方式

background-repeat: 

 - no-repeat
 - repeat-x
 - repeat-y

`background-attachment`

定义图像是否固定或随页面滚动

值

scroll 背景图片随着页面的滚动而滚动，这是默认的。
fixed 背景图片不会随着页面的滚动而滚动。

`background-position`

背景图象位置

值

——，—— left，right，bottom，top 先水平，在竖直
——，—— 百分比的形式坐上（0%，0%），右下（100%，100%）
——，—— 以像素为单位 (同上)
且不论何种形式，只有一值未填，默认为中间状态。
当使用简写属性时，属性值的顺序为上面排列顺序

background-size

值

contain 背景图片将按比例自适应内容区域。图片保持其比例不变
eg: 在这里插入图片描述
如果 background-size 属性设置为 "100% 100%" ，背景图片将延展覆盖整个区域：

 cover

会把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
注意该属性保持了图片的比例因此背景图像的某些部分无法显示在背景定位区域中。

文本

属性

`color`

`text-align` (文本的对齐方式)

center
right /left
justify(每一行被展开为宽度相等，左，右外边距是对齐)

`text-decoration`（文本修饰）

值

none
overline
line-through
underline

`text-transform`(文本转换)

值

uppercase （全部大写）
lowercase （全部小写）
capitalize （首字母大写）~~

`text-indent`（文本缩进)

值

length %(基于父元素)

`letter-spacing` （字符间距）

值

normal length inherit
line-height（行高）
direction
ltr（正） rtl（反）
text-shadow（文本阴影）
unicode-bidi(设置或返回文本是否被重写)
vertical-align（垂直对齐）
white-space（空白的处理方式）
word-spacing (字间距)

字体

`font-family`(字体系列)

可设置多个做“后备”，多个字体系列用逗号隔开，且名称超过一个字须用引号。

`font-style`（字体样式)

normal tialic(斜体)
font-size
font-weight(字体粗细)

normal
bold(粗)
bloder（更粗）
lighter（更细）

font-variant

链接

1）a:link          未访问
2）a:visited     已访问
3）a:hover      鼠标移动到链接上
4）a:active      鼠标点击时

`text-decoration:none`

用于删除链接中的下划线(默认有线)

列表

`list-style-type`（列表项图标）

circle（⚪）square （方块）upper-roman（罗马数字）lower-alpha（英文）

`list-style-image: url('sqpurple.gif');`（作为列表项标记的图像）

表格

`border: 1px solid black；`

边框的粗细+边框的样式+边框的颜色

border-collapse：collapse

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开
值为 collapse 相邻边被合并
separate（单一）
text-align（水平对齐方式）vertical-align（垂直对齐方式）

边框

`border-style`

dotted(点线)dashed(虚线solid(实线)
double(两个边框,宽度和 border-width 的值相同)
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。效果取决于边框的颜色值

`border-width`

指定长度
thick，medium，thin，

`border-color`

(border-color单独使用不起作用，得先使用border-style设置边框样式)
指定不同的侧边的边框即 border-top-…border-right-…

`outline`（轮廓）

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

`margin（`外边距）

值

auto（浏览器设置的外边距）
length
% 基于块

盒子模型

在这里插入图片描述

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

`padding` (填充)

Display(显示) 与 Visibility（可见性）

隐藏元素 - display:none（隐藏的元素不会占用空间）或visibility:hidden（隐藏的元素占用空间）
块和行内元素
在这里插入图片描述

元素显示模式的转换
转换为块级元素 display: block
转换为行内元素 display: inline
转换为行内块元素 diasplay: inline-block

`position` (定位)

定位=定位模式（元素在文档中的定位方式）+边偏移（决定了该元素的最终位置）。
值

static(默认值)相对定位元素的定位是相对其正常位置
relative 相对定位
特点：他是相对于它原来的位置移动的；原来的标准流的位置继续占有，后面的盒子仍然以标准流的形式对待他。
fixed 元素的位置相对于浏览器窗口是固定位置，窗口是滚动的它也不会移动
absolute 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于
不在占有原来的位置
sticky 它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
子绝父相

`z-index`

指定了一个元素的堆叠顺序，它的值可正可负，具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。
clip（剪辑一个绝对定位的元素）
cursor（显示光标移动到指定位置的类型）

`Overflow`

用于控制内容溢出元素框时显示的方式，只作用于指定高度的块元素上。

visible（默认值，内容溢出元素框）
scroll（内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容）
hidden（内容会被修剪，并且其余内容是不可见的）
auto （如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容）
inherit

`float`

用于创建浮动框，将其移动到一边，直至左边缘或右边缘触及包含块或另一个浮动框的边缘。
clear 属性指定元素两侧不能出现浮动元素
值 both
元素的居中对齐

在这里插入图片描述
文本居中对齐 text-align: center
图片居中对齐 margin：auto，并将它放入块元素中。
左右对齐-使用定位方式
当使用 position 来对齐元素时, 通常 <body> 元素会设置 margin 和 padding ，避免出现差错
设置容器上下 padding 相同实现垂直居中和使用 line-height=height 实现垂直居中仅对单行文本有效，当文本行数超过单行时：

1）padding：文本仍然处于容器垂直居中的位置，但是容器的 height 会随着文本行数的增加而增大；
2）line-height=height：容器的 height 不变，line-height 是文本的行间距，文本会溢出容器显示；
多行文本可使用 vertical-align: middle; 来实现元素的垂直居中,但是如果子元素的内容体积大于父元素的内容体积时，仍然会溢出，后面需要使用文字溢出处理来解决。

清除内外边距

* {
padding：0；
margin：0；
}

行内元素为了照顾兼容性，尽量只设置左右外边距，不要设置上下内外边距，但是转换为块级元素和行内块元素就可以了。

阿选不出来

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
CSS——每周总结

CSS语法声明总是以（分号）；结束、以{}（花括号）括起来。选择器id和class选择器id选择器为标有特定 id 的 HTML 元素指定特定的样式，以 # 开头class 选择器用于描述一组元素的样式，以.开头                       &n
复制链接

扫一扫