由于之前有了解过CSS的相关知识,有了一定的基础,所以读起<CSS 那些事儿>不是很有难度,况且我现在读起来时,CSS3和HTML5比较流行,这里只是记录一些CSS知识记录,不做详细铺开,以做记录和日后翻查之用. 1.CSS的基本结构 Selector {property:value;} 由 选择符(Selector ),声明({}),属性(property),属性值(value)组成: 2.CSS的简写 颜色的简写: 有以下几种形式: #RRGGBB(16进制),RGB(125,0,255)…

每个人都应该学写代码——这一观点简直就是铺天盖地地映入我们眼帘.或许你会莫名其妙,程序员学代码那是理所应当,但是作为一个作家.营销人员.财务工作者甚至是工人,为什么也需要学习代码呢? 好吧,下面我会告诉你为什么懂点 HTML 和 CSS 会让你的职业生涯发生巨大的改变.学习技术不仅仅是生产助理亦或是印刷设计师的事——无论你是小企业主.销售经理.事件协调员还是魔术师,都能让你受益于 HTML 和 CSS 知识. 不要怀疑,让我给你 9 大理由,看看能不能说服你. 1. 为客户设计超棒的电子邮件 电…

CSS知识3 框模型: 一,外边距(上文) 二, 内边距    1,什么是内边距? 内边距就是内容与元素边缘之间的距离: 注: 内边距会扩大元素边框内所占的区域的 语法: padding: 四个方向的内边距 padding-top / right / bottom / left  : 值 ; 取值:(1)以px为单位的数值: (2)以% 为单位的数值: padding 的简洁写法: padding:value  四个方向内边框: padding:v1  v2  ; 上下, 左右: padding…

CSS知识2 一, 尺寸 与 边框 CSS单位 1,尺寸单位:(1)px 像素   (2)%   (3) in 英寸  lin = 2.54cm (4)pt 磅 1pt = 1/72in    ppi : Pixel  Per  Inch = 72 (5)mm 毫米(6)cm厘米 2,颜色单位(取值) (1) rgb(r , g, b): r : red  (0-255) g: green (0-255) b: blue (0-255) eg:  rgb(255,0,0) rgb(0,0,0)…

第三篇, CSS知识1 一,CSS 介绍 CSS: Cascading Style Sheets ---样式表 HTML: 搭建网页结构: CSS: 在网页结构基础上进行网页的美化: 二,CSS的使用方法: 1,内联方式: 将css内容定义在单独的HTML元素中: 语法: <ANY  style='样式声明'> 样式声明:(1)每个样式声明都是由样式属性名称和样式属性值来组成的:(2)属性名称和属性值之间使用 : 连接(属性名:值):(3)在一个style中允许出现多个样式声明, 多个样式声明…

收藏HTML和CSS方面的技术文章,作为一个WEB开发者,必须要知道HTML和CSS方面的知识,即使作为后台开发者也应该知道一些常用的HTML和CSS知识,甚至架构师也要了解,这样才会开发出实用的网站来 <HTML与CSS知识>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/201715.html 文章 详解CSS(层叠样式表)渐进增强 详解css 定位与定位应用 精简CSS文件 使您的CSS网页布局代码更专业 DIV CSS网页布局 让…

以前开发者只要掌握 HTML.CSS.JavaScript 三驾马车就能胜任一份前端的工作了.而现在除了普通的编码以外,还要考虑如何性能优化,如何跨端.跨平台实现功能,尤其是 AI.5G 技术的来临,都在加快前端技术的更新,也在逼促开发者要不停的学习,不能的接受新的技术标准. “学什么”“怎么学”其实是我们要着重解决的问题.所以,今天给你梳理一下前端知识框架,帮你把知识点重新做个遍历,查缺补漏的学习更轻松. 我们先来看什么叫做知识架构? 我们可以把它理解为知识的“目录”或者索引,它能够帮助我们把…

---# 学习目标:> 1. 学会使用CSS选择器> 2. 熟记CSS样式和外观属性> 3. 熟练掌握CSS各种选择器> 4. 熟练掌握CSS各种选择器> 5. 熟练掌握CSS三种显示模式> 6. 熟练掌握CSS背景属性> 7. 熟练掌握CSS三大特性> 8. 熟练掌握CSS盒子模型> 9. 熟练掌握CSS浮动> 10.熟练掌握CSS定位> 11.熟练掌握CSS高级技巧强化CSStypora-copy-images-to: media---…

我收藏的技术知识图(每张都是大图) HTML5Linux/Unix系统设计思想读书笔记 LinuxMVCJava线程MVCSpring MVCCSS3Nginx架构VimCliCommandsPHP知识卡Linux安全知识表 JDK JVM机会HTML5介绍开源协议HTML5移动UED用户体验IT常识Linux系统调用列表 YII架构的典型流程Android系统架构一致性Hash算法CouchDBCss知识表CSS位置如何获取的从MySQL到MongoDB前端工程师知识系Git命令分布式Java…

