学习前端的不归路——CSS基础

最新推荐文章于 2024-05-21 21:13:29 发布

珂玥c

最新推荐文章于 2024-05-21 21:13:29 发布

阅读量60

点赞数

分类专栏：前端学习ing 文章标签： css 前端学习 Powered by 金山文档

本文链接：https://blog.csdn.net/m0_59029800/article/details/129300217

版权

前端学习ing 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

层叠样式表（Cascading Style Sheet，简称：CSS）是为网页添加样式的代码。

CSS 也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言，用它来为 HTML 元素添加样式。比如：颜色，位置，字体，行间距，添加边框等。

在styles 文件夹中创建style.css 文件。

打开 index.html 文件，然后将下面一行粘贴到文档头（也就是 <head> 和 </head> 标签之间）。

<link href="styles/style.css" rel="stylesheet">

一.规则集：

选择器（Selector）

HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素（在这个例子中就是 p 元素）。要给不同元素添加样式只需要更改选择器就行了。

声明（Declaration）= 属性+属性的值

一个单独的规则，如 color: red; 用来指定添加样式元素的属性。

属性（Properties）

改变 HTML 元素样式的途径。（本例中 color 就是 <p> 元素的属性。）CSS 中，由编写人员决定修改哪个属性以改变规则。

属性的值（Property value）

在属性的右边，冒号后面即属性的值，它从指定属性的众多外观中选择一个值（我们除了 red 之外还有很多属性值可以用于 color ）。

注意其他重要的语法：

每个规则集（除了选择器的部分）都应该包含在成对的大括号里（{}）。

在每个声明里要用冒号（:）将属性与属性值分隔开。

在每个规则集里要用分号（;）将各个声明分隔开。

多个属性：只需要将它们用分号隔开

body {
       width: 650px;
       margin: 0 auto;
       background-color: #BCF7F6;
       padding: 0px 20px 0px 20px;
       border: 2px solid black;
 }

多种类型的元素：将不同的选择器用逗号分开。例如：

h1,li {
      color: red;
}

不同类型的选择器：

选择器有许多不同的类型。上面只介绍了元素选择器，用来选择 HTML 文档中给定的元素。但是选择操作可以更加具体。下面是一些常用的选择器类型：

二.一切皆盒子：

页面里大部分 HTML 元素都可以被看作若干层叠的盒子。

CSS 布局主要就是基于盒模型的。每个占据页面空间的块都有这样的属性：

padding：即内边距，围绕着内容（比如段落）的空间。

border：即边框，紧接着内边距的线。

margin：即外边距，围绕元素外部的空间。

还有其他的

width ：元素的宽度

background-color ：元素内容和内边距底下的颜色

color ：元素内容（通常是文本）的颜色

text-shadow ：为元素内的文本设置阴影

display ：设置元素的显示模式（暂略）

三.修改颜色：

1.字体颜色

h1,li {
      color: red;
}

2.页面颜色

html {
  background-color: #00539F;
}

四.修改样式：

1.字体

第一步，找到之前 Google Font 输出的地址。并以 <link> 元素的形式添加进 index.html 文档头（ <head> 和 </head> 之间的任意位置）。代码如下：

 <link href="https://fonts.font.im/css?family=Open+Sans" rel="stylesheet" type="text/css">

以上代码为当前网页下载 Open Sans 字体，从而使自定义 CSS 中可以对 HTML 元素应用这个字体。

第二步，删除 style.css 文件中已有的规则。虽然测试是成功的了，但是红字看起来并不太舒服。

第三步，将下列代码添加到相应的位置，用你在 Google Fonts 找到的字体替代 font-family 中的占位行。（ font-family 意味着你想要你的文本使用的字体。）这条规则首先为整个页面设定了一个全局字体和字号（因为 <html> 是整个页面的父元素，而且它所有的子元素都会继承相同的 font-size 和 font-family）：

