一、什么是 CSSCSSCascading Style Sheets中文叫层叠样式表它是一种用于描述 HTML 网页样式和布局的语言。简单来说HTML 负责网页的结构CSS 负责网页的外观。比如一个网页我的博客 ------------------------ 今天学习 HTML 和 CSS ------------------------HTML 决定这里是标题这里是一段文字这里是一张图片CSS 决定标题是什么颜色字体多大图片在哪里页面如何排列背景是什么颜色二、为什么需要 CSS1. 没有 CSS 的网页例如h1我的博客/h1 p 这是我的学习笔记 /p p 今天学习 CSS /p浏览器显示我的博客 这是我的学习笔记 今天学习 CSS虽然有内容但是很普通。2. 使用 CSS 后添加h1 { color: blue; font-size: 40px; } p { color: gray; font-size: 20px; }效果我的博客 蓝色、大字体 这是我的学习笔记 灰色、大字体网页瞬间变得更加美观。三、CSS 的作用CSS 主要负责三个方面1. 美化网页例如改变颜色HTMLp Hello CSS /pCSSp { color:red; }效果Hello CSS文字变成红色。2. 控制网页布局例如让两个盒子左右排列HTMLdiv classbox1 左边 /div div classbox2 右边 /divCSS.box1, .box2 { width:300px; height:200px; } .box1 { float:left; } .box2 { float:right; }效果---------- ---------- | 左边 | | 右边 | ---------- ----------3. 增加网页交互效果例如鼠标经过button:hover { background-color:red; }鼠标放到按钮上按钮颜色改变四、CSS 的基本语法CSS 由三部分组成选择器 { 属性: 属性值; }例如p { color:red; }解释部分含义p选择谁color修改什么red修改成什么例子h1 { color:blue; font-size:50px; }意思找到所有 h1 标签文字颜色变蓝字体大小变成50px五、CSS 如何引入 HTMLCSS 有三种写法。方式一行内样式直接写在标签里面。例如p stylecolor:red; Hello /p效果文字红色。优点简单。缺点代码混乱不方便维护。实际开发很少使用。方式二内部样式表写在style /style里面。例如head style p { color:red; } /style /head适合小案例。方式三外部样式表推荐创建style.css里面p { color:red; }HTMLlink relstylesheet hrefstyle.css结构项目 ├── index.html └── style.css实际项目基本使用这种方式。六、CSS 选择器CSS 要先找到 HTML 元素。这个过程叫选择器1. 标签选择器选择所有同类型标签。HTMLp 文字1 /p p 文字2 /pCSSp { color:red; }所有 p 都变红。2. 类选择器使用.定义。HTMLp classtitle 博客标题 /pCSS.title { color:blue; }3. id 选择器使用#例如HTMLdiv idbox 内容 /divCSS#box { width:300px; }七、CSS 常见属性1. 文字属性颜色color:red;字体大小font-size:20px;字体粗细font-weight:bold;字体font-family:微软雅黑;2. 背景属性背景颜色background-color:black;背景图片background-image:url(image.jpg);3. 盒模型属性CSS 中所有元素都是一个盒子。结构---------------- | margin | | ---------- | | | border | | | | ------ | | | | |内容 | | | | | ------ | | | ---------- | ----------------包含内容(content)内边距(padding)边框(border)外边距(margin)八、CSS 和 HTML 的关系可以这样理解HTML | | 负责结构 | ↓ CSS | | 负责样式 | ↓ 漂亮网页比如HTMLdiv classcard h2C学习/h2 p 学习笔记 /p /divCSS.card { width:300px; border:1px solid black; padding:20px; }最终---------------- | C学习 | | | | 学习笔记 | ----------------九、CSS 的特点1. 层叠性Cascading多个 CSS 规则作用于同一个元素p { color:red; } p { color:blue; }后面的会覆盖前面的结果蓝色2. 继承性父元素的样式可以传给子元素。HTMLdiv p 文字 /p /divCSSdiv { color:red; }p 会继承红色。3. 优先级优先级!important ↓ 行内样式 ↓ id选择器 ↓ class选择器 ↓ 标签选择器十、现代 CSS 常用技术学习 CSS 后会接触1. Flex 弹性布局用于一行排列居中两栏布局例如.container { display:flex; }2. Grid 网格布局用于复杂页面布局。3. 动画例如.box { transition:all 0.3s; }4. 响应式设计让网页适应手机平板电脑十一、HTML CSS 实际开发流程开发网页第一步写 HTMLh1 我的博客 /h1确定结构。第二步写 CSSh1{ color:blue; }美化页面。第三步调整布局display:flex;完成网页。十二、总结技术作用HTML网页结构CSS网页样式JavaScript网页行为记忆HTML 人的骨架 CSS 人的衣服 JavaScript 人的动作学习路线HTML标签 ↓ CSS基础 ↓ 盒模型 ↓ Flex布局 ↓ Grid布局 ↓ 动画 ↓ 响应式网页
一、什么是 CSSCSSCascading Style Sheets中文叫层叠样式表它是一种用于描述 HTML 网页样式和布局的语言。简单来说HTML 负责网页的结构CSS 负责网页的外观。比如一个网页我的博客 ------------------------ 今天学习 HTML 和 CSS ------------------------HTML 决定这里是标题这里是一段文字这里是一张图片CSS 决定标题是什么颜色字体多大图片在哪里页面如何排列背景是什么颜色二、为什么需要 CSS1. 没有 CSS 的网页例如h1我的博客/h1 p 这是我的学习笔记 /p p 今天学习 CSS /p浏览器显示我的博客 这是我的学习笔记 今天学习 CSS虽然有内容但是很普通。2. 使用 CSS 后添加h1 { color: blue; font-size: 40px; } p { color: gray; font-size: 20px; }效果我的博客 蓝色、大字体 这是我的学习笔记 灰色、大字体网页瞬间变得更加美观。三、CSS 的作用CSS 主要负责三个方面1. 美化网页例如改变颜色HTMLp Hello CSS /pCSSp { color:red; }效果Hello CSS文字变成红色。2. 控制网页布局例如让两个盒子左右排列HTMLdiv classbox1 左边 /div div classbox2 右边 /divCSS.box1, .box2 { width:300px; height:200px; } .box1 { float:left; } .box2 { float:right; }效果---------- ---------- | 左边 | | 右边 | ---------- ----------3. 增加网页交互效果例如鼠标经过button:hover { background-color:red; }鼠标放到按钮上按钮颜色改变四、CSS 的基本语法CSS 由三部分组成选择器 { 属性: 属性值; }例如p { color:red; }解释部分含义p选择谁color修改什么red修改成什么例子h1 { color:blue; font-size:50px; }意思找到所有 h1 标签文字颜色变蓝字体大小变成50px五、CSS 如何引入 HTMLCSS 有三种写法。方式一行内样式直接写在标签里面。例如p stylecolor:red; Hello /p效果文字红色。优点简单。缺点代码混乱不方便维护。实际开发很少使用。方式二内部样式表写在style /style里面。例如head style p { color:red; } /style /head适合小案例。方式三外部样式表推荐创建style.css里面p { color:red; }HTMLlink relstylesheet hrefstyle.css结构项目 ├── index.html └── style.css实际项目基本使用这种方式。六、CSS 选择器CSS 要先找到 HTML 元素。这个过程叫选择器1. 标签选择器选择所有同类型标签。HTMLp 文字1 /p p 文字2 /pCSSp { color:red; }所有 p 都变红。2. 类选择器使用.定义。HTMLp classtitle 博客标题 /pCSS.title { color:blue; }3. id 选择器使用#例如HTMLdiv idbox 内容 /divCSS#box { width:300px; }七、CSS 常见属性1. 文字属性颜色color:red;字体大小font-size:20px;字体粗细font-weight:bold;字体font-family:微软雅黑;2. 背景属性背景颜色background-color:black;背景图片background-image:url(image.jpg);3. 盒模型属性CSS 中所有元素都是一个盒子。结构---------------- | margin | | ---------- | | | border | | | | ------ | | | | |内容 | | | | | ------ | | | ---------- | ----------------包含内容(content)内边距(padding)边框(border)外边距(margin)八、CSS 和 HTML 的关系可以这样理解HTML | | 负责结构 | ↓ CSS | | 负责样式 | ↓ 漂亮网页比如HTMLdiv classcard h2C学习/h2 p 学习笔记 /p /divCSS.card { width:300px; border:1px solid black; padding:20px; }最终---------------- | C学习 | | | | 学习笔记 | ----------------九、CSS 的特点1. 层叠性Cascading多个 CSS 规则作用于同一个元素p { color:red; } p { color:blue; }后面的会覆盖前面的结果蓝色2. 继承性父元素的样式可以传给子元素。HTMLdiv p 文字 /p /divCSSdiv { color:red; }p 会继承红色。3. 优先级优先级!important ↓ 行内样式 ↓ id选择器 ↓ class选择器 ↓ 标签选择器十、现代 CSS 常用技术学习 CSS 后会接触1. Flex 弹性布局用于一行排列居中两栏布局例如.container { display:flex; }2. Grid 网格布局用于复杂页面布局。3. 动画例如.box { transition:all 0.3s; }4. 响应式设计让网页适应手机平板电脑十一、HTML CSS 实际开发流程开发网页第一步写 HTMLh1 我的博客 /h1确定结构。第二步写 CSSh1{ color:blue; }美化页面。第三步调整布局display:flex;完成网页。十二、总结技术作用HTML网页结构CSS网页样式JavaScript网页行为记忆HTML 人的骨架 CSS 人的衣服 JavaScript 人的动作学习路线HTML标签 ↓ CSS基础 ↓ 盒模型 ↓ Flex布局 ↓ Grid布局 ↓ 动画 ↓ 响应式网页
