CSS笔记(18)
CSS笔记(1)
经过几天的学习,看完了30多P视频,HTML的基本知识已经学完啦,HTML知识最简单的部分,现在终于要学习CSS啦!!超级开心.CSS简介 CSS的主要使用场景就是美化网页,布局页面的. CSS 网页的美容师: 1.HTML主要做结构,显示元素内容 2.CSS美化HTML,布局网页 3.CSS最大价值:由HTML专注去做结构呈现,样式交给CSS,即结构与样式相分离CSS语法规范
日期 2023-06-12 10:48:40
CSS笔记(14)
CSS定位为什么需要定位?浮动可以让多个块级盒子一行没有缝隙排列显示,经常用于横向排列盒子.定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子.定位 将盒子定在某一个位置,所以定位也是在摆盒子,按照定位的方式移动盒子.定位=定位模式+边偏移. 定位模式用于指定一个元素在文档中的定位方式,边偏移则决定了该元素的最终位置. 定位模式 定位模式决定
日期 2023-06-12 10:48:40CSS笔记(15)
元素的显示与隐藏 类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现. 本质:让一个元素在页面中隐藏或显示出来.1.display属性 display属性用于设置一个元素应如何显示. display : none ; 隐藏对象display : block ; 除了转换成块级元素之外,同时还有显示元素的意思. display隐藏元素后,不再占有原来的位置(和绝对定位一样
日期 2023-06-12 10:48:40
CSS笔记(19)
CSS初始化 不同浏览器对有些标签的默认值是不同的,为了消除不同浏览器对HTMl文本呈现的差异,照顾浏览器的兼容,我们需要对CSS初始化. 简单理解:CSS初始化是指重设浏览器的样式(也称为CSS reset) 我们现在看看京东的初始化样式:<!DOCTYPE html> <html lang="en"> <head> <
日期 2023-06-12 10:48:40CSS笔记(24)之transform
关于HTML+CSS的基础班知识已经学完啦,现在学习就业班的知识.2D转换 转换(transform)是CSS3中最具有颠覆性的特征之一,可以实现元素的位移/旋转/缩放等效果.转换可以简单理解为变形.移动:translate旋转:rotate缩放:scale二维坐标系 2D转换是改变标签在二维平面上的位置和形状的一种技术,先来学习二维坐标系.2D转换之移动translate 2D移动是
日期 2023-06-12 10:48:40
CSS笔记(25)之动画animation
CSS3动画 动画(animation)是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果. 相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果. 动画的基本使用制作动画分两步: 先定义动画再使用(调用)动画.用keyframes定义动画(类似定义类选择器)@keyframes 动画名称 { 0% {
日期 2023-06-12 10:48:40
CSS笔记(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:40CSS笔记(28)之CSS3收尾+总结
视频看着看着好像又完结了一次...但其实后面还有很多内容,大概就是移动端的了,先学着吧,后面就是JS了!又开启新内容啦!最后来一个总结笔记
日期 2023-06-12 10:48:40PostCss学习笔记，持续记录
Css模块CSS 的隔离主要有两类方案，一类是运行时的通过命名区分，一类是编译时的自动转换 CSS，添加上模块唯一标识。1.运行时运行时的方案最典型的就是 BEM，它是通过 .block__element–modifier 这种命名规范来实现的样式隔离，不同的组件有不同的 blockName，只要按照这个规范来写 CSS，是能保证样式不冲突的。但是这种方案毕竟不是强制的，还是有样式冲突的隐患。2.
日期 2023-06-12 10:48:40
css 笔记
一、css 的语法 格式： 选择器{属性:值;属性:值;属性:值;....} 其中选择器也叫选择符 CSS 中注释：/* ... */二、在 HTML 中如何使用 css 样式（html 中嵌入 css 的方式） 1. 内联方式（行内样式） 就是在HTML的标签中使用style属性来设置css样式 格式： <ht
日期 2023-06-12 10:48:40HTML&CSS精选笔记_浮动与定位详解编程语言
什么是浮动？元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中指定位置的过程。 如何定义浮动？在CSS中，通过float属性来定义浮动，其基本语法格式如下： 选择器{float:属性值;} float属性值left 元素向左浮动right 元素向右浮动none 元素不浮动（默认值） 为什么要清除浮动？由于浮动元素不再占用原文档流的位置，所以它会对页面中
日期 2023-06-12 10:48:40HTML&CSS精选笔记_盒子模型详解编程语言
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。 网页就是多个盒子嵌套排列的结果。 内边距出现在内容区域的周围，当给元素添加背景色或背景图像时，该元素的背景色或背景图像也将出现在内边距中。 外边距是该元素与相邻元素之间的距离。 如果给元素定义边框属性，边
日期 2023-06-12 10:48:40HTML&CSS精选笔记_CSS入门详解编程语言
选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} CSS代码结构中的特点 CSS样式中的选择器严格区分大小写，属性和值不区分大小写，按照书写习惯一般将“选择器、属性和值”都采用小写的方式。 多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号可以省略，但是，为了便于增加新样式最好保留。 如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态
日期 2023-06-12 10:48:40HTML&CSS精选笔记_HTML入门详解编程语言
HTML基本文档格式 HTML文档的基本格式，其中主要包括 !DOCTYPE 文档类型声明、 html 根标记、 head 头部标记、 body 主体标记。 !DOCTYPE 标记位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范 html 标记位于 !DOCTYPE 标记之后，也称为根标记，用于告知浏览器其自身是一个 HTML 文档， html 标记标志着
日期 2023-06-12 10:48:40CSS学习笔记11 CSS背景详解编程语言
background-color：背景色 前面我们经常用background-color这个属性来设置元素的背景色，例如下面这条css可将段落的背景色设置为灰色 p {background-color: gray;} 如果想要元素的背景色向外延伸，则只需增加内边距即可 background-color可以为所有元素设置背景色，这包括 body 一直到 em 和 a 等行内元素。 注意
日期 2023-06-12 10:48:40CSS学习笔记03 CSS层叠性、继承性、特殊性详解编程语言
所谓层叠性是指多种CSS样式的叠加，也就是说后面设置的样式会层叠（覆盖）之前的样式，层叠性的前提是CSS的选择器的优先级相同，例如，当使用内嵌式CSS样式表定义 p 标记字号大小为12像素，链入式定义 p 标记颜色为红色，那么段落文本将显示为12像素红色，即这两种样式产生了叠加。 1 !DOCTYPE html 2 html lang="en" 3 head 4 meta c
日期 2023-06-12 10:48:40CSS学习笔记02 CSS选择器详解编程语言
1、通配符选择器 通配符选择器用“* 号表示，是所有选择器中作用范围最广的，能匹配页面中所有的元素 /*设置当前页面中所有标签的颜色为红色*/ color: red; } 2、标签选择器 标签选择器就是选择当前页面中相同名字的标签 /*设置所有p标签的文字颜色为红色*/ color: red; } 3、ID选择器 id选择器使用 # 进行标识，后面紧跟id名 /
日期 2023-06-12 10:48:40JQueryCSS样式控制学习笔记
jQuery就不多说了，这是JS的一个函数库，比较常用，我们今天是就jQuery的三种用于css的操作进行总结$(selector).css("name","value")$(selector).css({properties})$(selector).css(name)$(selector).css("name","value")为所有元素给定CSS属性设置值：下面看我刚写的代码复制代码代码如
日期 2023-06-12 10:48:40jqueryCSS选择器笔记
去年我学jQuery的时候，曾经做过一点选择器（selector）的笔记。这几天拿出来看了一下，发现很多都忘记了。所以，我决定把它们贴在这里，方便以后查看。这对其他朋友应该也是有用的，毕竟选择器是制作网页效果的第一步。笔记分为两个部分，今天是CSS的选择器，以后还有一部分xPath的选择器。今天的笔记中包括44个选择器，基本涵盖了CSS2和CSS3的所有规定。 序号 选择器 含义 1.
日期 2023-06-12 10:48:40《css揭秘》读书笔记
第一章 引言 css编码技巧 在引言中，作者提到使用em与inherit来实现css代码的简洁与可维护性。但是根据本司机两年的开发经验来看，在实际开发中很少来使用em这个单位。如何用以及何时去使用，还是要根据实际开发需求来定吧，毕竟这两个属性都有一定的局限性。 第二章 背景与边框 半透明边框 border: 10px solid hsla(0, 0%,
日期 2023-06-12 10:48:40css小笔记
一、优先级 二、伪类 三、伪元素 ::first-line ::first-letter ::before ::after ::selection 伪元素共有5个，selection是css3新加的，表示选中的文字，css2伪元素和伪类是一样只有一个：而css3规定伪元素要用两个： 四、background-size值为cover和值为100%的区别 background
日期 2023-06-12 10:48:40CSS选择器笔记
去年我学jQuery的时候，曾经做过一点选择器（selector）的笔记。 这几天拿出来看了一下，发现很多都忘记了。所以，我决定把它们贴在这里，方便以后查看。这对其他朋友应该也是有用的，毕竟选择器是制作网页效果的第一步。 笔记分为两个部分，今天是CSS的选择器，以后还有一部分xPath的选择器。今天的笔记中包括44个选择器，基本涵盖了CSS 2和CSS 3的所有规定。 ===========
日期 2023-06-12 10:48:40Web前端开发CSS笔记
CSS 层叠样式 CSS引用:直接引用 直接在HTML标签的后面加上style类型声明即可,多个类型请用分号隔开. <body> <p style="color: red"> hello lyshark </p> <div style="color: yel
日期 2023-06-12 10:48:40【CSS笔记】CSS实现后台管理系统主界面布局
一、后台管理系统界面 1.1、实现效果 1.2、案例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv=&#
日期 2023-06-12 10:48:40【CSS笔记】CSS设置元素堆叠顺序、元素宽高自适应、calc数学函数
目录 一、堆叠顺序 1.1、默认堆叠顺序 1.2、设置堆叠顺序 二、宽高自适应 2.1、设置宽高自适应 2.2、最小最大宽高 三、calc数学函数 3.1、calc函数 一、堆叠顺序 CSS可以通过【z-index】属性，设置元素的堆叠顺序，【z-index】属性值是一个数字，可以是负数、整
日期 2023-06-12 10:48:40【CSS笔记】CSS布局相关属性（显示元素、文本溢出、元素浮动）
目录 一、CSS布局 1.1、显示元素 （1）display属性 （2）visibility属性 1.2、行内元素和块内元素 （1）元素的嵌套规则 1.3、元素溢出问题 （1）overflow属性 （2
日期 2023-06-12 10:48:40CSS元素定位笔记
CSS定位 学css之前建议先学下XPath定位方法,阶梯形理解学起来反而更快.css相比XPath确实更简洁高效. 完整文档可以查看: https://developer.mozilla.org/zh-CN/
日期 2023-06-12 10:48:4011.23CSS笔记
每一步的编写过程都在代码里面书写了，暂且记录下来 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" content="This is a meta data" name="dengyexun"> 5 <title&g
日期 2023-06-12 10:48:40html5+css3重温笔记
#### 1.css3兼容老式IE 浏览器（ie678）--使阴影和圆角属性生效 -moz-border-radius:15px;//Firefox -webkit-border-radius:15px; // Safari and Chr
日期 2023-06-12 10:48:40HTML5 + CSS3 页面结构学习笔记（五）
页面结构学习 页面结构学习页面结构分析常用元素列表页面演示示例 iframe内联框架多个iFrame嵌套使用实现页面的切换演示示例 页面结构学习 页面结构分析 页面
日期 2023-06-12 10:48:40