CSS学习笔记

CSS学习笔记（一）--基本知识

CSS简介原名：层叠样式表(CascadingStyleSheets)作用：如何显示HTML元素存储位置：常存储在样式表中，在HTML页的头元素中，或在一个外部的CSS文件中。甚至可以在同一个HTML文档内部引用多个外部样式表。目的：解决内容与表现分离的问题同一个HTML元素被不止一个样式定义时，会使用哪个样式呢？浏览器缺省设置外部样式表内部样式表（位于标签内部）内联样式（在HTML元素内部）其中
五秋木·2020-01-08 15:34

CSS学习笔记--伪类和伪元素

伪类和伪元素单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。根本区别在于是否创造了新的元素。伪类:link“链接”：超链接点击之前；:visited“访问过的”：链接被访问过之后；:hover“悬停”：鼠标放到标签上的时候；:active“激活”：鼠标点击标签，但是不松手时；:focus是某个标签获得焦点时的样式（比如某个输入框获得焦点）；:first-child选择某个元素的第一
小天狼星tyx·2019-12-31 16:00

html+css学习笔记001-常用标签

Author：Mr.柳上原付出不亚于任何的努力愿我们所有的努力，都不会被生活辜负不忘初心，方得始终浑浑噩噩过了半生，三十岁才觉醒的我，能否发出照耀世界的光？前生未能尽力，余生请多指教未完待续......前端59期学员作业/*内部样式表*/div{width:100px;/*宽*/height:100px;/*高*/background:red;/*背景*/}src属性：./img1.png本文件夹
Mr柳上原·2019-12-26 17:31

CSS学习笔记（七）--CSS样式之列表与表格

1.列表无序列表ul.disc{list-style-type:disc}#实心圆ul.circle{list-style-type:circle}#空心圆ul.square{list-style-type:square}#方框ul.none{list-style-type:none}#无标识有序列表ol.decimal{list-style-type:decimal}#数字ul.decimal-
五秋木·2019-12-26 13:21

html+css学习笔记019-H5响应式布局0自适应布局

Author：Mr.柳上原付出不亚于任何的努力愿我们所有的努力，都不会被生活辜负不忘初心，方得始终html+css布局前端学习的基础html+css毕业已经有两个星期现在原生js班学习也有一个多星期了这是不包含需要用到js的最后一节学习笔记感慨颇多笔到纸上却一个字也写不出来希望自己在js的学习上也能做到不忘初心付出不亚于任何人的努力天生我才必有用，千金散尽还复来我会发上来我做的京东商城的html+
Mr柳上原·2019-12-25 05:12

html+css学习笔记016-H5变化0过渡0动画

Author：Mr.柳上原付出不亚于任何的努力愿我们所有的努力，都不会被生活辜负不忘初心，方得始终今天第59期班html+css毕业了马上要进入js班学习想起了以前那个感性的我高中毕业的时候大学毕业的时候泪眼婆娑的我本以为今天会如那时候一样的依依不舍然而心中却少有波澜想感慨，想感恩，想说些什么最后还是对自己说算了吧就这样吧平淡的结束了毕业典礼是社会让人变得冷漠连情感都会暗淡许多吗前端59期学员作业
Mr柳上原·2019-12-25 00:27

CSS笔记

CSS学习笔记HTML与CSS布局1、html布局标签：推荐使用有具体语义的标签，而不是一味的使用div。头部标签：header，适用于一个区域头部的内容。
林云流水·2019-12-20 09:18

《任务202 CSS》任务产出汇总

https://bbs.excellence-girls.org/topic/211/css%E6%A0%B8%E5%BF%83%E7%9F%A5%E8%AF%86完成时间2016-12-14任务要求的作业CSS
TW安洋·2019-12-18 12:35

html+css学习笔记018-H5弹性盒模型

