欢迎光临散文网 会员登陆 & 注册

千锋web前端开发项目教程_1000集完全零基础入门HTML5+CSS3+JS到

2023-07-12 11:45 作者:起风了小心沙子儿  | 我要投稿

伪类选择器

a:link 访问之前的状态

a:visited 访问之后的状态

标签:hover 鼠标移入之后的状态

a:active 鼠标按下的状态

伪类选择器除了hover以外只能在a标签上使用

顺序不能颠倒,但是可以少某个状态

直接子集选择器

选择器1>选择器2{

}

优先级(权重)

四位数字表示

标签选择器 0001

类名的权重 0010

id的权重 0100

后代选择器 选择器权重之和

伪类选择符的权重为0010 如 :link :visited......

a:link{}

内联样式权重 1000

css样式

1.文字大小

font-size:16px;

默认值是16px,

最大值没有限定,

最小值一般是12px(谷歌浏览。edeg),有的浏览器最小是10px

2.字体类型

font-family:"宋体";

默认字体类型:微软雅黑

单个的字体类型,名字是单独的单词 双引号可以省略,

字体类型是一组词组的情况下,双引号必须写

字体类型是多个的情况下,类型之间用逗号隔开

font-family: "hahaha" ,"宋体","华文隶书";

先看第一个字体类型有没有,有直接显示,没有看第二个,第二个有显示没有看下一个,如果都没有的情况下显示默认值

3文字颜色

color:red;

颜色的表示方式

英文单词

#6位十六进制 == #c24c25

十六进制:取值范围0-9 a-f

rgb(255,0,0)

三原色取值范围 0-255之间

rgba(255,0,0,0.5)

最后一位表示透明度:

透明度取值范围0-1之间,0表示透明,1不透明

0.5可以简写为.5

4.文字粗细

font-weight:100|200|300|400|500|600|700|800|900|lighter|normal|bold|bolder;

正常:400|500|normal

细体:100|200|300|lighter

加粗:600|700|800|900|bold|bolder

5.文字倾斜

font-style: italic|oblique|normal;

倾斜: italic|oblique

正常:normal

区别:

Italic是指斜体字,而Oblique是倾斜的文字,对于没有斜体的字体应该使用Oblique属性值来实现倾斜的文字效果.

6.文字水平对齐方式

text-align:left|center|right|justify;

left:默认值 从左向右

right:从右向左

center:居中

justify:两端对齐(对中文不起作用,部分浏览器不起作用)

7.文字垂直对齐方式

line-height:value;

line-height = height 垂直居中

line-height > height 文字偏下

line-height < height 文字偏上

8.文本修饰

text-decoration: line-through|underline|overline|none;

line-through:删除线

underline:下划线

overline:上划线

none:去掉

同时具有上划线,下划线,中划线

text-decoration: line-through underline overline;

9.首行缩进

text-indent:32px|2em;

32px---->文字默认是16px,缩进的是2个字

2em-----字体的2倍

可以写负数,但是不建议

文字复合属性

font:weight style size/line-height family ;

line-height family这两个属性必须要写

10.列表属性

list-style:none;----可以给ul,ol,li

11边框

border-width:1px;

border-style:solid|dashed|dotted|double|none;

边框的样式

solid:实线

dashed:虚线

dotted:d点划线

double:双线

none:没有-----适用于有边框需要去掉的时候

border-color:#000;

border: 20px solid #000;-----四个方向都有边框

上边框

border-top-width:2px ;

border-top-style: solid;

border-top-color: red;

上边框简写

border-top: 2px solid red;

下边框

border-bottom-width:2px ;

border-bottom-style: solid;

border-bottom-color: red;

下边框简写

border-bottom: 2px solid red;

左边框

border-left-width:2px ;

border-left-style: solid;

border-left-color: red;

左边框简写

border-left: 2px solid red;

右边框

border-right-width:2px ;

border-right-style: solid;

border-right-color: red;

右边框简写

border-right: 2px solid red;

千锋web前端开发项目教程_1000集完全零基础入门HTML5+CSS3+JS到的评论 (共 条)

分享到微博请遵守国家法律