css入门 笔记

1、

video

src

autoplay与preload相冲。

controls

poster，贴图

loop，循环播放

muted，静音

+js html5media

audio

details summary

marquee

direcction 方向

scrollmount 速度

loop 滚动次数

behavior：滚动类型 slide alternate

html 对空格，回车，tab不敏感。

< >

css

文字属性：

文字样式：

font-style:italic;快捷fs+tab

font-style:normal;快捷fsn+tab

文字粗细：

font-weight:快捷fw

font-weight:bold;快捷fwb

font-weight:bolder;快捷fwbr

文字大小：

font-size:快捷 fz

font-size:30px;fz30

字体：

font-family:"宋体"; 中文必须加双引号。字体必须是用户电脑已安装

font-family: 快捷 ff

font-family:"字体1","备选方案",....;

给界面中英文设置单独字，英文字体写在中文前面：因为英文字体不能处理中文。

font-family:"英文字体","中文字体";

文字缩写格式：

font:style weight size family;

例：font:italic bold 10px "楷体";

size和family必须有属性值才能缩写。

文本属性——

文本装饰：

同样，首字母快捷。

text-decoration:

取值：

underline,line-through,overline

none;常见用于去掉超链接的下划线。

文本水平对齐：

ta text-align:left;

tar text-align:right;

tac text-align:center;

文本缩进：

ti2e text-indent:2em;

颜色属性：

color:英文/rgb(0,0,0)/rgba(0,0,0,1)/十六进制

rgb(三个数字0-255相同时为灰色，数字越大越趋近白色,分别填一个数字则为红绿蓝中的一种颜色)

rgba(a代表透明度，取值0-1，取值越小越透明)

选择器：

1、标签选择器：选择当前界面所有该名称的标签。

p{}

2、id选择器：选择指定ID对应标签。id名称在当前界面不能重复,id名称由字母数字下划线组成，

不能以数字开头，不能以标签名作Id名。

#idname{}

企业开发中，仅为了设置样式一般不用id,id是留给js开发的。

3、类选择器：选择指定类名标签，类名可以重复

.classname{}

一个标签可以绑定多个类名；

class="classname1 classname2"

4、后代选择器：必须用空格隔开，只要放到相应标签中的指定标签都会选中，名称可以用Id和类

div p{}

可以通过空格一直延续下去。

div ul li p{}

5、子元素选择器：相应标签的儿子。用>连接不能加空格。名称可以用id和类,

#identity>p{}

可以通过>符号一直延续下去。

div>ul>li>p{}

6、交集选择器：选择器间没有符号连接。

选择器1选择器2{}

7、并集选择器：用逗号连接

选择器1,选择器2{}

8、兄弟选择器：

相邻兄弟选择器：通过+连接，只能选中紧跟其后的那一个标签。

选择器1+选择器2{}

通用兄弟选择器：通过~连接，选中其后的多个标签2，不论是否隔开

选择器1~选择器2{}

9、序选择器：

a.同级别中的第几个，不区分类型。

:first-child选中同级别中的第一个标签。

:last-child选中同级别中的最后一个标签。

:nth-child(n)选中同级别中的第n个标签。

:nth-last-child(n)选中同级别中的倒数第n个标签

:only-child 选中父元素只有唯一子元素的标签

:nth-child(odd/even)选中同级别中所有奇数/偶数

:nth-child(xn+y)x,y是用户自定义的，n是一个计数器，从0开始递增。

2n+1/2n+0效果与odd/even相同

b.同类型的第几个.

:first-of-type 同级别中同类型的第一个

:last-of-type 同级别中同类型的最后一个

:nth-of-type(n)同级别中同类型的第几个

:nty-last-of-type(n)同级别同类型的倒数第几个

:only-of-type 父元素中只有唯一类型的某个标签。

10、属性选择器:

[attribute]

[attribute=value]

[attribute^=value]

[attribute$=value]

[attribute*=value]

11、通配符选择器：给当前页面所有标签设置属性。性能较差，企业开发用其它替代方案。

*{}

css三大特性

1、继承性，给父元素设置一些属性，后代元素也可以继承。

只有color/font-/text-/line-开头的属性才可以继承

a标签不继承文字颜色和下划线，

h标签不继承文字大小。

企业开发中继承常用在body中设置共用属性。

2、层叠性，

3、优先级，

相同选择器，就近原则。间接选中，如继承，父标签越近用谁。

id>类>标签>通配符>继承>浏览器默认

!important,用于直接选中的标签，*{}通配选是直接选中标签。

优先级权重的计算：

id数量多权重高，id数量相同时，类多权重高，以此类推

id,类，标签等数量相同时，谁写在后面谁权重高。

div,span

块级元素，独占一行，没有设置高度和宽度时，默认和父类元素一样

行内元素，不会独占一行，不能设置宽度和高度

行内块级元素 不会独占一行，能设置宽度和高度

设置元素display属性转换元素显示模式。

di display:inline;

db display:block;

dib display:inline-block;