css样式 | 易学教程

前端-css-长期维护

阅读更多关于前端-css-长期维护

############### CSS简介 ################ # CSS # HTML是骨架 # CSS是样式 # JS是动作 # css和html是分成两个文件编写的，这也是体现了文档内容和样式的解耦， # CSS：层叠样式表(英文全称：Cascading Style Sheets) ############### CSS的内容列表 ################ css的内容列表 1，css的引入，三种方式 2，css的选择器，基本选择器，有四种，p # . * 组合选择器，属性选择器分组和嵌套伪类选择器伪元素选择器选择器的优先级 3，css的各种属性，宽和高，width，height，字体属性，font-size，font-weight，color，文字属性，text-align，text-decoration，text-indent，背景属性，background-color，background-repeat，background-image，background-position， display 盒子模型，margin外边距，border边框，padding内填充，content内容 float，三种取值，left，right，none， clear，清除浮动， overflow，溢出属性，定位position， 4

jQuery总结

阅读更多关于 jQuery总结

一、jQuery初步认知 jQuery概述 JQuery概念 javascript概念基于Js语言的API和语法组织逻辑，通过内置window和document对象，来操作内存中的DOM元素 JQuery概念基于javascript的，同上，提高了代码的效率 jQuery是什么: 是一个javascript代码仓库，我们称之为javascript框架。是一个快速的简洁的javascript框架，可以简化查询DOM对象、处理事件、制作动画、处理Ajax交互过程。它可以帮我们做什么(有什么优势) 轻量级、体积小，使用灵巧(只需引入一个js文件) 强大的选择器出色的DOM操作的封装出色的浏览器兼容性可靠的事件处理机制完善的Ajax 链式操作、隐式迭代方便的选择页面元素(模仿CSS选择器更精确、灵活) 动态更改页面样式/页面内容(操作DOM，动态添加、移除样式) 控制响应事件(动态添加响应事件) 提供基本网页特效(提供已封装的网页特效方法) 快速实现通信(ajax) 易扩展、插件丰富如何引入JQuery包引入本地的JQuery 引入Google在线提供的库文件（稳定可靠高速）使用Google提供的API导入写第一个JQUery案例解释:在JQuery库中，$是JQuery的别名，$()等效于就jQuery() <script type=“text

CSS0003： css中的label标签

阅读更多关于 CSS0003： css中的label标签

在表单布局中会遇到label标签的使用，label没有任何样式效果，有触发对应表单控件功能。比如我们点击单选按钮或多选框前文字对应选项就能被选中，这个就是对文字加了<label>标签实现。一、点击文字，对应选择上控件 - TOP 点击<label>标签文字时，实现对应控件被选择，需要对应表单控件id的值与label标签内的for值相同。二、label语法 - TOP <label for="man">男</label> Label标签内文字更加需要填写 Label标签内for属性的值为自定义，一般与想实现点击会触发控件对象的 ID 对应相同。三、label案例 - TOP 来源： https://www.cnblogs.com/eliteboy/p/12530893.html

CSS常见兼容问题以及解决办法

阅读更多关于 CSS常见兼容问题以及解决办法

浏览器的兼容性问题，通常是因为不同的浏览器对同一段代码有不同的解析，造成页面显示不统一的情况。这里谈到的浏览器，主要指IE6/IE7/IE... FireFox Chrome Opera Safari 等。但更多的兼容还是考虑IE6/IE7/FF之间的斗争先来谈谈CSS Hack 　　我们为了让页面形成统一的效果，要针对不同的浏览器或不同版本写出对应可解析的CSS样式，所以我们就把这个针对不同浏览器/版本而写CSS的过程叫做 CSS hack. 　　CSS hack主要有三种：IE条件注释法、CSS属性前缀法、选择器前缀法。　　（1）IE条件注释法，即在正常代码之外添加判别IE浏览器或对应版本的条件注释，符合条件的浏览器或者版本号才回执行里边的代码。     　　 (2)CSS属性前缀法，即是给css的属性添加前缀。比如 * 可以被IE6/IE7识别，但 _ 只能被IE6识别，IE6-IE10都可以识别 "\9"，IE6不能识别!important

网页布局基础

阅读更多关于网页布局基础

网页布局基础简介什么是网页布局？网页布局是网页制作的基础，使用DIV+CSS布局网页是基础中的基础。三种基本布局方式：流式布局，浮动布局，绝对定位布局。网页设计的特点：1：网页宽度可变 2头+内容主体（根据需要分栏）+页脚（不重要的内容）对长度设置百分比可实现网页自适应 W3C标准包括结构化标准语言，表现标准语言，行为标准语言，倡导结构，样式，行为分离。 CSS中，存在三种定位机制：标准文档流，浮动，绝对定位。标准文档流：从上到下，从左到右输出文档内容，由块级元素和行级元素组成。浮动：float属性left(左浮动) right(右浮动) none(不浮动) 元素会左移或右移，直至碰到容器为止。关于浮动的详细介绍参考我转载的《CSS浮动-float/clear》绝对定位： position属性拥有三种定位方式 1.静态定位(static) 2.相对定位(relative) 3.绝对定位(absolute fixed(固定定位)) 参考我前面的《CSS基础》有详细解释。相对定位的特点： 1.相对自身原有位置进行偏移 2. 仍处于标准文档流中，会占据原来的空间位置 3.拥有偏移属性和z-index属性，即空间层叠现象。绝对定位特点： 1.建立以包含块为基准的定位 2. 完全脱离了标准文档流 3.随即拥有偏移属性和z-index属性未设置偏移量时

