• Day20_9 前端入门之CSS样式

    目录

    一、CSS样式的概述

    二、CSS样式的使用

    CSS的引入方式

     HTML的基础选择器

     字体与文本样式

    复合选择器

    背景样式

     显示模式

    一、CSS样式的概述

    解析：

    1.CSS的定义为：层叠样式表（Cascading style sheets）

    2.CSS的主要作用：给页面中的HTML标签设置样式

    3.样式通常存储在样式表中

    4.外部样式表可以极大提高工作效率

    5.外部样式表通常存储在 CSS 文件中

    6.多个样式定义可层叠为一个

    二、CSS样式的使用

    • CSS的引入方式

    引入方式如下表：

    引入方式书写位置作用范围使用场景
    内嵌式CSS写在style标签中当前页面小案例
    外联式CSS写在单独的CSS文件中，通过link标签引入多个页面项目中
    行内式CSS写在标签的style属性中当前标签配合js使用

    使用演示如下代码所示：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9.     
    10.     <link rel="stylesheet" href="css/index.css">
    11.     
    12.     <style>
    13.         h2 {
    14.             color: bisque;
    15.             font-size: 50px;
    16.         }
    17.     style>
    18. head>
    19.  
    20. <body>
    21.     
    22.     
    23.     <h1 style="color:#f00 ;font-size: 50px;">标题1h1>
    24.     <h1 style="color:red ;font-size: 50px;">标题2h1>
    25.     <h1 style="color:rgb(255, 0, 0) ;font-size: 50px;">标题3h1>
    26.     
    27.     <h2>标题4h2>
    28.     
    29.     <h3>标题5h3>
    30. body>
    31.  
    32. html>
    33.  
    35. /* h3 {
    36.     font-weight: normal;
    37.     color: #f00;
    38.     font-family: "宋体";
    39. } */

    •  HTML的基础选择器

    1.标签选择器：

    解析：

    结构：标签名{ CSS属性名：属性值；}

    作用：通过标签名，找到页面中所有这类标签，设置样式

    特别注意：

    1. 标签选择器选择的是一类标签，而不是单独某一个

    2. 标签选择器无论嵌套关系有多深，都能找到对应的标签

    使用演示如下图：

    2.类选择器

     解析：

    1.结构：.类名 { css属性名：属性值； }

    2. 作用：通过类名，找到页面中所有带有这个类名的标签，设置样式

    3. 特别注意：

    3.1、所有标签上都有class属性，class属性的属性值称为类名（类似于名字）

    3.2、类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头

    3.3、 一个标签可以同时有多个类名，类名之间以空格隔开

    3.4、 类名可以重复，一个类选择器可以同时选中多个标签

    使用演示如下图：

     3.id选择器

    解析：

    1.结构：#id属性值 { css属性名：属性值； }

    2. 作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式

    3.特别注意：

    1. 所有标签上都有id属性

    2. id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！

    3. 一个标签上只能有一个id属性值

    4. 一个id选择器只能选中一个标签

     使用演示如下图：

     4.通配符选择器

    解析：

    1. 结构：* { css属性名：属性值； }

    2. 作用：找到页面中所有的标签，设置样式

    3. 特别注意：

    1. 开发中使用极少，只会在极特殊情况下才会用到

    2. 在基础的小页面中可能会用于去除标签默认的margin和padding（后续讲解）

    使用演示如下图：

    •  字体与文本样式

    1.字体样式：

    作用如下：

    （1）设置字体大小：font-size

    （2）设置字体粗细：font-weight

    （3）设置字体样式：font-style

    （4）设置字体类型：font-family

    2.文本样式：

     作用如下：

    （1）设置文本缩进：text-indent

    （2）设置文本水平对齐方式：text-align

    （3）设置文本修饰：text-decoration

    3. line-height行高

    应用于：

    （1）让单行文本垂直居中可以设置 line-height : 文字父元素高度

    （2）网页精准布局时，会设置 line-height : 1 可以取消上下间距

     行高如下图所示：

     4.文本颜色

    作用：

    （1）文字颜色：color

    （2）背景颜色：background-color

    颜色属性值表示如下图所示:

    • 复合选择器

    1.后代选择器：空格

    1. 作用：根据 HTML 标签的嵌套关系，选择父元素 后代中 满足条件的元素

    2. 选择器语法：选择器1 选择器2 { css }

    3. 结果： 在选择器1所找到标签的后代（儿子、孙子、重孙子…）中，找到满足选择器2的标签，设置样式

    4.特别注意：

    1. 后代包括：儿子、孙子、重孙子……

    2. 后代选择器中，选择器与选择器之前通过 空格 隔开

    2.子代选择器: >

    1. 作用：根据 HTML 标签的嵌套关系，选择父元素 子代中 满足条件的元素

    2. 选择器语法：选择器1 > 选择器2 { css }

    3. 结果： 在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式

    4. 注意点：

    4.1、子代只包括：儿子

    4.2、子代选择器中，选择器与选择器之前通过 > 隔开

    3.并集选择器：，

    1.作用：同时选择多组标签，设置相同的样式

    2.选择器语法：选择器1 ， 选择器2 { css }

    3.结果： 找到 选择器1 和 选择器2 选中的标签，设置样式

    4. 特别注意：

    4.1、 并集选择器中的每组选择器之间通过 , 分隔

    4.2、 并集选择器中的每组选择器可以是基础选择器或者复合选择器

    4.3、 并集选择器中的每组选择器通常一行写一个，提高代码的可读性

    4.hover伪类选择器

    1.作用：选中鼠标悬停在元素上的状态，设置样式

    2.选择器语法：选择器:hover { css }

    3.特别注意： 1. 伪类选择器选中的元素的某种状态 

    5.小结表

    6.选择使用代码演示： 

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9.     <style>
    10.         /* 后代选择器 */
    11.         /* ul li {
    12.             border: 1px solid #f00;
    13.         } */
    14.  
    15.         /* 子代选择器 ---直接子元素  */
    16.         /* .list>li {
    17.             border: 1px solid #f00;
    18.         } */
    19.  
    20.         /* 并集选择器----对使用当前css样式的所有选择器有效 */
    21.         /* .list>li,
    22.         p {
    23.             border: 1px solid rgb(26, 223, 112);
    24.         } */
    25.  
    26.  
    27.         /* :hover伪类选择器 */
    28.         /* .list li:hover {
    29.             background-color: cornflowerblue;
    30.             font-size: 40px;
    31.             color: #fff;
    32.         } */
    33.  
    34.  
    35.         /* ol li:first-child {
    36.             background-color: #f00;
    37.         }
    39.         ol li:last-child {
    40.             background-color: aquamarine;
    41.         }
    43.         ol li:nth-child(3) {
    44.             background-color: #00f;
    45.         } */
    46.  
    47.         /* ol li:nth-child(2n) {
    48.             background-color: rgb(14, 125, 66);
    49.         }
    51.         ol li:nth-child(2n+1) {
    52.             background-color: rgb(218, 12, 30);
    53.         } */
    54.         ol li:nth-child(even) {
    55.             background-color: rgb(14, 125, 66);
    56.         }
    57.  
    58.         ol li:nth-child(odd) {
    59.             background-color: rgb(218, 12, 30);
    60.         }
    61.  
    62.         /* ol li {
    63.             background-color: rgb(15, 186, 49);
    64.         } */
    65.  
    66.         /* ol li:nth-child(n+3) {
    67.             background-color: rgb(218, 12, 30);
    68.         } */
    69.         /* ol li:nth-child(-n+3) {
    70.             background-color: rgb(218, 12, 30);
    71.         } */
    72.  
    73.         /* 练习1：隔行背景变色---奇数行为红色，偶数行为绿色 */
    74.         /* 练习2：前3个的背景颜色行为红色，其他行为绿色 */
    75.     style>
    76. head>
    77.  
    78. <body>
    79.     <ol>
    80.         <li>列表1li>
    81.         <li>列表2li>
    82.         <li>列表3li>
    83.         <li>列表4li>
    84.         <li>列表5li>
    85.         <li>列表1li>
    86.         <li>列表2li>
    87.         <li>列表3li>
    88.         <li>列表4li>
    89.         <li>列表5li>
    90.     ol>
    91.     <ul class="list">
    92.         <li>列表1
    93.             
    94.         li>
    95.         <li>列表2li>
    96.         <li>列表3li>
    97.         <li>列表4li>
    98.         <li>列表5li>
    99.     ul>
    100.  
    101.     <p>段落p>
    102.  
    103. body>
    104.  
    105. html>

    7.结构伪类选择器

    解析：

    1.作用与优势： 作用：根据元素在HTML中的结构关系查找元素

    优势：减少对于HTML中类的依赖，有利于保持代码整洁

    2.使用场景：常用于查找某父级选择器中的子元素

     选择器表如下：

     n的使用注意点：1. n为：0、1、2、3、4、5、6、…… 2. 通过n可以组成常见公式

    常用n公式如下表所示：

     

    • 背景样式

    1.背景颜色：

    1.属性名：background-color

    2. 属性值：颜色取值：关键字、rgb表示法、rgba表示法、十六进制……

    3.特别注意：

    3.1、背景颜色默认值是透明： rgba(0,0,0,0) 、transparent

    3.2、背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色

    2.背景图片： 

    1.属性名：background-image

    2. 属性值：background-imgge:url（图片地址）

    3.特别注意：

    3.1、背景图片中url中可以省略引号

    3.2、背景图片默认是在水平和垂直方向平铺的

    3.3、背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的

    3.背景平铺（就是将背景铺满整个页面）

    1.属性名：background-repeat（bgr）

    2.属性值如下图如：

     

     4.背景位置

    1.属性名：background-position

    2. 属性值：background-position：水平方向位置 垂直方向位置 （具体如下图）

    3.特别注意：方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直

     

     5.背景相关属性连写

    1.属性名：background

    2.属性值：单个属性值的合写，取值之间以空格隔开

    3.书写顺序：推荐：background：color image repeat position

    4.省略问题：可以按照需求省略

    5.特殊情况：在pc端，如果盒子大小和背景图片大小一样，此时可以直接写 background：url()

    6.特别注意点：如果需要设置单独的样式和连写

    6.1、要么把单独的样式写在连写的下面 6.2、要么把单独的样式写在连写的里面

    •  显示模式

    1.块级元素：

    1.属性：display：block

    2.显示特点：

    2.1、独占一行（一行只能显示一个）

    2.2、 宽度默认是父元素的宽度，高度默认由内容撑开

    2.3、可以设置宽高

    3.代表标签： div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……

    2.行内元素 

    1.属性：display：inline

    2. 显示特点：

    2.1、一行可以显示多个

    2.2.、宽度和高度默认由内容撑开

    2.3、不可以设置宽高

    3.代表标签： a、span 、b、u、i、s、strong、ins、em、del……

    3.行内块元素

    1.属性：display：inline-block

    2.显示特点：

    2.1、一行可以显示多个

    2.2、可以设置宽高

    3.代表标签： input、textarea、button、select……

    特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline

    4.元素显示模式转换

    1.目的：改变元素默认的显示特点，让元素符合布局要求

    2. 语法使用如下图：

     

  • 相关阅读:
    再见，Ubuntu，你好，Manjaro
    prometheus描点原理
    17周年庆第一弹|中秋·国庆双节大促购物指南,给力狂欢!
    【云原生之docker-compose篇】docker-compose工具的安装和基本使用
    初始Spring MVC
    Ruo-Yi前后端分离的数据过滤
    MySQL系列第一篇入门
    Unsupervised MVS论文笔记
    Idea创建SpringBoot多模块项目
    【Linux网络编程】服务器程序框架
  • 原文地址：https://blog.csdn.net/weixin_43717536/article/details/126958200