CSS知识点记录

id选择器

#para1

class选择器

.center、

指定特定的 HTML 元素使用 class

p.center {text-align:center;}

内部样式表>外部样式表

background-repeat

background-position

background-position:right top;

简写属性

当使用简写属性时，属性值的顺序为：:

background-color
background-image
background-repeat
background-attachment
background-position

body {background:#ffffff url('img_tree.png') no-repeat right top;}

color 文本颜色

text-align 文本对齐方式

text-decoration 文本装饰线

text-transform 大小写

可用于所有字句变成大写或小写字母，或每个单词的首字母大写。

p.uppercase {text-transform:uppercase;}

p.lowercase {text-transform:lowercase;}

p.capitalize {text-transform:capitalize;}

text-indent 文本缩进

p {text-indent:50px;}

white-space 设置是否换行

white-space:nowrap; 不换行

font-family 字体系列

p{font-family:"Times New Roman", Times, serif;}

字体样式

这个属性有三个值：

正常 - 正常显示文本
斜体 - 以斜体字显示的文字
倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

链接样式

a:link {color:#000000;} /* 未访问链接*/

a:visited {color:#00FF00;} /* 已访问链接 */

a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */

a:active {color:#0000FF;} /* 鼠标点击时 */

列表

有序列表 ul

有序列表 ol

ul.a {list-style-type: circle;}

ul.b {list-style-type: square;}

ol.c {list-style-type: upper-roman;}

ol.d {list-style-type: lower-alpha;}

表格

tr 同一行

th 表头

td 普通表格内容

table,th, td { border: 1px solid black; }

solid表示实线

宽度和高度设置

table { width:100%; } th { height:50px; }

padding

Padding属性，可以有一到四个值。

padding:25px 50px 75px 100px;

上填充为25px
右填充为50px
下填充为75px
左填充为100px

padding:25px 50px 75px;

上填充为25px
左右填充为50px
下填充为75px

padding:25px 50px;

上下填充为25px
左右填充为50px

padding:25px;

所有的填充都是25px

分组选择器

h1,h2,p { color:green; }

嵌套选择器

p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class="marked" 的元素指定一个样式。
.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。

css尺寸

display:none或visibility:hidden

头一个不会占用空间，后面一个会占用空间

`display: inline;` 和 `display: block;`

是 CSS 中最基础的两个布局属性，它们决定了元素在页面上的表现方式 和占位行为。

简单来说：

inline（内联） ：元素像文字一样排列，不独占一行。
block（块级） ：元素会独占一整行，像一个方块

position(定位)

position 属性的五个值：

static

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。

静态定位的元素不会受到 top, bottom, left, right影响。

relative

相对定位元素的定位是相对其正常位置。

fixed

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动：
absolute

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:

sticky

sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。

position: sticky; 基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

CSS Overflow

Float（浮动）

float:left right

CSS组合选择符

后代选择器(以空格分隔)

后代选择器用于选取某元素的后代元素。

子元素选择器(以大于 > 号分隔）

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素直接/一级子元素的元素。

相邻兄弟选择器（以加号 + 分隔）

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

普通兄弟选择器（以波浪号～分隔）

伪类和伪元素

伪类（Pseudo-classes） ：选择一个元素的特定状态。比如鼠标悬停时、被点击时、第一个子元素等。
伪元素（Pseudo-elements） ：创建虚拟的元素。比如在真实元素的内容之前或之后插入一段文字，或者选中第一行文字。

!important

用于增加优先级权重，覆盖其他任何声明

HTML和CSS全称

HTML:HyperText Markup Language 超文本标记语言

CSS: Cascading Style Sheets 层叠样式表