Java 阶段四 Day02 CSS

CSS

三大特性

CSS（Cascading Style Sheets）有三大特性，这些特性合在一起使得CSS成为一种强大的样式表语言，用于网页设计和开发。这三大特性分别是：

1. 层叠性（Cascading）：CSS中的"C"代表层叠。层叠性指的是在应用多个CSS规则时，它们可以按照一定的规则叠加在一起，形成最终的样式。这个叠加的过程基于规则的特定性（Specificity）和来源（Origin）。如果多个规则应用到同一个元素上，最终的样式将以层叠性规则为依据确定。

   • 特定性（Specificity）：用于确定哪个规则更具体，从而应用于元素。通常，ID选择器的特定性高于类选择器，而类选择器又高于元素选择器。例如，#header比.menu更具体。

   • 来源（Origin）：规则的来源可以是外部样式表、内部样式表或内联样式。内联样式的权重最高，将覆盖外部和内部样式表中的规则。

2. 继承性（Inheritance）：CSS允许某些样式属性从父元素传递到子元素。这意味着，如果您在父元素上设置了某些样式，子元素可能会继承这些样式属性，除非子元素上有相应的样式规则覆盖了它们。继承性有助于减少代码的重复性，使得页面更容易维护。

   例如，如果您将文本颜色设置为父元素的段落元素上，那么所有子段落也将具有相同的文本颜色，除非为子段落显式设置不同的颜色。

3. 优先级（Specificity）：优先级是一种衡量样式规则权重的机制。在CSS中，当多个规则应用到同一个元素时，通过计算每个规则的优先级，浏览器可以确定哪个规则的样式应该被应用。优先级通常根据选择器的特定性（Specificity）和重要性（Importance）来计算。

   • 特定性（Specificity）已经在层叠性中提到，用于确定规则的相对权重。

   • 重要性（Importance）可以通过在样式规则中使用!important关键字来设置。具有!important标志的规则具有最高的优先级，通常应该避免过度使用它，以免导致样式难以管理。

常用样式

颜色赋值方式

在CSS中，可以使用多种方式来赋值颜色，这包括命名颜色、十六进制颜色值、RGB颜色值和HSL颜色值等。以下是这些方式的示例：

1. 命名颜色：CSS定义了一些常见颜色的名称，例如红色（red）、蓝色（blue）、绿色（green）等。您可以直接使用这些名称来赋值颜色。

   p {
       color: red; /* 将文本颜色设置为红色 */
   }
   

2. 十六进制颜色值：使用十六进制表示法，您可以指定颜色的红、绿和蓝分量的值。颜色以#开头，后面跟着6个十六进制数字（0-9和A-F）。

   .header {
       background-color: #336699; /* 设置背景颜色为深蓝色 */
   }
   

3. RGB颜色值：RGB颜色值由红、绿和蓝三个分量的整数值组成，分别用逗号分隔，并用rgb()函数表示。

   button {
       background-color: rgb(255, 0, 0); /* 设置按钮背景颜色为红色 */
   }
   

4. RGBA颜色值：RGBA颜色值与RGB相似，但多了一个透明度（Alpha）分量，表示颜色的不透明度。透明度的值范围从0（完全透明）到1（完全不透明）。

   .overlay {
       background-color: rgba(0, 0, 0, 0.5); /* 设置半透明黑色背景 */
   }
   

5. HSL颜色值：HSL（色相、饱和度、亮度）颜色值使用色相、饱和度和亮度三个分量来描述颜色。色相表示颜色的类型，饱和度表示颜色的鲜艳程度，亮度表示颜色的明暗程度。

   .accent {
       background-color: hsl(120, 100%, 50%); /* 设置饱和的绿色背景 */
   }
   

6. HSLA颜色值：类似于RGBA，HSLA颜色值也包括透明度分量，用于表示颜色的不透明度。

   .translucent {
       background-color: hsla(0, 100%, 50%, 0.7); /* 设置半透明红色背景 */
   }
   

背景图片相关样式

在CSS中，您可以使用各种样式属性来设置背景图片以及与背景图片相关的样式。以下是一些用于处理背景图片的常见CSS属性和示例：

1. background-image：用于设置背景图片的URL。可以指定单个背景图片或多个背景图片，多个图片会叠加显示。

   .header {
       background-image: url('header-bg.jpg');
   }
   

2. background-repeat：指定背景图片是否应该重复显示。常见的值包括repeat（默认，横向和纵向都重复）、repeat-x（仅横向重复）、repeat-y（仅纵向重复）和no-repeat（不重复）。

   .banner {
       background-image: url('banner.jpg');
       background-repeat: no-repeat; /* 不重复背景图片 */
   }
   

