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;

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180403G1Y5S900?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券