Erlo

1.css3

时间:2019-10-09 20:04   阅读:16次   来源:博客园
页面报错
点赞

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

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

 

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

@charset “utf-8”;

 

3.css语法:

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

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

③注释:#zs#```#fzs#   (快捷键是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:嵌入字体。

有字网:https://www.webfont.com/vipcsslist/index

 

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添加阴影。

 

 

评论留言

还没有评论留言,赶紧来抢楼吧~~

Erlo大厅()

* 这里是“吐槽厅”,所有人可看,只保留当天信息。

  • Erlo.vip2019-10-24 02:13:41Hello、欢迎使用吐槽厅,这里是个吐槽的地方。
  • 返回顶部