3. background-size：用于设置背景图片的大小。您可以指定具体的尺寸（如像素或百分比），也可以使用关键字，如cover（尽量覆盖整个容器）或contain（确保完全包含在容器内）。

   .jumbotron {
       background-image: url('jumbotron-image.jpg');
       background-size: cover; /* 将背景图片尽量覆盖整个容器 */
       /*或者具体尺寸*/
       background-size: 200px 300px;
   }
   

4. background-position：设置背景图片的位置。您可以使用像素值、百分比或关键字，如center或bottom right来控制图片的位置。

   .article {
       background-image: url('article-bg.jpg');
       background-position: center top; /* 将背景图片居中显示在顶部 */
       /*或者*/
       background-position: 100px 200px;
       /*或者*/
       background-position: 50% 50%;
   }
   

5. background-attachment：指定背景图片是否应该固定在视口中，或者随滚动而移动。常见的值包括scroll（默认，跟随滚动）和fixed（固定在视口中）。

   .parallax {
       background-image: url('parallax-bg.jpg');
       background-attachment: fixed; /* 固定背景图片在视口中 */
   }
   

6. background：background属性是一个缩写属性，允许您一次性设置背景相关的所有属性，包括背景颜色、背景图片、重复方式、大小、位置和附着方式。

   .section {
       background: url('section-bg.jpg') center/cover no-repeat fixed;
   }
   

这些属性允许您以多种方式自定义背景图片，以满足不同的设计需求。您可以根据具体的项目需求来选择合适的属性和值来创建各种各样的背景效果。

文字和字体相关样式

在CSS中，可以使用各种样式属性来设置文字和字体的相关样式，以控制文本的外观和排版。以下是一些用于处理文字和字体的常见CSS属性和示例：

1. font-family：用于设置文本的字体系列，即您希望在文本中使用的字体。您可以指定多个字体名称，以便在第一个不可用时回退到下一个字体。

   body {
       font-family: Arial, Helvetica, sans-serif;
   }
   

2. font-size：设置文本的字体大小。您可以使用像素（px）、百分比（%）、em等单位。

   h1 {
       font-size: 24px;
   }
   

3. font-weight：指定文本的字重，可以是普通（normal）、粗体（bold）、较轻（lighter）、较重（bolder）等值。

   p {
       font-weight: bold;
   }
   

4. font-style：设置文本的字体风格，可以是正常（normal）、斜体（italic）、倾斜（oblique）等。

   em {
       font-style: italic;
   }
   

5. color：用于设置文本的颜色。

   .quote {
       color: #333;
   }
   

6. text-align：控制文本在容器中的水平对齐方式，可以是左对齐（left）、右对齐（right）、居中（center）或两端对齐（justify）。

   .centered-text {
       text-align: center;
   }
   

7. line-height：设置文本行高，即行与行之间的垂直间距。

   p {
       line-height: 1.5;
   }
   

8. text-decoration：用于添加或移除文本装饰，如下划线、删除线等。

   a {
       text-decoration: none; /* 移除链接的下划线 */
   }
   

9. text-transform：控制文本的大小写转换，可以是大写（uppercase）、小写（lowercase）、首字母大写（capitalize）等。

   .uppercase {
       text-transform: uppercase;
   }
   

10. letter-spacing：设置字符间距，调整字符之间的水平间距。

.spaced-text {
    letter-spacing: 2px;
}

11. text-shadow是一个CSS属性，用于在文本元素的文字周围添加阴影效果。这个属性可以让文本更加突出或增加视觉效果。text-shadow属性可以接受多个参数，以定义阴影的颜色、水平偏移、垂直偏移和模糊半径。以下是text-shadow属性的语法和示例：

    语法：

    text-shadow: h-shadow v-shadow blur-radius color;
    

    • h-shadow：指定阴影的水平偏移量（可以为负值，向左偏移为负值，向右偏移为正值）。
    • v-shadow：指定阴影的垂直偏移量（可以为负值，向上偏移为负值，向下偏移为正值）。
    • blur-radius：指定阴影的模糊半径，值越大，阴影越模糊。可以省略这个值，不设置模糊半径。
    • color：指定阴影的颜色。

    示例：

    /* 添加黑色阴影，水平偏移3像素，垂直偏移3像素，无模糊效果 */
    h1 {
        text-shadow: 3px 3px black;
    }
    
    /* 添加红色阴影，水平偏移0像素，垂直偏移0像素，模糊半径5像素 */
    h2 {
        text-shadow: 0 0 5px red;
    }
    
    /* 添加多个阴影，以逗号分隔 */
    h3 {
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5), -1px -1px 1px rgba(255, 255, 255, 0.5);
    }
    

    在上面的示例中，text-shadow属性用于为不同的文本元素添加不同的阴影效果。您可以根据需要调整h-shadow、v-shadow、blur-radius和color的值来创建各种不同的文本阴影效果，以增强文本的可读性和视觉吸引力。

