zl程序教程

CSS笔记(11)

  • CSS基础笔记——超链接样式

    CSS基础笔记——超链接样式

    大家好,又见面了,我是你们的朋友全栈君。在浏览器中,超链接默认情况下字体为蓝色,带有下划线,鼠标单击时字体为红色,单击后为紫色而在CSS中,我们可以使用超链接伪类来定义超链接在鼠标单击的不同时期的样式a:link{...} a:visited{...} a:hover{...} a:active{...}复制定义四个伪类,必须按照link、visited、hover、active的顺序进行,不然浏

    日期 2023-06-12 10:48:40     
  • CSS(初级)笔记

    CSS(初级)笔记

    本文最后更新于 688 天前,其中的信息可能已经有所发展或是发生改变。涵盖内容1.熟悉css基本语法,以及css工作原理 2.熟练使用css selector 常规选择器class,id,元素,后代,通用,了解选择器的优先级 3.熟悉浮动,定位,盒模型,背景,字体,颜色等常用属性,能运用css进行页面布局和展现效果图css的工作原理 css的出现使得内容和样式分离进而让页面变得更简洁,更容易维

    日期 2023-06-12 10:48:40     
  • CSS笔记(1)

    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笔记(2)

    CSS笔记(2)

    CSS字体属性 CSS Font(字体)属性用来定义字体系列:大小,粗细和文字样式(如斜体). 文字字体 CSS使用font-family属性定义文本的字体系列文字大小 CSS使用font-size属性定义文字大小 文字粗细 CSS使用font-weight 设置文字的粗细效果,400等价于normal,默认粗细字体,700等价于bold,粗体,注意后面不需要跟单位!!!文字样式 C

    日期 2023-06-12 10:48:40     
  • CSS笔记(8)

    CSS笔记(8)

    CSS笔记(8) 已经好久没有学习了!!!从期末复习,到后来去做暑假工培训,好多天了!!超级难受,不过我还是有复习过的,继续继续.外边距的典型应用 上一节学习到了如何让一个盒子在网页中水平居中,做法是: ①给盒子一个宽度, ②并且设置外边距margin的左右外边距设置为auto. 如果想要将行内元素或者行内块元素(如图片)设置为水平居中,那么只要给他们的父元素设置text-ali

    日期 2023-06-12 10:48:40     
  • CSS笔记(14)

    CSS笔记(14)

    CSS定位为什么需要定位?浮动可以让多个块级盒子一行没有缝隙排列显示,经常用于横向排列盒子.定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子.定位 将盒子定在某一个位置,所以定位也是在摆盒子,按照定位的方式移动盒子.定位=定位模式+边偏移. 定位模式用于指定一个元素在文档中的定位方式,边偏移则决定了该元素的最终位置. 定位模式 定位模式决定

    日期 2023-06-12 10:48:40     
  • CSS笔记(16)

    CSS笔记(16)

    CSS布局总算是告一段落啦,现在开始学习一些CSS的高级技巧,能坚持到这里真不容易. 精灵图 一个网页中往往会应用很多小的背景图片作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度. 因此,为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(也称 CSS Sprites/Css雪碧)核心原理:

    日期 2023-06-12 10:48:40     
  • CSS笔记(18)

    CSS笔记(18)

    今天继续学习CSS的高级技巧.溢出的文字省略号显示单行文本溢出显示省略号 尝试了一下,效果图:多行文本溢出显示省略号 因为要考虑兼容性的问题,使用的时候直接粘贴即可. text-overflow: ellipsis; /* 弹性伸缩盒子模型显示 */ display: -webkit-box; /*

    日期 2023-06-12 10:48:40     
  • CSS笔记(19)

    CSS笔记(19)

    CSS初始化 不同浏览器对有些标签的默认值是不同的,为了消除不同浏览器对HTMl文本呈现的差异,照顾浏览器的兼容,我们需要对CSS初始化. 简单理解:CSS初始化是指重设浏览器的样式(也称为CSS reset) 我们现在看看京东的初始化样式:<!DOCTYPE html> <html lang="en"> <head> <

    日期 2023-06-12 10:48:40     
  • CSS笔记(20) 非常重要

    CSS笔记(20) 非常重要

    好几天没有更新,因为我在偷懒... 又到了新的内容了,现在学习HTML5和CSS3的新特征. HTML的新增特性主要是针对于以前的不足,增加了一些新的表单,新的标签和新的表单属性等. 这些新特性都有兼容性问题,基本是IE9+以上版本的浏览器才支持,如果不考虑兼容性的问题,可以大量使用这些新特性.(呵呵,IE我杀了你) 声明: 新特性增加了很多,但是我们专注于开发常用的新特性.基础班讲解部分新

    日期 2023-06-12 10:48:40     
  • CSS笔记(22)

    CSS笔记(22)

    最近一直没更新,因为这个案例实在是太多了+麻烦+我好懒,所以进度超级慢...现在正在边看视频边敲... 现在在做品优购项目的案例,里面也有很多新知识需要记录一下,顺便把准备工作都记录一下,下次自己做的时候方便看.favicon图标 我们看到打开一个标签页时前面的小图标就是favicon图标,如下图的京东小图标. favicon.ico一般用于作为缩略的网站标志,它显示在浏览器的地址栏或者

    日期 2023-06-12 10:48:40     
  • CSS笔记(25)之动画animation

    CSS笔记(25)之动画animation

    CSS3动画 动画(animation)是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果. 相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果. 动画的基本使用制作动画分两步: 先定义动画再使用(调用)动画.用keyframes定义动画(类似定义类选择器)@keyframes 动画名称 { 0% {

    日期 2023-06-12 10:48:40     
  • CSS笔记(27)之旋转木马案例

    CSS笔记(27)之旋转木马案例

    今天做了一个旋转木马的案例: 受到弹幕的启发:先让每个都旋转好角度,然后都向前移动,但是这里也要注意顺序的问题.如果是先沿着Z轴正方向移动再旋转60°,那就是这样的效果:正面 仰视 如果是先旋转60°再沿着Z轴正方向移动,那就是这样的效果:正面 仰视 完整的代码: <!DOCTYPE html> <html lang="en"> <he

    日期 2023-06-12 10:48:40     
  • CSS学习笔记:表格样式,图片样式【7/27】

    CSS学习笔记:表格样式,图片样式【7/27】

    表格标题位置语法:caption-side:取值;默认情况下,表格标题是在表格的顶部,属性为:top,如果想把标题放在底部,属性为:bottom。如果想要定义表格标题的位置,在table或caption这两个元素的CSS中定义caption-side属性,效果是一样的,一般情况,我们只在table中定义就行。表格边框合并语法:border-collapse:取值;属性值说明separate边框分开

    日期 2023-06-12 10:48:40     
  • Web前端开发CSS笔记

    Web前端开发CSS笔记

    CSS 层叠样式CSS引用:直接引用 直接在HTML标签的后面加上style类型声明即可,多个类型请用分号隔开.<body> <p style="color: red"> hello lyshark </p> <div style="color: yellow ; background: red"> hel

    日期 2023-06-12 10:48:40     
  • 【黑马程序员pink名师讲CSS】学好CSS有这一篇就够了(CSS笔记)

    【黑马程序员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:40     
  • HTML之文本格式化、链接、头部、CSS(笔记小结)

    HTML之文本格式化、链接、头部、CSS(笔记小结)

    1 文本格式化1.1 文本格式化标签使用某些标签对文本进行格式化,如加粗、倾斜等,这类标签即称为文本格式化标签。如下常用的文本格式化标签有:标签说明 <b>定义粗体文本 <em> 定义着重文字 <i> 定义斜体字 <small> 定义小号字 <strong>定义加重语气 <sub> 定义下标字 <

    日期 2023-06-12 10:48:40     
  • PostCss学习笔记,持续记录

    PostCss学习笔记,持续记录

    Css模块CSS 的隔离主要有两类方案,一类是运行时的通过命名区分,一类是编译时的自动转换 CSS,添加上模块唯一标识。1.运行时运行时的方案最典型的就是 BEM,它是通过 .block__element–modifier 这种命名规范来实现的样式隔离,不同的组件有不同的 blockName,只要按照这个规范来写 CSS,是能保证样式不冲突的。但是这种方案毕竟不是强制的,还是有样式冲突的隐患。2.

    日期 2023-06-12 10:48:40     
  • HTML&CSS精选笔记_CSS入门详解编程语言

    HTML&CSS精选笔记_CSS入门详解编程语言

    选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} CSS代码结构中的特点 CSS样式中的选择器严格区分大小写,属性和值不区分大小写,按照书写习惯一般将“选择器、属性和值”都采用小写的方式。 多个属性之间必须用英文状态下的分号隔开,最后一个属性后的分号可以省略,但是,为了便于增加新样式最好保留。 如果属性的值由多个单词组成且中间包含空格,则必须为这个属性值加上英文状态

    日期 2023-06-12 10:48:40     
  • HTML&CSS精选笔记_HTML与CSS网页设计概述详解编程语言

    HTML&CSS精选笔记_HTML与CSS网页设计概述详解编程语言

    网页主要由文字、图像和超链接等元素构成。当然,除了这些元素,网页中还可以包含音频、视频以及Flash等。 Internet网络 就是通常所说的互联网,是由一些使用公用语言互相通信的计算机连接而成的网络。 WWW WWW(英文World Wide Web的缩写)中文译为“万维网”是Intertnet提供的一种网页浏览服务。 URL(英文Uniform Resource Locator的

    日期 2023-06-12 10:48:40     
  • 整理一下以前的Html+css3复习笔记详解编程语言

    整理一下以前的Html+css3复习笔记详解编程语言

     input新type:url/number/range/Date(date, month, week, time等)/search/color     Chrome 和 Safari 需要前缀 -webkit-        Internet Explorer 9 需要前缀 -ms- transform-origin:

    日期 2023-06-12 10:48:40     
  • CSS学习笔记10 相对定位,绝对定位与固定定位详解编程语言

    CSS学习笔记10 相对定位,绝对定位与固定定位详解编程语言

    文档流中的元素的位置由元素在 (X)HTML 中的位置决定,这就是最原始的普通流,前面讲到的浮动CSS学习笔记08 浮动可以改变元素在文档流中的位置,除了这个我们还可以通过使用CSS的position 属性,来重新决定元素在文档流中的位置。 position 属性值 static:默认的文档流的布局的方式,块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素

    日期 2023-06-12 10:48:40     
  • CSS学习笔记05 display属性详解编程语言

    CSS学习笔记05 display属性详解编程语言

    每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度、高度、对齐等属性,常用于网页布局和网页结构的搭建。并且块级元素容器可以容纳多个嵌套的块级标签或者行内标签。常见的块元素有 h1 ~ h6 、 p 、 div 、 ul 、 ol 、 li 等,其中 div 标记是网页制作中最常用的块元素。 行内元素不占有独立的区域,仅仅靠自身的字体大小和图像尺寸来支撑结构的样式。行内元素不能嵌套块级标签

    日期 2023-06-12 10:48:40     
  • CSS学习笔记04 CSS文字排版常用属性详解编程语言

    CSS学习笔记04 CSS文字排版常用属性详解编程语言

    font-size:字号大小 font-size属性用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位。其中,相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使用较少。 绝对单位可选参数值:xx-small | x-small | small | medium | large | x-large | xx-large|smaller | larger 1 !DOC

    日期 2023-06-12 10:48:40     
  • CSS学习笔记03 CSS层叠性、继承性、特殊性详解编程语言

    CSS学习笔记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:40     
  • CSS学习笔记01 CSS简介详解编程语言

    CSS学习笔记01 CSS简介详解编程语言

    1、CSS定义 CSS 指层叠样式表 (Cascading Style Sheets),是一种样式表语言,用来描述 HTML 或 XML(包括如 SVG、XHTML 之类的 XML 分支语言)文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。 2、为何使用CSS 网页是由HTML标签组成的,那么这些标签会根据浏览器的默认方式进行排版与样式的渲染,如果想要更改

    日期 2023-06-12 10:48:40     
  • 淘宝段正淳的css笔记大全

    淘宝段正淳的css笔记大全

    试想过总结出这几年来写css与xhtml的经验,汇总成一片”旷世奇文”分享给大家。无奈寡人年世已高,真是有点力不从心了。于是转念一想,可以用笔记的形式展现,这样就不用担心写不出来了。 现在就来说个淘宝首页上的一个小技巧。 类目之间的横竖线 从很久很久以前开始,类目间的竖线无非都只有三种。 背景图在a标签设置一个padding用宽1px高不等的背景图来position到右侧。缺点:最后一个还是

    日期 2023-06-12 10:48:40     
  • jqueryCSS选择器笔记

    jqueryCSS选择器笔记

    去年我学jQuery的时候,曾经做过一点选择器(selector)的笔记。这几天拿出来看了一下,发现很多都忘记了。所以,我决定把它们贴在这里,方便以后查看。这对其他朋友应该也是有用的,毕竟选择器是制作网页效果的第一步。笔记分为两个部分,今天是CSS的选择器,以后还有一部分xPath的选择器。今天的笔记中包括44个选择器,基本涵盖了CSS2和CSS3的所有规定。 序号 选择器 含义 1.

    日期 2023-06-12 10:48:40     
  • css小笔记

    css小笔记

    一、优先级 二、伪类 三、伪元素 ::first-line ::first-letter ::before ::after ::selection 伪元素共有5个,selection是css3新加的,表示选中的文字,css2伪元素和伪类是一样只有一个:而css3规定伪元素要用两个:   四、background-size值为cover和值为100%的区别 background

    日期 2023-06-12 10:48:40     
  • CSS选择器笔记

    CSS选择器笔记

    去年我学jQuery的时候,曾经做过一点选择器(selector)的笔记。 这几天拿出来看了一下,发现很多都忘记了。所以,我决定把它们贴在这里,方便以后查看。这对其他朋友应该也是有用的,毕竟选择器是制作网页效果的第一步。 笔记分为两个部分,今天是CSS的选择器,以后还有一部分xPath的选择器。今天的笔记中包括44个选择器,基本涵盖了CSS 2和CSS 3的所有规定。 ===========

    日期 2023-06-12 10:48:40     
  • 【CSS笔记】CSS设置元素堆叠顺序、元素宽高自适应、calc数学函数

    【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