CSS 初识】的更多相关文章

figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max-width: 100%; vertical-align: middle; } button, input, select, textarea { color: inherit; font: inherit; } input[type="checkbox"], input[type=&quo…
typora-copy-images-to: media 第01阶段.前端基础.CSS初识 CSS层叠样式表 学习目标 理解 css的目的作用 css的三种引入方式 应用 css三种引用方式的书写 通过样式规则给标签添加简单的样式 1.HTML的局限性 说起HTML,这其实是个非常单纯的家伙, 他只关注内容的语义, 比如 表明这是一个大标题,用 表明这是一个段落,用 表明这儿有一个图片, 用表示此处有链接. 很早的时候,世界上的网站虽然很多,但是他们都有一个共同的特点: 丑. 这个是一个外国比较…
# CSS初识-目标: > 1. 学会使用CSS选择器 > 2. 熟记CSS样式和外观属性 > 3. 熟练掌握CSS各种基础选择器 > 4. 熟练掌握CSS各种复合选择器 > 5. 熟练掌握CSS三种显示模式(inline.block.inline-block) > 6. 熟练掌握CSS背景属性 > 7. 熟练掌握CSS三大特性(层级性.继承性.优先性) > 8. 熟练掌握CSS盒子模型(border.padding.margin) > 9. 熟练掌握…
CSS层叠样式表 理解 css的目的作用 css的三种引入方式 1.HTML的局限性 说起HTML,这其实是个非常单纯的家伙, 他只关注内容的语义, 比如`<h1>`表明这是一个大标题,用<p> 表明这是一个段落,用`<img>` 表明这儿有一个图片, 用`<a>` 表示此处有链接. 很早的时候,世界上的网站虽然很多,但是他们都有一个共同的特点: 丑. 这个是一个外国比较早的购物网站 有些人就忍受不了了,你就不能把自己打扮得漂亮一点吗? HTML说,我试试.…
外层div的宽度是100%,就是视口的大小,当视口被拉窄到小于内层div的宽度980px时,比如800px,此时 外层div宽度为800px,内层div宽度依然为980px,而css中只设置了外层div有背景色,所以说只有800px那一部分会显示背景色,而超出视口的部分是属于内层div的,内层没有设置背景色,所以是空白! 标准规范介绍 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&…
一. 用来干嘛的 一个现代的.准备好了支持 HTML5 技术,并且要替代 CSS Reset 处理样式的理念. Normalize.css 使浏览器渲染所有元素更加一致,并且符合现代标准.它只是针对那些需要正常化的样式进行处理. A modern, HTML5-ready alternative to CSS resets Normalize.css makes browsers render all elements more consistently and in line with mod…
前端内容就分三部分html.css.javascript(js),对一个网页来说html相当于是一个裸体的人,css相当于给这个人穿上了衣服,javascript相当于给这个人赋予动作行为,今天我们要接触的就是css,样式层叠表. 一.CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明.声明包括属性和值. h1{ color:red; } 二.css的四种引入方式  1.行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用.(…
一.CSS是什么? CSS是一种样式表语言,用于为HTML文档定义布局.例如,CSS涉及字体.颜色.边距.高度.宽度.背景图像.高级定位等方面. HTML用于结构化内容:CSS用于格式化结构化的内容. 二.CSS的语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. selector { property: value; property: value; ... property: value } 例 h1 {color:red; font-size:14px;} 三.css的四…
1.CSS(层叠样式表) 2.CSS语法 选择器{ 属性名1:属性值1: 属性名2:属性值2: } 3.引用CSS的三种方式 第一种:行内样式 例:<a style="color:red;">内部样式</a> 第二种:内部样式 在head标签中,写入style标签. 例: <head> ....... <style type="text/css"> h1{ ......... } </style> <…
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <style type="text/css"> .box1{ width: 600px; height:250px; border-top:10px dashed blue; border-right: 5px…