2024年最全CSS学习记录03CSS的作用及样式，2024年最新前端面试题高级

最后

推荐一些系统学习的途径和方法。

每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HTML 和 CSS：

body {

background-color: lightgrey;

color: blue;

}

h1 {

background-color: black;

color: white;

}

3.3.2文本对齐方式

1、text-align 属性用于设置文本的水平对齐方式。

文本可以左对齐或右对齐，或居中对齐。

例：

h1 {

/居中对齐/

text-align: center;

}

h2 {

/左对齐/

text-align: left;

}

h3 {

/右对齐/

text-align: right;

}

当 text-align 属性设置为 “justify” 后，将拉伸每一行，以使每一行具有相等的宽度，并且左右边距是直的（就像在杂志和报纸中）：

div {

text-align: justify;

}

2、垂直对齐

vertical-align 属性设置元素的垂直对齐方式。

如，设置文本中图像的垂直对齐方式：

img.top {

vertical-align: top;

}

img.middle {

vertical-align: middle;

}

img.bottom {

vertical-align: bottom;

}

3、首行缩进：

h3 {

/首行缩进/

text-indent: 2em;

}

4、行高：

h3 {

/行高/

line-height: 20px;

}

5、划线：

h1 {

/下划线/

text-decoration: underline;

}

h2 {

/中划线/

text-decoration: line-through;

}

h3 {

/上划线/

text-decoration: overline;

}

3.4阴影

/text-shadow：阴影颜色，水平偏移，垂直偏移，阴影半径/

#price{

text-shadow:#3cc7f5 10px -10px 2px;

}

3.5列表

引例：

全部商品分类

• 图书  音像  数字商品
• 家用电器  手机  数码
• 电脑  办公
• 家居  家装  厨具
• 服饰鞋帽  个护化妆
• 礼品箱包  钟表  珠宝
• 食品饮料  保健食品

• 默认效果：

  

  现在，我们想更改一下样式

  #nav{

  width: 300px;

  }

  .title{

  font-size: 18px;

  font-weight: bold;

  text-indent: 1em;

  line-height: 35px;

  background: red;

  }

  ul{

  background: #cbc9c9;

  }

  ul li{

  height: 30px;

  list-style: none;

  text-indent: 1em;

  }

  a{

  text-decoration: none;

  font-size: 16px;

  color: #000;

  }

  a:hover{

  color: rgb(255,80,0);

  text-decoration: underline;

  }

  其中

  list-style：设置列表属性

  list-style:none;去掉圆点

  list-style:circle;空心圆

  list-style:decimal;数字

  list-style:square;正方形

  

  3.6背景

  引例1：

  

  默认是全部平铺的

  添加代码：

  .div1{

  background-repeat: no-repeat;

  }

  

  background-repeat 属性设置是否及如何重复背景图像。

  默认地，背景图像在水平和垂直方向上重复。

  可能的值：

  最后：

  总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

  面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  

  _Q1NETiBASmF0aW5l,size_20,color_FFFFFF,t_70,g_se,x_16)

  background-repeat 属性设置是否及如何重复背景图像。

  默认地，背景图像在水平和垂直方向上重复。

  可能的值：

  最后：

  总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

  面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  [外链图片转存中…(img-ylZP77kG-1715641840926)]