css 笔记
CSS（初级）笔记
本文最后更新于 688 天前，其中的信息可能已经有所发展或是发生改变。涵盖内容1.熟悉css基本语法，以及css工作原理 2.熟练使用css selector 常规选择器class，id,元素，后代，通用，了解选择器的优先级 3.熟悉浮动，定位，盒模型，背景，字体，颜色等常用属性，能运用css进行页面布局和展现效果图css的工作原理 css的出现使得内容和样式分离进而让页面变得更简洁，更容易维
日期 2023-06-12 10:48:40
CSS笔记(3)
CSS笔记(3) 刚刚学习完了CSS的文本属性,感觉还不是很难但是知识点还挺多的,偶尔会忘记一些...发现做笔记还是很有用的,我经常会翻自己写过的文章来看,感觉其实html不算太难,但是要记得东西真的好多好多啊...幸好我记了笔记.学习内容: CSS的引用方式:行内样式表/内部样式表/外部样式表Emmet语法;(一)复合选择器:后代选择器/子选择器(二)伪类选择器;链接伪类选择器CSS的引用方式
日期 2023-06-12 10:48:40CSS笔记(5)
CSS笔记(5) 这两天又在学习scrapy,感觉总算是悟到了一丢丢,开始着手写爬虫了,但还是好难...可是CSS还是不能落下的,两天没看视频 但是有在看书的!睡一觉起来开始学习 上一节学到了制作一个简洁的小米侧边栏,但是文字不是居中的,这里学习一下.很遗憾CSS是没有垂直居中的代码的,但是我们可以使用一个小技巧. 单行文字垂直居中解决方案:让文字的行高等于盒子的高度,即可实现文字的垂直居中.
日期 2023-06-12 10:48:40
CSS笔记(7)
CSS盒子模型 终于学到新内容啦!CSS的盒子模型,其实学到这里有些东西已经懵懵的了,听都听得懂,因为老师讲的实在是很好,但还是害怕实际运用的时候不知所措...不管了先学吧.居然还要学习一点PS...又要重新下载,心累.网页布局过程: 1.先准备好相关的网页元素,网页元素基本都是盒子BOX. 2.利用CSS设置好盒子样式,然后摆放到相应位置. 3.往盒子里装内容. 网页布局
日期 2023-06-12 10:48:40
CSS笔记(11)
CSS笔记(11)常见的页面布局现在做一下第三个的布局: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" conte
日期 2023-06-12 10:48:40
CSS笔记(16)
CSS布局总算是告一段落啦,现在开始学习一些CSS的高级技巧,能坚持到这里真不容易. 精灵图 一个网页中往往会应用很多小的背景图片作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度. 因此,为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(也称 CSS Sprites/Css雪碧)核心原理:
日期 2023-06-12 10:48:40CSS笔记(18)
今天继续学习CSS的高级技巧.溢出的文字省略号显示单行文本溢出显示省略号 尝试了一下,效果图:多行文本溢出显示省略号 因为要考虑兼容性的问题,使用的时候直接粘贴即可. text-overflow: ellipsis; /* 弹性伸缩盒子模型显示 */ display: -webkit-box; /*
日期 2023-06-12 10:48:40CSS笔记(21)
CSS3盒子模型 CSS可通过box-sizing来指定盒子模型,有2个值:即可指定为content-box,border-box,这样我们计算盒子大小的方式就发生了改变.可以分成两种情况:box-sizing:content-box 盒子大小为width+padding+border(以前默认的).box-sizing:border-box 盒子大小为width. 当我们选择box-sizi
日期 2023-06-12 10:48:40CSS笔记(23) 基础班完结!撒花ヽ(°▽°)ノ
终于做完了品优购的案例,花费了我好多天,因为实在是懒+边看边敲,还真的挺累的,昨天又自己做了一遍,把难得地方都做了,还算顺利,做一遍和光看得感觉是完全不一样的,现在继续学习后面的知识.服务器什么是web服务器 我们写的品优购网站,目前是放在自己电脑上的,只能自己访问浏览.如果很多人访问我们的网站,可以把品优购放在服务器上,这样就可以多人访问我们的网站. 服务器(我们也称之为主机),是提供计
日期 2023-06-12 10:48:40CSS笔记(25)之动画animation
CSS3动画 动画(animation)是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果. 相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果. 动画的基本使用制作动画分两步: 先定义动画再使用(调用)动画.用keyframes定义动画(类似定义类选择器)@keyframes 动画名称 { 0% {
日期 2023-06-12 10:48:40CSS笔记(26)
3D转换三维坐标系x轴:水平向右 y轴:垂直向下z轴:垂直屏幕 注意: 往外面是正值,往里面是负值(肥肠重要!). 主要知识点3D位移: translate3d(x,y,z)3D旋转: rotate(x,y,z)透视perspective3D呈现: transform-style3D移动之translate3d 其中,xyz都是不能省略的,没有的话就写0. 透视perspective 在2D平
日期 2023-06-12 10:48:40【黑马程序员pink名师讲CSS】学好CSS有这一篇就够了(CSS笔记)
这篇css博客是参考B站黑马程序员–pink老师做的个人笔记,供平时复习使用,现分享给大家,喜欢的话请多多点赞收藏哦~~文章目录P62.css简介P63.css的语法规范P65.选择器总体概述P66.标签选择器P67.类选择器P70.ID选择器P71.通配符选择器P72.字体样式P78.文本属性P84.css的三种引入方式P92.Chrome调试工具P93.Emmet语法P98.后代选择器P99
日期 2023-06-12 10:48:40CSS flex笔记
Flex布局 在CSS中是当前最流行的布局方式，并且在移动端以及较新的pc浏览器有着很高的支持度，基本上已经可以完全替代传统的 float, inline-block 各种混合的布局方式了。flex布局因为是比较新的标准，所以在设计之初就着重解决了纵向排布的问题。而之前的css布局方式，对于纵向布局做的比较少。诸如纵向居中对齐、纵向铺满都是需要花费不少力气来处理。当前的现代浏览器中 flex la
日期 2023-06-12 10:48:40css学习笔记，持续记录。
Css选择器1. 通配符选择器： *{...}; 选择所有元素； 2. HTML标签选择器：p{...} 、#p{...}、.p{...}; 选择指定的所有标签，指定id，指定类的所有标签； 3. 类选择器选择有特定 class 属性的 HTML 元素，如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。选择所有具有 class="center"
日期 2023-06-12 10:48:40
PostCss学习笔记，持续记录
Css模块CSS 的隔离主要有两类方案，一类是运行时的通过命名区分，一类是编译时的自动转换 CSS，添加上模块唯一标识。1.运行时运行时的方案最典型的就是 BEM，它是通过 .block__element–modifier 这种命名规范来实现的样式隔离，不同的组件有不同的 blockName，只要按照这个规范来写 CSS，是能保证样式不冲突的。但是这种方案毕竟不是强制的，还是有样式冲突的隐患。2.
日期 2023-06-12 10:48:40css 笔记
一、css 的语法 格式： 选择器{属性:值;属性:值;属性:值;....} 其中选择器也叫选择符 CSS 中注释：/* ... */二、在 HTML 中如何使用 css 样式（html 中嵌入 css 的方式） 1. 内联方式（行内样式） 就是在HTML的标签中使用style属性来设置css样式 格式： <ht
日期 2023-06-12 10:48:40HTML&CSS精选笔记_CSS高级技巧详解编程语言
CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。通常情况下，这个由很多小的背景图像合成的大图被称为精灵图， CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图）。然而，各个网页元素通常只需要精灵图中不同位置的某个小图，
日期 2023-06-12 10:48:40HTML&CSS精选笔记_表格与表单详解编程语言
要想创建表格，就需要使用表格相关的标记 table tr td 单元格内的文字 /td /tr /table 包含三对HTML标记，分别为 table /table 、 tr /tr 、 td /td ，他们是创建表格的基本标记
日期 2023-06-12 10:48:40HTML&CSS精选笔记_列表与超链接详解编程语言
无序列表的各个列表项之间没有顺序级别之分，是并列的 ul li 列表项1 /li li 列表项2 /li li 列表项3 /li /ul 每对 ul /ul 中至少应包含一对 li /li 。无序列表中type属性的常用值有三个，它们呈现的效果不同disc（默认值） ●circle
日期 2023-06-12 10:48:40HTML&CSS精选笔记_HTML与CSS网页设计概述详解编程语言
网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。 Internet网络 就是通常所说的互联网，是由一些使用公用语言互相通信的计算机连接而成的网络。 WWW WWW（英文World Wide Web的缩写）中文译为“万维网”是Intertnet提供的一种网页浏览服务。 URL（英文Uniform Resource Locator的
日期 2023-06-12 10:48:40css笔记详解编程语言
style type= text/css @import url( a.css ); /style link type= text/css href= a.css rel= stylesheet / #p1 ID选择符 .p1 类选择符 - div:first-letter 只格式化第一个字母 div:first-line 只格式化第一行
日期 2023-06-12 10:48:40CSS权威指南-第三版–读书笔记详解编程语言
第一章：CSS和文档 html是结构化语言，css是样式语言，html主要用来被强大的搜索引擎更好的索引，更好的让一个盲人通过语音浏览器来了解我们的网页，这也就是为什么说html是结构话语言，因为这是W3C规定的，大家都在遵循，统一的标准会给所有人带来便利（比如上面提到的盲人）。 从web的衰落开始谈起，当时web只是用简单的html来编写，大量的流行，为了更好的展示，于是出现了一些 fo
日期 2023-06-12 10:48:40应用开发中涉及到的css和php笔记分享
关于应用中遇到的一些问题及解决办法，做一些记录，以备后用。本人新手，技术还不熟练，笔记比较幼稚。嘲笑请轻笑。 1、关于层的绝对定位。 有两个div层，其中main类div是整体的层，cloud类div是绝对定位层，实现的效果是在屏幕右上角显示一个云彩的gif图片。div布局代码如下：复制代码代码如下:<divclass="cloud"></div><divcla
日期 2023-06-12 10:48:40DIV+CSS导航学习笔记
meta http-equiv="Content-Type" content="text/html;charset=utf-8" / meta http-equiv="Content-Language" content="zh-cn" / link rel="stylesheet" type="text/css" href="headline.css" / link rel="
日期 2023-06-12 10:48:40【CSS笔记】CSS背景、精灵图、轮廓、margin塌陷问题
目录 1.1、CSS背景 1.2、CSS精灵图 1.3、CSS轮廓 1.4、CSS边距塌陷问题 （1）垂直margin塌陷 （2）嵌套margin塌陷 （3）解决塌陷问题 1.1、CSS背景 【background-image】属性，设置
日期 2023-06-12 10:48:40【CSS笔记】CSS修饰表格、表单、CSS重排和重绘
目录 一、CSS修饰表格 1.1、CSS表格属性 （1）边框 （2）宽度和高度 （3）对齐方式 二、CSS修饰表单 2.1、CSS表单 三、CSS重排和重绘 3.1、HTML渲染过程 3.2、重排和重绘 一、CSS修饰表格 1.1、CSS表格属性
日期 2023-06-12 10:48:40【CSS笔记】CSS盒子模型（标准盒子模型、怪异盒子模型）
目录 一、盒子模型 1.1、标准盒子模型 1.2、怪异盒子模型 （1）box-sizing属性 一、盒子模型 1.1、标准盒子模型 浏览器是通过盒子模型，来计算某个内容占据的区域大小的，完整的盒子模型是由下面这些东西组成的： 一个盒子模型，由四部分组
日期 2023-06-12 10:48:40【Css】css中class之间＞(大于号)、~(波浪号)、 (空格)、,(逗号)、+(加号)详解（转载，笔记用）
css中“>”(大于号)、"~"(波浪号)、" "(空格)、","(逗号)、"+"(加号)详解 - 知乎对新手来说，在布局中通常搞不清这些符号的用法，今天就来为大家详细讲解一下。 1、>(大于号) 子元素选择器 >大于号的意思是 选择某元素
日期 2023-06-12 10:48:40【CSS】关于定位position的综合入门笔记（部分有示例）
一、参数和属性 1、定位的五个属性 2、相对定位reletive 注意：相对定位设置top后，还占着空白位置，可通过margin去掉空白位置。 如：top:-40px;margin-bottom: -40px; 3、绝对定位absolute 4、固定定位
日期 2023-06-12 10:48:40【黑马程序员pink名师讲CSS】学好CSS有这一篇就够了(CSS笔记)
这篇css博客是参考B站黑马程序员–pink老师做的个人笔记,供平时复习使用,现分享给大家,喜欢的话请多多点赞收藏哦~~ 文章目录 P62.css简介P63.css的语法规范P65.选择器总体概
日期 2023-06-12 10:48:40CSS学习笔记
07年的一篇blog，转到这个博客上 1、要想元素相对于父元素决对定位，则父元素必须定位设置成relative。2、要想width属性跨浏览器可用，则需要设置该元素的float属性。3、父元素设置float或添加clear元素以试float元素的父元素能够有正确的空间。 4、a:link visited hover active,必须以这样的顺序定义style,且定义a的button效
日期 2023-06-12 10:48:40