CSS学习22-学成在线案例
学成在线案例
1. 确定版心
这个页面的版心是1200像素，每个版心都要水平居中对齐，可以定义版心为公共类：
.w {
width: 1200px;
margin: 0 auto;
}
2. 头部制作
1号是版心盒子header 1200 * 42 的盒子水平居中对齐，上下给一个margin值就可以
版心盒子里面包含2号盒子 logo
版心盒子里面包含3号盒子 nav 导航 ...
CSS学习笔记
CSS学习笔记
1、导入方式
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--内部样式-->
<style>
h1{
color: red;
}
</style>
<!-- 外部样式-->
<link rel="stylesheet" href="css/style.ss">
</head>
<body>
<!--优先级:就近原则-->
<!--行内样式：在标签元 ...
CSS学习17-浮动
浮动
1. 传统网页布局的三种方式
网页布局的本质——用CSS来摆放盒子。把盒子摆到相应位置.
CSS提供了三种传统布局方式(简单说，就是盒子如何进行排列顺序)：
普通留 ( 标准流 )
浮动
定位
这三种布局方式都是用来摆放盒子的，盒子摆到合适位置，布局自然就完成了。
注意：实际开发中，一个页面基本都包含了这三种布局 ...
我的css学习博客（四）
浮动
1. 传统网页布局的三种方式
网页布局的本质——用css来摆放盒子。把盒子摆放到相应位置。
css提供了三种传统布局方式：
普通流（标准流）
浮动
定位
实际开发中，一个页面基本都包含了这三种布局方式（后面移动端学习新的布局方式）。
2. 标准流（普通流/文档流）
标签按照规定好默认方式排序即为标准流
1 ...
CSS学习之路
CSS的学习
如何学习CSS
CSS是什么
CSS怎么用（快速入门）
CSS选择器（重点+难点）
美化网页（文字，阴影，超链接，列表，渐变……）
盒子模型
浮动
定位
网页动画
CSS是什么
什么是CSS
Cascading Style Sheet 层叠样式表
CSS：表现（美化网页）
字体，颜色，边距，宽度，高度，背景图片，网页定位，网页浮动……
发展史
...
CSS学习11-盒子模型
盒子模型
页面布局要学习三大核心，盒子模型，浮动和定位。学习好盒子模型能非常好的帮助我们布局页面。
1. 看透网页布局的本质
网页布局的过程：
先准备好相关的网页元素，网页元素基本都是盒子Box
利用CSS设置好盒子样式，然后摆放到相应的位置。
往盒子里面装内容。
网页布局的核心本质：就是利用CSS摆盒子。
2. 盒 ...
我的css学习博客（二）
起因
在学习html，css与SQL的时候，我经常性会忘记具体的语法语句，几乎每次写代码时都需要重新查阅资料来复习语法，因此我决定从0开始复习css，并将我的学习过程记录下来。
我的css学习博客应该会分为7~10节，本博客为第2节。
Emmet语法
Emmet语法用缩写来提高html/css的编写速度。
1. ...
我的css学习博客（一）
起因
在学习html，css与SQL的时候，我经常性会忘记具体的语法语句，几乎每次写代码时都需要重新查阅资料来复习语法，因此我决定从0开始复习css，并将我的学习过程记录下来。
我的css学习博客应该会分为7~10节，本博客为第1节。
css的代码规范
<style>
h1 { //选择器与{中间留有一个空格
// ...
css学习
1. webstorm的安装
https://www.jetbrains.com/webstorm
2. 编写网页的神器(emmnet表达式)
+: 同级
>:下一级
3. css
css: 层叠样式表,级联样式表
4. CSS的引入方式
4.1 内联方式引入样式
<span style="color:red; font-size: 120px">我是中国人</span>
优点: 使用简单
缺点: 属性要是太多不方便修改,没有做到内容与 ...
CSS的学习
1.CSS
1.1什么是CSS
Cascading Style Sheets—>层叠级联样式表
CSS：表现层~（用于美化网页）
如字体、颜色等
1.2CSS发展史
CSS1.0
CSS2.0：DIV（块）+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO
CSS2.1：浮动，定位
CSS3.0：圆角边框，阴影，动画……，浏览器兼容性~
⬆联系格式
1.3快速入门
style
基本 ...
css学习笔记
css学习笔记
CSS的导入方式
行内样式
内部样式
外部样式
在多个样式同时对一个元素进行样式设置时，遵循“就近原则”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导入方式</title>
<!-- 外部样式,链接式 链接css文件-->
<link rel="stylesheet" href="css/style.css">
<!-- ...
CSS入门学习
转载：https://www.cnblogs.com/yuanchenqi/articles/5977825.html
一.CSS引入的四种方式
1.第一种：直接通过标签属性style写入：
<div style="color:red;background-color:beige">hello yuan</div>说明：css其实就是键值对。第二种：style标签写入head标签中：
<!DOCTYPE html><html lang="en"><head> <meta cha ...
CSS学习笔记
1. CSS
层叠样式表，又称级联样式表，简称样式表
是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CS ...
CSS学习笔记
1、学习路线
CSS是什么
CSS怎么用（快速入门）
CSS 选择器 （重点+难点）
美化网页（文字、阴影、超链接、列表、渐变....）
盒子模型
浮动
定位
网页动画（特效效果）
1.1、什么是CSS
Cacading Style Sheel 层级样式表
CSS ：表现（美化网页）
字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动...
1.2快 ...
css 学习笔记
CSS 入门学习
目录
CSS 简介
CSS 内容
CSS 编写
CSS 应用
CSS 简介
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS ...
CSS 学习笔记
目录什麽是CSS1.1什麽是CSS1.2发展史1.3快速入门1.4CSS的n种导入形式2.选择器2.1 、基本选择器2.1.1 标签选择器：2.2 层次选择器2.3结构伪类选择器2.4 属性选择器3、美化网页元素3.1为什么要美化网页3.2 文本样式，行样式3.4 文本，阴影，超链接伪类3.6 列表3.7、背景3.8、渐变4、盒子模型4.1什么是盒子模型4.2、边框4.3、 ...
CSS学习笔记
CSS学习笔记
CSS属性
以下是开发中经常会用到的前缀。
-webkit：webkit核心浏览器，包括Chrome、Safari等。
-moz：火狐（Firefox）浏览器
-ms：IE浏览器。
-o：Opera浏览器。
背景属性
属性
描述
属性值
background
简化写法，可以在同一个声明中设置全部属性
background-attachment
背景图像是否固定
fixed（ ...
HTML+CSS学习
目录HTML+CSS3学习一、导读1.网页2.常用浏览器3.Web标准3.1.为什么需要Web标准3.2.Web标准的构成二、HTML标签（上）1.HTML语法规范2.HTML基本结构标签3.开发工具4.HTML常用标签4.1.标签语义4.2.标题标签"h1至"h6"（重要）4.3.段落标签和换行标签（重要）4.3.1.段落标签4.3.2.换行标签4.3.案例4.4.文本格式化标签4.5.div标签 ...
CSS-学习笔记
CSS
一、三种CSS导入方式
直接在标签内部写：style="..."（多个样式以 ；间隔）
<h2 style="color: green">我是标题2</h2>
在head区域中写style代码块
<style type="text/css"> h3{ color: pink; }</style>
单独写css文件，在指定的html文件中以l ...
CSS学习
CSS快速入门
导入css的几种方式：
链接式（link标签）
<link rel="stylesheet" href="../css/Style.css">
内部样式（style标签）
<style>
h1{
color:green;
}
</style>
导入式- css2.1的方式（@import）---不推荐使用，了解即可
<style>
@import url("../css/Style.css");
</style>
导入的优 ...
