• CSS入门

    目录

    CSS简介

    内容

    css的引入方式

    选择器规则

    CSS盒子模型

    文本样式

    文本样式总结 

     背景样式概述

     边框样式

    CSS简介


    CSS是什么？CSS，即“Cascading Style Sheet（层叠样式表）”，是用来控制网页的外观的一门技术。我们知道，HTML、CSS和JavaScript是前端技术中最核心的三个元素。HTML控制网页的结构，CSS控制网页的外观，而JavaScript控制网页的行为。

    HTML、CSS和JavaScript的关系如下：

    “HTML是网页的结构，CSS是网页的外观，而JavaScript是页面的行为。”

    内容


    css的引入方式


    在HTML中引入CSS共有3种方式：

    • （1）外部样式表；
    • （2）内部样式表；
    • （3）内联样式表；

    外部样式表

    外部样式表是最理想的CSS引用方式，在实际开发当中，为了提升网站的性能和维护性，一般都是使用外部样式表。所谓的“外部样式表”，就是把CSS代码和HTML代码都单独放在不同文件中，然后在HTML文档中使用link标签来引用CSS样式表。 当样式需要被应用到多个页面时，外部样式表是最理想的选择。使用样式表，你就可以通过更改一个CSS文件来改变整个网站的外观。 外部样式表在单独文件中定义，并且在标签对中使用link标签来引用（在头部引用）。

    1. html>
    2.  <html >
    3.  <head> 
    4.  <title>title>
    5.     
    6. <link href="index.css" rel="stylesheet" type="text/css" />
    7. head>
    8. <body>   
    9.      <div>div>
    10. body>
    11. html>

    内部样式表

    内部样式，指的就是把CSS代码和HTML代码放在同一个文件中，其中CSS代码放在标签对是放在标签对内的。 举例：

    1. html>
    2. <html>
    3. <head>  
    4.   <title>title>    
    5.       
    6.   <style type="text/css">
    7.           p{color:Red;}      
    8.    style>
    9.  head>
    10.  <body>   
    11.   <p>111p>  
    12.   <p>222p>
    13.  body>

    内联样式表

    也是把CSS代码和HTML代码放在同一个文件中，但是跟内部样式表不同，CSS样式不是在标签对中定义，而是在标签的style属性中定义。

    1. html> 
    2. <html >
    3. <head>
    4.     <title>title>
    5. head>
    6. <body>
    7.     <p style="color:Red; ">1p>
    8.     <p style="color:Red; ">2p>
    9.     <p style="color:Red; ">3p>
    10. body>
    11. html>

    选择器规则


    id和class是HTML元素中两个最基本的公共属性。

    元素的id属性

    id属性被赋予了标识页面元素的唯一身份（id是唯一的）。如果一个页面出现了多个相同id属性取值，CSS选择器或者JavaScript就会因为无法分辨要控制的元素而最终报错。

    元素的class属性

    • class，顾名思义，就是“类”。它采用的思想跟其他C、Java等编程语言的“类”相似。我们可以为同一个页面的相同元素或者不同元素设置相同的class，然后使得相同的class具有相同的CSS样式。
    • 如果你要为两个元素或者两个以上元素定义相同的样式，建议使用class属性。
    • 一个标签可以同时定义多个class
    • id也可以写成name，区别在于name是HTML中的标准，而id是XHTML中的标准，现在网页的标准都是使用id，所以大家尽量不要用name属性；

    id选择器

    • 我们可以为元素设置一个id，然后针对这个id的元素进行CSS样式操作。注意，在同一个页面中，不允许出现两个相同的id，这个就像没有哪两个人的身份证号是相同的道理一样。
    • id名前面必须要加上前缀“#”，否则该选择器无法生效。id名前面加上“#”，表明这是一个id选择器。

    CSS的id选择器

    class选择器 

    • class选择器，也就是“类选择器”。我们可以对“相同的元素”或者“不同的元素”设置一个class（类名），然后针对这个class的元素进行CSS样式操作。
    • class名前面必须要加上前缀“.”（英文点号），否则该选择器无法生效。类名前面加上“.”，表明这是一个class选择器。
      CSS的class选择器

    元素选择器

    元素选择器，就是“选中”相同的元素，然后对相同的元素设置同一个CSS样式。

    CSS元素选择器

     复合选择器（并的意思）

    • selector1没有空格直接跟selector2，表示并且的意思
    • div.hello{}表示是div元素，并且class中包含hello的元素
    • .hello.word表示class中包含hello和word
    • div#hello div元素，并且id是hello的元素

    群组选择器（或的意思）

    • 群组选择器，就是同时对几个选择器进行相同的操作。
    • 对于群组选择器，两个选择器之间必须用“,”（英文逗号）隔开，不然群组选择器无法生效
    • div，.hello

    CSS群组选择器

     
    子元素选择器

    1. 子元素选择器，就是选中某个元素下的子元素，然后对该子元素设置CSS样式。
    2. 父元素与子元素必须用空格隔开，从而表示选中某个元素下的子元素。
    3. body div  找到body下的所有的div元素，包括子孙
    4. body >div。只包括子，不包括孙

    CSS子元素选择器

    CSS盒子模型

    CSS盒子模型

     

    内容区

    • 内容区是CSS盒子模型的中心，它呈现了盒子的主要信息内容，这些内容可以是文本、图片等多种类型。内容区是盒子模型必备的组成部分，其他的3部分都是可选的。
    • 内容区有3个属性：width、height和overflow。使用width和height属性可以指定盒子内容区的高度和宽度。在这里注意一点，width和height这两个属性是针对内容区而言，并不包padding部分。当内容信息太多时，超出内容区所占范围时，可以使用overflow溢出属性来指定处理方法。对于overflow这个属性，我们在后面会详细讲解到。

    内边距

    • 内边距，指的是内容区和边框之间的空间，可以被看做是内容区的背景区域。
    • 关于内边距的属性有5种，即padding-top、padding-bottom、padding-left、padding-right以及综合了以上4个方向的简洁内边距属性padding。使用这5种属性可以指定内容区域各方向边框之间的距离

    边框

    • 在CSS盒子模型中，边框跟我们之前学过的边框是一样的。
    • 边框属性有border-width、border-style、border-color以及综合了3类属性的快捷边框属性border。其中border-width指定边框的宽度，border-style指定边框类型，border-color指定边框的颜色。“border-width:1px;border-style:solid;border-color:gray;”等价于“border:1px solid gray;”。

    外边距

    • 外边距，指的是两个盒子之间的距离，它可能是子元素与父元素之间的距离，也可能是兄弟元素之间的距离。
    • 外边距使得元素之间不必紧凑地连接在一起，是CSS布局的一个重要手段。外边距的属性也有5种，即margin-top、margin-bottom、margin-left、margin-right以及综合了以上4个方向的简洁内边距属性margin。同时，CSS允许给外边距属性指定负数值，当指定负外边距值时，整个盒子将向指定负值的相反方向移动，以此可以产生盒子的重叠效果。

    文本样式

     font-family

    • 可以有多个字体类型，按顺序选择，如果浏览器没有第一个字体，就采用第二个 

    font-size

    • 有着不同的字体大小单位的设置 
    • em是一个相对大小的单位，ex是像素，是绝对单位

    font-weight

     font-style

    color 

    文本样式总结 

    段落的属性

    text-align 

     text-decoration 

     text-indent

    • 用来设置首行缩进

    line-height 

    1. 当盒子（块级元素）大小固定的时候，可以适用text-align：center+line-height：盒子高度 ,来实现文字水平居中

     背景样式概述

    background-image

    background-color属性

    在CSS中，使用background-color属性来定义元素的背景颜色。

    颜色值是一个关键字或一个16进制的RGB值。关键字指的就是颜色的英文名称，如red、blue、green等。

    background-repeat属性

     background-position取值为“像素值”

     

     边框样式

     border-radius

    •  用来设置边框的形状
    • border-width:像素值;
    • border-style属性用于设置边框的外观，例如实线边框和虚线边框。
    • border-color属性用来定义边框的颜色。

    两个实战来理解

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.min.css">
    7.     <link rel="stylesheet" href="style1.css">
    8. head>
    9. <body>
    10. <div class="一篇文章">
    11.     <div class="标题部分">
    12.         <div class="标签">原力计划div>
    13.         <div class="标题">基于Java+Spring+mybatis+vue+element实现酒店管理系统div>
    14.     div>
    15.     <div class="主体部分">
    16.         <div class="左边的图片">
    17.             <img src="header.png">
    18.         div>
    19.         <div class="右边的文字">
    20.             <div class="上面的介绍">
    21.                 酒店管理系统采用B/S结构、java开发语言、以及Mysql数据库等技术。 系统主要分为管理员和用户二部分，
    22.                 管理员：首页、个人中心、用户管理、 客房类型管理、客房信息管理、客房预
    23.             div>
    24.             <div class="下面的功能区">
    25.                 <span class="点赞">
    26.                 <i class="fa fa-thumbs-o-up" aria-hidden="true">i>
    27.                 75 赞
    28.                 span>
    29.                 <span class="点踩">
    30.                        <i class="fa fa-thumbs-o-down" aria-hidden="true">i>
    31.                         踩
    32.                   span>
    33.                 <span class="作者">
    34.                       刘颂成
    35.                   span>
    36.                 <span class="更多功能">
    37.                       ...
    38.                   span>
    39.             div>
    40.         div>
    41.     div>
    42. div>
    43. body>
    44. html>
    •  对于网页，我们先要设计出它的骨架

     

     

  • 相关阅读:
    redis非关系型数据库
    HTML+CSS+JS鲜花商城网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计
    【动态规划】--买卖股票的最佳时机
    kubernetes之资源限制及QOS服务质量
    efficientsam-pytorch基于point、box和segment everthing推理模型
    ARM海思MQTT开发系列（四）如何实现客户端上线/离线状态管理
    PyTorch中，卷积层、池化层、转置卷积层输出特征图形状计算公式总结
    MySQL-锁分类-2
    Docker——Docker 架构和 centOS 下安装 Docker
    KNN-水仙花的分类
  • 原文地址：https://blog.csdn.net/qq_50985215/article/details/126071769