Author：Mr.柳上原付出不亚于任何的努力愿我们所有的努力，都不会被生活辜负不忘初心，方得始终有多大能力就要担负起多大的责任一直不想去担负这种责任所以找工作的时候都尽量做普通员工只需要做好自己本职工作不用去想公司的发展不用去规划员工的工作计划不用去为业绩而烦恼然而当年纪越来越大阅历越来越广不得不去，或者说是被强行推上管理岗位当站到这个位置上时才发现有多难每周需要统筹员工工作安排审核上周工作进度
Mr柳上原·2019-12-17 00:38

css学习笔记

负边距找了一下负边距的相关文档：CSS布局奇淫巧计之-强大的负边距,总结了一下：如果margin为正值，则相当于把元素盒给推过去；若margin为负值，则相当于把元素盒拉过来但对于它为什么会对元素宽度有影响，我找了很多文档，包括w3c的官方说明，都没有找出一个合理的解释。最后只能归结于子元素并没有规定宽度，默认会填充整个父元素框，即使将子元素往外拉也不会影响父元素被填充的效果，就会导致元素框被拉长
LiHDong·2019-12-16 00:10

CSS学习笔记（一）

1.语法selector{property:value}选择器{属性：值}2.选择器类型①元素选择器p②id选择器#p③类选择器.p3.注释style里面的注释是用/**/4.CSS属性属性名称属性值尺寸widthheight百分比、像素背景颜色background-color颜色名字、rgb格式、16进制格式背景图片background-imageurl(../../xx.jpg)背景重复bac
吴忆松·2019-12-15 22:58

CSS学习笔记-背景属性

一、背景尺寸属性：1、含义：背景尺寸属性是CSS3中新增的一个属性，专门用于设置背景图片大小2、格式：1.1具体像素：background-size:300px200px;第一个参数：宽度第二个参数：高度1.2百分比:background-size:80%50%;第一个参数：宽度第二个参数：高度1.3宽度等比拉伸:background-size:80%auto;第一个参数：宽度第二个参数：高度1.
_脑袋空空·2019-12-12 23:00

CSS学习笔记-边框图片等属性

1、边框图片：1.1含义：告诉浏览器指定一张图片作为边框1.2格式：border-image-source:url("images/..");1.3注意点：(1)如果只通过source指定了一张图片作为边框的图片，默认情况下会将图片放到边框的四个顶点(2)边框图片的优先级高于边框颜色，即设置了边框图片那就不会显示边框颜色2、对图片进行切割：2.1格式：border-image-slice:7070
_脑袋空空·2019-12-12 22:00

html+css学习笔记002-盒子模型

Author：Mr.柳上原付出不亚于任何的努力愿我们所有的努力，都不会被生活辜负不忘初心，方得始终学习前端，乃至引申到学习任何程序语言怕的不是我们不懂英文怕的不是我们不懂操作电脑怕的更不是我们不懂基础程序语言而是我们没有坚持不懈，直到成功的心做任何事情都是一样不管我们开始有多么的用心，多么的努力，当我们懈怠了一次，两次，三次......从入门到精通，还是从入门到放弃一念天堂，一念地狱前端59期学员
Mr柳上原·2019-12-11 18:04

html+css学习笔记003-样式初始化

