ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

CSS学习总结

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

标签:总结 样式 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如何生效?

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

  1. 外部样式表
    在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标签,放入了样式表。

  1. 内联样式
    直接把样式规则直接写到要应用的元素中就是内联样式。如下:
<h3 style="color:green;">I am a heading</h3>

级联的优先级

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

盒子模型

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

  1. Content 盒子的内容,如文本、图片等
  2. Padding 填充,也叫内边距,即内容和边框之间的区域
  3. Border 边框,默认不显示
  4. 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

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有