CSS知识总结

最新推荐文章于 2023-03-18 17:17:34 发布

Lil DD

最新推荐文章于 2023-03-18 17:17:34 发布

阅读量239

点赞数

文章标签： css web

本文链接：https://blog.csdn.net/littleduooo/article/details/115272197

版权

CSS简介

什么是 CSS？

CSS 指的是层叠样式表也称级联样式表
CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
CSS 节省了大量工作。它可以同时控制多张网页的布局外部样式表存储在 CSS 文件中

CSS语法

CSS 规则集（rule-set）由选择器和声明块组成：
在这里插入图片描述
选择器指向您需要设置样式的 HTML 元素。

声明块包含一条或多条用分号分隔的声明。

每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。

多条 CSS 声明用分号分隔，声明块用花括号括起来。

CSS选择器

CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。

id 选择器
d 选择器使用 HTML 元素的 id 属性来选择特定元素。

元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！

要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。

实例：

#para1 {
  text-align: center;
  color: red;
}

class 选择器
类选择器选择有特定 class 属性的 HTML 元素。

如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。

通用选择器

通用选择器（*）选择页面上的所有的 HTML 元素。

CSS使用方法

三种使用 CSS 的方法

外部样式表
内部样式表
内联样式

外部样式表

外部样式在 HTML 页面 <head> 部分内的 <link> 元素中进行定义：

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

外部样式表可以在任何文本编辑器中编写，并且必须以 .css 扩展名保存。

外部 .css 文件不应包含任何 HTML 标签。

内部样式表

如果一张 HTML 页面拥有唯一的样式，那么可以使用内部样式表。

内部样式是在 head 部分的 <style> 元素中进行定义。

<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>

内联样式

行内样式（也称内联样式）可用于为单个元素应用唯一的样式。

如需使用行内样式，请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

层叠顺序（优先级）：

内联样式
内部样式表或外部样式表
浏览器缺省样式

CSS注释

注释用于解释代码，在编辑源代码时可能会有所帮助。

浏览器会忽略注释。

CSS颜色

指定颜色是通过使用预定义的颜色名称，或 RGB、HEX、HSL、RGBA、HSLA 值
可以为HTML 元素设置背景色；设置文本的颜色；设置边框的颜色。

CSS背景

CSS 背景属性用于定义元素的背景效果。

背景颜色

CSS background-color
background-color 属性指定元素的背景色

页面的背景色设置如下：

body {
  background-color: lightblue;
}

不透明度 / 透明度

RGBA 颜色值指定为：rgba(red, green, blue, alpha)。alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

div {
  background: rgba(0, 128, 0, 0.3) /* 30% 不透明度的绿色背景 */
}

背景图像

background-image 属性指定用作元素背景的图像。
默认情况下，图像会重复，以覆盖整个元素。

页面的背景图像可以像这样设置：

body {
  background-image: url("paper.gif");
}

还可以为特定元素设置背景图像，例如 <p> 元素：

p {
  background-image: url("paper.gif");
}

CSS边框

CSS 边框属性
CSS border 属性允许我们指定元素边框的样式、宽度和颜色。

CSS 边框样式

border-style 属性指定要显示的边框类型，可以设置一到四个值（用于上边框、右边框、下边框和左边框）
例：

p.solid {border-style: solid;}

在这里插入图片描述

边框宽度

border-width 属性指定四个边框的宽度。

可以将宽度设置为特定大小（以 px、pt、cm、em 计），也可以使用以下三个预定义值之一：thin、medium 或 thick

特定边的宽度
border-width 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）

边框颜色

border-color 属性用于设置四个边框的颜色。

可以通过以下方式设置颜色：

name - 指定颜色名，比如 “red”
HEX - 指定十六进制值，比如 “#ff0000”
RGB - 指定 RGB 值，比如 “rgb(255,0,0)”
HSL - 指定 HSL 值，比如 “hsl(0, 100%, 50%)”
transparent

注：如果未设置 border-color，则它将继承元素的颜色。

CSS边距

外边距

CSS margin 属性用于在任何定义的边框之外，为元素周围创建空间。

通过 CSS，我们可以完全控制外边距。有一些属性可用于设置元素每侧（上、右、下和左）的外边距。
Margin - 简写属性
为了缩减代码，可以在一个属性中指定所有外边距属性。

