Web软件开发学习记录2——CSS

àì夳堔傛蜴生んèń 2022-11-09 12:39 175阅读 0赞

### Web软件开发学习记录2——CSS ###

*  1. CSS介绍
 *  2. CSS语法
 *  3. CSS各类功能
 *   *  3.1 CSS 背景
     *  3.2 CSS文本
     *  3.3 盒子模型
     *  3.4 浮动
 *  5. 总结

# 1. CSS介绍 #

*  CSS 指层叠样式表 (Cascading Style Sheets)
 *  样式定义如何显示 HTML 元素
 *  样式通常存储在样式表中
 *  把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
 *  外部样式表可以极大提高工作效率
 *  外部样式表通常存储在 CSS 文件中
 *  多个样式定义可层叠为一个

> 提示：样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。分模块编写大大提高了开发效率和样式复用。

# 2. CSS语法 #

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:  
![在这里插入图片描述][20210315103812396.png]  
选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

CSS声明总是以分号(;)结束，声明总以大括号(\{\})括起来

css注释：`/*这是个注释*/`

# 3. CSS各类功能 #

## 3.1 CSS 背景 ##

CSS 背景属性用于定义HTML元素的背景。

CSS 属性定义背景效果:

*  background-color
 *  background-image
 *  background-repeat
 *  background-attachment
 *  background-position

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MjY0ODA4_size_16_color_FFFFFF_t_70]

## 3.2 CSS文本 ##

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>color</td> 
   <td>设置文本颜色</td> 
  </tr> 
  <tr> 
   <td>direction</td> 
   <td>设置文本方向。</td> 
  </tr> 
  <tr> 
   <td>letter-spacing</td> 
   <td>设置字符间距</td> 
  </tr> 
  <tr> 
   <td>line-height</td> 
   <td>设置行高</td> 
  </tr> 
  <tr> 
   <td>text-align</td> 
   <td>对齐元素中的文本</td> 
  </tr> 
  <tr> 
   <td>text-decoration</td> 
   <td>向文本添加修饰</td> 
  </tr> 
  <tr> 
   <td>text-indent</td> 
   <td>缩进元素中文本的首行</td> 
  </tr> 
  <tr> 
   <td>text-shadow</td> 
   <td>设置文本阴影</td> 
  </tr> 
  <tr> 
   <td>text-transform</td> 
   <td>控制元素中的字母</td> 
  </tr> 
  <tr> 
   <td>unicode-bidi</td> 
   <td>设置或返回文本是否被重写</td> 
  </tr> 
  <tr> 
   <td>vertical-align</td> 
   <td>设置元素的垂直对齐</td> 
  </tr> 
  <tr> 
   <td>white-space</td> 
   <td>设置元素中空白的处理方式</td> 
  </tr> 
  <tr> 
   <td>word-spacing</td> 
   <td>设置字间距</td> 
  </tr> 
 </tbody> 
</table>

## 3.3 盒子模型 ##

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

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

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

下面的图片说明了盒子模型(Box Model)：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MjY0ODA4_size_16_color_FFFFFF_t_70 1]

CSS box-model  
不同部分的说明：

*  Margin(外边距) - 清除边框外的区域，外边距是透明的。
 *  Border(边框) - 围绕在内边距和内容外的边框。
 *  Padding(内边距) - 清除内容周围的区域，内边距是透明的。
 *  Content(内容) - 盒子的内容，显示文本和图像。

## 3.4 浮动 ##

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

![在这里插入图片描述][20210315105640375.gif]

以上知识点均来自[菜鸟教程-CSS 教程][-CSS]

# 5. 总结 #

通过使用 CSS 我们可以大大提升网页开发的工作效率！其中CSS中包含着大量的功能和风格设置，极大的美化了web和web的个性化设置。

[20210315103812396.png]: /images/20221023/b094081915324899a3c0bc49385ffd81.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MjY0ODA4_size_16_color_FFFFFF_t_70]: /images/20221023/52fe308392ef4e90b8899fb5fb2af5bc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MjY0ODA4_size_16_color_FFFFFF_t_70 1]: /images/20221023/812520ca0bd5473c8a4f5fc432a81849.png
[20210315105640375.gif]: /images/20221023/75f1663530854288b12e0ef9c61149c8.png
[-CSS]: https://www.runoob.com/css/css-tutorial.html