享受每一天,Just Enjoy !

0%

本文首发公众号: 伊洛的小屋,欢迎关注并查看更多内容!!!

函数

代码块中存储一段用于处理单任务的代码,然后在任何需要的时候用一个简短的命令来调用
JavaScript有许多内置的函数,浏览器函数不是核心JavaScript语言的一部分而是被定义为浏览器API的一部分

方法

函数称为对象方法(method)的一部分,内置浏览器函数并不是函数——它们是方法

自定义函数

自身根据需求来定义的函数

调用函数

后跟圆括号来完成的调用

1
2
3
4
5
function demoFunction() {
alert('hi function!');
}

demoFunction()
匿名函数

没有名字的函数就是匿名函数

1
2
3
function() {
alert('no name');
}

通常将匿名函数与事件处理程序一起使用

函数参数
1
2
var demoText = 'I am a boy';
var newText = demoText.replace('boy', 'girl');

‘boy’, ‘girl’ 就是replace函数的参数

函数返回值

指函数执行完毕后返回的值

1
2
3
var demoText = 'I am a string';
var demoString = myText.replace('string', 'demo');
console.log(demoString);

上面的内容保存了返回值,以作为demoString变量的内容

使用返回值

使用return关键字

1
2
3
function randomNumber(number) {
return Math.floor(Math.random()*number);
}
事件

事件是编程时系统内发生的动作或者发生的事情,系统会在事件出现时产生或触发某种信号,并且会提供一个自动加载某种动作,每个可用的事件都会有一个事件处理器,事件处理器有时候被叫做事件监听器

对象

对象是一个包含相关数据和方法的集合,创建一个对象通常先定义初始化变量

1
var person = {};

丰富一下对象

1
2
3
4
5
6
7
8
9
10
var person = {
name : ['伊洛', 'Yiluo'],
age : 19,
gender : 'male',
interests : ['games', 'shopping'],
contact : '微信搜索:伊洛的小屋',
greeting: function() {
alert('Hi! I\'m ' + this.name[0] + '.');
}
};

然后调用一下

1
2
3
person.name[0]
person.age
person.greeting()

查看调用的结果

1
2
3
4
5
6
7
8
9
10
11
12
person.name[0]
"伊洛"
person.age
19
person.greeting
ƒ () {
alert('Hi! I\'m ' + this.name[0] + '.');
}
person.contact;
"微信搜索:伊洛的小屋"
person.greeting()
undefined
点表示法

在上面的例子中,使用了点表示法(dot notation)来访问对象的属性和方法,对象的名字必须写在第一位,

括号表示法

使用括号表示法(bracket notation),对象做了字符串到值的映射,例如

1
2
person['age']
person['name']['age']
“this”的含义

关键字”this”指向了当前代码运行时的对象。

原型的语言

JavaScript 常被描述为一种基于原型的语言 (prototype-based language),准确地说,这些属性和方法定义在Object的构造器函数(constructor functions)之上的prototype属性上,而非对象实例本身

JSON

Json一种按照JavaScript对象语法的数据格式,JSON可以作为一个对象或者字符串存在,扩展名为 .json

JSON结构
1
2
3
4
5
6
7
8
9
demoObj = {
"name":"伊洛Yiluo",
"zone":"微信搜索:伊洛的小屋",
"sites": {
"site1":"https://yiluotalk.com/",
"site2":"https://yiluotalk.com/",
"site3":"https://yiluotalk.com/"
}
}

关注公众号获取更多内容

本文首发公众号: 伊洛的小屋,欢迎关注并查看更多内容!!!

字符串

声明一个变量,用一个字符串值初始化它,然后返回值

1
2
let string = 'My name is Yiluo.';
string;
单引号和双引号

择单引号或双引号来包裹字符串都OK

转义字符串中的字符

同Python一样使用\

连接字符串

在JavaScript中连接字符串使用加号+操作符

获得字符串的长度

使用length属性

