（1）H5+C3——————H5，选择器，盒子模型，布局，图标，文本样式，设置背景和表格

1，H5

2，选择器

• 2.1， 元素选择器
• 2.2， 类选择器
• 2.3， ID选择器
• 2.4， 复合选择器
• 2.5， 群组选择器
• 2.6， 通用选择器
• 2.7， 后代选择器
• 2.8， 属性选择器
• 2.9， 伪类和伪元素
• 2.10，选择器的优先级

3，盒子模型

• 3.1，内容区
• 3.2，内边距
• 3.3，边框
• 3.4，外边距

4，布局

• 4.1，浮动
• 4.2，解决高度塌陷问题
• 4.3，定位
• 4.4，相对定位
• 4.5，绝对定位
• 4.6，固定定位
• 4.7，z-index

5，图标

• 5.1，Font Awesome
• 5.2，阿里矢量图标库

6，文本样式

• 6.1，浮动

7，设置背景

• 7.1， 设置背景颜色
• 7.2， 设置背景图片
• 7.3， 控制背景图片重复
• 7.4， 设置背景图片位置
• 7.5， 设置背景图片是否随页面滚动

8，表格

• 8.1， 表格的基本标签
• 8.1， 合并单元格
• 8.1， 表格的样式

选择器

1， 元素选择器

• 语法：
  标签名 { }

• 比如p则会选中页面中的所有p标签，h1会选中页面中的所有h1标签。

2， 类选择器

• 语法：
  .className { }
• 比如.hello会选中页面所有class属性为hello的元素

3， ID选择器

• 语法：
  #id { }
  • 比如#box会选中页面中id属性值为box的元素，和class属性不同，id属性是不能重复的。

4， 复合选择器

• 语法：
  选择器1选择器2 { }
• 例如div.box1会选中页面中具有box1这个class的div元素。

5， 群组选择器

• 语法：
  选择器1,选择器2,选择器3 { }

• 比如p,.hello,#box会同时选中页面中p元素，class为hello的元素，id为box的元素。

6， 通用选择器

• 通用选择器，可以同时选中页面中的所有元素。
• 语法：
  *{ }

7， 后代选择器

• 后代选择器可以根据标签的关系，为处在元素内部的代元素设置样式。
• 语法：
  祖先元素 后代元素 后代元素 { }
• 比如p strong 会选中页面中所有的p元素内的strong元素
• 标签之间的关系

祖先元素：直接或间接包含后代元素的元素。

后代元素：直接或间接被祖先元素包含的元素。

父元素：直接包含子元素的元素。

子元素：直接被父元素包含的元素。

兄弟元素：拥有相同父元素的元素。

8， 属性选择器

• 属性选择器可以挑选带有特殊属性的标签。
• 语法:
  [属性名]，选取含有指定属性的元素
  [属性名=“属性值”]，选取属性值等于指定值的元素
  [属性名~=“属性值”]，如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号
  [属性名|=“属性值”]
  [属性名^=“属性值”]，选取属性值以指定内容开头的元素
  [属性名$=“属性值”]，选取属性值以指定内容结尾的元素
  [属性名*=“属性值”]，选取属性值中包含指定内容的元素

9， 伪类和伪元素

• 伪类和伪元素用来表示元素所处的一个特殊的状态，或者是一个特殊的位置

属性	描述
:link	表示一个普通的链接（未访问过的链接）
:visited	表示访问过的链接
:hover	鼠标移入的链接，也可以为其他元素设置hover
:active	正在被点击的链接，也可以为其他元素设置active
:focus	表示元素获取焦点的状态，一般用于文本框
::selection	表示内容被选中的状态，在火狐中使用::-moz-selection来代替
:first-letter	表示第一个字符
:first-line	表示文字的第一行
:before	选中元素的最前边，一般该伪类都会结合content一起使用，通过content可以向指定位置添加内容
:after	选中元素的最后边，一般该伪类都会结合content一起使用，通过content可以向指定位置添加内容

• 提示：
  
  在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
  
  在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
  
  伪类名称对大小写不敏感。

• 否定伪类（从一组元素中将符合要求的元素剔除出去）

  语法：

    :not(选择器)
  

10， 选择器的优先级

• 当样式发生冲突时，需要将相关的选择器优先级进行求和计算，优先级高的优先显示，如果优先级一样，则显示靠后的样式，优先级计算时，总大小不能超过他的最大的数量级，可以在样式后边添加一个!important，如果样式中添加了该内容，则该样式将会获取最大的优先级，将会优先于所有的样式显示，包括内联样式，但是这个属性要慎用。

