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