id选择器#para1class选择器.center、指定特定的 HTML 元素使用 classp.center {text-align:center;}内部样式表外部样式表background-repeatbackground-positionbackground-position:right top;简写属性当使用简写属性时属性值的顺序为:background-colorbackground-imagebackground-repeatbackground-attachmentbackground-positionbody {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;}字体大小h1 {font-size:40px;}h2 {font-size:30px;}p {font-size:14px;}em可以用于设置字体大小1em的默认大小是16px。可以通过下面这个公式将像素转换为empx/16emh1 {font-size:2.5em;} /* 40px/162.5em */h2 {font-size:1.875em;} /* 30px/161.875em */p {font-size:0.875em;} /* 14px/160.875em */在所有浏览器的解决方案中设置 body元素的默认字体大小的是百分比body {font-size:100%;}链接样式a:link {color:#000000;} /* 未访问链接*/a:visited {color:#00FF00;} /* 已访问链接 */a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */a:active {color:#0000FF;} /* 鼠标点击时 */列表有序列表 ul有序列表 olul.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; }paddingPadding属性可以有一到四个值。padding:25px 50px 75px 100px;上填充为25px右填充为50px下填充为75px左填充为100pxpadding:25px 50px 75px;上填充为25px左右填充为50px下填充为75pxpadding:25px 50px;上下填充为25px左右填充为50pxpadding:25px;所有的填充都是25px分组选择器h1,h2,p { color:green; }嵌套选择器p{ }: 为所有p元素指定一个样式。.marked{ }: 为所有classmarked的元素指定一个样式。.marked p{ }: 为所有classmarked元素内的p元素指定一个样式。p.marked{ }: 为所有classmarked的p元素指定一个样式。css尺寸display:none或visibility:hidden头一个不会占用空间后面一个会占用空间display: inline;和display: block;是 CSS 中最基础的两个布局属性它们决定了元素在页面上的表现方式和占位行为。简单来说inline内联元素像文字一样排列不独占一行。block块级元素会独占一整行像一个方块position(定位)position 属性的五个值staticHTML 元素的默认值即没有定位遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。relative相对定位元素的定位是相对其正常位置。fixed​​​​​元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动absolute绝对定位的元素的位置相对于最近的已定位父元素如果元素没有已定位的父元素那么它的位置相对于html:stickysticky 英文字面意思是粘粘贴所以可以把它称之为粘性定位。position: sticky; 基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动在position:relative与position:fixed定位之间切换。它的行为就像position:relative;而当页面滚动超出目标区域时它的表现就像position:fixed;它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位之后为固定定位。CSS OverflowFloat浮动float:left rightCSS组合选择符后代选择器(以空格 分隔)后代选择器用于选取某元素的后代元素。子元素选择器(以大于 号分隔与后代选择器相比子元素选择器Child selectors只能选择作为某元素直接/一级子元素的元素。相邻兄弟选择器以加号 分隔相邻兄弟选择器Adjacent sibling selector可选择紧接在另一元素后的元素且二者有相同父元素。如果需要选择紧接在另一个元素后的元素而且二者有相同的父元素可以使用相邻兄弟选择器Adjacent sibling selector。普通兄弟选择器以波浪号 分隔伪类和伪元素伪类Pseudo-classes选择一个元素的特定状态。比如鼠标悬停时、被点击时、第一个子元素等。伪元素Pseudo-elements创建虚拟的元素。比如在真实元素的内容之前或之后插入一段文字或者选中第一行文字。!important用于增加优先级权重覆盖其他任何声明HTML和CSS全称HTML:HyperText Markup Language 超文本标记语言CSS: Cascading Style Sheets 层叠样式表