CSS基础标签属性及案例

this is font two

this is font three

3.2 类选择器

使用”.”来描述，引用的的是元素上的class属性值；

格式：

.class属性值{

​ 属性名:属性值;

}

处理多个元素有相同样式效果的；

this is font red

this is font red

this is font green

this is font green

this is font blue

this is font blue

3.3 标签选择器

对页面上的标签进行统一的设置，引用的就是标签的名称；

格式：

标签名{

​ 属性名:属性值;

}

this is a font1

this is a span1

this is a font2

this is a div1

this is a span2

this is a font3

this is a div2

3.4 选择器的分组

多个选择器使用同一段CSS,那么就可以将这多个选择器划为一组,使用分组。选择器之间使用逗号分开；

格式：

id选择器,class选择,元素选择器{

​ 属性名:属性值;

}

this is a font

this is a span

this is a div

3.5 派生选择器

通过依据元素在其位置的上下文关系来定义，可以使标记更加简洁。也称为上下文选择器；

父标签名(父id,父类名) 子标签名(子id,子类名){

​ 属性名:属性值;

}

这是一个font

这是一个font

3.6 选择器的优先级

内联样式 > id选择器 > 类选择器 > 标签选择器

作用范围越小，优先级越大

这是一个font

4.CSS伪类

---

CSS伪类用于向某些选择器添加特殊的效果；

在支持CSS的浏览器中，链接的不同状态都可用不同方式显示，这些状态包括活动状态、已访问状态、未被访问状态、鼠标悬停状态；

a:link {color: #FF0000} 未访问的链接

a:visited {color: #00FF00} 已访问的链接

a:hover {color: #FF00FF} 鼠标移动到链接上

a:active {color: #0000FF} 选定的链接

注意事项

​ a:hover 必须被置于 a:link 和 a:visited 之后

​ a:active 必须被置于 a:hover 之后

this is a super link

this is a font element

按钮

5.CSS的属性

---

5.1 字体属性

CSS 字体属性允许设置字体样式 (font-family) 和字体加粗 (font-weight)，还可以设置字体的大小、字体风格（如斜体）和字体变形（如小型大写字母）；

font-family:

​ 默认微软雅黑，如果浏览器不支持字体系列，就会使用默认的字体系列；

font-size:

​ 字体大小

font-style:

​ 字体倾斜度

font-weight:

​ 字体的粗细

这是一个span标签

5.2 文本属性

可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进；

css文本属性

​ direction:

​ ltr: left to right

​ rtl: right to left

​ line-height:文本行高

​ text-align:文本的对齐方式

​ text-decoration：文本装饰 常用属性underline、none、line-through

​ text-indent:首行缩进以em为单位，如首行缩进2个字符2em；

​ letter-spacing:字符间距,字符与字符之间的间距

​ word-spacing:单词间距,单词与单词之间的间距

这是一个div

超链接

this is a div1

this is a div2

5.3 背景属性

CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果；

background-color:将颜色作为背景

background-image:将图片作为背景

卡卡之家

5.4 尺寸属性

CSS 尺寸 (Dimension)属性允许控制元素的高度和宽度。同样，允许你增加行间距；只对你设定的范围有效；

CSS尺寸属性对行内元素无效，只对是块级元素

这是一个div

总结

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

mage:将图片作为背景

卡卡之家

5.4 尺寸属性

CSS 尺寸 (Dimension)属性允许控制元素的高度和宽度。同样，允许你增加行间距；只对你设定的范围有效；

CSS尺寸属性对行内元素无效，只对是块级元素

这是一个div

总结

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。