

首页  思维导图  详情



CSS学习指南知识框架总结

2022-10-13 10:41:42   0  举报





AI智能生成

CSS学习指南知识框架总结

CSS学习

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元素

&lt;style tye=&quot;text/css&quot;&gt;&lt;/style&gt;

@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=&quot;www.css.com&quot;]{font-weight:bold;}

根据部分属性值选择：

[foo^=&quot;bar&quot;]表示一bar开头的所有元素

[foo$=&quot;bar&quot;]表示一bar结尾的所有元素

[foo^=&quot;bar&quot;]表示包含有bar的所有元素

特定属性的选择类型：img[src|=&quot;mm&quot;]{border:1px solid gray;}

父子关系

后代选择器

h1 em{color:#333;} 作为h1元素后代任何em元素

两个元素之间的层次间隔可以是无限的

选择子元素

h1&gt;em{color:#333;}

p&gt;a&gt;strong的父子结构，写成p&gt;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:&quot;The End.&quot;}

第三章：结构和层叠

特殊性

如果选择器多个属性发生冲突，最高特殊性的声明才会胜出

选择器值的表述分为4个部分，如0,0,0,0

对于选择器中给定的各个ID属性值：0,1,0,0

对于选择器给定各个类属性值,属性选择为伪类：0,0,1,0

对于选择器中给定的各个元素和伪元素0,0,0,1

声明特殊性

通配选择器特殊性：选择器中包括通配选择器和其他选择器，该选择器的特殊性不会因为通配选择器的出现而改变。

ID和属性选择器的特殊性:html&gt;body table tr[id=&quot;totls&quot;] td ul&gt;li{color:#333;} (0,0,1,7)li#answer{color:#444}(0,1,0,1)

内联样式特殊性：内联样式特殊性最高（1,0,0,0）。&lt;h1 id=&quot;www&quot; style=&quot;color:green&quot;&gt;测试&lt;/h1&gt;

重要性

!important标志

标志总是放在声明最后，分号之前，否则无效。

继承

样式不仅会应用到指定元素，还会应用到它的后代元素。

有些属性不能继承

border

层叠

按权重和来源排序

两个规则应用到同一元素，有!important标志胜出

按特殊性排序

p#ii{color:red:}大于p{color:#333;}

按顺序排序

如果权重、特殊性、来源都一致，最后只能排在文件后面的获胜

第七章：基本视觉格式化

 Collect

Get Started

知识体系管理学习指南总结

 Collect

Get Started

前端进阶学习指南（持续更新中）

 Collect

Get Started

Spring MVC学习指南

 Collect

Get Started

华为MPLS技术学习指南





0 条评论

下一页