元素的显示方式display

CSS的display属性用于控制HTML元素在页面中的显示方式。这个属性允许您将元素设置为块级元素、内联元素、内联块级元素或其他特殊的显示方式。以下是一些常见的display属性值和它们的描述：

1. block（块级元素）：这是元素的默认值。块级元素会在页面上以块的形式显示，它们会独占一行，通常从新行开始，水平占据整个可用宽度。常见的块级元素包括<div>、<p>、<h1>到<h6>等。

   div {
       display: block;
   }
   

2. inline（内联元素）：内联元素不会开始新行，它们会在文本中按照它们出现的顺序水平排列。常见的内联元素包括<span>、<a>、<strong>等。

   span {
       display: inline;
   }
   

3. inline-block（内联块级元素）：内联块级元素结合了块级元素和内联元素的特性。它们会在同一行内水平排列，但可以像块级元素一样设置宽度、高度和内边距。

   .button {
       display: inline-block;
   }
   

4. none（隐藏元素）：display: none;会将元素完全隐藏，它不会在页面上占据任何空间，也不会对布局和可访问性产生影响。这常用于通过JavaScript来控制元素的显示和隐藏。

   .hidden-element {
       display: none;
   }
   

5. table（表格元素）：display: table;可以将元素设置为表格级别的显示方式，适用于模拟表格结构，包括<table>、<tr>、<td>等。

   .table-container {
       display: table;
   }
   

6. flex（弹性盒子）：display: flex;用于创建弹性盒子布局，允许更灵活地排列和对齐元素。弹性盒子布局在响应式设计中非常有用。

   .flex-container {
       display: flex;
   }
   

这些是一些常见的display属性值，但还有其他更多特殊的值和组合，以及新的布局模型（如grid）可用于更高级的布局需求。

盒子模型

盒子模型（Box Model）是CSS中用来描述元素在网页布局中的基本结构的概念。它将每个HTML元素看作一个矩形的盒子，这个盒子包含了元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）。这四个部分组成了元素的盒子模型。

以下是盒子模型的四个主要组成部分：

1. 内容（Content）：这是元素内部实际显示的内容，例如文本、图像、视频等。内容的宽度和高度由width和height属性控制。

2. 内边距（Padding）：内边距是围绕内容的区域，用于定义内容与边框之间的距离。内边距的大小由padding属性控制，可以分别设置上、右、下、左四个方向的内边距。

3. 边框（Border）：边框是内边距之外的区域，用于定义元素的可见边界。边框的大小、样式和颜色由border属性控制，同样可以分别设置上、右、下、左四个方向的边框。

4. 外边距（Margin）：外边距是元素盒子与相邻元素之间的间距，用于控制元素之间的距离。外边距的大小由margin属性控制，同样可以分别设置上、右、下、左四个方向的外边距。

盒子模型的宽度和高度计算方式如下：

• 元素的宽度（Width）= 内容宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距
• 元素的高度（Height）= 内容高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距

默认情况下，盒子模型的大小由元素的width和height属性控制，但可以通过调整内边距、边框和外边距来影响元素的最终大小和布局。这种灵活性使得CSS能够创建各种各样的页面布局和样式效果。

Content内容区域

• 控制元素的显示大小
• 相关样式： width / height
• 赋值方式：1. 像素 2. 上级元素的百分比
• 行内元素是不能修改宽高的，如果必须要修改，需要将元素的显示方式改成块级block 或 行内块inline-block

border边框

在CSS中，border属性用于设置元素的边框样式、宽度和颜色。边框是HTML元素的可见边界，它可以用来突出显示元素、创建分隔线或美化元素的外观。border属性通常用于定义元素的四个边框：上边框、右边框、下边框和左边框。

border属性的语法如下：

border: [border-width] [border-style] [border-color];

• [border-width]：用于指定边框的宽度，可以是像素（px）、百分比（%）、em等单位。常见值包括thin、medium、thick，也可以使用具体的尺寸值，如1px。
• [border-style]：用于指定边框的样式，包括实线（solid）、虚线（dotted）、双实线（double）等。
• [border-color]：用于指定边框的颜色，可以是颜色名称、十六进制值、RGB值等。

示例：