• 不同的选择器有不同的权重值
  内联样式：1000
  id选择器：100
  类和伪类选择器：10
  元素选择器：1
  通配选择器：0

• 如果选择器编写过于长的话，浏览器解析起来性能会比较差，所以在编写选择器时，越短越好。

• 通配选择器，性能也比较差，要避免使用通配选择器

盒子模型

一个盒子我们会分成几个部分：

• 内容区(content)
• 内边距(padding)
• 边框(border)
• 外边距(margin)

1， 内容区

• 如果没有为元素设置内边距和边框，则内容区大小默认和盒子大小是一致的。
• 通过width和height两个属性可以设置内容区的大小。

2， 内边距

• 内边距指的就是元素内容区与边框以内的空间。
• 默认情况下width和height不包含padding的大小。
• 使用padding属性来设置元素的内边距。
• 例如：

padding:10px 20px 30px 40px; --> 这样会设置元素的上、右、下、左四个方向的内边距

padding:10px 20px 30px; --> 分别指定上、左右、下四个方向的内边距

padding:10px 20px; --> 分别指定上下、左右四个方向的内边距

padding:10px; --> 同时指定上左右下四个方向的内边距

• 同时在css中还提供了padding-top、padding-right、padding-right、padding-bottom分别用来指定四个方向的内边距。

3， 边框

• 使用border属性来设置盒子的边框：

border:1px red solid;  --> 上边的样式分别指定了边框的宽度、颜色和样式

• 也可以使用border-top/left/right/bottom分别指定上右下左四个方向的边框。
• 边框可以设置多种样式：

none（没有边框）

dotted（点线）

dashed（虚线）

solid（实线）

double（双线）

groove（槽线）

ridge（脊线）

inset（凹边）

outset（凸边）

4， 外边距

• 使用margin属性可以设置外边距。
• 用法和padding类似，同样也提供了四个方向的margin-top/right/bottom/left。
• 当将左右外边距设置为auto时，浏览器会将左右外边距设置为相等，所以这行代码margin:0 auto可以使元素居中。
• display：
  block：设置元素为块元素
  inline：设置元素为行内元素
  inline-block：设置元素为行内块元素
  none：隐藏元素（元素将在页面中完全消失）
• visibility：
  • 和display不同，使用visibility隐藏一个元素，隐藏后其在文档中所占的位置会依然保持，不会被其他元素覆盖
    visible：可见的
    hidden：隐藏的
• overflow：
  • 可以通过overflow来控制内容溢出的情况
    visible：默认值
    scroll：添加滚动条
    auto：根据需要添加滚动条
    hidden：隐藏超出盒子的内容

布局

1， 浮动

• 所谓浮动指的是使元素脱离原来的文本流，在父元素中浮动起来，使用float属性。

• 可选值：
  none：不浮动
  left：向左浮动
  right：向右浮动

• 块级元素和行内元素都可以浮动，当一个行内元素浮动以后将会自动变为一个块级元素。当一个块级元素浮动以后，宽度会默认被内容撑开，所以当漂浮一个块级元素时我们都会为其指定一个宽度。

• 清除浮动，clear属性可以用于清除元素周围的浮动对元素的影响，也就是元素不会因为上方出现了浮动元素而改变位置。

• 可选值：
  left：忽略左侧浮动
  right：忽略右侧浮动
  both：忽略全部浮动
  none：不忽略浮动，默认值

2， 解决高度塌陷问题

.clearfix::before,
.clearfix::after{content: '';display: table;clear: both;
}

3， 定位

• position属性可以控制Web浏览器如何以及在何处显示特定的元素。可以使用position属性把一个元素放置到网
  页中的任何位置。
• 可选值：
  static
  relative
  absolute
  fixed

4， 相对定位

• 每个元素在页面的文档流中都有一个自然位置。相对于这个位置对元素进行移动就称为相对定位。周
  围的元素完全不受此影响。
• 当将position属性设置为relative时，则开启了元素的相对定位。当开启了相对定位以后，可以使用top、right、bottom、left四个属性对元素进行定位。
• 相对定位的特点：
  • 如果不设置元素的偏移量，元素位置不会发生改变。
  • 相对定位不会使元素脱离文本流。元素在文本流中的位置不会改变。
  • 相对定位不会改变元素原来的特性。
  • 相对定位会使元素的层级提升，使元素可以覆盖文本流中的元素。

5， 绝对定位

• 绝对定位指使元素相对于html元素或离他最近的祖先定位元素进行定位。

• 当将position属性设置为absolute时，则开启了元素的绝对定位。 当开启了绝对定位以后，可以使用top、right、bottom、left四个属性对元素进行定位。

