css样式 | 易学教程

非常好用的CSS样式重置表

阅读更多关于非常好用的CSS样式重置表

非常好用的CSS样式重置表我们在项目前期准备时都会准备好一个reset.css，因为不同浏览器对标签的解析各不相同，重置css样式可以让标签在不同浏览器下产生相同的效果。所以一个好的重置样式表是非常重要的。用过很多网上现成的样式重置表，然后有时写的样式代码没问题却达不到自己要的效果，查了才发现是掉进reset.css的坑里。这里推荐用过多种reset.css感觉是最好用的重置样式表： Sandal ，这个样式表的好处是他绝大多数的保留了标签的常用效果，并不是简单粗暴的全部掩杀。具体样式如下，可以直接整个复制在自己的reset.css中：　　html { 　　　　-ms-text-size-adjust: 100%; 　　　　-webkit-text-size-adjust: 100%; 　　　　-webkit-tap-highlight-color: transparent; 　　　　height: 100%; 　　} 　　body { 　　　　margin: 0; 　　　　font-size: 14px; 　　　　font-family: "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif; 　　　　line-height: 1.5; 　　　　color: #333; 　　　　#fff; 　　　　min-height

10个顶级的CSS3代码生成器

阅读更多关于 10个顶级的CSS3代码生成器

10个顶级的CSS3代码生成器新出来的在线工具和 web 应用允许开发人员快速创建网站，而无需手动一行一行地编写代码。当前，不断有新的框架和代码库涌现在前端开发这个领域里。但是，这也让许多开发人员忘记了代码生成器以及它们在构建网站时的作用。以下资源是完全免费的 web 应用，可用于生成图案、渐变、甚至浏览器前缀属性的 CSS3 代码。如果你写的是前端代码，然后这些资源可以为你节省大量的时间，并为今后的项目工作提供可重复片段。 CSS3 Generator 大家最喜爱的用于代码生成的 web 应用之一就是 CSS3 Generator。对于不同类别的代码生成器，包括 RGBa，transform，flexbox 等等，它有不同的页面。另外，每个代码生成器还包括用于解释哪个浏览器版本完全支持该属性的图标。 Enjoy CSS 想要更动态的应用程序，那么试试 Enjoy CSS 网站。它意味着一个完整的代码生成器，可用于动态项目中自定义的输入域或 CSS3 按钮。它可提供定制的代码，用于转换和过渡，并预建项，如 CSS3 按钮这样常见的页面元素。 Patternify 除非你已经学习过 Photoshop，否则再从头开始学的话，难免会成为你一个很大的难点。值得庆幸的是，Patternify 是一个免费工具，可生成你平铺 CSS 模式所需要的一切。使用 Base64 代码添加到

10个顶级的CSS3代码生成器

阅读更多关于 10个顶级的CSS3代码生成器

css格式

阅读更多关于 css格式

由样式声明，用分号隔开。由　　属性：值　　组成，类比字典。给html设置多种外观样式使用css设置： 1、行内设置：只能设置当前元素的属性 <body> <h1 style:'color:red'>标题</h1> </body> background-color:背景色 font-size:50px字体大小 2、文档内嵌样式 <head> 　　<style tpye="text/css"> 　　　　h1{ 　　　　　　color:red; 　　　　} 　　</style> </head> 3、外部样式 <head> 　　<link rel="stylesheet" href="static/css/xxxxx.css"> </head> xxxxx.css h1{ 　　color:red } 将css文件新建在static中来源： https://www.cnblogs.com/mumuaa/p/12378539.html

CSS的样式（1）

阅读更多关于 CSS的样式（1）

背景： 1、颜色：　　　 background-color p{backgroud-color:gray;} 2、内边距： {background-color:gray;padding:20px} 3、背景图像： body{background-image:url(/i/eg_bg_04.gif)} 4、背景重复：　　body{background-image:url; background-repeat:repeat(-X/-y} 5、背景定位：改变图像在背景中的位置。 {background-image:url; background-repeat:no-repeat background-position:center/top/botton/left/right} 6、背景大小（size）: 接数字和百分比，建议接数字 7、背景关联： {background-attachment:fixed} 文本： 1、缩进：　　text-indent(正负值）　　p{text-indent:5em(/-5em);} 2、对齐： text-align(center、left、right） 3、文本装饰：　　text-decration(none/underline/overline/line-through/blink) 链接默认地会有下划线。如果想要去掉超链接的下划线

css常用代码大全

阅读更多关于 css常用代码大全

css常用代码大全，html+css代码 html+css可以很方便的进行网页的排版布局，还能减少很多不必要的代码。一.文本设置 1、font-size: 字号参数 2、font-style: 字体格式 3、font-weight: 字体粗细 4、颜色属性 color: 参数注意使用网页安全色二、超链接设置 text-decoration: 参数主要用途是改变浏览器显示文字链接时的下划线。参数取值范围： underline：为文字加下划线 overline：为文字加上划线 line-through：为文字加删除线 blink：使文字闪烁 none：不显示上述任何效果三、背景 1、背景颜色 background-color: 参数 2、背景图片 background-image: url(URL) URL就是背景图片的存放路径，none表示无。 3、背景图片重复 background-repeat: 参数参数取值范围： no-repeat：不重复平铺背景图片 repeat-x：使图片只在水平方向上平铺 repeat-y：使图片只在垂直方向上平铺如果不指定背景图片重复属性，浏览器默认的是背景图片向水平、垂直两个方向上平铺。 4、背景图片固定背景图片固定控制背景图片是否随网页的滚动而滚动。如果不设置背景图片固定属性，浏览器默认背景图片随网页的滚动而滚动

CSS盒模型概念及企业应用规则

阅读更多关于 CSS盒模型概念及企业应用规则

css盒模型概念及企业应用规则 1.什么是盒模型盒模型**（ Box Moldel ）****，**是W3C规定一个浏览器如何渲染、显示一个元素，根据元素的种类分为块级元素盒模型和行内元素盒模型 2.标准盒模型的概念分析 2.1width/height（content box内容区）块级元素的width和height值在标准盒模型下，定义了一个块级元素能够存放内容的区域大小，元素的内容从width和height的左上角原点开始排列内容 2.2border（border box边框区）块级元素的border的作用是在元素的内容区外加上一个边框线边框样式的格式为**: broder : 宽度种类颜色 ;/** 复合写法 / border-width :边框宽度 border-style :种类; 默认是none 就是没有边框 /*dotted圆点边框, double双边框, dashed虚线边框,solid实线边框 */ border-color :颜色; 默认与color样式一致 /* 颜色值: 十六进制, rgb, 关键字, transparent(使用父元素的颜色)*/ 2.3border（border box边框区）详解元素的边框可以单独给某一方向设置比如: 设置顶部边框:border-top:宽度种类颜色; 设置底部边框:border

css浮动特性及清除浮动详解

阅读更多关于 css浮动特性及清除浮动详解

css浮动特性及清除浮动详解浮动的主要应用 1.图文混排（文字环绕在图片周围） css部分 .box { width: 400px; border: 1px solid red; margin: 20px auto; } .box img { width: 200px; height: 200px; } html部分 <div class="box"> <img src="./xiaobai.jpg" alt=""> <p> 小白是日本著名漫画《蜡笔小新》主角之一，野原家的小狗，很可爱，设定前期为一只呆呆的小狗；后期为加入更多乐趣，赋予了小白 “超高的智商”，被诸多网友戏称为“神犬”、“白神”。野原家养的狗（小新捡到的），雄性、毛色为雪白、体型似棉花球，昵称小白，很聪明。著名特技是“棉花糖”（把身体卷成球型）和抓重要部位（称为“抓小鸡鸡”），这些当然也是跟野原新之助学习的，美伢叫他教小白一些特技，说不定能加入马戏团，所以小新就花了一整天教它一堆把戏，当晚验收成果，还拍摄影带，结果教出来的却是这个样子.... </p> </div> 样式显示接下来我们只需要给图片标签添加浮动，就实现图文混排 .box img { width: 200px; height: 200px; float: left; } 样式显示块级元素的横向排列 css部分 .box {

CSS层叠式样式表学习笔记

阅读更多关于 CSS层叠式样式表学习笔记

CSS和HTML分开的优点 HTML负责基本的内容展示，而CSS负责样式的控制，制造效果。 1、实现解耦合的作用 2、使得协作更加明确 3、开发效率得到提高 CSS和HTML的结合方式内联：就是在想要控制样式的的标签内直接控制，只能作用于该部分，范围最小。内部：直接在head内部中控制该文件的样式。外部：通过link标签链接一个外部的css文件，而控制方式就直接书写在这个外部css文件中。 CSS的基本语法格式：选择器{ 属性：属性值; 属性：属性值; } 选择器：就是用于筛选特征相似的元素基础选择器： id选择器：#id属性值{} 元素选择器：直接筛选元素相对应的内容类选择器：class属性值{} 优先性上id>calss>元素扩展选择器：通用选择器：*{}选择所有元素并集选择器：选择器1，选择器2{} 子集选择器：选择器1 选择器2{} 父集选择器：选择器1>选择器2（选择选择器2上的选择器1）属性选择器：元素名称[属性=“属性值”]{} 伪类选择器：元素：状态{} 状态：linked:初始化 hover:鼠标悬浮状态 active：鼠标点击但是未打开状态 visited:访问过状态 CSS属性字体（Font）属性 font-size：字体大小 font-family：字体系列文本（Text）属性 color

网页设计要求和页面代码精简优化

阅读更多关于网页设计要求和页面代码精简优化

一 . 总体要求 1. 网页整体采用 div+css 代码显示，最好不要用表格 , 切图切的越小越好。 2. 尽量不让 CSS 分散在 HTML 标记里，尽量封装到外部调用文件。 3. 尽量缩减页面大小，一般建议 100KB 以下，越小越好，但不能小于 5KB, 最好不超过 150K 。 4. 尽量少用无用的图片和 flash, 非用不可的话图片大小控制在 30K 以下。 GIF 只限于 256 种颜色 , 适合显示质量要求不高或单一色块的图片 ,jpeg 适合显示照片 , 从 seo 和 UE 来说 , 适合对图片按钮或网页结构上的图片使用 GIF, 因为 jpeg 加载时是逐行显示 ,GIF 是先显示图片轮廓再逐渐清晰内容 . 5. 尽量少用 JS ， JS 代码全部用外部调用文件封装。 6. 超链接的 title 属性包含关键字 , 图片的 alt 包含关键字 . 7. 404 错误页面重新制作一个 , 引导用户继续浏览我们的网站 . 8. 单个网页内超链接数目尽量不多于 100 个超链接 . 9. 适当用加粗和 heading 标签 , 文字大小 , 来使页面层次清晰 . 10. 版块的标题要包含关键字带链接 . 二 . 代码精简优化为了要减少服务器负荷 , 优化传输，加快网页打开速度 , 要求：减少空白区域，精简 Css 和 Javascript. Markup 优化

订阅 css样式