css第一个元素 | 易学教程

前端构建：Less入了个门

阅读更多关于前端构建：Less入了个门

http://www.w3cplus.com/css/less 一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　说到前端构建怎能缺少CSS预处理器呢！其实CSS的预处理器有很多啦，比较出名的有Scss、Sass、Stylus和Less。（最近还听说出现了Autoprefixer等CSS后处理器，可参考@一丝的PPT）众多CSS预处理器中Less的语法最接近原生CSS，因此相对来说更容易上手，假如有JS、C#等编程经验的话，其实上述的几种预处理器的学习成本也不会特别高。下面是我们这阵子的学习笔记，以便日后查阅。最好的入门教程——官网地址：http://lesscss.org/ 最佳实践之一——Bootstrap 由于内容较多，特设目录一坨：二、搭建学习环境三、内联样式和外联样式四、语法 1. 注释 2. 变量（Variable）列表类型 3. 嵌套（Nested） 4. 父选择器引用（ParentSelector）　 5. 导入指令（Import） 6. 继承（Extend）　　 6.1. 父选择器必须严格匹配，除了属性选择器中属性值引号不必匹配外，或添加all关键字外。　　 6.2. 父选择器不支持变量形式　　 6.3. media query影响继承的作用域　　　　 6.3.1. media query内的extend操作

CSS基础语法规则学习笔记

阅读更多关于 CSS基础语法规则学习笔记

CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在 CSS 文件中多个样式定义可层叠为一样式解决了一个普遍的问题 HTML 标签原本被设计为用于定义文档内容。通过使用 <h1>、<p>、<table> 这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style）。所有的主流浏览器均支持层叠样式表。样式表极大地提高了工作效率样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档

前端基础CSS篇之一

阅读更多关于前端基础CSS篇之一

OXO1 写在前面 1.HTML和CSS的对比 (1)HTML只关注语义和结构，主要是对网页元素的整理和分类。（2）CSS的主要使用场景就是美化页面，布局页面。（3) CSS和HTML搭配使用，实现网页结构，表现分离。 2.CSS概述（1）概念 CSS是叠层样式表（Cascading Style Sheets)也称为CSS样式表或级联样式表。也是一种标记语言。（2)作用 CSS主要用于设置HTML页面中的文本内容(字体，大小，对齐方式等)，图片的外形（宽高，边框样式，边距等）以及版面布局和外观显示样式。 (3)CSS语法 CSS主要是由选择器和一条或者多条申明组成。选择器 { 属性1: 值1；属性2: 值2；属性n: 值n； } demo: p { color: red; font-size: 12px; } 注：选择器：指定修改样式的目标声明：要改成的样式（4）CSS注释： /* 我是被注释掉的内容 */ OXO2 选择器的分类一. 基础选择器 1.标签选择器 (1) 标签选择器(元素选择器)是指用HTML标签名称作为选择器，按照标签分类，为页面中某一类型的标签，指定统一的CSS样式。（2）语法：标签名 { 属性1：值1；属性2：值2； .... } demo : <!DOCTYPE html> <html lang="en"> <head>

css margin知识全集

阅读更多关于 css margin知识全集

你真的了解margin吗？你知道margin有什么特性吗？你知道什么是垂直外边距合并？margin在块元素、内联元素中的区别？什么时候该用padding而不是margin？你知道负margin吗？你知道负margin在实际工作中的用途吗？常见的浏览器下margin出现的bug有哪些？…… 写css，你少不了与margin打交道，而对于这个平时我们最常用的css属性我们并非十分了解。介于此我打算写下这篇文章，一来是自己工作中的总结，也是对自己知识的一次梳理。 Margin是什么 CSS 边距属性定义元素周围的空间。通过使用单独的属性，可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。——W3School 边界，元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域。——CSS权威指南我比较喜欢使用“外边距”这个词来解释margin（同理padding可以称之为“内边距”，但是我又恰恰喜欢称呼padding为“补白”或者“留白”），我们可以很清楚的了解到margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。 Margin的特性 margin始终是透明的。 margin通过使用单独的属性，可以对上、右、下、左的外边距进行设置。即：margin-top、margin-right、margin

CSS 图像透明/不透明

阅读更多关于 CSS 图像透明/不透明