在制作网页中,我们会用到很多CSS的知识,在这里我简单的总结了一些. div    划分区块 ul,li 无序列表(配合划分区块) ol,li 有序列表 a 超链接标签 p 段落标签 h 标题标签 img 向网页插入图片 input 输入框 text-align:center              文本文字居中 text-decoration:none    去下划线 list-style:none 去掉列表前缀 display:block 变为块级元素,然后就可以设置宽高那些了 float…

css实现元素的水平垂直居中. (尝试采用5W2H方法说明): 别只看,请实操!!! What: 1.这篇文档主要描述元素水平方向居中的几种最常见和最实用的几种方式,并说明优缺点. 2.写这篇文章的目的,是为了巩固自己的知识,也分享给大家一起学习研究,欢迎大家指正和评论. Why: 需要水平居中的原因,就是为了让元素位于视觉中心突出重点,可视化布局的简介明了,主题明确,提高用户体验度. When: 我是星期六下午开始编写,一直到晚上12点. 对于你自己,如果你感觉自己对这些掌握还不牢靠,请立刻!…

css实现元素的垂直居中. (尝试采用5W2H方法说明): 别只看,请实操!!! What: 1.这篇文档主要描述元素水平方向居中的几种最常见和最实用的几种方式,并说明优缺点. 2.写这篇文章的目的,是为了巩固自己的知识,也分享给大家一起学习研究,欢迎大家指正和评论. Why: 需要水平居中的原因,就是为了让元素位于视觉中心突出重点,可视化布局的简介明了,主题明确,提高用户体验度. When: 我是星期六下午开始编写,一直到晚上12点. 对于你自己,如果你感觉自己对这些掌握还不牢靠,请立刻!马上…

css实现元素的水平居中. (尝试采用5W2H方法说明): 别只看,请实操!!! What: 1.这篇文档主要描述元素水平方向居中的几种最常见和最实用的几种方式,并说明优缺点. 2.写这篇文章的目的,是为了巩固自己的知识,也分享给大家一起学习研究,欢迎大家指正和评论. Why: 需要水平居中的原因,就是为了让元素位于视觉中心突出重点,可视化布局的简介明了,主题明确,提高用户体验度. When: 我是星期六下午开始编写,一直到晚上12点. 对于你自己,如果你感觉自己对这些掌握还不牢靠,请立刻!马上…

后端工程师虽然大部分工作都是跟服务器缓存数据库打交道,但有时也需要写一些前端代码. 有些公司的OAM后台基本是由后端工程师承包的,所以前端基础知识是必须要掌握的:就算开发中不直接写前段代码,了解前端知识能让我们跟前端小伙伴更愉快的交流. Js对于后端小伙伴来说不算难点,能够顺手的使用(当然十分依赖 jQuery),涉及到 css 就会有点懵逼了. 后台开发一般不会用到太难的前端技巧,能够在完成正确布局的基础上,再稍微做一些美化,就已经够用了. 下面的内容有一些代码样例,这是一部分前置的 css…

CSS常用样式 10.自定义动画 1)关键帧(keyframes) 被称为关键帧,其类似于Flash中的关键帧. 在CSS3中其主要以“@keyframes”开头,后面紧跟着是动画名称加上一对花括号“{…}”,括号中就是一些不同时间段样式规则. 语法:@keyframes animationname {keyframes-selector {css-styles;}} animationname:定义动画的名称. keyframes-selector:以百分比来规定改变发生的时间,或者通过关键词…

CSS常用样式 8.变形样式 改变元素的大小,透明,旋转角度,扭曲度等. transform : none | <transform-function> <transform-function>表示一个或多个变换函数,以空格分开,也就是说我们可以同时对一个元素进行transform的多种属性操作. 温馨提示:以往我们叠加效果都是用逗号隔开,但transform中使用多个属性时是用空格隔开. 1)translate() 指定对象的2D translation(2D平移).第一个参数对…

CSS常用样式 5.背景样式 1)背景颜色 background-color : transparent | color 常用值:①英文单词,②十六进制,③RGB或RGBA 另外,还有一种是 渐变色彩 渐变色彩(gradient)分为线性渐变(linear)和径向渐变(radial) ①线性渐变:background: linear-gradient(direction, color1, color2, ...); 第一个参数省略时,默认为“180deg”,等同于“to bottom”. 第二个…

CSS常用样式 4.段落样式 1)行高 控制段落内每行高度 line-height : normal | length 例子 源代码: /* CSS代码 */ .normal{ line-height:normal; } .length{ line-height:30px; } <!-- HTML代码 --> <body> <p class="normal">这是正常的行高<br>这是正常的行高<br>这是正常的行高</…

