欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

1.css3

程序员文章站 2023-11-18 22:00:52
1.引入外部样式表的格式: 2.样式表第一行应注明编码类型: @charset “utf-8”; 3.css语法: ①一个元素中多个属性用分号隔开,多个元素之间用逗号隔开 ......

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

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

 

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

@charset “utf-8”;

 

3.css语法:

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

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

③注释:/*```*/   (快捷键是ctr+?);

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

 

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

常用选择器:

 1.css3

属性选择器:

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

 1.css3

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

 1.css3

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

 1.css3

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

 1.css3

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

 1.css3

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

 1.css3

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

 1.css3

关系选择器:

⑴后代选择器(包含选择器):

 1.css3

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

 1.css3

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

 1.css3

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

 1.css3

伪元素选择器:

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

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

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

 1.css3

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

 1.css3

⑸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(完全不透明)之间;

 1.css3

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

h色调:取值区间在0-360,0或360表示红色,120表示绿色,240表示蓝色;

s饱和度:取值为0.0%-100.0%;

l亮度:取值为0.0%-100.0%;

⑷hsla方式:新增了alpha参数,介于0.0(完全透明)到1.0(完全不透明)之间;

 1.css3

 

6.css3文字与字体:

 1.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;

 1.css3

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

 1.css3

 

推荐阅读