当前标签 / CSS / 总共13篇

HTML+CSS基础

· 大约 200 个字 · 预计 1 分钟 读完
书籍
书籍 · HTML · CSS

本书籍是自己学习 HTML + CSS 前端技术的学习笔记，笔记最开始发布到个人博客，现在整理到这里方便查看。

作者在写作和整理过程中花费了大量时间和精力，另外服务器费用也是一笔不小的开支，如果你觉得我的文章和书籍对你有所帮助，可以请我喝杯咖啡或者农夫山泉：

如果在阅读过程中有任何疑问，可以去作者博客对应页面留言， 你也可以从我的体系树中找到对应文章。

阅读更多

CSS 背景混合模式

· 大约 600 个字 · 预计 3 分钟 读完
Web前端 · CSS
Web前端 · CSS · 背景混合 · 混合模式

混合模式

现代浏览器令人吃惊的是尽然支持和 PhotoShop 类似的图像混合模式，喜欢摄影或是熟悉 PhotoShop 的朋友应该对这个比较了解，我们先来普及一下什么是图像的混合模式。

要理解混合模式需要理解，图层、通道、RGB模式原理。

图层 比较好理解，就是我们的图像通过一层一层的叠加，最终形成我们所看到的图像，换句话说就是拆解图像到不同图层进行编辑。 通道 一般我们在 PhotoShop 中说通道通常指的是颜色通道和 alpha 通道。

颜色通道 颜色通道

上面显示的是 RGB 通道， 每个通道的像素都代表这种种颜色从 0~255 之间的一个值，三个通道叠加就会形成这个图像，而 alpha 通道是一个虚拟通道，比如我们可以创建一个选区来生成一个 alpha 通道。

alpha 通道 alpha 通道

RGB模式 RGB是光色三原色，通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色。

