前端----CSS(二)

2.CSS的使用

2.1 css中选择器

2.1.1 元素(标签)选择器

它可以对页面上相同的标签进行统一的设置，它描述的就是标签的名称

2.1.2 类选择器

类选择器在使用时使用"."来描述，它描述的是元素上的class属性值

2.1.3 id选择器

它只能选择一个元素，使用 "#" 引入，引用的是元素的id属性值。

id选择器，比类选择器更具有唯一性

2.1.4 选择器组

逗号表示，谁和谁。

例如，我有手机，你有手机，他也有手机，一条一条写太麻烦，就可以合并编写

我,你,他{

手机

}

2.1.5 派生选择器

子代：父子关系（隔代不管）

后代：父子孙，曾孙，从孙...

 

2.1.6 CSS伪类

• CSS伪类可对css的选择器添加一些特殊效果
• 伪类属性列表
  • active 向被激活的元素添加样式。
  • :hover 当鼠标悬浮在元素上方时，向元素添加样式。
  • :link 向未被访问的链接添加样式。
  • :visited 向已被访问的链接添加样式。
  • :first-child 向元素的第一个子元素添加样式。

超链接的伪类：要遵守使用顺序，爱恨原则 LoVeHAte，lvha

 

2.2 CSS基本属性

2.2.1 文本属性

• 指定字体：font-family : value;
• 字体大小：font-size : value;
  • px：像素
  • em：倍数
• 字体加粗：font-weight : normal/bold;
• 文本颜色：color : value;
• 文本排列：text-align : left/right/center;
• 文字修饰：text-decoration : none/underline;
• 行高：line-height : value;
• 首行文本缩进：text-indent : value （2em）;

2.2.2 背景属性

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

• background-color 设置元素的背景颜色。
• background-image 把图像设置为背景。

 

• background-repeat 设置背景图像的墙纸效果，是否及如何重复
  • repeat：在垂直方向和水平方向重复，为重复值
  • repeat-x：仅在水平方向重复
  • repeat-y：仅在垂直方向重复
  • no-repeat：仅显示一次
• background-position 设置背景图像的起始位置
• 1：控制水平方向 x轴： 正值，向右移动； 负值，向左移动
• 2：控制垂直方向 y轴： 正值，向下移动； 负值，向上移动

 

• background-attachment 背景图像是否固定或者随着页面的其余部分滚动
  • 默认值是 scroll：默认情况下，背景会随文档滚动
  • 可取值为 fixed：背景图像固定，并不会随着页面的其余部分滚动，常用于实现称为水印的图

像

 

2.2.3 列表属性

CSS列表属性作用如下：

• 设置不同的列表项标记为有序列表
• 设置不同的列表项标记为无序列表
• 设置列表项标记为图像

有两种类型的列表：

• 无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）
• 有序列表 - 列表项的标记有数字或字母

使用CSS，可以列出进一步的样式，并可用图像作列表项标记

• none：无标记。（去除标记）
• disc：默认。标记是实心圆。
• circle：标记是空心圆。
• square：标记是实心方块。
• decimal：标记是数字。
• decimal-leading-zero：0开头的数字标记。(01, 02, 03, 等。)
• lower-roman：小写罗马数字(i, ii, iii, iv, v, 等。)
• upper-roman：大写罗马数字(I, II, III, IV, V, 等。)
• lower-alpha：小写英文字母The marker is lower-alpha (a, b, c, d, e,等。)
• upper-alpha：大写英文字母The marker is upper-alpha (A, B, C, D, E,等。)

 

 

 

2.2.4 边框属性

CSS边框属性允许你指定一个元素边框的样式和颜色。

 

border-style取值：

2.2.5 轮廓属性

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

轮廓和边框的区别：

• 边框 (border) 可以是围绕元素内容和内边距的一条或多条线；
• 轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

CSS outline 属性规定元素轮廓的样式、颜色和宽度。

2.2.6 盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)

• margin(外边距) - 盒子与盒子之间的距离
• border(边框) - 盒子的保护壳
• padding(内边距/填充) - 内填充，盒子边与内容之间的距离
• content(内容) - 盒子的内容，显示的文本或图像

 

2.3 CSS定位

2.3.1 默认定位

块级元素：h1~h6，p, div 等，自上而下，垂直排列（自动换行）；可以改变宽高

 

行内元素：a,b,span,等，从左向右，水平排列（不会换行）；不能改变宽高

行内块元素：input,img等，从左向右，水平排列（自动换行）；可以改变宽高

2.3.2 浮动定位

• 让元素“飞”起来。不仅可以靠着左边或右边。还可以消除“块级”的霸道特性（独自占一行）。
• float取值：
  • none ：不浮动
  • left：贴着左边 浮动
  • right：贴着右边 浮动

 

2.3.3 相对定位

和原来的位置进行比较，进行移动定位（偏移）

2.3.4 绝对定位

本元素与已定位的祖先元素的距离

• 如果父级元素定位了，就以父级为参照物；
• 如果父级没定位，找爷爷级，爷爷定位了，以爷爷为参照物。
• 如果爷爷没定位，继续向上找，都没定位的话，body是最终选择。

• 以父节点作为参照物

 

 

• 以爷爷节点作为参照物

2.3.5 固定定位

将元素的内容固定在页面的某个位置，当用户向下滚动页面时元素框并不随着移动

2.3.6 z-index

如果有重叠元素，使用z轴属性，定义上下层次。

注意：

• z轴属性，要配合相对或绝对定位来使用。
• z值没有额定数值（整型就可以，具体用数字几，悉听尊便）