学习笔记——HTML5&&CSS
一、学习重点
二、笔记内容
什么是HTML
HTML是用来描述网页的一种语言。
HTML叫做超文本标记语言(Hyper Text MarkerUp Language)
HTML不是编程语言,而是一种标记语言
标记语言就是一套标记标签
HTML使用标记标签来描述网页
网页由浏览器解析
IE
firefox火狐 flash中文
safari webkit 苹果
chrome ...
CSS学习
什么是CSS
如何学习
css是什么
css怎么用
css选择器(重点)
美化网页(文字美化,阴影,超链接,列表,渐变)
盒子模型
浮动
定位
网页动画(特效)w3c,菜鸟教程
仿网站
1.1什么是CSS
Cascading Style Sheet 层叠级联样式表
CSS:表现(美化网页)
字体,颜色,边距,高宽....
1.2发展史
CSS1.0
CSS2 ...
CSS学习笔记
目录1、CSS的四种导入方式2、选择器2.1 基本选择器id名{}2.2 层次选择器2.3 结构伪类选择器2.4 属性选择器3、美化网页3.1 字体样式3.2 文本样式3.3 文本阴影和超链接伪类3.4 列表样式3.5 背景图像应用及渐变3.6 盒子模型3.7 圆角边框3.8 阴影3.9 浮动3.9.1 标准文档流3.9.2 display3.9.3 float3.9.4 display 和 float 对比3 ...
css学习
CSS学习
网上找到的尚硅谷的对应课程的资料笔记,百度云地址,要是早找到能省我好多事情。
目录1.CSS简介2.CSS的编写位置2.1内联样式2.2内部样式表2.3外部样式3.CSS语法3.1注释3.2选择器3.2.1元素选择器3.2.2id选择器3.2.3class选择器3.2.4通配选择器3.2.5复合选择器3.2.5.1交集选择器3.2.5.2并集选择器3.2.6关系选择器3.6. ...
HTML & CSS 学习笔记
part 1:HTML
html本身是一个很简单的语言,学习完众多标签以后,就可以开始简单的网页编写了,配合dreamweaver软件,使用起来更是事半功倍。这众多的标签大体上可分为三种:块状元素、内联元素和内联块状元素。这三种元素有其各自的特性,针对这些特性他们的应用场合也不同,如何熟练的使用这些元素是我们需要在今后的学习 ...
HTML&CSS学习总结
目录一、 HTML学习总结1.HTML是什么2.HTML结构1. 创建一个HTML实例2. HTML结构解析3. HTML标题4. HTML段落5. HTML链接6. HTML图像二、CSS学习总结1.CSS是什么2.CSS基础语法3.CSS生效方法4.CSS颜色、尺寸、对齐5.CSS盒子模型6.CSS选择器
一、 HTML学习总结
1.HTML是什么
HTML(HyperText Markup Language)是一种用来告知 ...
css学习笔记
什么是CSS
如何学习(https://www.runoob.com/)
CSS是什么
CSS 怎么用
CSS选择器(重点+难点)
美化网页
盒子模型
浮动
定位
网页动画(特效效果)
1.1 什么是CSS
Cascading Style Sheet 层叠级联样式表
css: 表现(美化网页)
字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动
1.2、发展史 ...
CSS - 学习笔记
CSS - 学习笔记
一、什么是CSS
Cascading Style Sheet 层叠级联样式表
CSS : 表现(美化网页)
字体,颜色,边距,高度,宽度,背景图片……
二、CSS 基本语法
<!-- 规范 style type="text/css" 可以编写css的代码
每一个声明使用分号结尾
语法:
选择器 {
声明1;
}
-->
<style type="text/css">
h1{
...
36个有趣的 CSS 学习网站,你值得拥有
一、CSS学习网站
Flex Box 冒险游戏
网址:Flex Box 冒险游戏[1]
简介:这是一个通过使用 flex box 相关知识来完成闯关的冒险游戏,一共24个关卡,更生动地带你体验 Flex 的真实应用场景
Flex Box 冒险游戏
2. Flexbox 格子骑士
网址:Flexbox 格子骑士[2]
简介:这个游戏能帮助你学习不同层面的Flex Box规范,一共有18个 ...
CSS学习手册
学习别人的CSS,这是一个传送门
布局
实现水平垂直居中
在flex 格式化上下文中,设置了margin: auto的元素,在通过justify-content和align-self进行对齐之前,任何正处于空闲的空间都会分配到该方向的自动 margin 中去。
<div class="box">
<div class="content"></div>
</div>
<style>
*{
margin: 0;
...
CSS 学习笔记
1 CSS 简介
1.1 什么是 CSS
全称为 Cascading Style Sheet ,即层叠级联样式表,本质上用来美化网页
1.2 CSS 优势
内容和表现分离
网页结构表现统一,可以实现复用
样式十分丰富
建议使用独立的 html 和 css 文件
利用 SEO ,容易被搜索引擎收录
1.3 CSS 导入方式
1 行内样式
<h2 color: yellow>标题</h2>
2 ...
CSS样式学习
CSS学习
1.三种样式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title><!--内部样式style 写到head头标签的里面,css内部样式,注释不能写到style内部--> <style>h1{ color: wheat;} </style> ...
CSS 学习三
CSS 学习三
继续
CSS Fonts
font-family:指定字体
font-size:字体大小
font-style:字体样式
normal:默认值
italic:斜体
oblique:斜体
inherit:继承父元素
font-variant:将小写字母转为大写,但是字体尺寸更小
normal:默认值,不做任何样式调整
small-caps:小型大写字母的字体
inherit:继承父元素
...
CSS学习
CSS学习
1、我的第一个CSS程序
style.css:
h1{
color: red;}index.html:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!--规范,<style>可以编写css的代码,每一个声明最好使用分;结尾! 语法: 选择器{ 声明1; 声明2; 声 ...
css学习二
CSS 学习二
继续
CSS 单位
相对长度
em:当前元素的字体尺寸
ex:英文字母小x的高度
ch:数字0的高度
vw:视窗宽度,1vm=视窗宽度的1%
vh:视窗高度,1vm=视窗高度的1%
vmin:vm和vh中较小的那个
vmax:vm和vh中较大的那个
%:😁😁😁
绝对长度
cm:厘米
mm:毫米
in:英寸
px:像素
pt:1pt = 1/72in
pc:1pc = 12 pt
C ...
css学习一
CSS 学习一
从涉及前端开发到现在,差不多有四年了,框架有Vue、Angular,组件库用了ElementUI、NG-Zorro、Ant-Design。
而对于CSS,可谓东一榔头,西一棒子,用时查找,不用忘掉。这次决定花点时间,系统的学习一下CSS,毕竟上一次学,还是大二的时候。(我逝去的青春啊!!😭😭)
定义
层叠样式表,用于设计HTML的风格和 ...
Div+css的学习
Div+css的学习,通过老师的教导,以及自己的学习,完成了实验1,主要就是html和css的知识,
源代码如下:
<style type="text/css"> *{ margin: 0; padding: 0; } #div1{ background-color: yellow; margin-top:5px; width:100%; height:30px; } #table1{ width:100%; text-align: center; } img{ width:20px; hei ...
CSS学习Day01
1、什么是CSS
如何学习
CSS是什么
CSS怎么用
CSS选择器(重点+难点)
美化网页(文字、阴影、超链接、列表、渐变)
盒子模型
浮动
定位
网页动画(特效效果)
1.1什么是CSS
Cascading Style Sheet 层叠级联样式表
CSS:表现(美化界面)
字体、颜色、边距、高度、宽度、背景图片、网页定位、网页 ...
CSS入门学习
前端三剑客
html:html为前端页面的主体。可以理解为一间什么东西都没有的房间
css:css为前端页面的样式。可以理解成房间里的地砖,灯,床
javascript:js为前端页面的脚本。可以理解成房间开灯,关门。
学习内容
CSS是什么
CSS怎么用(快速入门)
CSS选择器(重点+难点)
美化页面(文字,阴影,超链接,列表 ...
CSS学习——框模型
学习内容来源:CSS 框模型
CSS 框模型
所有 HTML 元素都可以视为方框。在 CSS 中,在谈论设计和布局时,会使用术语“盒模型”或“框模型”。
CSS 框模型实质上是一个包围每个 HTML 元素的框。它包括:外边距、边框、内边距以及实际的内容。
如图所示:
内容 - 框的内容,其中显示文本和图像。
内边距 - 清除内容周围的 ...