css样式 | 易学教程

Web前端(10)_css文本样式

阅读更多关于 Web前端(10)_css文本样式

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>行级标签</title> <style type="text/css"> .div{ font-weight: 600; /* 加粗600以及以上，或者是blod */ font-size: 32px; font-family: "华文行楷"; line-height: 100px;/*行高就是将行级元素或者文本在设定的高度中上下对齐 */ background: yellow; text-align: center;/* 水平方式对齐方式*/ letter-spacing: 10px;/*字间距*/ text-decoration: overline;/*字的装饰*/ white-space: nowrap;/*不换行*/ } .box_li1{ text-decoration: underline; color: red; } </style> </head> <body> <div class="div">大家好</div> <ul class="box"> <li class="box_li1">新闻首页</li> <li>六十年国庆堪比奥运会</li> <li>我国商务对美国</li>> <li>中国在经济危机下还保持较高水平发展<

Grunt ：任务自动管理工具

阅读更多关于 Grunt ：任务自动管理工具

来自《JavaScript 标准参考教程（alpha）》，by 阮一峰在Javascript的开发过程中，经常会遇到一些重复性的任务，比如合并文件、压缩代码、检查语法错误、将Sass代码转成CSS代码等等。通常，我们需要使用不同的工具，来完成不同的任务，既重复劳动又非常耗时。Grunt就是为了解决这个问题而发明的工具，可以帮助我们自动管理和运行各种任务。简单说，Grunt是一个自动任务运行器，会按照预先设定的顺序自动运行一系列的任务。这可以简化工作流程，减轻重复性工作带来的负担。 Grunt基于Node.js，安装之前要先安装Node.js，然后运行下面的命令。 sudo npm install grunt-cli -g grunt-cli表示安装的是grunt的命令行界面，参数g表示全局安装。 Grunt使用模块结构，除了安装命令行界面以外，还要根据需要安装相应的模块。这些模块应该采用局部安装，因为不同项目可能需要同一个模块的不同版本。首先，在项目的根目录下，创建一个文本文件package.json，指定当前项目所需的模块。下面就是一个例子。 { "name": "my-project-name", "version": "0.1.0", "author": "Your Name", "devDependencies": { "grunt"

让pre自动换行

阅读更多关于让pre自动换行

让 <pre /> 标签中的内容自动换行并符合 W3C 标准（多浏览器支持）作者：龙震　默认情况下，<pre /> 标签中的内容若超出范围不会自动换行，这样无论在显示或打印都会出现麻烦。下面提供符合 W3C 标准并支持多浏览器的 CSS 样式代码： pre{ white-space:pre-wrap; /* css-3 */ white-space:-moz-pre-wrap; /* Mozilla, since 1999 */ white-space:-pre-wrap; /* Opera 4-6 */ white-space:-o-pre-wrap; /* Opera 7 */ word-wrap:break-word; /* Internet Explorer 5.5+ */ } 更多内容请参见：http://www.w3.org/TR/css3-text/#white-space。 pre标签会原样保留HTML内容的格式，可是如果宽度过大会把页面撑坏，这时候需要自动换行来帮忙： Wrapping the pre tag Making preformated text wrap in CSS3, Mozilla, Opera and IEis the tip that let's you use the pre tag to keep the formatting,

HTML5性能优化

阅读更多关于 HTML5性能优化

HTML5性能优化在看完这两章内容之后，我意犹未尽，于是乎从网上搜索关键字“Java Web高性能”，在IBM社区找到两篇不错的文章，而让人更意外的是我发现那两篇文章的内容跟《高性能HTML5》前两章高度相似，不知道是谁抄袭谁的，大家可以鉴别下真伪，下面附上地址。 http://dl2.iteye.com/upload/attachment/0097/9373/b0e69540-e703-3530-81bb-c93de7b850a6.pdf http://www.ibm.com/developerworks/cn/java/j-lo-javawebhiperf1/ http://www.ibm.com/developerworks/cn/java/j-lo-javawebhiperf2/ 前面是读后感，下面是我针对最近几天学习到的提高Web性能进行了篇幅不小的总结，一来为新人提供帮助，二来自己做一下笔记，加深记忆。性能之前端篇 --减少重绘在HTML页面完成展现之后，动态改变页面元素或调整CSS样式都会引起浏览器重绘，性能的损耗直接取决于动态改变的范围：如果只是改变一个元素的颜色之类的信息则只会重绘该元素；而如果是增删节点或调整节点位置则会引起其兄弟节点也一并重绘。减少重绘并不是说不要重绘，而是要注意重绘范围：①改动的DOM元素越深则影响越小，所以尽量深入节点改动

css--->圆角设置

阅读更多关于 css--->圆角设置

1.为元素添加四个相同的圆角：语法结构：border-radius：r；　　　　　r为圆角的半径大小 eg:如下样式，给元素添加四个圆角为10px 　　代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>radius</title> <style> div{ width: 100px; height: 100px; background-color: aqua; border-radius: 10px; } </style> </head> <body> <div></div> </body> </html> 2.为元素创建一个圆角　　语法结构：　　　　左上角：border-top-left-radius: r ；　　　　右上角：border-top-right-radius: r ；　　　　左下角：border-bottom-left-radius: r ；　　　　右下角：border-bottom-right-radius: r ； eg:如下样式，给元素添加左上角圆角为30px 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>radius</title> <style> div{ width:

前端学习(3)-CSS

阅读更多关于前端学习(3)-CSS

一 CSS CSS是Cascading Style Sheets的缩写，层叠样式表，用来控制网页数据的显示，可以使网页的显示与数据内容分离。二引入方式　　（1）行内式：在标记的style属性中设置CSS样式，不推荐使用。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello CSS</title> </head> <body> <div style="color: aqua;background-color: bisque">hello world</div> </body> </html> 　　（2）嵌入式：将CSS样式集中写在网页的<head></head>标签找那个的<style></style>标签中。结果和上图一致； <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello CSS</title> <style> div{ color: aqua; background-color: bisque; } </style> </head> <body> <div >hello world</div> </body> </html> 　　（3）链接式：写一个*

css盒子模型

阅读更多关于 css盒子模型

盒子模型　　盒子模型就是把HTML 页面中的元素看作是一个矩形的盒子，也就是一个盛装盒子的容器，每个矩形都是由元素的内容、内边距（padding）、边距（border）和外边距（margin）组成。 <div>标记　　 div是英文 division 的缩写，意为“分割、区域”。<div>是一个区块容器标记，可以将网页分割为独立的、不同的部分，以实现网页的规划和布局。大多数 HTML 标签都可以嵌套在 <div> 中，<div> 中还可以嵌套多层<div>。盒子的宽与高边框属性设置内容样式属性常用属性边框样式 border-style:上边[右边下边左边]; none 无（默认）、solid 单实线、dashed 虚线、dotted 点线、double 双实线边框宽度 border-width:上边[右边下边左边]; 像素值边框颜色 border-color:上边[右边下边左边]; 颜色值、#十六进制、rgb(r%,g%,b%) 综合设置边框 border:四边宽度四边样式四边颜色圆角边框 border-radius:水平半径参数/垂直半径参数；像素值或百分比图片边框 border-images:图片路径裁切方式/边框宽度/边框扩展距离重复方式; 1.边框样式（border-style）　　其基本语法格式：border-style

前端三贱客 -- CSS

阅读更多关于前端三贱客 -- CSS

CSS（Cascading Style Sheets）给你的html页面穿上衣服让其看起来性感，美观。 css选择器类选择器  <style type="text/css"> .cl{ background-color: blue; width: 200px; position: absolute; left: 0;top: 50px;bottom: 0; } </style> <div class="cl">class test</div> View Code ID选择器 1  2 <style type="text/css"> 3 #id1{ 4 background-color: red; 5 height: 30px; 6 font-size: 18px; 7 text-align: center; 8 line-height: 30px; 9 } 10 </style> 11 <div id="id1">好好学习，天天向上</div> View Code 标签选择器  <style type="text/css"> a { color: red; } </style> <ul>

使用css将网页变成黑白色

阅读更多关于使用css将网页变成黑白色

其实将整个网页全局变色，无非就是三种，css直接设置，添加svg滤镜，通过js遍历所有标签更改颜色，于是 1、css 直接编辑样式，然后在需要应用的地方设置class 1 .gray { 2 -webkit-filter: grayscale(100%); 3 -moz-filter: grayscale(100%); 4 -ms-filter: grayscale(100%); 5 -o-filter: grayscale(100%); 6 filter: grayscale(100%); 7 filter: gray; 8 } 2、svg 先编写svg文件 <svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <filter id="grayscale"> <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/> </filter> </svg> css调用 1 filter: url(gray.svg#grayscale); 3、js遍历直接插入代码就好啦，能白嫖是不可能手写的（ps：用rgba和!important的无法改变

CSS Reset的相关概念及实例

阅读更多关于 CSS Reset的相关概念及实例

原文　　简书原文：https://www.jianshu.com/p/fdb79010895c 大纲　　1、什么是css reset? 　　2、CSS reset的实例 1、什么是css reset? 　　个人理解：就是让不同浏览器的初始化的css样式统一　　1.1、在当今网页设计/开发实践中，使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键。在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则，并且呈现相同的视觉效果(没有兼容性问题)。但是，我们并没有生活在这个完美的世界，现实中发生的失窃却总是恰恰相反，很多CSS样式在不同的浏览器中有着不同的解释和呈现。　　1.2、当今流行的浏览器(如:Firefox、Opera、Internet Explorer、Chrome、Safari等等)中，有一些都是以自己的方式去理解CSS规范，这就会导致有的浏览器对CSS的解释与设计师的CSS定义初衷相冲突，使得网页的样子在某些浏览器下能正确按照设计师的想法显示，但有些浏览器却并没有按照设计师想要的样子显示出来，这就导致浏览器的兼容性问题。更糟的是，有的浏览器完全无视CSS的一些声明和属性。　　1.3、正因为上述冲突和问题依然存在于这个”不完美的世界”，所以一些设计师想到了一种避免浏览器兼容性问题的方法，那就是CSS Reset

订阅 css样式