margin 属性是以下各外边距属性的简写属性：

margin-top
margin-right
margin-bottom
margin-left

工作原理：
如果 margin 属性有四个值：
margin: 25px 50px 75px 100px;

上外边距是 25px
右外边距是 50px
下外边距是 75px
左外边距是 100px

内边距

CSS padding 属性用于在任何定义的边界内的元素内容周围生成空间。

通过 CSS，我们可以完全控制内边距（填充）。有一些属性可以为元素的每一侧（上、右、下和左侧）设置内边距。

Padding - 单独的边

padding-top
padding-right
padding-bottom
padding-left

所有内边距属性都可以设置以下值：

length - 以 px、pt、cm 等单位指定内边距 % -
指定以包含元素宽度的百分比计的内边距 inherit
指定应从父元素继承内边距

CSS尺寸

CSS 高度和宽度值
height 和 width 属性可设置如下值：

auto - 默认。浏览器计算高度和宽度。
length - 以 px、cm 等定义高度/宽度。
% - 以包含块的百分比定义高度/宽度。
initial - 将高度/宽度设置为默认值。 inherit - 从其父值继承高度/宽度。

例：

div {
  height: 200px;
  width: 50%;
}

注：height 和 width 属性不包括内边距、边框或外边距。它们设置的是元素的内边距、边框和外边距内的区域的高度/宽度。

CSS框模型

CSS 框模型实质上是一个包围每个 HTML 元素的框。它包括：外边距、边框、内边距以及实际的内容。

内容：框的内容，其中显示文本和图像。
内边距：清除内容周围的区域。内边距是透明的。边框 - 围绕内边距和内容的边框。
外边距：清除边界外的区域。外边距是透明的。框模型允许我们在元素周围添加边框，并定义元素之间的空间。

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

例：

div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

CSS文本

文本对齐

text-align 属性用于设置文本的水平对齐方式。
文本可以左对齐或右对齐，或居中对齐。

h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

文本装饰

text-decoration 属性用于设置或删除文本装饰。

text-decoration: none; 通常用于从链接上删除下划线。

文本阴影

text-shadow 属性为文本添加阴影。

h1 {
  text-shadow: 2px 2px red;
}

CSS组合器

组合器是解释选择器之间关系的某种机制。

CSS 选择器可以包含多个简单选择器。在简单选择器之间，我们可以包含一个组合器。

CSS 中有四种不同的组合器：

后代选择器 (空格)
子选择器 (>)
相邻兄弟选择器 (+)
通用兄弟选择器 (~)

后代选择器
后代选择器匹配属于指定元素后代的所有元素。

 div p {
  background-color: yellow;
}

子选择器
子选择器匹配属于指定元素子元素的所有元素。

div > p {
  background-color: yellow;
}

CSS布局

CSS定位

position 属性
position 属性规定应用于元素的定位方法的类型。

有五个不同的位置值：

static
relative
fixed
absolute
sticky

元素其实是使用 top、bottom、left 和 right 属性定位的。但是，除非首先设置了 position 属性，否则这些属性将不起作用。根据不同的 position 值，它们的工作方式也不同。

CSS溢出

CSS Overflow
overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。

overflow 属性可设置以下值：

visible - 默认。溢出没有被剪裁。内容在元素框外渲染
hidden - 溢出被剪裁，其余内容将不可见
scroll - 溢出被剪裁，同时添加滚动条以查看其余内容
auto - 与 scroll 类似，但仅在必要时添加滚动条

CSS浮动

CSS float 属性规定元素如何浮动。

float 属性可以设置以下值之一：

left - 元素浮动到其容器的左侧
right - 元素浮动在其容器的右侧
none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
inherit - 元素继承其父级的 float 值

CSS clear 属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。
clear 属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧。

伪类以及伪元素

伪类
伪类用于定义元素的特殊状态。

它可以用于：

设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式

语法：

selector:pseudo-class {
  property: value;
}

伪元素
CSS 伪元素用于设置元素指定部分的样式。

它可用于：

设置元素的首字母、首行的样式
在元素的内容之前或之后插入内容

语法：

selector::pseudo-element {
  property: value;
}

Lil DD

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