1
2
let myName = 'Yiluo';
myName.length;
转换大小写

通过toLowerCase(); radData.toUpperCase();两个属性

数组

数组通常被描述为“像列表一样的对象

1
2
let city = ['beijing', 'shanghai', 'guangzhou', 'shenzhen', 'nanjin'];
city;
添加和删除数组项

通过push和pop

if … else 语句

关键字 if,并且后面跟随括号
要测试的条件,放到括号里
关键字else
如果if条件condition返回true,运行代码A,否则else运行代码B

1
2
3
4
5
6
7
8
# 微信搜:伊洛的小屋
var playGames = false;

if (playGames === true) {
var gameName = '荒野大镖客';
} else {
var gameName = '洗洗睡吧';
}
else if

两个及以上选择结果

1
2
3
4
5
6
7
8
if (条件) {
干点啥;
} else if (条件) {
干点啥;
} else {
干啥;
}
}
逻辑运算符:&& , || 和 !

&& — 逻辑与
|| — 逻辑或
! — 逻辑非

switch语句

关键字 switch, 后跟一组括号
括号内的表达式或值
关键字 case, 后跟一个选项的表达式/值,后面跟一个冒号
如果选择与表达式匹配,则运行一些代码
一个 break 语句, 分号结尾. 如果先前的选择与表达式/值匹配,则浏览器在此停止执行代码块,并执行switch语句之后的代码

1
2
3
4
5
6
7
8
9
10
11
12
switch (选择) {
case '1':
xxx;
break;
case '2':
xxx;
break;
case '3':
xxxxx;
default:
xxx;
}

default 之后不需要再有选项, 并且不需要 break 语句

关注公众号获取更多内容

本文首发公众号: 伊洛的小屋,欢迎关注并查看更多内容!!!

错误类型

错误分为:语法错误,逻辑错误

变量

用于存放数值的容器,不只是字符串和数字。变量可以存储更复杂的数据,甚至是函数

声明变量