Author：Mr.柳上原付出不亚于任何的努力愿我们所有的努力，都不会被生活辜负不忘初心，方得始终记得大学毕业后的第一份工作在一家在厦门还算比较知名的互联网公司做电话销售总监交给我们的第一堂课做人要低调，做事要高调如今走过些许岁月，回头想想此话如同金玉良言，醍醐灌顶如果以前的自己能早点领悟这句话或许会是另一番风景吧前端59期学员作业/*内部样式表*//*样式初始化*/*{/*通配符选择器：选择所有
Mr柳上原·2019-12-08 13:51

css学习笔记之浮动

1浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?特征：1使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素则停下。2浮动样式可以应用在块元素及行内元素上。元素浮动之后不占据原来的位置。3元素在一排显示，相邻间没空隙。应用在行内元素上时可以让其像块级元素一样设置宽高。对父容器的影响：如果一个父容器的子元素都是浮动元素，且本身没有设置宽高就会导致父元素塌
IsGirl·2019-12-06 07:15

CSS学习笔记-动画模块

动画模块：1、过渡和动画之间的异同1.1不同点（1）过渡必须人为触发才能执行（2）动画不需要人为触发就可以执行1.2相同（1）过渡和动画都是可以用来给元素添加动画的（2）过渡和动画都是系统新增的一些属性（3）过渡和动画都需要满足三要素才有动画效果2、格式：2.1三要素：（1）告诉系统需要执行的动画名称animation-name:animation_name;（2）创建一个带名称的动画①第一种创建
_脑袋空空·2019-12-05 21:00

CSS学习笔记-盒子阴影及文字阴影

盒子阴影：1、格式：box-shadow:h-shadowv-shadowblurspreadcolorinsert;box-shadow:水平偏移垂直偏移模糊度阴影扩展阴影颜色内外阴影;2、注意点：2.1盒子的阴影分为内外阴影，默认情况下为外阴影2.2快速添加阴影只需要编写三个参数即可：box-shadow:水平偏移垂直偏移模糊度;2.3默认情况下阴影的颜色和盒子内容的颜色一致2.4当水平与垂直
_脑袋空空·2019-12-05 21:00

CSS学习笔记-2D转换模块

2D转换模块：1、旋转1.1格式：transform:rotate(45deg);1.2含义：表示旋转多少度2、平移：2.1格式：transform:translate(100px,-100px);2.2含义第一个参数：水平方向第二个参数：垂直方向3、缩放：3.1格式transform:scale(1.5,1);3.2含义·第一个参数：水平方向缩放第二个参数：垂直方向3.3注意点：(1）如果取值是
_脑袋空空·2019-12-04 23:00

CSS学习笔记-过度模块-编写过渡效果

过渡模块-编写过渡效果：1、编写过渡套路：1.1不要管过渡，先编写基本界面1.2修改我们认为需要修改的属性1.3再给被修改属性的元素添加过渡即可2、弹性效果*{margin:0;padding:0;}div{height:100px;background-color:red;font-size:80px;margin:200pxauto;text-align:center;}divspan{/*t
_脑袋空空·2019-12-04 16:00

CSS学习笔记-过渡模块

过渡模块：1、过渡三要素1.1必须要有属性发生变化1.2必须告诉系统哪个属性需要执行过渡效果1.3必须告诉系统过渡效果持续时长2、格式：div{width:100px;height:100px;background-color:red;transition-property:width;transition-duration:0.5s;}div:hover{width:300px;}(:link默
_脑袋空空·2019-12-04 15:00

HTML与CSS学习笔记(7)

1、响应式布局利用媒体查询，即mediaqueries，可以针对不同的媒体类型定义不同的样式，从而实现响应式布局。常见选项：媒体类型and、notmin-width、max-width:例如@mediaalland(min-width:500px)and(max-width:700px){.box{background:blue;}}当分辨率大于最小宽度并小于最大宽度时，执行{}内的样式(注意an
AhuntSun·2019-12-04 14:00

HTML与CSS学习笔记(6)

1、flex弹性盒模型在父容器中添加display:flex;把父容器变为弹性盒模型作用(写)在flex容器上作用(写)在flex子项上flex-directionorderflex-wrapflex-growflex-flowflex-shrinkjustify-contentflex-basisalign-itemsflexalign-contentalign-self*快速写子类的方法：di
AhuntSun·2019-12-04 14:00

HTML与CSS学习笔记(5)

1、文字阴影？（针对文字）text-shadow：例如text-shadow:10px10px10pxblue;四个值分别是xyblurcolorblur表示模糊值，越大越模糊注：阴影的默认颜色是跟文字的颜色相同；通过逗号的方式进行分割，可以设置多阴影2、box-shadow:盒子阴影（针对容器）xyblurcolorinset多阴影例如：box-shadow:10px10px10px30pxbl
AhuntSun·2019-12-04 14:00

HTML与CSS学习笔记(4)

1、浏览器前缀浏览器厂商以前就一直在实时CSS3，但它还未成为真正的标准。为此，当有一些CSS3样式与法还在波动的时候，他们提出了针对不同浏览器的前缀，来解决兼容性问题。即：CSS3去兼容不同的浏览器，针对旧的浏览器做兼容，新浏览器基本不需要添加这个前缀了。浏览器内核前缀IETrident-ms-FirefoxGecko-moz-OperaPresto-o-ChromeWebkit-webkit-
AhuntSun·2019-12-04 14:00

HTML与CSS学习笔记(3)

1、float浮动脱离文档流：沿着父容器靠左或者靠右进行排列文档流文档流是文档可显示对象在排列时所占用的位置float特性left、right、nonefloat注意点：只会影响后面的元素,对于浮动元素之前的元素是不造成任何影响的内容默认提升半层，可实现图文混排样式默认宽根据内容决定换行排列，一行放不下浮动元素就会换行排列主要给块元素添加，但也可以给内联元素添加如何清除浮动？上下排列：clear，
AhuntSun·2019-12-04 13:00

HTML与CSS学习笔记(2)

1、CSS背景样式？background-color背景色background-image背景图url（背景地址）默认：会水平垂直铺满背景图background-repeat平铺方式repeat-xx轴平铺repeat-yy轴平铺repeat（x和y都进行平铺，默认值）no-repeat都不平铺background-position背景位置xy如果为正数：图片就会往右和下进行偏移；如果为负数：图片
AhuntSun·2019-12-04 13:00

HTML与CSS学习笔记(1)

1、web三大核心技术？HTMLCSSJavaScript2、HTML基本机构和属性HTML:超文本标记语言超文本：文本内容+非文本内容（图片、视频、音频等）标记：语言：编程语言标记也叫做标签：写法分为两种：单标签：双标签:创建标签的快捷键：tab+单词->标签可以上下排列也可以嵌套。HTML常见标签：http://www.xuanfengge.com/funny/html5/element/标签
AhuntSun·2019-12-04 13:00

htm5 css学习笔记整理

点击链接后退页面：回到上一个网页——修改placeholder提示的样式：1.除IE外通用写法类名或标签名::placeholder{color:red;}2.加兼容前缀写法css超出一行显示省略号：给定宽度(width:100px)、超出隐藏（overflow:hidden）、强制在同一行显示（white-space:nowrap）、省略号（text-overflow:ellipsis）——常见
NEWNGAPI·2019-11-26 03:00

scss学习笔记

一、scss是什么？Sass有两种语法格式。首先是SCSS(SassyCSS),也是本参考资料示例所使用的格式,这种格式仅在CSS3语法的基础上进行扩展，这意味着每个CSS样式表是一个同等的SCSS文件。此外，SCSS也支持大多数CSShacks写法以及浏览器专属前缀语法(vendor-specificsyntax)，例如，IE古老的filter语法。这种语法的样式表文件需要以.scss作为拓展名
秦语川·2019-11-18 08:28

CSS入门学习笔记

CSS学习笔记CSS＝层叠样式表cascadingstylesheetsHTML表达结构，CSS表达样式样式和内容／结构是分离的加入CSS的方式做一个web的CSS文件在头部加入标记，定义规则单个标记里面
歌白梨·2019-11-08 20:26

HTML+CSS学习笔记 (11) - CSS盒模型

元素分类在讲解CSS布局之前，我们需要提前知道一些知识，在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。常用的块状元素有：、、...、、、、、、、常用的内联元素有：、、、、、、、、、、常用的内联块状元素有：、元素分类--块级元素什么是块级元素？在html中、、、、和就是块级元素。设置display:block就是将元素显示为块级元素。如下
王隆帅·2019-11-07 12:57

CSS学习笔记1：引入CSS文件

引入CSS主要有3种方式：引入外部样式表、使用内部样式表和行间样式。1.外部样式表常见的标签引入rel和href属性不可省。type和media属性可以省略不能混入HTML标签，包括HTML的注释，否则会影响标签之后的css样式的识别可以加载多个样式表可以有候选样式表，用“alternatestylesheet”标注@import引入外部样式表但是必须在style标签内引入，并且至于CSS规则之前
Nikkkki睡不醒·2019-11-05 11:55

2017-02-17 css学习笔记

背景颜色如何设置标签的背景颜色在css中有一个background-color:属性，就是专门用来设置标签的背景颜色的取值具体单词rgbrgba十六进制div{width:500px;height:500px;}.box1{background-color:red;}.box2{background-color:rgb(0,255,0);}.box3{background-color:rgba(0
GodlinE·2019-11-04 04:36

CSS学习笔记（一）

一：CSS了解CSS概述：CSS指层叠样式表(CascadingStyleSheets)样式定义如何显示HTML元素样式通常存储在样式表中把样式添加到HTML4.0中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在CSS文件中多个样式定义可层叠为一层叠次序当同一个HTML元素被不止一个样式定义时，会使用哪个样式呢？一般而言，所有的样式会根据下面的规则层叠于一个新的
朝槿123·2019-11-03 05:34

Html和css学习笔记（w3school+慕课网）（一）

Html和css学习笔记（w3school+慕课网）（一）tip：以下是个人防遗忘而在w3school和慕课网上重新复习基本的HTML和CSS知识所做的笔记,有不足之处望指正。
恰皮·2019-11-02 12:30

CSS学习笔记 | 语法规范 代码风格

CSS学习笔记本文内容：一、CSS简介1.简介2.语法规范3.代码风格3.1样式格式书写3.2空格规范一、CSS简介1、简介CSS是层叠样式表的简称，也称之为CSS样式表或级联样式表。
hz0220·2019-10-26 11:15

HTML&CSS学习笔记

学习总结：重要三部分（CSS规则，盒子，布局）一、常见标签块级标签/内联标签什么是块级标签：1、独占用一行，不和其他元素同在一行上2、能设置宽高块级标签：p、h1-h6、ul、li、dl、dt、dd什么是内联标签：1、不会独占一行，紧跟在其他内联标签后面2、不能设置宽度内联标签：a、span、input、img等二、CSS规则外部CSS样式/内部CSS样式1）外部样式的使用使用link来链接到cs
那个杰克·2019-10-05 11:00

css学习笔记之position属性

static（静态定位/常规定位/自然定位）：作用：使元素定位于常规/自然流中（快、行垂直排列下去，行内水平从左到右）特点：1.忽略top、bottom、left、right、z-index声明2.两个相邻元素设置外边距，最终外边距=两者中的外边距最大值3.具有固定width和height值的元素，如果把左右外边距设为auto，则这个元素水平居中relative（相对定位）：作用：使元素成为con
good_night_9527·2019-10-03 22:48

css学习笔记

文章目录cssblockinlineinline-block行高垂直居中CSS继承细线边框padding会让盒子变大插入图片和背景图片的区别外边距合并盒子的大小盒子的圆角盒子阴影浮动浮动的特性清浮动定位静态定位相对定位绝对定位子绝父相绝对定位的盒子水平/垂直居中固定定位模式转换**z-index**其他outlineresizevertical-alignword-breakwhite-space
chaleaoch666·2019-10-02 20:41

CSS学习笔记(十) 样式覆盖规则

有的时候CSS真的十分调皮，明明我们给一个元素指定了样式，但是在页面上却没有一点改变这时我们就要考虑是不是别处指定的样式覆盖了当前指定的样式呢？所以了解一下样式覆盖规则还是十分有必要的，对于一个元素的某个属性而言，表现出来的样式会遵循以下的规则（1）内联样式>内部样式表/外部样式表#title{color:red;}/*内部样式表*/HelloWorld【最终效果（内联样式优先）】HelloWor
wsmrzx的博客·2019-10-02 16:00

Animate.css学习笔记。

Animate.css:(1)引入animate.css文件(2)给指定的元素加上指定的动画样式名这里包括两个class名，第一个是基本的，必须添加的样式名，任何想实现的元素都得添加这个。第二个是指定的动画样式名。(3)如果说想给某个元素动态添加动画样式，可以通过jquery来实现：$("#yourElement").addClass("animatedbounceOutLeft");(4)当动画
zs_staria·2019-09-23 06:32

CSS学习笔记——选择器的使用

CSS的使用1、作用：美化与布局界面2、引用语法：A)内部：在HTML页面内通过style标记设置，仅供当前页面内使用B)外部：单独定义一个样式表文件（以CSS作为后缀名）在HTML页面中用标记（href属性指定CSS文件路径，rel指定文件与页面的关系，或固定为stylesheet；或style标记添加@import指令引入，可以供多个页面使用）C)行内：在HTML页面内，通过style属性进行
闲小憨·2019-09-18 00:53

