1.css3

1.引入外部样式表的格式：

<link rel=”stylesheet” type=”text/css” href=”../css/style1.css”>

 

2.样式表第一行应注明编码类型：

@charset “utf-8”;

 

3.css语法：

①一个元素中多个属性用分号隔开，多个元素之间用逗号隔开；

②元素中属性的值一般不加引号，但是当值是若干个单词，就要给值加引号；

③注释：/*```*/   （快捷键是ctr+?）；

④优先级：内联样式>内部样式>外部样式；但是!important是强制优先的作用；

 

4.css选择器：行内样式优先级>id选择器优先级>类选择器优先级>元素选择器优先级

①常用选择器：

 

②属性选择器：

⑴选择具有value和style属性的input元素：

 

⑵选择具有value属性且属性值等于vip的input元素：

 

⑶选择具有value属性且属性值有多个且其中一个的值等于vip的input元素：

 

⑷选择具有lang属性且属性值以en开头且用’-’分隔的p元素：

 

⑸选择具有value属性且属性值以vip开头的input元素：

 

⑹选择具有value属性且属性值以vip结尾的input元素：

 

⑺选择具有value属性且属性值包含vip的input元素：

 

③关系选择器：

⑴后代选择器（包含选择器）：

 

⑵子元素选择器：与后代选择器相比，只能选择作为某元素子元素的元素，缩小了选择范围。

 

⑶相邻选择符：选择紧贴在**元素之后的元素。

 

⑷兄弟选择器：选择**元素之后的所有兄弟元素。

 

④伪元素选择器：

⑴e:first-letter/e::first-letter：设置e元素内第一个字符的样式。

⑵e:first-line/e::first-line：设置e元素内第一行样式。

⑶e:before/e::before：在每个e元素之前插入内容。用来和content属性一起使用。

 

⑷e:after/e::after：在每个e元素之后插入内容。用来和content属性一起使用。

 

⑸e:selection/e::selection：设置对象被选择时的颜色。

⑤伪类选择器：

e:first-child：选择父元素的第一个子元素e。

:root：选择文档的根元素。

e:last-child：最后一个子元素e。

e:only-child：仅有的一个子元素e。

e:only-of--type：只有一种类型的子元素。

e:nth-child(n)：匹配父元素的第n个子元素e。

e: nth-last-child(n)：匹配父元素的倒数第n个子元素e。

e: first-of--type：匹配同类型中第一个同级兄弟元素e。

e: last-of--type：匹配同类型中最后一个同级兄弟元素e。

e: nth-of-type(n)：匹配同类型中第n个同级兄弟元素e。

e: nth-last-of-type(n)：匹配同类型中倒数第n个同级兄弟元素e。

e:empty：匹配没有任何子元素的元素。

⑥ui伪类选择器：

e:active：向被激活的元素添加样式（点击的时候）。

e:hover：当鼠标悬浮在元素上方时，向元素添加样式。

e:link：当未被访问的链接添加样式。

e:visited：向已被访问的链接添加样式。

⑦其他选择器：

e:focus：向拥有键盘焦点的元素添加样式。

e:lang(en)：向带有指定lang属性的元素添加样式。

#e:target：选择当前活动的锚点元素。

:not(e)：选择e元素之外的每个元素。

input:checked：选择每个被选中的input元素。

input:disabled：选择每个被禁用的input元素。

input:enabled：选择每个被启用的input元素。

 

5.css3中表示颜色的几种方式：

⑴颜色名称、十六进制、rgb方式；

⑵rgba方式：新增了alpha参数，介于0.0（完全透明）到1.0（完全不透明）之间；

 

⑶hsl方式：分别表示色调、饱和度、亮度。

h色调：取值区间在0-360，0或360表示红色，120表示绿色，240表示蓝色；

s饱和度：取值为0.0%-100.0%；

l亮度：取值为0.0%-100.0%；

⑷hsla方式：新增了alpha参数，介于0.0（完全透明）到1.0（完全不透明）之间；

 

 

6.css3文字与字体：

 

①font-size：大小。

⑴通常使用px、百分比、em来设置大小；

⑵xx-small、x-small、small、medium、large、x-large、xx-large设置为不同尺寸，默认值medium；

⑶smaller设置为比父元素更小的尺寸；

⑷larger设置为比父元素更大的尺寸；

②font-variant：规定是否以小型大写字母的字体显示文本。

⑴normal默认值，浏览器会显示一个标准字体；

⑵small-caps浏览器会显示小型大写字母的字体；

③font-style：样式。

⑴normal默认值，显示一个标准字体；

⑵italic显示一个斜体的样式；

⑶oblique显示一个斜体的样式；

④font-weight：粗细。

⑴normal默认值；

⑵bold粗体；

⑶bolder更粗的粗体，lighter更细的字体；

⑷100-900：定义由粗到细的字体。400等同于normal，700等同于bold；

⑤font-family：字体系列（宋体、楷体、黑体）。

⑥font：在一个声明中设置所有字体属性。

⑴至少要指定字体大小size和字体系列family；

⑵可以按默认顺序设置：font-style/font-variant/font-weight/font-size/font-family；

 

⑦@font-face：嵌入字体。

有字网：

 

7.css3文本属性：

①color：颜色。

②text-align：文本水平对齐方式。

⑴left默认值，right，center，justify两端对齐；

⑵新增start相当于left，end相当于right；

③line-height：行高。

normal，数字，百分比，px，em；

④text-indent：首行缩进。

常用单位像素，百分比，em；

⑤text-decoration：添加修饰。

⑴none默认值；

⑵underline加下划线；

⑶overline加上划线；

⑷line-through加穿过文本的线；

⑸blink加闪烁的文本；

⑥letter-spacing/word-spacing：字符间距。

⑦text-transform：大小写。

⑴none默认值；

⑵uppercase转换为大写；

⑶lowercase转换为小写；

⑷capitalize转换为首字母大写；

⑧text-shadow添加阴影。