CSS常用样式 3.边框样式 1)边框线 border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset 常用的边框线:dotted(点状).dashed(虚线).solid(实线).double(双实线) border-top-style 设置上边框线 border-bottom-style 设置下边框线 border-left-style 设置左边框线 bord…

CSS常用样式 2.元素样式 1)宽度 width:auto|length 单位:设置以像素计的宽度值(px) 设置以百分比计的宽度值(%) 例:p {width:200px;} div {width:50%;} 1)高度 height:auto|length 单位:设置以像素计的宽度值(px) 设置以百分比计的宽度值(%) 例:p {height:200px;} div {height:50%;} 3)外边距 margin:auto|length 设置外边距会在元素外创建额外的“空白”. ma…

CSS的常用样式 1.字体样式 1)字体名称(font-family) font-family  :  <family-name> 设置文字名称,可以使用多个名称,或者使用逗号分隔,浏览器则按照先后顺序依次使用可用字体. 如果字体名称包含空格或中文,则应使用引号括起. 例子 源代码: /* CSS代码 */ p{ font-family:"微软雅黑","宋体"; } <!-- HTML代码 --> <body> <p>…

CSS的选择符分成: 1. 通配选择符 2. 元素选择符 3. 群组选择符 4. 关系选择符 5. id及class选择符 6. 伪类选择符 7. 属性选择符 8. 伪对象选择符 1.通配选择符(*) * 号表示所有的对象. 所谓通配选择符,就是指可以使用模糊指定的方式来对象进行选择,指定样式. 例子源代码: /* CSS代码 */ *{ color:gray; } <!-- HTML代码 --> <body> <p>这是灰色字体的p标签</p> <s…

一.认识CSS 1.什么是CSS? CSS (Cascading Style Sheet) 层叠样式表 是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. 由于CSS属性或规则尚未成为W3C标准的一部分,是浏览器的私有属性,因此不同的浏览器可能需要不同的前缀.  前缀  浏览器   -webkit  chrome和safari  -moz  firefox  -ms  IE  -o  opera 2.CSS能做什么? 使用CSS可以有效地对页面进行布局. 使用CSS样式可以对页面…

1 div导致父级高度没有变化是应该子元素设置了float:left等 2 div元素居中 text-align:center; margin-left: auto;margin-right: 3 大小随窗体变化一定要设置成百分比(width:98% )且用到 @media screen and (min-width: 280px) and (max-width: 380px){} 4 网页两变一定要留一定(固定)距离可以设置 左右各15像素( padding:0 15px; ) ,paddin…

两个"::"和一个":"在css3中主要用来区分伪类和伪元素. 1.设置 placeholder属性: // firefox input::-moz-placeholder { color: red; font-size: 18px; } // IE input:-ms-input-placeholder { color: red; font-size: 18px; } // chrome input::-webkit-input-placeholder { col…

1.学网页最好的方法:学习别人的网页. 2.文档结构 <html>(超文本标记语言) <head>  <title>     </title>    </head> <body>    </body> </html> 3. <font size="7" color="red"></font>                 字体标记,大小为7,颜色…

margin和padding是什么意思 margin外边距,padding内边距,外边距表示一个元素的边到相邻元素的距离,内边距表示元素之间的内容和元素边框的距离. font:12px/1.5 表示什么意思? 其中12px/1.5表示:文字大小12像素,行高1.5倍,也就是150% margin怎么设置 可以参考:http://www.w3school.com.cn/css/pr_margin.asp margin简写属性在一个声明中设置所有外边距属性.四个属性是顺时针,上右下左 比如: mar…

今天把整个html和css的总结了一遍.可能还有疏忽之处,共同学习吧 [行为样式三者分离] 不加行内css样式,不加行内js效果 [标签]1>单标签<!doctype html> 文档头,告诉浏览器这是一个网页br 换行img 插入图片,src属性 默认有图片上方3像素,间距 2>双标签body 主体,默认marginspandiv h1-h6 标题标签,默认字体加粗,间距,字体大小p 段落标签,默认有间距a 超链接,可添加width.height属性,如果给定的高度或者宽度比例不…

① 现代浏览器中,<img>元素默认情况下底部会有空白,那么这个空白到底是从哪里来的? 解惑: method-one:猛戳 来自知乎的解答 method-two: 延伸阅读 what is vertical align? ② 在chrome浏览器中,对于鼠标移入input.textarea,浏览器会给它们加上默认的边框,怎么去掉呢 :hover { outline: none; } ③ css控制不溢出.不换行.溢出部分用省略号表示 white-space: nowrap; text-over…

1.学网页最好的方法:学习别人的网页. 2.文档结构 <html>(超文本标记语言) <head>  <title>     </title>    </head> <body>    </body> </html> 3. <font size="7" color="red"></font>                 字体标记,大小为7,颜色…