CSS学习笔记二

盒子模型：（重点）盒子模型（CSS框模型）规定了元素框处理元素内容、内边距、边框、外边框等样式记住上面这一张图！一定要记住！一定！一定！内边距、边框和外边距是可选参数属性，默认值：0；很多元素由用户代理样式表设置外边距和边框，通过将元素的margin外边距和padding内边距设置为0来覆盖这些浏览器样式在CSS中，width和height指的是内容区域的宽度和高度；增加内边距、边框和外边距不会影
王宇阳·2019-09-01 14:00

CSS学习笔记一

CSS选择器：CSSid选择器：id选择器可以为标有特定id的HTML元素指定特定的样式id选择器是以“#”来定义的Node#red{color:red;}#green{color:green;}id选择器：red--红色id选择器：green--绿色id选择器常建立派生选择器#sidebarp{font-style:italic;text-align:right;margin-top:0.5em
王宇阳·2019-08-31 22:00

CSS学习笔记——渐变背景，浮动排列

有时候，为了网页的美化，会对网页的背景进行加工。背景的渐变效果便是其中之一，但是单纯的使用颜色的渐设计使用比较少。在学习的过程中，了解的渐变的大致实现，主要是了解alpha的属性及代表意义。以及float浮动的应用实现块元素或者图片的布局。1）渐变背景核心语法：{filter:Alpha(Opacity=value,Finishopacity=value,Style=value,Startx=va
闲小憨·2019-08-11 08:14

htmlcss学习笔记

iframe里有一个srcdoc属性，很有用！window.location.href=document.referrer//可以实现返回上一级页面并刷新HTML5权威指南©®，比较老的书了，有些知识过时了！！！HTML5高级程序设计也是比较老的书了。0.0一些网站：http://caniuse.com/查询浏览器支持情况https://www.w3.org/html/【w3c的html首页】ht
everest33·2019-08-10 18:00

CSS学习笔记03--常用选择器

目录1.元素选择器2.id选择器3.类选择器4.选择器分组（并集选择器）5.通配选择器6.复合选择器（交集选择器）7.后代元素选择器8.子元素选择器9.伪类选择器1）：link2):visited3）：hover4):active5):focus6)::selection10、伪元素选择器1）:first-letter2):first-line3):before4）:after11.属性选择器12
Bee_Darker·2019-07-14 22:47

CSS学习笔记

css学习笔记在html引入css的三种方式嵌入p1{background-color:#00500F;font-size:2em;text-align:center;}内联HelloWorld！
goasleep·2019-07-03 15:05

CSS学习笔记

CSS(CascadingStyleSheets)层叠样式表，用来描述HTML或XML文档的呈现。CSS1现已废弃，CSS2.1为推荐标准，CSS3正在标准化中。CSS的四种引入方式：内联、即在HTML文本中添加style属性；style标签；border:1pxsolidred;外部文件引入；@importurl(a.css);@importurllist-of-media-queries;CS
不明suoyi·2019-07-02 23:38
上一页 5 6 7 8 9 10 11 12 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他