html {
  /* px 表示“像素（pixels）”: 基础字号为 10 像素 */
  font-size: 10px;
  /* Google fonts 输出的 CSS */
  font-family: 'Open Sans', sans-serif;
}

2.文档字号居中行高字间距

font-size 字体大小

text-align 文本对齐

line-height 行高

letter-spacing 字母间距

h1 {
        font-size: 30px;
        text-align: center;
        color: #F8584B;
}

p, li , h2 {
        font-size: 16px;
        /* line-height 后面可以跟不同的参数，如果是数字，就是当前字体大小乘上数字 */
        line-height: 1.5;
        letter-spacing: 2px;
}

3.文档体格式

body {
      width: 650px;
      margin: 0 auto;
      background-color: #BCF7F6;
      padding: 0px 20px 0px 20px;
      border: 2px solid black;
}

现在是 <body> 元素。以上条声明，我们来逐条查看：

width（宽度）: 600px; —— 强制页面永远保持 600 像素宽。

margin（页边空白）: 0 auto; —— 为 margin 或 padding 等属性设置两个值时，第一个值代表元素的上方和下方（在这个例子中设置为 0），而第二个值代表左边和右边（在这里，auto 是一个特殊的值，意思是水平方向上左右对称）。你也可以使用一个，三个或四个值，参考这里。

background-color（背景颜色）: #FF9500; —— 如前文所述，指定元素的背景颜色。我们给 body 用了一种略微偏红的橘色以与深蓝色的 <html> 元素形成反差，你也可以尝试其它颜色。

padding（填充）: 0 20px 20px 20px; —— 我们给内边距设置了四个值来让内容四周产生一点空间。这一次我们不设置上方的内边距，设置右边，下方，左边的内边距为 20 像素。值以上、右、下、左的顺序排列。

border（边）: 5px solid black; —— 直接为 body 设置 5 像素的黑色实线边框。

4.页面主标题样式

h1 {
      font-size: 30px;
      text-align: center;
      color:  #9606CC;
}

text-shadow 属性，它可以为元素中的文本提供阴影。四个值含义如下：

第一个值设置水平偏移值 —— 即阴影右移的像素数（负值左移）。

第二个值设置垂直偏移值 —— 即阴影下移的像素数（负值上移）。

第三个值设置阴影的模糊半径 —— 值越大产生的阴影越模糊。

第四个值设置阴影的基色。

5.图像居中

img {
  display: block;
  margin: 0 auto;
}

可以复用 body 的 margin: 0 auto ，但是需要一点点调整。 <body> 元素是块级元素，意味着它占据了页面的空间并且能够赋予外边距和其他改变间距的值。而图片是内联元素，不具备块级元素的一些功能。所以为了使图像有外边距，我们必须使用 display: block 给予其块级行为。

内联元素又名行内元素(inline element)，和其对应的是块元素(block element)，都是html规范中的概念。内联元素的显示，为了帮助理解，可以形象的称为“文本模式”，即一个挨着一个，都在同一行按从左至右的顺序显示，不单独占一行。

块级元素占据其父元素（容器）的整个水平空间，垂直空间等于其内容高度，因此创建了一个“块”。

最终效果：

h1,li {
      color: red;
}

html {
      /* px 表示“像素（pixels）”: 基础字号为 10 像素 */
      font-size: 16px;
        /* Google fonts 输出的 CSS */
      font-family: 'Open Sans', sans-serif;
      text-align: center;
}

h1 {

      font-size: 30px;
      text-align: center;
      color: #F8584B;
}

p, li , h2 {
      font-size: 16px;
      line-height: 1.5;
      letter-spacing: 2px;
      text-align: center;
}

html {
      background-color: #AEC4F4;
}
body {
      width: 650px;
      margin: 0 auto;
      background-color: #BCF7F6;
      padding: 0px 20px 0px 20px;
      border: 2px solid black;
}