/* 设置元素的边框样式、宽度和颜色 */
div {
    border: 2px solid #333; /* 2像素宽的实线边框，颜色为深灰色 */
}

在上面的示例中，div元素的边框被设置为2像素宽的实线边框，颜色为深灰色。您可以根据需要自定义border属性的值来创建不同样式的边框效果。

此外，还可以分别设置元素的上边框、右边框、下边框和左边框的样式、宽度和颜色，如下所示：

/* 设置不同边框的样式、宽度和颜色 */
div {
    border-top: 1px dotted #999; /* 上边框为1像素宽的虚线，颜色为灰色 */
    border-right: 2px solid #333; /* 右边框为2像素宽的实线，颜色为深灰色 */
    border-bottom: 3px double #666; /* 下边框为3像素宽的双实线，颜色为中灰色 */
    border-left: 1px dashed #555; /* 左边框为1像素宽的虚线，颜色为暗灰色 */
    border-radius:10px; /*设置圆角，值越大越圆*/
}

通过border属性和相关属性，您可以为元素添加各种各样的边框效果，以满足不同的设计需求。

margin外边框

在CSS中，margin属性用于设置元素的外边距，即元素与其周围元素之间的空间或距离。外边距可以用来调整元素之间的间隔、控制布局和排列元素。

margin属性的语法如下：

margin: [margin-top] [margin-right] [margin-bottom] [margin-left];

• [margin-top]：用于指定元素上边距的大小，可以是像素（px）、百分比（%）、em等单位。
• [margin-right]：用于指定元素右边距的大小。
• [margin-bottom]：用于指定元素下边距的大小。
• [margin-left]：用于指定元素左边距的大小。

示例：

/* 设置元素的上、右、下、左外边距 */
div {
    margin: 10px 20px 15px 5px;
}

在上面的示例中，div元素的上外边距为10像素、右外边距为20像素、下外边距为15像素、左外边距为5像素。这意味着元素与其周围元素之间的间隔将根据这些外边距值来调整。

/* 设置元素的上下边距为10px、左右边距为20px */
div {
    margin: 10px 20px;
}

/* 设置元素的上、右、下、左外边距均为10px */
div {
    margin: 10px;
}

此外，还有一些简化的margin属性值，例如：

• margin: auto;：将元素水平居中（左右外边距均为自动计算）。
• margin: inherit;：继承父元素的外边距值。
• margin: initial;：使用浏览器默认的外边距值。

外边距可以用来创建页面布局、调整元素的间距和对齐元素。

注意：

• 外边距塌陷：
  • 兄弟元素上下相邻，彼此添加外边距，取最大值
  • 父子元素上边缘重叠时，添加外边距取最大值，会导致父子元素粘连在一起，给父元素添加overflow:hidden样式解决

padding内边距

• 控制元素内容的位置
• 赋值方式：和外边距类似
  • padding-left / right / top / bottom:10px; 单独某一个方向赋值
  • padding:10px; 四个方向赋值
  • padding: 10px 20px; 上下10 左右20
  • padding: 10px 20px 30px 40px; 上右下左赋值，顺时针
• 给元素添加内边距默认情况下会影响元素的显示范围，给元素添加box-sizing:border-box; 后则不再影响

部分标签自带盒子模型的某些样式

• body 自带8个像素的外边距
• 段落标签<p>、列表标签和内容标题<h1>~<h6> 自带上下的外边距
• 文本框 自带边框和内边距
• 列表标签 自带外边距和内边距

定位

CSS（层叠样式表）定位方式

• CSS 定位指的是通过 CSS 样式表来定义 HTML 元素在网页中的位置和布局
• 常用的定位方式包括：

  1. 静态定位（Static）：

     • 默认定位方式（文档流定位）。

     • 元素按照它们在HTML文档中的顺序排列，不受其他定位方式的影响。

     • 通常不需要显式指定为静态定位，因为这是默认值。

       position: static;
       

       2. 相对定位（Relative）：

     • 元素相对于它自己在文档流中的原始位置进行定位。

     • 使用 top、right、bottom 和 left 属性来调整元素的位置。

     • 相对定位不会改变其他元素的位置。

       position: relative;
       top: 10px;
       left: 20px;
       

       

  2. 绝对定位（Absolute）：

     • 元素相对于其最近的具有相对或绝对定位的父元素进行定位。

     • 如果没有父元素有定位，元素将相对于文档的根元素（通常是 <html>）进行定位。

     • 使用 top、right、bottom 和 left 属性来指定元素的位置。

       position: absolute;
       top: 10px;
       left: 20px;
       

       

  3. 固定定位（Fixed）：

     • 元素相对于浏览器窗口进行定位，不会因为浏览器窗口的滚动而移动，始终保持在视口的固定位置。

     • 使用 top、right、bottom 和 left 属性来指定元素的位置。

       position: fixed;
       top: 10px;
       left: 20px;
       

       

  4. 粘性定位（Sticky）：

     • 粘性定位与前面介绍的四种定位方式不太一下，它像是相对定位和固定定位的结合体，当滚动页面时它的效果与相对定位相同，当元素滚动到一定程度时它又会呈现出固定定位的效果。比如一些网页上的导航菜单，当页面加载完成时它在自己默认的位置，当我们向下滚动页面时它又会固定在页面的最顶端。

     • 使用 top、right、bottom 和 left 属性来指定元素的位置，以及 position: sticky; 来启用这个定位方式。

       position: sticky;
       top: 10px;
       

       
       注意：

       • 在设置position:sticky;时，必须再定义 top、bottom、right、left 四个属性之一，否则只会处于相对定位的状态；
       • 使用粘性定位元素的父元素不能定义overflow:hidden或者overflow:auto属性；
       • 父元素的高度不能低于粘性定位元素的高度；
       • 粘性定位的元素仅在其父元素内有效。

