CSS介绍

CSS是一种用于屏幕上渲染html，CSS主要是在相应的元素中应用样式，来渲染相对应用的元素，那么这样我们选择相应的元素就很重要了，如何选择对应的元素，此时就需要我们所说的选择器。

CSS：表现层，网页的美化。

CSS与HTML都是由W3C组织进行维护的，现在的版本已经更行到3.0版本，也就是我们常说的CSS3。
CSS全称：cascading style sheets （层叠样式表）

CSS优点

  • 能够使代码简洁，可读性比较强。
  • 便于维护。
  • 对搜索引擎比较友好。
  • 提高开发效率。

CSS语法

格式：
选择器{
属性：属性值；
}
例：
<style>
   p {
      color: pink;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <p>这是一段文字</p>

书写位置

根据书写位置不同，CSS可以分为三种：行内式、内嵌式、外链式。
行内式
CSS属性直接写在标签的style中。

优点：写法比较简单，不用考虑选择器。
缺点：

  • 结构与样式没有分离。
  • 不便于维护。
  • 样式复用性较差，只对当前元素生效。
    【注意】在开发过程中不推荐使用
例：
<p style="color: pink; font-size: 16px; font-style: italic;">这是一段文字</p>
内嵌式
使用style标签，将CSS属性名与属性值引入到HTML页面中，style标签放置在head标签中。
优点：
  • 相对于行内式，结构与样式部分分离。
  • 便于维护。
  • 样式可以重复。
缺点：
  • 结构与样式没有达到完全分离。
  • 只对当前页面生效。
例：
<style>
   p {
      color: pink;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <p>这是一段文字</p>
外链式
新建一个CSS文件，将CSS语句写入CSS文件中，然后在HTML页面中通过link标签引入。

【注意】CSS文件不能写中文，可以写英文、数字、下划线，但是不能以数字开头。

优点：
  • 结构与样式完全分离。
  • 样式可以复用，多个页面都可以使用。
  • 使用浏览器的缓存机制，提高网页的加载速度。
格式：
<link rel="stylesheet" href="css/test.css"
-rel 表示的是引入的文件与页面的关系，这里表示引入的文件是当前页面的样式表。
-href 引入文件的路径。
例：
<link rel="stylesheet" href="./index.css">
  • 缓存：浏览器在打开网页时，会将网页中的图片和文件保存到本地，下次打开页面时，不需要再次加载了，能够提高网页的加载速度。
  • 以后的开发过程中，推荐使用外链式。

CSS常用的样式

字体 font-family
  • 字体有中文字体和英文字体。如果文本中有中文和英文，我们最好设置两种字体。
  • 英文字体需要放在中文字体的前面。因为英文字体一般没有为汉字设置字体样式。字体加载时按照咱们的书写顺序来的。如果前面的字体没有匹配到，才会使用后面的字体。
  • 如果你的电脑上没有设置的字体，则会按照默认字体来显示。
  • 英文常用字体：Arial，consolas.
  • 中文常用字体：宋体，微软雅黑。
  • 一些中文字体也有英文名称。
  • 宋体：SimSun
  • 微软雅黑：Microsoft YaHei
总结
  • 多个属性值之间用逗号隔开，每一个属性值用双引号包裹。后面的字体表示备用字体。
字体大小 font-size
  • 属性是以像素为单位（px）
颜色 color
  • 作用：为文本添加字体颜色。
  • 属性值：
  1. 颜色名：（英文-例：red、green、blue）
    2.RGB：[ rgb(0,255,0);取值范围‘0~255之间’ ]
    3.十六进制：#ff6700 （数值前必须有‘#’ 取值范围0~f）
例：
<style>
        p {
            font-family: Microsoft YaHei;
            font-size: 18px;
            color: red;           
        }
    </style>
</head>
<body>
    <p>这是一段文字</p>
盒子属性
  • 盒子的宽、高、背景颜色以及边框。
  • width： 宽 （单位是px）
  • height：高 （单位是px）
  • background-color：背景颜
    （属性值：
  1. 颜色名：（英文-例：red、green、blue）
    2.RGB：[ rgb(0,255,0);取值范围‘0~255之间’ ]
    3.十六进制：#ff6700 （数值前必须有‘#’ 取值范围0~f））
  • border： 边框 （多属性值。顺序：宽度，线的类型，颜色。）
例：
<style>
        div {
            width: 80px;
            height: 30px;
            background-color: #ff6700;
        }
    </style>
</head>
<body>
    <div></div>

div标签和span标签

  • 这两个标签都是属于盒子。
  • div标签是块级元素，大盒子。
  • span标签是行内元素，小盒子。span里面只允许放置文本。