CSS学习

最新推荐文章于 2024-07-24 20:49:24 发布

约定iou

最新推荐文章于 2024-07-24 20:49:24 发布

阅读量131

点赞数 1

文章标签： css

原文链接：qige.io

版权

作业专栏收录该内容

10 篇文章 2 订阅

订阅专栏

CSS学习总结

一级目录
0 引言
- 0.0 什么是CSS
1 CSS语法
2 CSS属性介绍
3 学习小结

一级目录

0 引言

0.0 什么是CSS

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

网页的内容是由 HTML的元素构建的，这些元素如何呈现，涉及许多方面，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。

1 CSS语法

1.1 基本语法

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

如：

body
{
    background-color:#d0e4fe;
}

body是选择器
括号内的是声明, background-color是属性，#d0e4fe是值

1.2 选择器

一个页面上的元素众多，选择器就用于在页面中找到/选择需要应用这个样式的对象。
除我们前示的元素选择器外，还有id和class选择器。其中class选择器使用非常普遍。

id 选择器

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

<p id="sky">蓝色的天空</p>
<p id="forest">绿色的森林</p>

在这里插入图片描述

class 选择器


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

<p class="center">我会居中显示的</p>
<p class="red">我是红色的</p>
<p class="center large red">我又红又大还居中</p>
<p class="red">我也可以是红的</p>

在这里插入图片描述

1.3 CSS三种格式

外部样式表
1.新建一个 HTML文件（后缀为.html)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!-- 注意下面这个语句，将导入外部的 mycss.css 样式表文件 -->
  <link rel="stylesheet" type="text/css" href="mycss.css">
  <title>页面标题</title>
</head>
<body>
  <h1>我是有样式的</h1>
  <hr>
  <p class="haha">还是有点丑：)</p>
</body>
</html>

2.在同一目录新建一个样式表文件mycss.css（注意后缀名为css）

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

一般我们会在项目目录下建一个文件夹如css专门存放样式表文件，如此我们引入样式文件时路径就变为 ./css/mycss.css之类的。

内部样式表
我们也可以将样式放在 HTML 文件中，这称为内部样式表。如：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>页面标题</title>
  <style>
    body {
      background-color: linen;
      text-align: center;
    }
    
  </style>
</head>
<body>
  <h1>我是有样式的</h1>
  <hr>
</body>
</html>

该例子与上述例子一样的效果，但注意在<head>元素中引入了<style>标签，放入了样式。

内联样式

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

2 CSS属性介绍

2.1.1 颜色

我们可以采用

颜色名称
RGB16进制值

来设定文字或背景的颜色，如：

<!-- 颜色名称 -->
<h3 style="background-color:Tomato;">Tomato</h3>
<h3 style="background-color:Orange;">Orange</h3>
<!-- 颜色值，3个字节分别代表RGB（Red，Green，Blue）的0～255的值 -->
<h3 style="background-color:#ff0000;">#ff0000</h3>
<h3 style="background-color:#0000ff;">#0000ff</h3>
<!-- 文本颜色 -->
<h3 style="color:Tomato;">Hello World</h3>

2.1.2 尺寸

我们可以用 height 和 width 设定元素内容占据的尺寸。
常见的尺寸单位有：

像数 px
百分比 %

  <body>
    <div class="example-1">
      这个元素高 200 pixels，占据全部宽度
    </div>
    <div class="example-2">
      这个元素宽200像素,高300像素
    </div>
  </body>
</html>

2.1.3 盒子模型

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

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

2.1.4 定位

position属性用于对元素进行定位。该属性有以下一些值：

static 静态
relative 相对
fixed 固定
absolute 绝对
设置了元素的position属性后，我们才能使用top, bottom, left, right属性，否则定位无效。

(1)原始
在这里插入图片描述
（2）static

是元素的默认定位方式，也即你设置与否，元素都将按正常的页面布局进行。

在这里插入图片描述
（3）relative

这将把元素相对于他的静态（正常）位置进行偏移

在这里插入图片描述
（4）fixed

这将使得元素固定不动（即使你上下左右拖动浏览器的滚动条）。

在这里插入图片描述
（5）absolute

将使元素相对于其最近设置了定位属性（非static）的父元素进行偏移。
如果该元素的所有父元素都没有设置定位属性，那么就相对于<body>这个父元素。

在这里插入图片描述

2.1.5 溢出

当元素内容超过其指定的区域时，我们通过溢出overflow属性来处理这些溢出的部分。

溢出属性有一下几个值：

visible 默认值，溢出部分不被裁剪，在区域外面显示
hidden 裁剪溢出部分且不可见
scroll 裁剪溢出部分，但提供上下和左右滚动条供显示
auto 裁剪溢出部分，视情况提供滚动条

2.1.6 不透明度

我们可以用opacity对任何元素（不过常用于图片）设置不透明度。
值在[0.0～1.0]之间，值越低，透明度越高，如下图所示：
在这里插入图片描述

2.1.7 伪类和伪元素

伪类（pseudo-class）或伪元素（pseudo-element）用于定义元素的某种特定的状态或位置等。
使用伪类/伪元素的语法如下：

/* 选择器后使用 : 号，再跟上某个伪类/伪元素 */
selector:pseudo-class/pseudo-element {
  property:value;
}

3 学习小结

相较于html本身的样式或版式的设计，使用css无疑更加方便便捷，也更轻松，还能使代码整洁有序。
本次学习只是粗略的对css常见的一些操作用法进行了学习、尝试，在接下来制作网页时，还会进一步的深入学习。

约定iou

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS学习

CSS学习总结一级目录0 引言0.0 什么是CSS1 CSS语法1.1 基本语法1.2 选择器1.3 CSS三种格式2 CSS属性介绍2.1.1 颜色2.1.2 尺寸2.1.3 盒子模型2.1.4 定位2.1.5 溢出2.1.6 不透明度2.1.7 伪类和伪元素3 学习小结一级目录0 引言0.0 什么是CSSCSS（Cascading Style Sheets）：HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。网页的内容是由 HTML的元素构建的
复制链接

扫一扫