浮动

CSS中的浮动（Floating）是一种用于布局网页元素的定位方式。浮动元素会脱离文档流，漂浮在其容器的左侧或右侧，并允许其他元素围绕它们排列。浮动通常用于创建多列布局或使文本环绕图像等情况。

以下是关于CSS中浮动的重要属性和用法：

1. float属性：

   • float 属性用于指定元素的浮动方向，可以取值为 left、right 或 none（默认值）。

   • left 表示元素向左浮动，允许其他元素在其右侧排列。

   • right 表示元素向右浮动，允许其他元素在其左侧排列。

     .float-left {
         float: left;
     }
     
     .float-right {
         float: right;
     }
     

2. 清除浮动：

   • 当浮动元素之后的元素需要避免受到浮动元素的影响时，通常需要清除浮动。

   • 使用 clear 属性来清除浮动，它可以取值为 left、right、both 或 none。

   • clear: left 表示要清除左浮动，clear: right 表示要清除右浮动，clear: both 表示要清除左右浮动，以确保元素下方不受浮动元素的影响。

     .clear-float {
         clear: both;
     }
     

3. 浮动元素的注意事项：

   • 浮动元素会从正常的文档流中脱离，因此可能需要适当的宽度和高度来避免布局问题。

   • 如果浮动元素的高度大于其容器的高度，容器可能会塌陷（高度塌陷问题），这时可以使用clear来解决。

   • 常常需要通过添加额外的空元素或使用伪元素清除浮动来解决布局问题（例如，使用clearfix类）。

   • 多个浮动元素一行装不下时会自动折行，折行时有可能被卡住

   • 当元素的所有子元素全部浮动时，自动识别的内容高度为0，会导致后面的元素顶上来出现显示异常，给元素添加overflow:hidden 解决此问题

   • 应用场景：将纵向排列的多个元素，改成横向排列时使用

     .clearfix::after {
         content: "";
         display: table;
         clear: both;
     }
     

其他样式

显示层级和溢出设置

在CSS中，显示层级和溢出设置是用来控制元素在屏幕上如何叠加和如何处理溢出内容的重要属性。

1. 显示层级（Z-Index）：

• z-index 属性用于控制元素的垂直堆叠顺序，也就是它们在屏幕上的叠加顺序。

• 值为整数，值越大的元素会在值较小的元素上面显示。

• 可以为正数、负数或零。

• 通常与定位属性（如position: relative; 或 position: absolute;）一起使用，以控制叠加顺序。

  .z-index-example {
      position: relative;
      z-index: 2;
  }
  

2. 溢出设置（Overflow）：

• overflow 属性用于定义当元素内容溢出其容器时应该如何处理。
• 可能的值包括：

  • visible（默认值）：内容溢出容器时不进行裁剪，会显示在容器外部。

  • hidden：内容溢出容器时将被裁剪并隐藏。

  • scroll：显示滚动条以便查看溢出的内容。

  • auto：如果内容溢出，则显示滚动条，否则不显示。

    .overflow-example {
        overflow: hidden;
    }
    

这些属性可以一起使用，例如，在创建具有多个叠加元素的情况下，可以使用 z-index 来控制它们的显示层级，同时使用 overflow 来处理内容溢出的情况。

.overlay {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.popup {
    position: absolute;
    z-index: 2;
    /* 其他样式 */
}

行内元素垂直对齐方式vertical-align

• top：上对齐
• middle：中间对齐
• bottom：下对齐
• baseline：基线对齐