varlet 关键字之后加上这个变量的名字,在JavaScript中,所有代码指令都会以分号结尾 ; `— ``如果忘记加分号,你的单行代码可能执行正常,但是在多行代码在一起的时候就可能出错

变量命名的规则

使用拉丁字符(0-9,a-z,A-Z)和下划线字符
变量名不要以下划线开头
变量名不要以数字开头
小写整个命名的第一个字母然后大写剩下单词的首字符
让变量名直观,它们描述了所包含的数据
变量名大小写敏感
避免使用JavaScript的保留字给变量命名

变量类型

Number
在变量中存储数字
String
字符串是文本的一部分

1
let myName = '伊洛Yiluo'

Boolean
2种:true或false
Array
数组是一个单个对象,其中包含很多值,方括号括起来,并用逗号分隔

1
let myNameArray = ['伊洛Yiluo', 'Tom', 'Jim'];

同Python一样可以通过索引取值myNameArray[0];
Object
创建一个学生群体的对象,然后实例化一下

1
2
3
4
5
6
# 公号:伊洛的小屋
let student = { name : '伊洛Yiluo', score : 99 };
student.name;
"伊洛Yiluo"
student.score;
99
动态类型

JavaScript是一种“动态类型语言”,如果你声明一个变量并给它一个带引号的值,浏览器就会知道它是一个字符串

数字类型

整数 就是整数
浮点数 (浮点) 有小数点或小数位
双精度双精度是一种特定类型的浮点数,它们具有比标准浮点数更高的精度(这意味着它们精确到更大的小数位数)
二进制 — 计算机的最基础语言
八进制 — 基数8,每列使用0-7
十六进制 — 基数16,每列使用0-9,然后使用a-f

1
2
3
let myInt = 66;
typeof myInt;
"number"
算术运算符

通常熟知的加、减、乘、除、求余、密

自增和自减运算符

使用增量++和递减--运算符来完成

1
demoCount++;
赋值运算符

使用 =

比较运算符

=== 严格等于
!== 严格不等于
< 小于 测试左值是否小于右值
> 大于 测试左值是否大于右值
<= 小于或等于 测试左值是否小于或等于右值
>= 大于或等于

关注公众号获取更多内容

本文首发公众号: 伊洛的小屋,欢迎关注并查看更多内容!!!

JavaScript

JavaScript 是一种脚本,一门编程语言,它可以在网页上实现复杂的功能,网页展现给你的不再是简单的静态信息,而是实时的内容更新,交互式的地图,2D/3D 动画,滚动播放的视频等等

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>微信搜索:伊洛的小屋</title>
<link href="index.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>Name:伊洛Yiluo</p>
<script>
const para = document.querySelector('p');
para.addEventListener('click', updateName);
function updateName() {
const name = prompt('输入公众号名字:');
para.textContent = '公众号:' + name;
}
</script>
</body>
</html>

运行

JavaScript 运行次序

从上往下的顺序执行代码

添加 JavaScript

通过<Script>标签

1
2
3
4
5
<script>

// JavaScript 代码

</script>
外部 JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>微信搜索:伊洛的小屋</title>
<link href="index.css" rel="stylesheet" type="text/css">
<script src="demo.js" async></script>
</head>
<body>
<button>CLICK ME</button>
</body>
</html>

注释
1
// 我是一条注释
1
2
3
4
/*
我也是
一条注释
*/
变量
1
2
3
4
5
6
7
8
9
10
11
let randomNumber = Math.floor(Math.random() * 100) + 1;

const guesses = document.querySelector('.guesses');
const lastResult = document.querySelector('.lastResult');
const lowOrHi = document.querySelector('.lowOrHi');

const guessSubmit = document.querySelector('.guessSubmit');
const guessField = document.querySelector('.guessField');

let guessCount = 1;
let resetButton;

使用关键字 let创建变量,常量用于存储不希望更改的数据,用关键字 const 创建,使用等号=和一个值来为变量赋值,

函数
1
2
3
function checkGuess() {
alert('我是一个占位符');
}

函数是可复用的代码块,可以一次编写,反复运行,从而节省了大量的重复代码,关键字 function 、一个函数名、一对小括号定义了一个函数。 随后是一对花括号{}。花括号内部是调用函数时要运行的所有代码
运行一个函数代码时,可以输入函数名加一对小括号

1
checkGuess();
运算符

做数学运算,连接字符串,以及其他类似的事情

条件语句(Conditional)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function checkGuess() {
let userGuess = Number(guessField.value);
if (guessCount === 1) {
guesses.textContent = '上次猜的数:';
}
guesses.textContent += userGuess + ' ';

if (userGuess === randomNumber) {
lastResult.textContent = '恭喜你!猜对了';
lastResult.style.backgroundColor = 'green';
lowOrHi.textContent = '';
setGameOver();
} else if (guessCount === 10) {
lastResult.textContent = '!!!GAME OVER!!!';
setGameOver();
} else {
lastResult.textContent = '你猜错了!';
lastResult.style.backgroundColor = 'red';
if(userGuess < randomNumber) {
lowOrHi.textContent = '你猜低了!';
} else if(userGuess > randomNumber) {
lowOrHi.textContent = '你猜高了';
}
}

guessCount++;
guessField.value = '';
guessField.focus();
}
循环

1.起始值
2.退出条件
3.增加器

结合HTML页面简单的猜数游戏
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<title>游戏时间</title>
<link rel="stylesheet" href="index.css">
<script async src="demo.js"></script>

</head>

<body>
<h1>猜猜数字吧</h1>

<p>随机选定100以内的自然数,要求10 次以内猜中</p>

<div class="form">
<label for="guessField">请猜数: </label>
<input type="text" id="guessField" class="guessField">
<input type="submit" value="确定" class="guessSubmit">
</div>

<div class="resultParas">
<p class="guesses"></p>
<p class="lastResult"></p>
<p class="lowOrHi"></p>
</div>

</body>
</html>

关注公众号获取更多内容

本文首发公众号: 伊洛的小屋,欢迎关注并查看更多内容!!!

背景样式

background-color属性定义了CSS中任何元素的背景颜色,属性接受任何效果的color值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>微信搜索:伊洛的小屋</title>
<link href="index.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="box">
<h2>背景颜色</h2>
<p>变化背景的颜色 <span>颜色</span>。</p>
</div>
</body>
</html>

编辑CSS

1
2
3
4
5
6
7
8
9
10
11
.box {
background-color: cornflowerblue;
}

h2 {
background-color: darkviolet;
color: white;
}
span {
background-color: rgba(255,255,255,.5);
}

打开浏览器

背景图片

background-image 在元素的背景中显示图像

  • no-repeat — 不重复
  • repeat-x —水平重复
  • repeat-y —垂直重复
  • repeat — 在两个方向重复
    调整背景图像大小
    background-size设置长度或百分比值来调整图片的大小
    cover 浏览器将使图像足够大,使它完全覆盖了盒子区,同时仍然保持其高宽比
    contain 浏览器将使图像的大小适合盒子内
    背景附加
    background-attachment: 内容滚动
  • scroll: 使元素的背景在页面滚动时滚动。
  • fixed: 使元素的背景固定在视图端口上,这样当页面或元素内容滚动时,它就不会滚动。
  • local: 局部值将背景固定在设置的元素上,因此当您滚动元素时,背景也随之滚动。
    书写模式
    指的是文本的排列方向是横向还是纵向的,需要使用writing-mode属性
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>微信搜索:伊洛的小屋</title>
    <link href="index.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <h1>微信搜索 伊洛的小屋</h1>
    </body>
    </html>
    编写CSS样式
    1
    2
    3
    h1 {
    writing-mode: vertical-rl;
    }
    horizontal-tb: 块流向从上至下。对应的文本方向是横向的
    vertical-rl: 块流向从右向左。对应的文本方向是纵向的
    vertical-lr: 块流向从左向右。对应的文本方向是纵向的
    溢出
    溢出是在你往盒子里面塞太多东西的时候发生的
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>微信搜索:伊洛的小屋</title>
    <link href="index.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <div class="word">微信搜索:伊洛的小屋 </div>
    </body>
    </html>
    CSS
    1
    2
    3
    4
    5
    .word {
    border: 1px solid #333333;
    width: 10px;
    font-size: 250%;
    }
    CSS就不会隐藏的内容,隐藏引起的数据损失通常会造成困扰
    控制溢出
    需要使用overflow属性,overflow: hidden意思就是可以隐藏掉溢出
    CSS的值
    长度
    cm 厘米
    mm 毫米
    Q 四分之一毫米
    in 英寸
    pc 十二点活字
    pt 点
    px 像素
    相对长度单位
    em font-size 中使用是相对于父元素的字体大小,在其他属性中使用是相对于自身的字体大小,如 width
    ex 字符“x”的高度
    ch 数字“0”的宽度
    rem 根元素的字体大小
    lh 元素的line-height
    vw 视窗宽度的1%
    vh 视窗高度的1%
    vmin 视窗较小尺寸的1%
    vmax 视图大尺寸的1%

关注公众号获取更多内容

本文首发公众号: 伊洛的小屋,欢迎关注并查看更多内容!!!

选择器

选择器用来指定网页上我们想要样式化的HTML元素,比如H1元素和类元素.special

选择器列表

分开规则

1
2
3
4
5
6
7
h1 { 
color: red;
}

.special {
color: blue;
}

组合规则

1
2
3
h1, .special { 
color: red;
}

任何一个选择器无效,整条规则就会被忽略

选择器的种类

类型、类和ID选择器:标签名选择器”或者是”元素选择器“,选择了一个HTML标签/元素
ID选择器:ID选择器开头为#而非句点
全局选择器:是由一个星号*代指的

1
2
3
* {
margin: 0;
}

类选择器:类选择器以一个句点.开头

盒子模型

所有的元素都被一个个的“盒子(box)”包围着

块级盒子

盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间,在绝大数情况下意味着盒子会和父容器一样宽
每个盒子都会换行
width和height属性可以发挥作用
内边距(padding), 外边距(margin) 和 边框(border) 会将其他元素从当前盒子周围“推开”
除非特殊指定,诸如标题<h1>和段落<p>默认情况下都是块级的盒子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>微信搜索:伊洛的小屋</title>
<link href="index.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>这是一段优美的文字</p>
<ul>
<li>文字1</li>
<li>文字2</li>
<li>文字3</li>
</ul>
<p>这是另外的一段 <span class="block">非常</span> 优美的 <span>文字</span>啊</p>
</body>
</html>

css渲染

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
p,
ul {
border: 2px solid rebeccapurple;
padding: .5em;
}

.block,
li {
border: 2px solid blue;
padding: .5em;
}

ul {
display: flex;
list-style: none;
}

.block {
display: block;
}

第一个是一个段落,在 CSS 中加了边框。浏览器把它渲染成一个块级盒子,所以段落从新的一行开始,而且宽度占满一行
第二个是一个列表,布局属性是 display: flex。 将在容器中建立一个flex布局

CSS 盒模型

盒子模型结构

  • Content box: 这个区域是用来显示内容
  • Padding box: 包围在内容区域外部的空白区域
  • Border box: 边框盒包裹内容和内边距
  • Margin box: 这是最外面的区域,是盒子和其他元素之间的空白区域

图片来源于百度

外边距

通过margin控制元素的所有边距
margin-top, margin-right, margin-bottom, margin-left

边框

使用border属性可以设置四个边框的宽度,颜色,样式
设置每边的宽度、颜色和样式

  • border-top
  • border-right
  • border-bottom
  • border-left
    设置所有边的颜色、样式或宽度
  • border-width
  • border-style
  • border-color
    设置单边的颜色、样式或宽度
  • border-top-width
  • border-top-style
  • border-top-color
  • border-right-width
  • border-right-style
  • border-right-color
  • border-bottom-width
  • border-bottom-style
  • border-bottom-color
  • border-left-width
  • border-left-style
  • border-left-color
    内边距
    用padding性控制元素所有边,或者每边单独使用等价的普通属性
  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

关注公众号获取更多内容

本文首发公众号: 伊洛的小屋,欢迎关注并查看更多内容!!!

冲突

在默认情况下,一些css属性继承当前元素的父元素上设置的值,有些则不继承。这也可能导致一些和期望不同的结果

层叠

当应用两条同级别的规则到一个元素的时候,写在后面的就是实际使用的规则
简而言之,在最后的效果会生效

优先级

元素选择器不是很具体:优先级低
类选择器稍微具体点: 优先级高

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>微信搜索:伊洛的小屋</title>
<link href="index.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1 class="h-color">猜猜我是什么颜色的</h1>
</body>
</html>

编写下CSS文件

1
2
3
4
5
6
7
.h-color {
color: red;
}

h1 {
color: blue;
}

打开浏览器查看效果

可见效果是红色的

继承

父元素上的css属性是可以被子元素继承

控制继承

inherit: 设置该属性会使子元素属性和父元素相同
initial: 设置属性值和浏览器默认样式相同
unset: 将属性重置为自然值,也就是如果属性是自然继承那么就是inherit,否则就是initial

考虑层叠

三个因素需要考虑
1.重要程度
2.优先级
3.资源顺序

不同类型的选择器有不同的分数值,把这些分数相加就得到特定选择器的权重,然后就可以进行匹配

关注公众号获取更多内容

本文首发公众号: 伊洛的小屋,欢迎关注并查看更多内容!!!

浏览器工作流程

1.浏览器载入HTML文件
2.将HTML文件转化成一个DOM(Document Object Model)
3.拉取该HTML相关资源
4.解析CSS
5.渲染树会依照应该出现的结构进行布局
6.显示在屏幕上

什么是DOM

作用:帮助你设计、调试和维护CSS
应用:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>微信搜索:伊洛的小屋</title>
<link href="index.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>
投资的方式:
<span>买个股</span>
<span>买基金</span>
<span>买期货</span>
</p>
</body>
</html>

浏览器会解析HTML并创造一个DOM,然后解析CSS,打开浏览器查看效果

出错

当你编写错误的代码或者拼写错误的时候浏览器会怎么显示你的内容呢?
答案是:忽略。 没错就是直接被忽略然后去继续解析正确的内容

CSS样式

来做一个假的名片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>微信搜索:伊洛的小屋</title>
<link href="index.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>个人简介: 伊洛Yiluo</h1>
<div class="job-title">职位:游手好闲攻城师</div>
<p>微信搜索:伊洛的小屋</p>

<p>博客园:https://www.cnblogs.com/yiluotalk/</p>

<p>爱好:游戏,投资,敲代码, 读了个书</p>

<h2>我的联系方式</h2>
<ul>
<li>Email: <a href="mailto:yiluo@example.com">Yiluo@example.com(举例-非真实有效邮箱)</a></li>
<li>Web: <a href="https://yiluotalk.com">https://yiluotalk.com</a></li>
<li>Tel: 888 666666(举例-非真实有效电话)</li>
</ul>
</body>
</html>

打开浏览器

简单加点CSS美化一下

回答后台看到一些类似的私信留言

留言大意:
我最近在看你之前Python的内容,但是遇到了一些报错我怎么也解决不了,怎么处理啊 ?


答(个人习惯并非适用所有小伙伴):

1.搜索引擎寻求答案 (某歌,百度)俗称面向某歌编程 0.0~
2.寻个身边的大佬虚心请教 (前提是:自己努力过了,但搜索引擎没有需要的答案)
请教格式通常为:我遇到了一个xxx问题,我搜索引擎看到的x种解决方法和xx种方式都试过了。但还是解决不了,等你有时间的时候可不可以帮我看一下?
3.暂时放弃继续实践学习,待自己能力提升会自然而然的解开

关注公众号获取更多内容

本文首发公众号: 伊洛的小屋,欢迎关注并查看更多内容!!!

应用CSS

CSS编写在扩展名为.css的单独文件中,并利用HTML 的元素引用

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS DEMO</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>微信搜索:伊洛的小屋</h1>
<p>凡是过去,皆为序章</p>
</body>
</html>

标记CSS文件

1
2
3
4
5
6
7
8
9
h1 {
color: blue;
background-color: cornflowerblue;
border: 1px solid black;
}

p {
color: darkviolet;
}

打开浏览器查看效果

元素的href指向css文件的地址
内部样式表
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS DEMO</title>
<style>
h1 {
color: blue;
background-color: cornflowerblue;
border: 1px solid black;
}

p {
color: darkviolet;
}
</style>
</head>
<body>
<h1>微信搜索:伊洛的小屋</h1>
<p>凡是过去,皆为序章</p>
</body>
</html>

不使用外部CSS文件,而是将CSS放在HTML文件放在<style>标签中

内联样式

内联样式表存在于HTML元素的style属性之中

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS DEMO</title>
</head>
<body>
<h1 style="color: blue;background: cornflowerblue; border: 1px solid black">微信搜索:伊洛的小屋</h1>
<p style="color:red;">凡是过去,皆为序章</p>
</body>
</html>
选择器

每个CSS规则都以一个选择器或一组选择器为开始,选择器具有专一性且稍后的样式将覆盖以前的样式

属性和值

CSS由两部分组成:1.属性 2.值
与值配对的属性称为CSS声明,CSS声明放在CSS声明块中,属性和值都是区分大小写的,每对中的属性和值由冒号(:)分隔

规则

@rules

注释

CSS中的注释以/*开头,以*/结尾

1
2
3
4
5
6
7
8
9
10
11
12
/* 公众号:伊洛的小屋
个人主页:https://yiluotalk.com/
博客园:https://www.cnblogs.com/yiluotalk/ */
h1 {
color: blue;
background-color: cornflowerblue;
border: 1px solid black;
}

p {
color: darkviolet;
}

关注公众号获取更多内容

本文首发公众号: 伊洛的小屋,欢迎关注并查看更多内容!!!

CSS 基础

CSS 是Cascading Style Sheet的缩写,翻译为:‘层叠样式表’ 或 ‘级联样式表’。 CSS 定义如何显示HTML的标签样式,用于设计网页的外观效果。通过使用CSS实现页面的内容与表现形式分离,极大的提高了工作的效率

CSS语法

CSS是一门基于规则的语言

1
2
3
4
h1 {
color: yellow;
font-size: 3em;
}

语法由选择器起头,选择HTML元素,这里对h1标题添加央视大括号中定义属性和值,叫做声明。
冒号之前的是属性,后面的是值。一个CSS样式中可以包含多个规则

CSS模块

CSS是很多模块构成的

CSS规范

所有的标准Web技术都被定义在一个巨大的文档中,称作 规范specifications (或者简称为 “specs”),CSS也不例外

简单的应用一下

先来做一个简单的HTML页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS</title>
</head>

<body>

<h1>TITLE DEMO</h1>

<p>基金是小白理财最好的投资方式 <span>基金</span>
伊洛的个人网站 <a href="https://yiluotalk.com/">点击前往</a>.</p>

<p>购买指数基金比购买个股风险会小很多 <em>风险</em> 降低风险</p>

<ul>
<li>个股</li>
<li>基金</li>
<li>宽指 <em>基金</em></li>
</ul>

</body>

</html>

打开网页

现在用CSS美化一下网页

添加CSS

让HTML文档能够遵守我们给它的CSS规则,在文档的开头链接CSS,在head里面添加链接到CSS文件
在CSS文件中编写内容,让上面的标题显示紫色

1
2
3
h1 {
color: purple;
}

打开浏览器查看效果

样式化 HTML 元素

样式化一个文档中所有的段落,使用选择器p,用逗号可以将不同选择器隔开

1
2
3
4
5
6
7
h1 {
color: purple;
}

p, li {
color: cornflowerblue;
}

打开浏览器

改变元素的默认行为

忽略浏览器默认的样式

1
2
3
4
5
6
7
8
9
10
11
h1 {
color: purple;
}

p, li{
color: cornflowerblue;
}

li{
list-style-type: none;
}

打开浏览器

可见列表前面的默认样式已经没有了

使用类名

加入类名的特性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
公号:伊洛的小屋
个人主页:https://yiluotalk.com/
博客园:https://www.cnblogs.com/yiluotalk/
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="index.css">
<title>CSS</title>
</head>

<body>

<h1>TITLE DEMO</h1>

<p>基金是小白理财最好的投资方式 <span>基金</span>
伊洛的个人网站 <a href="https://yiluotalk.com/">点击前往</a>.</p>

<p>购买指数基金比购买个股风险会小很多 <em>风险</em> 降低风险</p>

<ul>
<li>个股</li>
<li class="special">基金</li>
<li>宽指 <em>基金</em></li>
</ul>

</body>

</html>

打开浏览器

基金的颜色单独发生了变化

根据状态确定样式

取决于是否是未访问的、访问过的、被鼠标悬停的、被键盘定位的
没有被访问的链接颜色变为粉色、访问过的链接变为绿色及鼠标悬停的时候的样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
h1 {
color: purple;
}

p, li{
color: cornflowerblue;
}

li.special {
color: orange;
font-weight: bold;
}

a:link {
color: pink;
}

a:visited {
color: green;
}

a:hover {
text-decoration: none;
}

关注公众号获取更多内容