css学习笔记

Html和Css学习笔记-html进阶-div与span

此篇博客是我的复习笔记，html和css学的时间太久了，忘得差不多了，最近要使用一下，所以重新打开html的书略读，后记录了标签，元素，属性的具体意义。这里所介绍的html和css的版本为html5与css3Html是超文本标记语言（英语全称：HyperTextMarkupLanguage，简称：HTML）是一种用于创建网页的标准标记语言Css是层叠样式表(英文全称：CascadingStyleS
weixin_30590285·2019-03-06 15:00

css和scss、sass的关系

scss学习笔记1.css和scss、sass的关系？css样式是用来修饰网页页面结构的。要了解css和scss、sass的关系就要从预处理器开始说起。
ass_ace·2019-02-24 11:05

html+css学习笔记005-font属性0text属性

Author：Mr.柳上原付出不亚于任何的努力愿我们所有的努力，都不会被生活辜负不忘初心，方得始终像我这样的人最近总是单曲循环的播放着这首《像我这样的人》听很久都不会觉得腻或许这首歌最大的魅力就是共鸣“像我这样迷茫的人像我这样寻找的人像我这样碌碌无为的人像我这样孤单的人像我这样傻的人像我这样不甘平凡的人世界上有多少人”前端59期学员作业/*内部样式表*/font:10px/20px'Microso
Mr柳上原·2018-12-10 11:28

css学习笔记(七)

我们html只是对网页的一种基本结构,而网页想美化和各种布局还是要依赖css,其中布局是很重要的一块,盒子模型就看做是一个矩形,而网页就是各种矩形组成的,当然矩形里面还可以放置其他矩形,其中div标签就是最典型的盒子.盒子中的区域一个盒子中主要的属性就5个：width、height、padding、border、margin。如下：width和height：内容的宽度、高度（不是盒子的宽度、高度）
zhoushenxian·2018-11-25 23:03

css学习笔记(六)

css三大特性1层叠性:就是对同一个标签设置了相同的属性后,后面的会把前面设置的属性覆盖掉,就好比Java中的子类去复写了父类中的方法css学习p{color:red;font-size:30px;}p{color:bisque;}今天天气真好比如上面的p标签color属性就发生了层叠,而font-size还是使用第一个设置的属性30.很好理解,就是一个就近原则问题,当发生层叠时候,谁离p标签近就
zhoushenxian·2018-11-25 10:30

css学习笔记(二)

今天学习下后代选择器和子代选择器后代选择器:就是某个块级标签的子标签就是后代选择器css学习divp{color:cadetblue;}1111122223333344444上面的divp{}就是后代选择器的语法格式中间用空格分开,空格表示所有的意思后代选择器也包含选择器是一种从属关系子代选择器:css学习ulli>a{color:red;}bat百度腾讯阿里巴巴比如我单独想标签中的bat字体变成
zhoushenxian·2018-11-24 16:13

css学习笔记(一)

今天学习下文本字体相关的属性1:font-size表明字体大小的单位是px(像素)2:color:表示字体的颜色3:font-style:表示字体的风格,这个属性只有三个值可以设置normal-文本正常显示italic-文本斜体显示oblique-文本倾斜显示4:font-weight表示文字字体的粗细有如下属性值属性值：normal|bold|bolder|lighter|100|200|300
zhoushenxian·2018-11-24 15:50

CSS学习笔记（2018-07-29）

CSS学习笔记CSS指层叠样式表(CascadingStyleSheets)CSS语法CSS规则由两个主要的部分构成：选择器，以及一条或多条声明:CSS实例选择器通常是需要改变样式的HTML元素。
Allenem·2018-08-25 11:31

CSS学习笔记四——水平垂直居中/文字图片对齐/多列布局/圣杯布局&双飞翼布局

css布局考察的知识点比较综合，基本就是使用上了所有css的基础技巧，以下是一些比较常见的场景总结。水平居中方法一：定宽+margin:0auto我是子元素.child{width:100px;margin:0auto;}方法二：行内元素inline-block+text-alignxxxdiv.txtCenter{text-align:center;}.imgCenter{text-align:
Rocky_Wong·2018-08-10 23:35

CSS学习笔记二—— 样式引入方式，伪类，块与内联，继承属性

样式引入方式link标签没有兼容性问题还可以引入图标等资源在页面加载的时候同时加载css文件可通过js控制dom操作样式import引入兼容性问题css2.1IE5网页加载完后再加载css文件，所以会出现闪烁现象不可通过js修改样式只能引入样式文件，但是可以在css文件里再引入css文件推荐书写@importurl(style.css)伪类:before:after::before和:before
Rocky_Wong·2018-08-05 23:28

LESSCSS学习笔记

LESSCSS学习笔记LESSCSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。
qq_36992097·2018-07-04 11:24

写给小白的CSS学习笔记

最近准备开始复习学过的一些内容，目前参考了石川老师在《Web前端知识体系精简》中对HTML、CSS、JS总结的框架，同时也会补充在其他地方看到的内容，按照主题来总结学习内容。写完的主题我会在这篇笔记当中实时更新链接，末尾是根据石川老师的总结画的思维导图，只包含了框架，后面在主题复习的过程中，我会慢慢完善这个导图。复习内容（更新中）：引入CSS文件CSS选择器类型CSS声明权重CSS思维导图
Nikkkki睡不醒·2018-06-08 11:17

CSS学习笔记第一天

今天的学习内容：-----------------------------------------------------正文------------------------------------------------------------如果要在HTML元素中设置CSS样式，有三种方式，id选择器，class选择器，还可以指定特定的HTML元素使用class注意，id和类名的第一个字符均不
Dai_Aixy·2018-06-02 23:47

css学习笔记（position）

今天写这篇学习笔记主要是为了记录一下对我来说有一点容易混淆和容易遗忘的css知识点，position。根据css3参考手册，position有以下几个属性position：static|relative|absolute|fixed|center|page|sticky默认值：static适用于：除display属性定义为table-column-group|table-column之外的所有元素
陈洗个·2017-12-11 04:11

2017-10-10

【CSS学习笔记－元素水平垂直居中】分享自@SegmentFault，传送门：https://segmentfault.com/a/1190000004197311
quyang·2017-12-11 02:58

CSS学习笔记

1.CSS基本概念1.1CSS的定义CSS(CascadingStyleSheets)层叠样式表，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式1.2CSS样式规则CSS在书写时需要遵循一定的规范，也就是CSS的样式规则，具体格式如下：h1{font-size:12px;color:#f00;}/*选择器{样式属性1
寥寥十一·2017-11-20 17:15

【css学习笔记】理解利用css的border属性制作三角形的原理

css中有很多东西咋一看觉得非常简单，容易上手使用，但随着逐步深入了解之后才会恍然觉得自己并没有理解其中的真正含义。比如利用border属性制作三角形的原理。1、用最简单的代码实现一个盒子，并为其设置宽度、高度和border，并未border的四条边设置不同的颜色：2、假如将盒子的宽度设置为0px：3、同理设置盒子的高度为0px：4、到这一步似乎有了一些灵感，将其中一边的border颜色设置为tr
搬砖工1331·2017-11-07 16:56

css学习笔记之滑动门

学习来源：http://www.cnblogs.com/xiaohuochai/p/5025394.html三层嵌套可扩展适用于nav为了使滑动门自适应长度，最外层不固定width，而是用display：inline-block。把中间放最外层也可以，那就不能用margin值来使透明的圆角不被覆盖，可以让左右两边用相对定位，移出去，让透明圆角露出来。最好把中间部分放最里面然后中间部分左右各设置ma
蔻蔻a·2017-08-01 16:52

css学习笔记（二）

1、css中关于修饰字体外观的属性大致有font-family（字体）、font-weight（字的粗细）、font-style（字是否倾斜）、font-size（字的大小）和color（颜色）。2、常用的字体有serif和sans-serif，但是网页浏览者看到的最终字体样式取决于电脑上的字体。3、用px、em、%和关键字来定义字体的大小。如果用像素（px）定义字体大小，就是规定浏览器中字母的高
Alexandrina_Victoria·2017-07-29 17:37

css学习笔记之line-height

/*只是记录下前端学习过程中的笔记有错误麻烦各位大佬一定指正啊别让我这个渣渣保留错误的想法跪谢了：）先说好喔新手看我的笔记大概会被我搞晕我是按自己思路写的网上有很多大佬好的总结最好别太记忆我写的恶心巴拉的笔记祝好运哦学习来源：http://blog.csdn.net/q121516340/article/details/51483439https://www.slideshare.net/daem
蔻蔻a·2017-07-20 12:49

css学习笔记-border

border定义：元素外边距内就是元素的边框。元素的边框就是围绕元素内容和内边距的一条或者多条线。因此，元素的背景会在外边框边界处停止，因为背景不会延伸到外边距以内，而边框就在外边距内部。每个方向的边框都有三个方向:宽度或者粗细样式或者外观颜色边框宽度:一般边框宽度的默认值为medium，大概2个像素，thin、medium、thick这些关键字不一定对应某个特定的宽度，它们只是相对定义，根据规范
fXy_during·2017-07-17 20:50

CSS学习笔记（五）--CSS样式之字体

CSS字体系列通用字体Serif字体Sans-serif字体Monospace字体Cursive字体Fantasy字体font-family定义文本的字体系列。body{font-family:sans-serif;}组合字体h1{font-family:Georgia,serif;}通过结合特定字体名和通用字体系列来解决没有安装Georgia字体，使用默认字体字体风格font-style最常用于
五秋木·2017-07-15 20:23

CSS学习笔记（四）--CSS样式之文本

缩进文本text-indent属性最常见的用途是将段落的首行缩进，下面的规则会使所有段落的首行缩进5em：p{text-indent:5em;}可以为所有块级元素应用text-indent，但无法将该属性应用于行内元素.。text-indent还可以设置为负值，可以实现很多有趣的效果，比如“悬挂缩进”，即第一行悬挂在元素中余下部分的左边：p{text-indent:-5em;}段落设置了负值，那么
五秋木·2017-07-15 20:20

CSS学习笔记（三）--CSS样式之背景

1.背景色全局背景色body{background-color:yellow}标记符元素背景色h1{background-color:#00ff00}h2{background-color:transparent}p{background-color:rgb(250,0,255)}元素基于它们的类而被选择：p.no2{background-color:gray;padding:20px;}在正文中
五秋木·2017-07-15 15:18

css学习笔记

CSS的使用方式style属性--->style标签--->head标签里面link--->三种基础选择器的区别html标签选择器：所有的html标签都可以当做选择器无论标签藏多深都会被选中选择的是所有的标签而不是某个具体的标签id选择器：任何的标签都可以有id属性和属性值id不能够重复class选择器：任何的标签都可以使用class属性class属性名可以重复使用一个class属性中，可以有多个
咖啡少女不加糖。·2017-06-26 12:00

css学习笔记－盒子的样式

display的几种参数1.inline和blockinline,在一行中不会换行，内联属性不可设置盒子大小，且不会自动换行。block,不在一行会自动换行，可设置盒子的大小默认下，span是inline的，div是block的 div{ background-color:aqua; } span{ background-color:crimson; } h1{ background-c
tjzhuorui·2017-06-16 15:00

HTML CSS学习笔记(二)-----页面布局

padding&margin有三个影响HTML元素布局的重要属性：padding(内边距)、margin(外边距)、border(边框)。使用padding布局页面标签元素的padding控制元素内容content和元素边框border之间的距离。语法结构（1）padding-left:10px;左内边距（2）padding-right:10px;右内边距（3）padding-top:10px;上
QinChBeSt·2017-05-10 17:20

HTML CSS学习笔记(一)

标签h是英文header标题的缩写，标题无处不在，它的应用范围十分广泛：网站结构、写作文、PPT等。h1是主标题，h2是副标题，h3、h4、h5、h6依次递减字体的大小。P是英文paragraph段落的缩写，经常被用来创建一个段落，就和你写作文一样。HTML更换文本的颜色style(样式)TEXT使用CSS选择器定义标签h1{color:red;}text注意：一定要在属性值的后面加上分号;。设置
QinChBeSt·2017-05-10 15:25

CSS学习笔记（二）

一：CSS轮廓##轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。CSSoutline属性规定元素轮廓的样式、颜色和宽度。实例设置4个边框的样式：p{outline:#00FF00dottedthick;}**outline定义和用法**outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。注释：轮廓线不会占据空间，也不
朝槿123·2017-03-23 13:44

CSS学习笔记（五）--CSS3

CSS边框CSS3新属性：CSS背景CSS3新属性：CSS文本效果CSS3文本阴影:text-shadow:5px5px5px#FF0000;水平阴影、垂直阴影、模糊距离，以及阴影的颜色CSS3自动换行:word-wrap:break-word;（word-wrap属性允许您允许文本强制文本进行换行）CSS3新属性：CSS字体CSS3新属性：
runnerxin·2017-03-19 17:47

head first html与css学习笔记（一）

增加字体和颜色样式1.font-family字体font-weight粗细font-size字体大小font-style字体样式color字体颜色text-decoration文本装饰2.font-family是一组有共同特征的字体。3.用于web的字体系列包括serif,sans-serif,monospace,cursive,fantasy.serif和sans-serif字体最为常用。4.在
1ee1·2017-03-03 16:13

css学习笔记之浮动清除

1.BFC说到浮动，不得不说一下BFC（BlockFormattingContext),翻译为“块级格式化上下文”。关于BFC的原理，我参考了此篇文章，BFC参考资料，大家有需要可以去看看。2.清除浮动的方法2-1.为父元素增加高度height。body{width:1000px;margin:0auto;}.divone{width:800px;background:#00ff00;height
JiaoPh12138·2017-02-27 19:42

css学习笔记（一）

1.层叠规则1.找出所有相关规则。2.按显式权重对应用到该元素的所有声明进行排序，权重由大到小的顺序为：读者的重要声明-创作人员的重要声明-创作人员的正常声明-读者的正常声明-用户代理声明3.按特殊性对应用到元素的所有声明排序。4.按出现的顺序对声明排序2.盒子3D模型一共分为5层，从上到下依次为:bordercontent,paddingbackground-imagebackground-co
星月西·2017-02-27 15:39

2017-02-21 CSS学习笔记 am

浮动元素高度问题在标准流中内容的高度可以撑起父元素的高度在浮动流中浮动的元素是不可以撑起父元素的高度的清除浮动方式一第一种方式给前面一个父元素设置高度注意点：在企业开发中，我们能不设高度就不设高度，所以这种方式用的很少.box1{height:20px;background-color:red;}.box2{background-color:green;}清除浮动方式二清除浮动的第二种方式给后面的
GodlinE·2017-02-21 13:03

CSS学习笔记9：清除浮动

在实际操作中，一般不会给父亲盒子设置高度，它的高度是随内容增加自适应的高度。浮动盒子不属于文档标准流，父亲盒子里的元素浮动后，就脱离了标准文档流，所以无法撑高父亲盒子，父亲盒子的高度为0，也就会出现父亲盒子不会自动伸高来闭合浮动元素的现象。但是，在实际布局中，我们并不希望这样，所以需要闭合浮动元素，使其父亲盒子表现出正常的高度。为了解决这个问题，我们就要清除浮动。清除浮动的方法有4种：一、给浮动的
远春Python·2017-02-12 20:18

CSS学习笔记：浮动

浮动float:left;float:right;float:none;CSS的float属性可以使一个元素脱离正常的文档流，然后被安放到它所在容器的的左端或者右端，并且其他的文本和行内元素围绕它安放。浮动元素会以某种方式将浮动元素从文档的正常流中删除，普通流中的框会表现得像浮动不存在一样，但是框的文本内容会受浮动元素的影响，从而造成文本环绕的效果。浮动元素周围的外边距不会合并。如果要浮动一个非替
gigi就是我·2016-11-17 20:19

Head first HTML&CSS学习笔记

通过来告诉浏览器关于web页面的信息。总出现在浏览器窗口的顶部。是你看到的东西。css在html文件中嵌套：xxx使用元素创建一个超文本链接，链接到另一个web页面；元素的内容会成为web页面中可单击的文本；href属性告诉浏览器链接的目标文件。H5支持定制数据属性，允许为新属性构造定制的属性名。href：“超文本引用”（hypertextreference），就是互联网或者你的计算机上的一个资源
ShorewB·2016-10-06 17:34

DIV+CSS学习笔记总结篇

转载请声明原文链接地址关注公众号获取更多资讯第一部分HTML第一章职业规划和前景职业方向规划定位：web前端开发工程师web网站架构师自己创业转岗管理或其他web前端开发的前景展望：未来IT行业企业需求最多的人才结合最新的html5抢占移动端的市场自己创业做老板随着互联网的普及web开发成为企业的宠儿和核心web职业发展目标：第一、梳理知识架构负责内容的HTML负责外观的css（层叠样式表）负责行
poetries·2016-09-03 21:00

css学习笔记:常用样式

CSS1.CSS概述  层叠样式表  作用：控制页面的显示效果，最终用HTML去展示页面内容，用CSS样式去控制页面内容的显示效果      注释用/*   */2.CSS和HTML结合的方式1.属性style结合方式(行内样式)在标签中写style属性.   style="属性：值"2.style标签结合(内嵌方式)code....3.Link标签进行结合(最常用的)1.先定义外部样式文件2.引
helios1988·2016-05-09 09:00

CSS学习笔记

CSS3模块css3被划分为模块。被分为选择器，框模型，背景和边框，文本效果，2D/3D转换，动画。多列布局，用户界面。1.css3边框border-radius圆角边框box-shadow边框阴影border-image边框图片2.css3背景background-size规定背景图的尺寸。默认值是auto。length:（宽度|高度），设置背景图片的高度和宽度。percentage(宽度|高度
yingzhicai·2016-04-16 23:00

HTML/CSS学习笔记

定义：HTML是用来描述网页的一种语言。CSS样式则定义如何显示HTML元素。HTML用来布局，对HTML语言来讲，语义化是它所看重的。目前对于html语义化意义的理解：1）html语义化可以让文档在没有css的情况下，页面也能够比较好地呈现出内容结构、代码结构；2）html语义化可以方便其他设备更好地解析。例如可以让机器更好地解析这篇文档，在阅读一篇html文档时可以理解这篇文档的内容，比如遇到
haimianxiaojie·2016-04-09 13:00

[HeadFirst-HTMLCSS学习笔记][第十四章交互活动]

表单 Justtypeinyourname(andclickSubmit)toenterthecontest: Fristname: Lastname: action响应的脚本method传递方式表单元素提供文本输出 提供控件提交 单选钮输入 多选项输入 文本输入框//初始文本 菜单控件 BuckarooBanzai PrefectTommy PennyPriddy number数
zy691357966·2016-04-03 10:00

[HeadFirst-HTMLCSS学习笔记][第十三章表格]

表格-table块tr行tablerowth表头tableheadtd表数据tabledata;caption表格标题 ThecitiesIvisitedonmySegway'nUSAtravels City Date Temperature Altitude Population DinerRating WallaWalla,WA June15th 75 1,204ft 29,686
zy691357966·2016-04-03 10:00

[HeadFirst-HTMLCSS学习笔记][第十二章HTML5标记]

考虑HTML结构HTML5即是把原来换成一些更特定的元素。能够更明确指示包含什么内容。（页眉，导航，页脚，文章）articlenav导航headerfootertimeaside边框section元素定义文档videocodemark标记audio声音progress进度meter范围canvas图像动画figure独立的内容就是这么简单而已time元素如果没有按标注video元素controls
zy691357966·2016-04-03 10:00

[HeadFirst-HTMLCSS学习笔记][第八章扩大你的词汇量]

字体font-family，可指定多个候选body{ font-family:Verdana,Geneva,Arial,sans-serif; } font-size字体大小body{ font-family:sans-serif; font-size:14px; } h1{ font-size:150%; } h2{ font-size:1.2em; } p{ font-size:100%; }
zy691357966·2016-04-03 10:00

[HeadFist-HTMLCSS学习笔记][第七章CSS入门：加一点样式]

CSS入门style元素设置CSS基本格式 body{background-color:#eaf3da;} p{ border:1pxsolidgray; } 给多个元素同一个css，加,h1,h2{ } 继承与覆盖继承link加载css文件 type能被省略 class为所有class指定css CSS:p.greetea{ color:green; } 如果所有greetea都要用的话：.
zy691357966·2016-04-03 10:00

[HeadFirst-HTMLCSS学习笔记][第六章严格的HTML]

远古古老的html4.01和XHTML1.1页面必须用Doctype挑明，再html元素上面html4.01 XHTML1.1 html5 工具在https://validator.w3.org验证自己的网页是否符合标准字符标准标记 一般放head里其他版本的meta标记更麻烦 总结HTLM5是一个活的标准
zy691357966·2016-04-03 10:00

[HeadFist-HTMLCSS学习笔记][第五章认识媒体]

图像格式PNG多种颜色透明无损压缩PNG-8，PNG-16，PNG-32多用于logoGIF动画256色无损JPEG不能透明多用于照片imgURL能插入alt属性=如果无法显示图像，浏览器将显示替代文本width属性=宽度height属性=高度//像素数尽量少用w和h来压缩图像，因为浏览器还是会加载原图像，用ps改善于使用缩略图然后用链接打开原图！用photoshopelements来简单修改图片
zy691357966·2016-04-03 10:00

[HeadFist-HTMLCSS学习笔记][第四章Web镇之旅]

重要访问一个目录，即是访问他的index链接到网站，必须加http://的title属性，能预先知道链接信息id属性使得能再本地跳转.使用#来指定June2,2012 jump target属性target="_black"从新窗口打开链接 target="coffee"给新窗口命名，再coffee窗口打开 不怎么重要file协议file:/// 正常服务都在80端口
zy691357966·2016-04-03 10:00

[HeadFirst-HTMLCSS学习笔记][第三章创建网页]

一些基本元素以下元素都可以用CSS变得更好看q,,,,,ol,ul,li,pre,code,time元素短引用内联元素效果是这样ddddddddd一般是双引号长引用块元素在Githubcss中是这样HelloIamblockquate一般只是缩进了强调斜体提供回车符void元素==dd==**dd**加粗列表元素有序列表ol+liorderlist+listitem无序列表ul+liunorder
zy691357966·2016-04-03 10:00
上一页 6 7 8 9 10 11 12 13 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他