目前的显示器大都是采用了 RGB 颜色标准，在显示器上，是通过电子枪打在屏幕的红、绿、蓝三色发光极上来产生色彩的，目前的电脑一般都能显示32位颜色，有一千万种以上的颜色。如下图所示，假设三个灯都不开就是 0x000000 (黑色)，只开红灯就是 0xff0000 (红色），三个灯都开就是 0xffffff (白色)， rgb 三个值为等值的时候如 0x666666 是灰值（没有色相），RGB 模式称之为加色模式（相加成白色）。

RGB模式叠加示意图 RGB模式叠加示意图

CSS 中的混合模式是通过 background-blend-mode 和 mix-blend-mode 实现的。

阅读更多

CSS 滤镜

· 大约 200 个字 · 预计 1 分钟 读完
Web前端 · CSS
Web前端 · CSS · 滤镜 · blur · 高斯模糊 · 亮度 · 对比度 · 灰度 · 饱和度 · 色调

CSS 滤镜是功能强大的新工具，它使浏览器能实现一些图像后期处理软件的功能。滤镜属性使浏览器可以实现像模糊、图像调整，甚至下拉阴影之类的效果。

滤镜的语法很简单 ：滤镜类型后面跟上滤镜 filter 属性，如模糊 blur，括号内加上它的值。

1
2
3

.filter {
    filter : blur(3px); 
}

高斯模糊 blur

阅读更多

CSS 多背景和渐变

· 大约 600 个字 · 预计 3 分钟 读完
Web前端 · CSS
Web前端 · CSS · 背景 · 渐变 · background · linear · radial · gradient

设置多个背景 

1
2
3

<body>
    <section></section>
</body>

1
2
3
4
5

section {
    width: 429px;
    height: 265px;
    background: url(image2.gif) no-repeat, url(image1.png);
}

上面给 section 设置了多个背景（用逗号隔开），默认第一个背景图片在最上面（image2.gif），类似的我们可以添加多个背景。

边框

CSS 的盒模型在设置 padding 和 border 的时候总是给设置的宽度增加对应的额外像素， 这样在我们设置 100% 的窗口的时候就计算起来特别麻烦，后来引入了一个 border-box 来解决这个问题。

1
2
3
4
5
6

section {
    width: 429px;
    height: 265px;
    padding : 10px;
    border : 5px solid rgb(235, 244, 246);
}


1
2
3
4
5
6
7

section {
    width: 429px;
    height: 265px;
    padding : 10px;
    border : 5px solid rgb(235, 244, 246);
    box-sizing : border-box; 
}

阅读更多

CSS flexbox弹性布局

· 大约 500 个字 · 预计 3 分钟 读完
Web前端 · CSS
Web前端 · CSS · flex · flexbox

初识flex

之前我们写布局都是基于浏览器的盒模型，通过浮动的方式来排列界面的，这种方式有很多浏览器的 bug 和困扰我们的问题， 而 flexbox 的出现彻底解决了这些之前被人们诟病的问题。

flexbox 是基于两个坐标轴来实现的， 类似于 Android 中的线性布局 LinearLayout， 如果我们要使一个容器成为 flexbox 就需要设置 display: flex;。

flex 容器内部的元素称为 flex item, 水平轴称为 main axis, 竖直轴称为 cross axis, 大致布局如下：

基本使用

我们先来定义一个 flexbox 容器, 在里面放几个 flexitem：

1
2
3
4
5
6
7

<body>
    <div class="flexbox">
        <div class="flexitem">我是 DIV 标签内容</div>
        <p class="flexitem">我是 P 标签内容</p>
        <span class="flexitem">我是 SPAN 标签内容</p>
    </div>
</body>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

.flexbox{
    width: 600px;
    height: 200px;
    margin: 50px auto;
    background: bisque;
}

.flexitem{
    background:brown;
    color:white;
}

阅读更多

CSS 媒体查询和响应式断点

· 大约 500 个字 · 预计 3 分钟 读完
Web前端 · CSS
Web前端 · CSS

CSS媒体查询

在 CSS 中可以区分屏幕和打印机做不同的样式处理：

1
2

<link rel="stylesheet" media="screen" href="screen.css">
<link rel="stylesheet" media="print" href="print.css">

上面代码表示 screen.css 只会在设备屏幕中起作用，而 print.css 样式表只会在打印机中起作用。

在 CSS3 中除了能区分屏幕和打印机外，还可以根据屏幕的尺寸等特征来区分。

媒体类型：

值描述
all用于所有设备
aural已废弃。用于语音和声音合成器
braille已废弃。 应用于盲文触摸式反馈设备
embossed已废弃。 用于打印的盲人印刷设备
handheld已废弃。 用于掌上设备或更小的装置，如PDA和小型电话
print用于打印机和打印预览
projection已废弃。 用于投影设备
screen用于电脑屏幕，平板电脑，智能手机等。
speech应用于屏幕阅读器等发声设备
tty已废弃。 用于固定的字符网格，如电报、终端设备和对字符有限制的便携设备
tv已废弃。 用于电视和网络电视

阅读更多

CSS3中的动画属性窥探

· 大约 1000 个字 · 预计 5 分钟 读完
Web前端 · CSS
Web前端 · CSS · CSS3

@keyframes 规则动画

box 从红色过度到黄色，间隔 5 秒。

1
2
3

<body>
    <div class="box"></div>
</body>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

.box{
    width:100px;
    height:100px;
    animation: myfirst 5s;
}
@keyframes myfirst {
    from {
        background: red;
    }

    to {
        background: yellow;
    }
}

阅读更多

CSS 框架 Bulma 中文文档「译」

· 大约 1200 个字 · 预计 6 分钟 读完
Web前端 · 框架
CSS · 框架 · Bulma · scss · 网格布局 · 响应式

前言

网页样式需要大量时间开发，最省事的方法就是使用 CSS 框架。Bootstrap 是最著名的 CSS 框架，但是今天我想推荐另一个更轻量化、更易用的框架Bulma。有了它，即使完全不懂 CSS，也可以轻而易举做出美观的网页。

Get Start

我们可以使用多种方式来引入并使用bulma:

1

npm install bulma

OR

使用CDN的方式：https://cdnjs.com/libraries/bulma

OR

下载css样式并引入，下载地址：https://github.com/jgthms/bulma/tree/master/css

如果你要使用图标请记得引入fontawesome

1

<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>

引入后还需要一些HTML格式上的要求：

  1. 使用HTML5 Doctype
1

<!DOCTYPE html>
  1. 设置viewport Meta标签
1

<meta name="viewport" content="width=device-width, initial-scale=1">

阅读更多

Web前端基础（5）JavaScript基础

· 大约 300 个字 · 预计 2 分钟 读完
Web前端 · 基础
Web · HTML · CSS · JavaScript

字符串

字符串可以是插入到引号中的任何字符。你可以使用单引号或双引号

1
2

var text1 = "www.dp2px.com";
var text2 = 'www.dp2px.com';

字符串长度

可以使用内置属性 length 来计算字符串的长度

1
2

var text1 = "www.dp2px.com";
var sln = text1.length;

转义字符

代码输出
\’单引号
\”双引号
\\反斜杠
\n换行
\r回车
\ttab(制表符)
\b退格符
\f换页符

在 JavaScript 中，字符串写在单引号或双引号中,如果要在字符串中表示双引号和单引号就需要用到上面的转义字符。

1

var text = "my website is \"www.dp2px.com\""

阅读更多

Web前端基础（4）JavaScript基础

· 大约 500 个字 · 预计 2 分钟 读完
Web前端 · 基础
Web · HTML · CSS · JavaScript · 函数

JavaScript基础

JavaScrip对于网页的作用有提供网页特效、用户交互、表单验证、控制结构和样式。

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

JavaScript是一种脚本语言, 主要目的是动态的控制web标准中的结构和样式（结构、样式、行为）

1

document.getElementById("demo").style.width = "200px";

JavaScript用法

HTML 中的脚本必须位于 <scrip>与 </script> 标签之间。 脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。 通常的做法是把函数放入部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

<head> 中的 JavaScript 函数 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<!DOCTYPE html>
<html>
    <head>
        <script>
            alert("我的第一个 JavaScript");
        </script>
    </head>
    <body>
        <h1>我的 Web 页面</h1>
    </body>
</html>

<body> 中的 JavaScript 

1
2
3
4
5
6
7
8
9

<!DOCTYPE html>
<html>
    <body>
        <h1>我的 Web 页面</h1>
        <script>
            alert("我的第一个 JavaScript");
        </script>
    </body>
</html>

外部的 JavaScript 

1
2
3
4
5
6

<!DOCTYPE html>
<html>
    <body>
        <script src="myScript.js"></script>
    </body>
</html>

阅读更多

Web前端基础（3）CSS基础知识

· 大约 700 个字 · 预计 4 分钟 读完
Web前端 · 基础
Web · HTML · CSS · JavaScript

浏览器兼容问题

第一，IE6，不支持小于 12px 的盒子，任何小于 12px 的盒子，在 IE6 中看都大

解决办法很简单，就是将盒子的字号，设置小（小于盒子的高），比如 0px。

1
2

 _height: 4px;
 _font-size: 0px

IE6 留了一个后门，就是只要给 css 属性之前，加上下划线，这个属性就是 IE6 认识的专有属性。

第二，IE6 不支持用 overflow : hidden; 来清除浮动的

解决办法，以毒攻毒。追加一条 zoom : 1;

1
2

overflow: hidden;
_zoom:1;

阅读更多

Web前端基础（2）CSS 基础知识

· 大约 900 个字 · 预计 4 分钟 读完
Web前端 · 基础
Web · HTML · CSS · JavaScript

CSS 基础知识

一个 HTML 文档可以显示不同的样式, CSS 指层叠样式表 (Cascading Style Sheets)

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

css样式语法结构 css样式语法结构

CSS声明总是以分号 ; 结束，声明组以大括号 {} 括起来。

样式分类

插入样式表的方法有三种:

  • 外部样式表 (External style sheet)
1
2
3

<head>
	<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

浏览器会从文件 mystyle.css 中读到样式声明

  • 内部样式表 (Internal style sheet)

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 style 标签在文档头部定义内部样式表

1
2
3
4
5
6
7

<head>
    <style>
        hr { color : sienna; }
        p { margin-left : 20px; }
        body { background-image : url("images/back40.gif"); }
    </style>
</head>
  • 内联样式 (Inline style)

内联样式不建议使用

1

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

阅读更多