CSS学习总结

2021-05-10 23:03:16 阅读：172 来源： 互联网

标签：总结样式 haha 学习 color css 选择器 CSS 样式表

前言

正如编程大牛所说：一个网页就好像一幢房子，HTML结构就是钢筋混泥土的墙，一幢房子如果没有钢筋混泥土的墙那就是一堆废砖头，也就称不上是房子了。 CSS是装饰材料，是油漆，是用来装饰房子的。CSS如果没有HTML结构那也就什么都不是了，没有了实际使用价值。而JavaScript就是房屋的开关，用来进行互动，产生动态效果。

上篇博客提到了HTML基础入门，本篇博客仅仅为css基础入门，技术有限，如有问题，敬请斧正！

css学习过程总结

CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。

什么是css

CSS是级联样式表（Cascading Style Sheets）的缩写。是对HTML 内容样式排版表。

css基础语法

一条CSS样式规则由两个主要的部分构成：选择器，以{}包裹的一条或多条声明:如下

h1 {color:blue;font-size:12px;}
h1//选择器
color font-size//属性
blue 12px//值

解释：规则表明页面中所有一级标题都显示为蓝色，字体（font-sixe）大小为12像素。
注意：属性与值之间由冒号隔开。

选择器：

元素选择器，id 选择器 class选择器（class使用普遍）
如下：

h1 {color:blue;font-size:12px;}

ID选择器

/* 注意：id选择器前有 # 号。 */
#sky{
  color: blue;
}

class选择器

/* 注意：class选择器前有 . 号。 */
.center{
  text-align: center;
}
.large{
  font-size: 30px;
}
.red{
  color: red;
}

css样式

css如何生效？

定义三种方式：
外部样式表内部样式表内联样式

外部样式表
在HTML的同一目录下新建一个样式表文件mycss.css（注意后缀名为css）如下：

body {
  background-color: linen;
  text-align: center;
}
h1 {
  color: red;
}
.haha {
  margin-top: 100px;
  color: chocolate;
  font-size: 50px;
}

注意：在外部样式表中注意：文件地址要用绝对地址！
2. 内部样式表
将样式放在 HTML 文件中，这称为内部样式表。如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!-- 注意下面这个语句，将导入外部的 mycss.css 样式表文件 -->
  <link rel="stylesheet" type="text/css" href="mycss.css">
  <title>页面标题</title>
  <style>
    body {
      background-color: linen;
      text-align: center;
    }
    h1 {
      color: red;
    }
    .haha {
      margin-top: 100px;
      color: chocolate;
      font-size: 50px;
    }
  </style>
</head>
</html>

注意：head元素中引入了style标签，放入了样式表。

内联样式
直接把样式规则直接写到要应用的元素中就是内联样式。如下：

<h3 style="color:green;">I am a heading</h3>

级联的优先级

1.内联样式
2.内部样式或外部样式
3.浏览器缺省样式
简言之那个样式离得近就显示那个样式

盒子模型

盒子模型指的是一个 HTML 元素可以看作一个盒子。从内到外，这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的
如下图：
控制台图

Content 盒子的内容，如文本、图片等
Padding 填充，也叫内边距，即内容和边框之间的区域
Border 边框，默认不显示
Margin 外边距，边框以外与其它元素的区域

边框与边距

padding: 20px; /* 上下左右都相同 */
padding-top: 20px;
padding-bottom: 100px;
padding-right: 50px;
padding-left: 80px;
padding: 25px 50px 75px 100px; /* 简写形式，按上，右，下，左顺序设置 */
padding: 25px 10px; /* 简写形式，上下为25px，左右为10px */

定位

position属性用于对元素进行定位
static 静态
relative 相对
fixed 固定
absolute 绝对
注意：设置了position属性后才能使用top,bottom,left,right等属性

浮动

在一个区域或容器内，我们可以设置float属性让某元素水平方向上向左或右进行移动，其周围的元素也会重新排列。我们常用这种样式来使图像和文本进行合理布局。如下图
图片浮动

关键代码

 <img src="https://mdbootstrap.com/img/Photos/Others/placeholder1.jpg" class="example-float-right" alt="">
 <p>To be, or not to be- that is the question: 
 Whether it's nobler in the mind to suffer 
 The slings and arrows of outrageous fortune 
 Or to take arms against a sea of troubles, 
 And by opposing end them！ </p>

组合选择器

前面我们学习了 CSS有三种选择器：元素、id 和 class 。为了得到简洁精确的选择，我们可以进行选择器组合。

后代选择器

以空格作为分隔，如：.haha p 代表在div元素内有.haha这种类的所有元素。
如下

<html>
<head>
  <style>
    .haha p {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="haha">
    <p>Paragraph 1 in the div .haha.</p>
    <p>Paragraph 2 in the div .haha>.</p>
    <span>
        <p>Paragraph 3 in the div .haha.</p>
    </span>
  </div>
  <p>Paragraph 4. Not in a div .haha.</p>
  <p>Paragraph 5. Not in a div .haha.</p>
</body>
</html>

分析：段落1、2、3都将有黄色的背景，而段落4、5没有

子选择器

也称为直接后代选择器，以>作为分隔，如：.haha > p 代表在有.haha类的元素内的直接p元素。
参见如下代码：

<html>
<head>
  <style>
    .haha > p {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="haha">
    <p>Paragraph 1 in the div .haha.</p>
    <p>Paragraph 2 in the div .haha.</p>
    <span>
        <p>Paragraph 3 in the div .haha - it is descendant but not immediate child.</p>
    </span> <!-- not Child but Descendant -->
  </div>
  <p>Paragraph 4. Not in a div .haha.</p>
  <p>Paragraph 5. Not in a div .haha.</p>
</body>
</html>

分析：虽然段落3在.haha类中，但它的直接父元素是span，不是.haha的直接后代，所以不能选择。只有段落1、2有黄色背景。

心得总结

通过几周的学习对css有了基础的了解，CSS是级联样式表（Cascading Style Sheets）的缩写。是对HTML 内容样式排版表。css的出现将web的内容和样式分隔开来，有利于代码样式的复用，可以减少代码量和工作量。还需进一步了解web前端的实时动态！

深入学习，访问css详细教程

标签：总结,样式,haha,学习,color,css,选择器,CSS,样式表
来源： https://blog.csdn.net/qq_46665939/article/details/116609632

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9