![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS初学
b站网课笔记,黑马程序员pink
皮匠大大
这个作者很懒,什么都没留下…
展开
-
b站pink老师前端课程、品优购项目(跟着练的笔记+代码)
02、网站制作流程1、03、品优购项目规划04、项目搭建05、样式的模块化开发06、favicon图标制作favicon.ico一般用于作为略缩图的网站标志,它显示在浏览器的地址栏或者标签上。1、制作png图片2、转换为ico图标(第三方软件eg:bitbug)3、必须!!!放在文件根目录下(常识)4、html页面引入favicon图标:在html的head标签内引入代码<link rel="shortcut icon" href="facvicon.ico">0原创 2020-11-29 21:11:58 · 6317 阅读 · 1 评论 -
第十天(HTML5+CSS3)提高导读
HTML5新增的几个布局和表单标签CSS3的几个新增特性2、HTML5提高-新增语义化标签1、只兼容IE9以上版本浏览器和移动端2、新增的语义化的标签(就是div标签变了个名字,只不过有更好的功能分工,使用方法也和标签没有区别)注意:①这些标签主要针对搜索引擎②在标签页面中可以使用多次③在IE9中,需要把这些元素转换为块级元素④移动端更喜欢这些标签3、4、HTML5新增的多媒体标签1、音频<audio>①支持格式mp3、wav、ogg(尽量使用mp3)②语法:<原创 2020-11-28 16:59:03 · 148 阅读 · 0 评论 -
CSS第九天(12-24课)
12、用户界面-鼠标样式cursor1、所谓界面样式,就是更改一些用户操作样式,以便提高更好的用户体验①鼠标样式②表单轮廓③防止表单域拖拽2、鼠标样式cursor:设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状eg:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="wid原创 2020-11-27 17:23:22 · 217 阅读 · 1 评论 -
CSS高级技巧(精灵图(1-5课)+字体图标(6-9课)+CSS三角(10-11课))
1、CSS高级技巧导读2、为什么需要精灵图为了有效减少服务器接收和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术核心原理:将网页中的一些小背景图像整合到一张大图中,这样服务器只需要一次请求就够了。3、精灵图(sprites)的使用(原理)核心:1、精灵技术主要针对于背景图片的使用,就是把多个小背景图片整合到一张大图片中。2、这个大图片也称为sprites精灵图、或者 雪碧图3、移动背景图片位置,此时可以使用background-position4、移动的距离就是这个目标图片的x原创 2020-11-26 21:56:16 · 327 阅读 · 0 评论 -
CSS定位(01-17课)+按例(淘宝焦点布局18-24课)+元素的显示与隐藏+土豆按例(25-29课)
01、定位导读02、为什么需要定位1、实现使用标准流/浮动也很难实现的场景:某个元素可以自由的在一个盒子内移动位置,并且压住其他盒子、以及无论如何移动滚轮,页面中都有一部分内容会固定显示在屏幕上。2、所以:①浮动可以让多个块级盒子一行没有缝隙排列显示,经常用于横向排列盒子。②定位则是可以让盒子自由的在某个盒子内部移动位置或者固定屏幕中某个位置,并且可以压住其他盒子3、定位组成1、定位:将盒子定在某一位置,所以定位也是在拜访盒子,按照定位的方式移动盒子2、定位=定位模式+边偏移定位模式用于原创 2020-11-26 14:29:39 · 265 阅读 · 0 评论 -
CSS-PS切图+学成在线按例(01-32课)
1、常见的图片格式1、jpg图像格式:jpeg(jpg)对色彩的信息保留较好,高清,颜色较多,我们产品类的图片经常用jpg格式。2、gif格式:gif格式最多只能储存256色,所以通常用来显示简单图形及字体,但是可以保存透明背景和动画效果,实际经常用于一些图片小动画效果3、png格式是一种新兴的网络图形格式,结合了gif和jpeg的优点,具有存储形式丰富的特点,能够保持透明背景,如果想要切成背景透明的图片,要选择png格式。4、psd图像格式psd格式是Photoshop的专用格式,里面可以存放图层原创 2020-11-24 13:32:30 · 250 阅读 · 0 评论 -
CSS浮动(08-27课)
08课、浮动导读1、原创 2020-11-22 21:29:18 · 205 阅读 · 0 评论 -
CSS圆角边框、盒子阴影、文字阴影(01-07课)
01、综合案例-快报模块布局分析1、大盒子div2、分2个小盒子(上盒子为标题h,下盒子为列表(无序列表))02、03、04、综合案例-快报制作1、头部制作2、快报模块列表制作代码:<!DOCTYPE html><html lang="ch"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-原创 2020-11-22 14:22:57 · 208 阅读 · 0 评论 -
CSS盒子模型(08-34课)
08课、盒子模型导读09、看透网页布局本质1、页面布局的三大核心:盒子模型、浮动、定位2、网页布局过程①先准备好相关的网页元素,网页元素基本都是盒子box②利用CSS设置好盒子样式,然后摆到相应位置③往盒子里面装内容3、网页布局的核心本质:就是利用CSS摆盒子10、盒子模型的组成部分(box model)1、所谓盒子模型,就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个承装内容的容器2、CSS盒子模型本质上是一个盒子,封装周围的HTML元素,包括边框(border)、外边原创 2020-11-22 11:25:12 · 353 阅读 · 0 评论 -
CSS三大特性(01-07课)
三大特性:层叠性、继承性、优先级01课、层叠性1、相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式,层叠性主要解决样式冲突的问题。eg: div { color: green; font-size: 12px; } div { color: red; }层叠性原则:就近原则:那个样式离结构近,就采用那个如果样式不冲突,则不重叠(例子中fo原创 2020-11-21 19:12:03 · 104 阅读 · 0 评论 -
CSS背景 (23课-36课)
23课、背景颜色 background-color1、 background-color颜色值2、默认为: background-color: transparent;(透明),也可以手动改写为透明24、背景图片 background-image1、background-image 属性描述了元素的背景图像,实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片,优点是非常便于控制位置(精灵图也是一种运用场景)2、语法格式:background-image :none/url(url)原创 2020-11-21 16:35:43 · 122 阅读 · 0 评论 -
CSS元素显示模式(14-22课)
14课、元素显示模式简介1、什么是元素显示模式①作用:网页标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好地布局我们的网页。②元素显示模式就是元素(标签)以什么方式进行显示,比如div可以自己独占一行,比如一行中可以放多个span标签③HTML元素一般分为块元素、行内元素两种类型15、块元素1、常见的块元素有:h1-h6、p、div、ul、ol、li等,其中div是最典型的块元素2、特点①自己独占一行②高度、宽度、外边框以及内边距可以自己控制③宽度默认是容器(父级宽度)原创 2020-11-17 21:32:23 · 173 阅读 · 0 评论 -
CSS复合选择器(第二天课程05-13课)
05课、复合选择器简介1、简介:在CSS中,可以更据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的。2、特点:①、复合选择器可以更准确、更高效地选择目标元素②、复合选择器是建立在基础选择器之上,由2、多个基本选择器进行组合形成的。③、常用的有:后代选择器,子选择器、并集选择器、伪类选择器06课、后代选择器(空格)1、后代选择器又称为包含选择器,可以选择父元素里面子元素。其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。原创 2020-11-17 15:38:48 · 148 阅读 · 0 评论 -
CSS快捷键专题(第二天02-04课)
02、Emmet语法生成html标签1、简介:Emmet是用来提高html/css的编写速度,CScode内部已经集成了该语法2、快速生成HTML结构语法:①生成标签:直接输入标签名,按tab键即可②如果想要生成多个相同的标签,加上*就可以了,比如div*3可以快速生成3个div标签③如果有父子级关系的标签,可以用>,比如ul >li就可以快速生成 <ul> <li></li> </ul>④如果有兄弟关原创 2020-11-17 14:23:35 · 952 阅读 · 0 评论 -
CSS引入方式(24课-27课)+综合案例(28-31课)+ chrome调试工具使用(32课)
1、按照CSS样式书写的位置(或者引入的方式)不同,CSS样式表可以分为三大类①行内样式表(行内式)②内部样式表(嵌入式)③外部样式表(链接式)24课、内部样式表1、内部样式表(嵌入式样式表)是写到html内部的,将所有CSS代码抽取出来,单独放到<style>标签中的CSS语块(就是前几节课的内容)①**<style>标签理论上可以放在html文档的任何地方,但是一般会放在文档的<head>标签中**②通过此种方式可以很方便的控制整个页面中的元素样式设置原创 2020-11-16 21:56:42 · 111 阅读 · 0 评论 -
CSS文本属性(18-23课)
18课、文本颜色color1、自动选取颜色时,不需要去记(16进制和rgb形式)2、3种表示形式:①预定义的颜色值②十六进制(用得最多)③RGB代码19课、文本对齐text-align1、text-align属性只能用于设置元素内容的水平对齐方式2、eg: body { text-align: center; }①left 左对齐(默认)②right 右对齐③center 居中对齐20、文本装饰text-decoration原创 2020-11-16 20:52:49 · 87 阅读 · 0 评论 -
CSS-12~17课-字体
12、font-family 设置字体系列1、font(字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)2、font-family 属性定义文本的字体系列eg: .my_font { font-family: '微软雅黑',Arial; }其中:'微软雅黑'和'Microsoft Yahei'是一样的,但推荐用英文3、注意:①、一个font-family 中可以设置多个字体,每个字体用逗号隔开②、当有字体名称是由多个单词原创 2020-11-15 16:47:27 · 210 阅读 · 0 评论 -
01-11课——CSS简介+各种选择器
01课、导读02课、CSS简介1、用途:美化网页2、html的局限性:只关注内容的语义,主要任务是布局网页元素(美化的写法可以写,但是非常麻烦)3、CSS(Cascading Style Sheets层叠样式表)或称为CSS样式表,级联样式表。4、也是一种标记语言5、主要用于设置html页面中的文本内容(字体大小、对其方式等)、图片的外形(宽高、边框、边距)以及版面布局和外观显示样式6、CSS最大价值:由html专注于去做结构呈现,样式交给CSS03课、体验CSS语法规范1、主要组成:选择原创 2020-11-15 15:57:36 · 172 阅读 · 0 评论