• 绝对定位的特点

  • 绝对定位会使元素完全脱离文本流。
  • 绝对定位的块元素的宽度会被其内容撑开。
  • 绝对定位会使行内元素变成块元素。
  • 一般使用绝对定位时会同时为其父元素指定一个相对定位，以确保元素可以相对于父元素进行定位。

6， 固定定位

• 固定定位的元素会被锁定在屏幕的某个位置上，当访问者滚动网页时，固定元素会在屏幕上保持不动。
• 当将position属性设置为fixed时，则开启了元素的固定定位。当开启了固定定位以后，可以使用top、right、bottom、left四个属性对元素进行定位。
• 固定定位的其他特性和绝对定位类似。

7， z-index

• 当元素开启定位以后就可以设置z-index这个属性。这个属性可以提升定位元素所在的层级。
• z-index可以指定一个整数作为参数，值越大元素显示的优先级越高，也就是z-index值较大的元素会显示在网页的最上层。

图标

1， Font Awesome图标库

• 点击此处进入官网可进行下载，分为两个版本，一个收费版一个免费版
• 具体使用情况根据官网的使用说明

2， 阿里矢量图标库

• 点击此处进入官网查看，为了避免版权问题，矢量图标一般是由自己公司来开发
• 使用说明

       登录 ，选择自己需要的图标

       加入购物车

       点击购物车，添加至项目，新建项目

       下载到本地，下载完成后，打开，里面由个demo会教我们如何使用

文本样式

1， 文本后面内容省略样式

• white-space：设置网页如何处理空白

• 可选值：
  normal：正常
  nowrap：不换行
  pre：保留空白

• 案例如下：
  

.box1{width: 200px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}"box1">固定定位的元素会被锁定在屏幕的某个位置上，当访问者滚动网页时，固定元素会在屏幕上保持不动。

设置背景

1， 设置背景颜色

• background-color属性用来为元素设置背景颜色，如果不设置背景颜色，元素默认背景颜色为透明，实际上会显示父元素的背景颜色
• linear-gradient径向渐变
  方向值：常用的是to top，to bottom，to left，to right,to right top等等
  角度值：常用的是0deg、180deg等等
• 使用案例

background-image: linear-gradient(0deg,red,yellow);

• radial-gradient径向渐变
• 默认情况下径向渐变的形状根据元素的形状来计算的 ：正方形–>圆形 长方形 -->椭圆形， 也可以指定渐变的位置
• 语法：radial-gradient（大小 at 位置，颜色 位置，颜色 位置，颜色 位置）
  • 大小：
    circle 圆形
    ellipse 椭圆
    closest-side近边
    closest-side远边
    farthest-corner 远角
  • 位置：top right left center bottom

2， 设置背景图片

• background-image可以为元素指定背景图片。需要一个url地址作为参数，url地址需要指
  向一个外部图片的路径，如：background-image: url(1.jpg)

3， 控制背景图片重复

• background-repeat用于控制背景图片的重复方式。如果只设置背景图片默认背景图片将会使用平铺的方式，可以通过该属性进行修改。
• 可选值：
  repeat：默认值，图片左右上下平铺
  no-repeat：只显示图片一次，不会平铺
  repeat-x：沿x轴水平平铺一张图片
  repeat-y：沿y轴水平平铺一张图片

4， 设置背景图片位置

• background-position用来精确控制背景图片在元素中的位置。
• 可以通过三种方式来确定图片在水平方向和垂直方向的起点。
  关键字：top right bottom left center
  百分比
  数值

5， 设置背景图片是否随页面滚动

• background-attachment用来设置背景图片是否随页面滚动。
• 可选值：
  scroll：随页面滚动
  fixed：不随页面滚动

表格

1， 表格的基本标签

• table、tr、th、td
  使用table标签创建一个表格。
  tr表示表格中的一行。
  tr中可以编写一个或多个th或td。
  th表示表头。
  td表示表格中的一个单元格。

• caption、thead、tbody、tfoot
  caption表示表格的标题。
  thead表示表格的头部。
  tbody表示表格的主体。
  tfoot表示表格的底部。

2， 合并单元格

• 合并单元格指将两个或两个以上的单元格合并为一个单元格。合并单元格可以通过在th或td中设置属性来完成。
• 横向合并：colspan， 纵向合并：rowspan

3， 表格的样式

• text-align：设置文本的水平对齐。
• vertical-align：设置文本的垂直对齐。
  可选值：top、baseline、middle、bottom
• border-spacing：边框间距
• border-collapse：合并边框
  collapse：合并边框
  separate：不合并边框

下一章，（2）JavaScript——————后端开发需要掌握的JavaScript基础知识

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！