CSS 图像透明/不透明使用CSS很容易创建透明的图像。注意： CSS Opacity属性是W3C的CSS3建议的一部分。一、示例一：创建一个透明图像 CSS3中属性的透明度是 opacity 。首先，我们将向您展示如何用CSS创建一个透明图像 img { opacity:0.4; filter:alpha(opacity=40); /* IE8 及其更早版本 */ } IE9，Firefox，Chrome，Opera，和Safari浏览器使用透明度属性可以将图像变的不透明。 Opacity属性值从0.0 - 1.0。值越小，使得元素更加透明。 IE8和早期版本使用滤镜：alpha（opacity= x）。 x可以采取的值是从0 - 100。较低的值，使得元素更加透明。二、示例二：图像的透明度 - 悬停效果 img { opacity:0.4; filter:alpha(opacity=40); /* IE8 及其更早版本 */ } img:hover { opacity:1.0; filter:alpha(opacity=100); /* IE8 及其更早版本 */ } 第一个CSS块是和例1中的代码类似。此外，我们还增加了当用户将鼠标悬停在其中一个图像上时发生什么。在这种情况下，当用户将鼠标悬停在图像上时，我们希望图片是清晰的。此CSS是： opacity=1 .

CSS知识补足——选择器的知识补充

阅读更多关于 CSS知识补足——选择器的知识补充

后代选择器 /* 以下两种写法叫做子代选择器，第一个元素不管是标签名还是类名，都作为其代表标签，也是该选择器的最高级别（父类），然后向下搜寻，搜寻到底 */ /* 会使所有 ul 里的li标签改变样式 ul li{ color: brown; } */ /* 这种写法就会让类名为 need 的ul 里的li 元素改变样式 .need li{ color: brown; }*/ <ul class="need"> <a href="#"> 22222222</a> <li><a href="#"> 11111111</a></li> </ul> 子元素选择器 /* 以下方式为子元素选择器，这种方式只会将父元素的儿子辈的元素改变样式，而儿子辈内部的元素则不会被修改样式 */ /* ul>a{ color: green; } */ <ul class="need"> <a href="#"> 22222222</a> <li><a href="#"> 11111111</a></li> </ul> 并集选择器 /* 以下为并集选择器该选择器，用逗号分隔各个需要渲染的元素，同时还能够跟其他选择器同时使用 */ /* ol,p,ul li>a{ color: pink; } */ <ul class="need"> <a href="#"> 22222222</a> <li><a

css选择器总结

阅读更多关于 css选择器总结

　　最近有点忙，所以没有发表博文，现在时间空闲下来了，好好的整理一下知识，今天总结一下css里面的一些选择器。　　css里的选择器有好多种，下面我就把我了解到的写一写，如果有不全的或者有误的欢迎留言指正，万分感谢。　　一、选择器　　1、* 通配符选择器　　　这个选择器是匹配页面中所有的元素，一般用来清除浏览器的默认样式. *{margin:0; padding:0} 　　2、元素选择器　　　　通过标签名来选择元素。 div{width:100px; height:100px;} 　　3、class选择器　　　　　class选择器 / 类选择器 / 用class属性给元素命名，在页面中可以出现很多次，相当于人的名字。 .box{width:100px; height:100px;} <div class="box"></div> <p class="box"></p> 　　4、 id选择器　　　　以id属性来命名，在页面中只能出现一次，具有唯一性，并且权重值最高，相当于一个人的身份证。 #box{width:100px; height:100px;} <div id="box"></div> 　二、高级选择器一　　　1、 E F 后代选择器　　　　匹配到E元素下面的所有的F元素（包括子、孙），空格隔开。 div ul li {width:100px; height

前端入门笔记之CSS篇

阅读更多关于前端入门笔记之CSS篇

OXO1 写在前面一.html和css 1.HTML和CSS的对比（1）HTML只关注语义和结构，主要是对网页元素的整理和分类。（2）CSS的主要使用场景就是美化页面，布局页面。（3) CSS和HTML搭配使用，实现网页结构，表现分离。 2.CSS概述（1）概念 CSS是叠层样式表（Cascading Style Sheets），也称为CSS样式表或级联样式表。也是一种标记语言。（2)作用 CSS主要用于设置HTML页面中的文本内容(字体，大小，对齐方式等)，图片的外形（宽高，边框样式，边距等）以及版面布局和外观显示样式。 (3)CSS语法 CSS主要是由选择器以及一条或者多条申明组成。选择器 { 属性1: 值1；属性2: 值2； } demo : p { color: red; font-size: 12px; } 注：选择器：指定修改样式的目标声明：要改成的样式（4）CSS注释： /* 我是被注释掉的内容 */ OXO2 CSS上选择器分为：基础选择器和复合选择器两大类。一. 基础选择器基础选择器分为：标签选择器，类选择器，id选择器和通配符选择器。 1.标签选择器 (1) 标签选择器(元素选择器)是指用HTML标签名称作为选择器，按照标签分类，为页面中某一类型的标签，指定统一的CSS样式。 (2)语法标签名 { 属性1：值1；属性2：

前端-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

订阅 css第一个元素