CSS权威指南演讲人2020-09-09目录01.02.第一章：CSS和文档第二章：选择器04.03.第七章：基本视觉格式化第三章：结构和层
叠06.05.第五章：字体第四章：值和单位07.第六章：文本属性01第一章：CSS和文档LOGO第一章：CSS和文档0102可替换
元素:如img等不可替换元素元素：是文档结构的基础。P,SPAN,ADIV等都是元素0304块级元素：block-level行内
元素：inline-levelhttps://www.wps.cnblock:inline（默认）list-item第一章：CSS
和文档CSS属性：display的主要值link标记：利用link外接外部样式表rel:关系,一般为stylesheettype
:text/cssherf:urlmedia:all一个文件可以多个link标记。第一章：CSS和文档style元素单击此处输入你
的正文，文字是您思想的提炼，为了最终演示发布的良好效果，请尽量言简意赅的阐述观点；根据需要可酌情增减文字。单击此处输入你的正文，文
字是您思想的提炼，为了最终演示发布的良好效果，请尽量言简意赅的阐述观点；根据需要可酌情增减文字。单击此处输入你的正文，文字是您思想
的提炼，为了最终演示发布的良好效果，请尽量言简意赅的阐述观点；根据需要可酌情增减文字。单击此处输入你的正文，文字是您思想的提炼，为
了最终演示发布的良好效果，请尽量言简意赅的阐述观点；根据需要可酌情增减文字。与link类似，加载外部样式表壹第一章：CSS和文档可
以在URL之后加入样式的媒体：@importurl(ss.css)all;贰@import指令@import只能存在于样式表
的开头叁第一章：CSS和文档css的注释：/注释/02第二章：选择器第二章：选择器每个CSS规则分组类选择器和ID选择器
ABC父子关系伪类和伪元素DEh1{color:red;background:#000;}{}中间的就是声明块第二章：选择器010
3每个CSS规则0204h1：就是选择器如果一个属性可以多个值p{font:mediumhelvetica;}每个CSS规则h
1{color:red;background:#000;}h1：就是选择器如果一个属性可以多个值p{font:medium
helvetica;}{}中间的就是声明块color:red就是声明，声明块可以多个声明color为属性reg为值选择器分组：
h2,p{color:#000}壹第二章：选择器通配选择器：{color:#fff;}贰分组结合选择器和声明的分组叁分组选择器分
组：h2,p{color:#000}结合选择器和声明的分组通配选择器：{color:#fff;}第二章：选择器类选择器：01类选
择器和ID选择器ID选择器：02属性选择器：03类选择器和ID选择器0102类选择器：p.warning{font-weight:
bold}多类选择器：p.warning.hel{font-weight:bold}ID选择器：#para{font-weigh
t:bold}使用ID有什么不同？唯一属性选择器：简单属性选择器：h1[class]{font-size:12px;}根据具体属
性值选择：a[href=\"www.css.com\"]{font-weight:bold;}0102根据部分属性值选择：特定
属性的选择类型：img[src|=\"mm\"]{border:1pxsolidgray;}0304[foo^=\"bar\"
]表示一bar开头的所有元素[foo$=\"bar\"]表示一bar结尾的所有元素[foo^=\"bar\"]表示包含有bar的所
有元素01第二章：选择器02父子关系03后代选择器选择相邻的兄弟元素选择子元素010302父子关系后代选择器h1em{colo
r:#333;}作为h1元素后代任何em元素两个元素之间的层次间隔可以是无限的选择相邻的兄弟元素选择子元素h1+p{color:
#333;}h1>em{color:#333;}p>a>strong的父子结构，写成p>strong是不行的第二章：选择器伪类选择
器01伪类和伪元素伪元素选择器02伪类选择器连接伪类动态伪类伪类顺序010203第一个子元素根据语言选择综合伪类040506伪类选
择器连接伪类:link:visited伪类选择器动态伪类:focus:hover:active伪类选择器伪类顺序1:link2:v
isited3:hover4:active伪类选择器第一个子元素first-child伪类选择器根据语言选择:lang(cn){c
olor:#333;}伪类选择器综合伪类a:link:hover{color:red;}伪元素选择器:before和:after:
first-letter和:first-line的限制body:after{content:\"TheEnd.\"}设置第一行
的样式不能应用于超链接行内元素所有的伪元素都必须放在该伪元素的最后面。p:first-lineem{}不合法设置首字母样式p:f
irst-line{color:red;}p:first-letter{color:red;}03第三章：结构和层叠A标志总是放在
声明最后，分号之前，否则无效。第三章：结构和层叠重要性!important标志B继承样式不仅会应用到指定元素，还会应用到它的后代元
素。有些属性不能继承border层叠叁壹贰如果权重、特殊性、来源都一致，最后只能排在文件后面的获胜两个规则应用到同一元素，有!i
mportant标志胜出按顺序排序按权重和来源排序p#ii{color:red:}大于p{color:#333;}按特殊性排序04
第七章：基本视觉格式化第七章：基本视觉格式化05第四章：值和单位P2P1实数第四章：值和单位整数数字第四章：值和单位百分比颜色命名
颜色：gray、black等RGB颜色：十六进RGB颜色color:#EF0000;函数式RGB颜色rgb(100%,100%
,100%)=rgb(255,255,255)长度单位绝对长度单位相对长度单位如何取舍长度单位绝对长度单位in英尺cm厘米mm毫米
pt点pc派卡长度单位相对长度单位em和ex单位像素长度px长度单位如何取舍最好的度量可能是em,也可以是PX第四章：值和单位相
对路径01URL绝对路径02第四章：值和单位关键字：有时一些值需要用关键词来描述CSS2单位角度值时间值频率值度：deg梯度：gr
ad弧度：rad毫秒ms秒s06第五章：字体第五章：字体指定字体：font-family:第五章：字体字体加粗：font-w
eight：bold字体大小：font-sizeABC绝对大小：相对大小：百分比和大小p{font-size:12px}em{
font-size:120%;}第五章：字体斜体：italic倾斜：obliqique字体风格:font-style第五章：字体字
体变形：font-variantsmall-caps:小型大写第五章：字体font属性，一种缩写方式。第五章：字体行高：line-
height:07第六章：文本属性第六章：文本属性0102缩进和水平对齐text-indent:3em;段落首行缩进3emtext
-align水平对齐垂直对齐行高和继承垂直对齐文本：vertical-align行高：line-height基线对齐：base
line上标：super下标：sub底端对齐：bottom居中对齐：middle百分比：vertical-align:50%;长
度对齐：vertical-align：5px;第六章：文本属性0201字间隔和字母间隔word-spacing:3px;lette
r-spacing:3px;第六章：文本属性020103文本转换：text-transformlowercase:全小写upper
case:全大写capitalize:每个单词首字大写LOGO0102第六章：文本属性underline下划线line-through中间贯穿线文本装饰：text-decoration0403none会关闭所有的装饰blink会闪烁文本https://www.wps.cn第六章：文本属性文本阴影text-shadow:green5px0.5em;第六章：文本属性处理空白符：white-space特殊用法：nowrap禁止文本换行感谢聆听 |
|