第 2 章前端基础之CSS

阅读更多关于第 2 章前端基础之CSS

一、CSS语法 CSS规则由两个主要的部分构成：选择器，以及一条或多条声明。 1 ''' 2 selector { 3 property: value; 4 property: value; 5 ... property: value 6 } 7 ''' 例如： 1 h1 {color:red; font-size:14px;} 二、CSS的四种引入方式 1、行内式行内式是在标记的style属性中设定CSS样式，这种方式没有体现CSS的优势，不推荐使用。 1 < p style ="background-color: rebeccapurple" > hello yuan </ p > 2、嵌入式嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下： <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head> 3、链接式将一个.css文件引入到HTML文件中。 < link href ="mystyle.css" rel ="stylesheet" type ="text/css" /> 4、导入式将一个独立的.css文件引入HTML文件中

css hack

阅读更多关于 css hack

简介这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack,也叫写CSS hack。 CSS Hack的原理是什么由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。比如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，而firefox两个都不能认识。等等书写顺序，一般是将识别能力强的浏览器的CSS写在后面。下面如何写里面说得更详细些。如何写CSS Hack 比如要分辨IE6和firefox两种浏览器，可以这样写： <style> div{ background:green; /* for firefox */ *background:red; /* for IE6 */ } </style> 我在IE6中看到是红色的，在firefox中看到是绿色的。解释一下：上面的css在firefox中，它是认识不了后面的那个带星号的东东是什么的，于是将它过滤掉，不予理睬，解析得到的结果是:div{background:green},于是理所当然这个div的背景是绿色的。在IE6中呢，它两个background都能识别出来，它解析得到的结果是:div{background:green;background:red;},于是根据优先级别

css3系列-1.css基础知识入门

阅读更多关于 css3系列-1.css基础知识入门

css3系列-1.css基础知识入门 1.css 如何引用内部外部内联代码示例内部css代码示例 <head> <meta charset="UTF-8"> <title>index</title> <style> h1{ color: red; } </style> </head> 外部css代码示例 <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" href="test.css"> </head> <body> <h1>微信公众号：全栈学习笔记</h1> </body> css文件里面的代码（test.css） h1{ color: red; } 内联css代码示例 <h1 style="color:red"> 这里推荐使用第二种方式，尽量不使用其他两种方式，第二种方式可以是html文件与css文件分离，代码可阅读性以及维护性更强 2.css 优先级内联style id选择器 class选择器标签所谓内联style就是上述的第三种方式，这种方式的css样式级别是最高的。什么是优先级？比如说我在一个标签里面，style设置了一个color属性，然后给这个标签加上一个class，就是外联上一个css文件。这个css文件里面写上这个class的css样式

css加载会造成阻塞吗？

阅读更多关于 css加载会造成阻塞吗？

终于考试完了，今天突然想起来前阵子找实习的时候，今日头条面试官问我，js执行会阻塞DOM树的解析和渲染，那么css加载会阻塞DOM树的解析和渲染吗？所以，接下来我就来对css加载对DOM树的解析和渲染做一个测试。为了完成本次测试，先来科普一下，如何利用chrome来设置下载速度打开chrome控制台(按下F12),可以看到下图，重点在我画红圈的地方点击我画红圈的地方(No throttling),会看到下图,我们选择GPRS这个选项这样，我们对资源的下载速度上限就会被限制成20kb/s，好，那接下来就进入我们的正题 css加载会阻塞DOM树的解析渲染吗？用代码说话： <!DOCTYPE html> <html lang="en"> <head> <title>css阻塞</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> h1 { color: red !important } </style> <script> function h () { console.log(document.querySelectorAll('h1')) } setTimeout(h, 0) </script> <link href

CSS炫酷样式，不断编辑更新...

阅读更多关于 CSS炫酷样式，不断编辑更新...

文字阴影 text-shadow:x y blur color text-shadow:水平距离垂直距离模糊距离颜色盒子阴影 box-shadow：x y blur size color inset/[outset默认外阴影，不能写] box-shadow：水平距离垂直距离模糊距离尺寸颜色内/外阴影 first-child【第一个子元素】 li:nth-child(2n+1){color:red} text-indent[首行缩进]最好em为单位 letter-spacing:[字间距] word-spacing[单词间距]针对于英文中文无效 + 对于background，text-shadow;box-shadow等都可以一次设置多个，每个用逗号隔开 float：把他想象成飞机在天上飞，这个会使元素飘起来，因此，如果他下面还有元素没浮动，那个元素就会往上移。 float不会超过父元素的内边距【最准确理解就是】：浮动破坏块级元素，使其余的元素【块级】可以顶上来，非块级元素，在他后面【左边或右边】，而块级元素如果在上方没浮动，下方div浮动是不会顶上去的，因为上方块级元素，独占一行块级元素添加浮动之后，具有行内块特性，在不添加width的时候，width会根据，内部元素或文本的宽度为其自身宽度，而不是独占一行 margin-left:-1px /

订阅 css样式