h5学习之3(h5的常用选择器和css常见样式)

来源：互联网发布：写时时彩缩水源码教程编辑：程序博客网时间：2024/04/29 05:44

1.HTML常用选择器

选择器的定义：指的是一种模式，用于选择需要添加样式的元素。

1）标签选择器又称元素选择器，换句话说，文档的元素就是最基本的选择器

语法：标签名{css样式1；css样式2；...} 例如：

div{width:100px;height:100px;background: red;}

2）id选择器

ID 选择器前面有一个 # 号 - 也称为棋盘号或井号

语法：①首先标签中设置一个id属性，

②在head标签中写个style标签③在style标签里写个具体的id选择器的内部样式

#id名称{css样式1，css样式2，...}例如：

#div{width: 100px;height: 100px;background: red;}

注意：id名称在当前文件中有且中有一个，不能重复，否则在给标签设置样式的时候相同id名称的标签会随样式设置的改变而改变

3）类选择器

语法：①首先标签中设置一个class属性，②在head标签中写个style标签③在style标签里写个具体的类选择器的内部样式

.类名{css样式1，css样式2，...}

例如：.div{width:100px;height:100px;background: red;}

上面说的三种选择器为常用的选择器，具体写法如下：（px为单位，表示像素）

<!DOCTYPE html>

<html>

<head>

<styletype="text/css">

/*标签选择器写法*/

div{width:100px;

height:100px;

background: red;

}

/*id选择器写法*/

#id1{width: 50px;

height: 80px;

background: blue;

}

/*class选择器写法*/

.class{width: 30px;

height: 60px;

background: yellow;

}

</style>

</head>

<body>

</body>

</html>

2.选择器的优先级

优先级指的是浏览器在识别标签的时候，会根据各个标签的权重大小显示那个选择器所设置的样式，通俗来讲就是：当同一个标签设置了多多不同的样式，发生成冲突时，哪个说了算。

具体的为：id选择器大于class选择器大于标签选择器

具体的标签的权重如下：

id选择器的权重为100，class选择器的权重为10，标签选择器的权重为1

例如：

假设该标签三种选择器都设置了同样样式属性但属性值不同，能在浏览器上显示的样式只有id选择器中的属性值。

3.css常见样式

1）width:100px; 设置宽度为100像素

2）height：100px;设置高度为100像素

3）background-image：url（背景图地址）；设置背景图片

4）background-repeat：no-repeat；设置背景图片不平铺

5）background-repeat：repeat-x；设置背景图片水平方向平铺

6）background-repeat：repeat-y；设置背景图片垂直方式平铺

7）background-position-x：left或right或content或数值；设置背景图片在水平位置的对齐方式向左/向右/居中/距离左边多少像素

8）background-position-y：top或bottom或content或数值；设置背景图片在垂直位置的对齐方式向上/向下/居中/距离上边多少像素

9）backgtound-position的复合写法为

background-position：left或right或数值 top或bottom或数值；设置背景图片向左/向右且向上/向下对齐

注：属性值为一个参数则表示向水平方向对齐的位置，垂直方向默认为崔志居中，如果属性值为两个，则第一个参数表示水平方向对齐的位置，第二个参数表示垂直方向对齐的位置，两个参数之间用空格隔开

10）background-color:red（颜色英文名字）；设置背景的颜色

11）background-attachment：fixed或scroll；设置背景图片是否滚动，其中fixed表示固定不动，始终可以看见的，scroll表示随浏览器的滚动后不见（浏览器的默认属性值）

background的复合写法：background: blue url()no-repeatright;

第一个表示颜色，第二个表示图片路径，第三个表示是否平铺，第四个表示对齐方向

12）color：颜色英文名；设置文本字体颜色

13）font-style：italic或normal；设置文本样式，talic表示斜体，normal为默认值

14）font-weight：bold或bolder或数值；设置文本字体的粗细，bold表示粗体，bolder表示更粗，数值取值范围为100-900，bold对应值为700 默认值为400

15）direction: rtl或ltr;设置文字排版方向，ltr(默认):left to right表示从左往右排版，

rtl:right to left表示从右往左排版

16）word-wrap: break-word；设置文字强行换行

17）word-spacing: 10px;设置单词之间的间距

18）text-align: left或right或center；设置文字居中方式，默认对齐方式left向左对齐

19）text-indent: 32px;设置首行缩进

20）text-decoration:underline或overline或line-through或none;设置文本修饰

none(默认值):没有线;underline:下划线 ;overline:上划线;line-through:删除线

21）text-transform:capitalize;文字转换(针对英文来讲)，uppercase:大写字母，lowercase:小写字母，capitalize:首字母大写

22）font-size: 30px;设置文本字体大小

23）line-height:600px;设置行高，行与行之间的垂直距离，对于单行文本，可以让其居中显示，一般值等于所在标签的高度

24）font-family: "微软雅黑";设置字体样式

以上为本人自我学习的知识总结，本人知识有限，如有不周到之处，敬请谅解

0 0