CSS学习指南知识框架总结
2022-10-13 10:41:42 0 举报AI智能生成
CSS学习指南知识框架总结
作者其他创作
大纲/内容
第四章：值和单位
数字
整数
实数
百分比
颜色
命名颜色：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
URL
相对路径
绝对路径
关键字：有时一些值需要用关键词来描述
CSS2单位
角度值
度：deg
梯度：grad
弧度：rad
时间值
毫秒 ms
秒 s
频率值
第五章：字体
指定字体：font-family:
字体加粗：font-weight：bold
字体大小：font-size
绝对大小：
相对大小：
百分比和大小
p{font-size:12px}
em{font-size:120%;}
字体风格:font-style
斜体：italic
倾斜：obliqique
字体变形：font-variant
small-caps:小型大写
font属性，一种缩写方式。
行高：line-height:
第六章：文本属性
缩进和水平对齐
text-indent:3em;段落首行缩进3em
text-align水平对齐
垂直对齐
行高：line-height
行高和继承
垂直对齐文本：vertical-align
基线对齐：baseline
上标：super 下标：sub
底端对齐：bottom
居中对齐：middle
百分比：vertical-align:50%;
长度对齐：vertical-align：5px;
字间隔和字母间隔
word-spacing:3px;
letter-spacing:3px;
文本转换：text-transform
uppercase:全大写
lowercase:全小写
capitalize:每个单词首字大写
文本装饰：text-decoration
underline 下划线
line-through 中间贯穿线
blink会闪烁文本
none会关闭所有的装饰
文本阴影text-shadow:green 5px 0.5em;
处理空白符：white-space
特殊用法：nowrap 禁止文本换行
第一章：CSS和文档
元素：是文档结构的基础。P,SPAN,A DIV等都是元素
可替换元素:如img等
不可替换元素
块级元素：block-level
行内元素：inline-level
CSS属性：display的主要值
block:
inline（默认）
list-item
link标记：
利用link外接外部样式表
rel:关系,一般为stylesheet
type:text/css
herf:url
media:all
一个文件可以多个link标记。
style元素
<style tye="text/css"></style>
@import指令
与link类似，加载外部样式表
可以在URL之后加入样式的媒体：@import url(ss.css) all;
@import 只能存在于样式表的开头
css的注释： /* 注释 */
第二章：选择器
每个CSS规则
h1{color:red;background:#000;}
h1：就是选择器
{}中间的就是声明块
color:red 就是声明，声明块可以多个声明
color为属性
reg为值
如果一个属性可以多个值p{ font:medium helvetica;}
分组
选择器分组：h2,p{color:#000}
通配选择器：*{color:#fff;}
结合选择器和声明的分组
类选择器和ID选择器
类选择器：
p.warning{font-weight:bold}
多类选择器：p.warning.hel{font-weight:bold}
ID选择器：
#para {font-weight:bold}
使用ID有什么不同？
唯一
属性选择器：
简单属性选择器：h1[class]{font-size:12px;}
根据具体属性值选择：a[href="www.css.com"]{font-weight:bold;}
根据部分属性值选择：
[foo^="bar"]表示一bar开头的所有元素
[foo$="bar"]表示一bar结尾的所有元素
[foo^="bar"]表示包含有bar的所有元素
特定属性的选择类型：img[src|="mm"]{border:1px solid gray;}
父子关系
后代选择器
h1 em{color:#333;} 作为h1元素后代任何em元素
两个元素之间的层次间隔可以是无限的
选择子元素
h1>em{color:#333;}
p>a>strong的父子结构，写成p>strong是不行的
选择相邻的兄弟元素
h1+p{color:#333;}
伪类和伪元素
伪类选择器
连接伪类
:link
:visited
动态伪类
:focus
:hover
:active
伪类顺序
1:link
2:visited
3:hover
4:active
第一个子元素
first-child
根据语言选择
:lang(cn){color:#333;}
综合伪类
a:link:hover{color:red;}
伪元素选择器
设置首字母样式
p:first-letter{color:red;}
设置第一行的样式
p:first-line{color:red;}
:first-letter 和:first-line的限制
不能应用于超链接行内元素
所有的伪元素都必须放在该伪元素的最后面。p:first-line em{}不合法
:before和:after
body:after{content:"The End."}
第三章：结构和层叠
特殊性
如果选择器多个属性发生冲突，最高特殊性的声明才会胜出
选择器值的表述分为4个部分，如0,0,0,0
对于选择器中给定的各个ID属性值：0,1,0,0
对于选择器给定各个类属性值,属性选择为伪类：0,0,1,0
对于选择器中给定的各个元素和伪元素0,0,0,1
声明特殊性
通配选择器特殊性：选择器中包括通配选择器和其他选择器，该选择器的特殊性不会因为通配选择器的出现而改变。
ID和属性选择器的特殊性:html>body table tr[id="totls"] td ul>li{color:#333;} (0,0,1,7)li#answer{color:#444}(0,1,0,1)
内联样式特殊性：内联样式特殊性最高（1,0,0,0）。<h1 id="www" style="color:green">测试</h1>
重要性
!important标志
标志总是放在声明最后，分号之前，否则无效。
继承
样式不仅会应用到指定元素，还会应用到它的后代元素。
有些属性不能继承
border
层叠
按权重和来源排序
两个规则应用到同一元素，有!important标志胜出
按特殊性排序
p#ii{color:red:}大于p{color:#333;}
按顺序排序
如果权重、特殊性、来源都一致，最后只能排在文件后面的获胜
第七章：基本视觉格式化
0 条评论
下一页
