css样式 | 易学教程

常用的CSS命名规则

阅读更多关于常用的CSS命名规则

头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper 左右中：left right center 登录条：loginbar 标志：logo 广告：banner 页面主体：main 热点：hot 新闻：news 下载：download 子导航：subnav 菜单：menu 子菜单：submenu 搜索：search 友情链接：friendlink 页脚：footer 版权：copyright 滚动：scroll 内容：content 标签页：tab 文章列表：list 提示信息：msg 小技巧：tips 栏目标题：title 加入：joinus 指南：guild 服务：service 注册：regsiter 状态：status 投票：vote 合作伙伴：partner ( 二)注释的写法: 内容区 (三)id的命名: (1)页面结构容器: container 页头：header 内容：content/container 页面主体：main 页尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper 左右中：left right center (2)导航导航：nav 主导航：mainbav 子导航

CSS的class常用命名规则

阅读更多关于 CSS的class常用命名规则

CSS的class、id、css文件名的常用命名规则 (一)常用的CSS命名规则　　头：header 　　内容：content/container 　　尾：footer 　　导航：nav 　　侧栏：sidebar 　　栏目：column 　　页面外围控制整体布局宽度：wrapper 　　左右中：left right center 　　登录条：loginbar 　　标志：logo 　　广告：banner 　　页面主体：main 　　热点：hot 　　新闻：news 　　下载：download 　　子导航：subnav 　　菜单：menu 　　子菜单：submenu 　　搜索：search 　　友情链接：friendlink 　　页脚：footer 　　版权：copyright 　　滚动：scroll 　　内容：content 　　标签页：tab 　　文章列表：list 　　提示信息：msg 　　小技巧：tips 　　栏目标题：title 　　加入：joinus 　　指南：guild 　　服务：service 　　注册：regsiter 　　状态：status 　　投票：vote 　　合作伙伴：partner 　　(二)注释的写法: 　　/* Footer */ 　　内容区　　/* End Footer */ 　　(三)id的命名: 　　(1)页面结构　　容器:

css的好习惯

阅读更多关于 css的好习惯

今天师父上了第一堂课，讲了一些关于浏览器处理css的事儿。也算是一种好的习惯吧~ 1、页面上用到的一些背景图片，如果是一些比较小的图片，应该把他们合成到一张图片上，然后通过background-position来设置背景图片的位置。这样做的好处是：a、一张图片的大小会比很多张分散的图片小 b、这样可以一次加载完图片，比如你做按钮的普通和hover状态时，如果用两张图片，那么在一些浏览器下，hover的时候明显有一个空白再切换图片的过程，这样是无法满足我们的要求的。而如果合成一张图片，通过background-position就不会有这种问题了。 c、如果多个css样式都会用到合成的图片，那么最后将它们放到一起来设置它们的背景图片。如div1,div2{background:url(..),no-repeat;}IE6下不会缓存图片，这样的话就避免了每次读到一个样式的时候都要重新加载同一张图片最主要的好处就是：减少浏览器与服务器之间的通信次数 2、写css样式的时候，最好按照（display|list-style|position|float|clear等显示属性）->（width|height|margin|padding|border|background等自身属性，盒模型样式）->（color|line-height|font| text - decoration|

前端代码规范-CSS

阅读更多关于前端代码规范-CSS

CSS规范一.命名规范 BEM(Block Element Modifier) 1.Block name -- 实体名称中的单词之间用连字符分隔(-) HTML <div class="menu">...</div> <div class="menu-name">...</div> CSS .menu { color: red; } .menu-name { color: red; } 2.Element name ***-- 元素名与块名之间用双下划线分隔(__)*** ***-- 需要注意的是不要出现block__elem1__elem2类似的命名，因为元素总是块的一部分，而不是另一个元素的。*** HTML <div class="menu"> ... <span class="menu__item"></span> </div> CSS .menu__item { color: red; } 3.Block modifier name -- 修饰符与块或元素的名称之间用双连字符分隔(--) -- 修饰语的值与其名称之间用双连字符分隔(--) HTML <div class="menu menu--hidden"> ... </div> <div class="menu menu--theme--islands"> ... </div> CSS .menu--hidden

CSS学习基础入门教程：了解熟悉css语法

阅读更多关于 CSS学习基础入门教程：了解熟悉css语法

宣告CSS样式的语法如下：選擇器{ 选择器{ 屬性：設定值；属性：设定值； ... } 在一個選擇器(Selector) 中，可以設定的屬性數目沒有限制。在一个选择器(Selector)中，可以设定的属性数目没有限制。選擇器主要有三種：型類(Type) 選擇器、Class 選擇器、和ID 選擇器。选择器主要有三种：型类(Type)选择器、Class选择器、和ID选择器。型類選擇器是(X)HTML 標籤，如<body> 和<h1>。型类选择器是(X)HTML标签，如<body>和<h1>。 Class 和ID 選擇器是使用者自訂的選擇器。 Class和ID选择器是使用者自订的选择器。我們會在之後討論這兩類的選擇器。我们会在之后讨论这两类的选择器。樣式是以『屬性：設定值』的方式來制定。样式是以『属性：设定值』的方式来制定。舉例來說，若我們要設定一個元素內的文字是黃色的，那就用以下的『屬性：設定值』：举例来说，若我们要设定一个元素内的文字是黄色的，那就用以下的『属性：设定值』：新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。 color:yellow; 在以上的宣告內，color 是屬性，而yellow 是設定值。在以上的宣告内，color是属性，而yellow是设定值。

CSS零基础入门教程缩写优化CSS文件的体积

阅读更多关于 CSS零基础入门教程缩写优化CSS文件的体积

Web网站可用性的关键指标是速度，更确切地说，是页面能以多快的速度出现在访问者的浏览器窗口里。影响速度的因素有很多种，包括Web服务器的速度、访问者的Internet连接情况，以及浏览器必须下载的文件大小。尽管你无法控制服务器和连接的速度，但是你可以控制构成网站Web页面的文件大小。为了让网站能够更快，Web的建设者都会按常规地压缩和优化网站上的每一个图像文件，这常常使得为了将文件的大小减少几个百分点而牺牲了图像的质量。由于CSS样式表是纯文本文件，和图像相比相对较小，所以Web建设者很少考虑采取措施减少其CSS样式表文件的大小。但是，通过使用CSS缩写以及其他的一些简单技巧，你可以在很大程度上减少样式表的大小。在我对自己样式表的一次非正式的特别测试中，我把文件的大小降低了大约25－50％。新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。使用CSS的缩写性质 CSS的缩写性质（shorthand property）是一些专用的性质名，用来代替多个相关性质的集合。例如，间隙性质（padding property）是顶部间隙（padding-top）、右侧间隙（padding-right）、底部间隙（padding-bottom）和左侧间隙（padding-left）的缩写。

CSS基础知识总结

阅读更多关于 CSS基础知识总结

文章目录 CSS概述 HTML中引入CSS样式的三种方式内联定义方式样式块方式引入外部独立的css文件列表样式 CSS样式的绝对定位 CSS概述什么是CSS，有什么作用？ CSS(Cascading Style Sheet): 层叠样式表语言。 CSS的作用是：修饰HTML页面，设置HTML页面中的某些元素的样式，让HTML页面更好看。 CSS好比是HTML的化妆品一样。 HTML还是主体，CSS依赖HTML。CSS的存在就是修饰HTML，所以新建的文件还是xx.html文件。 HTML中引入CSS样式的三种方式内联定义方式 < ! doctype html > < html > < head > < title > HTML 中引入 CSS 样式的第一种方式：内联定义方式 < / title > < / head > < body > < ! -- width 宽度样式 height 高度样式 background - color 背景色样式 display 布局样式（none表示隐藏，block表示显示） -- > < div style = "width : 300 px ; height : 300 px ; background - color : # CCFFFF ; display : block ; border - color : red ;

Web前端团队开发规范文档

阅读更多关于 Web前端团队开发规范文档

为新项目写的一份规范文档, 分享给大家. 我想前端开发过程中, 无论是团队开发, 还是单兵做站, 有一份开发文档做规范, 对开发工作都是很有益的. 本文档由本人编写, 部分意见来源于网络, 以此感谢, 片面及有误的地方, 希望大家指正. 另, 本文档部分规范是为我所在项目组所写, 使用时请根据实际项目需求修改. 以下为[WEB前端开发规范文档]正文点此查看WEB版本规范目的为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改. 基本准则符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度. 文件规范 1. html, css, js, images文件均归档至<系统开发规范>约定的目录中; 2. html文件命名: 英文命名, 后缀.htm. 同时将对应界面稿放于同目录中, 若界面稿命名为中文, 请重命名与html文件同名, 以方便后端添加功能时查找对应页面; 3. css文件命名: 英文命名, 后缀.css. 共用base.css, 首页index.css, 其他页面依实际模块需求命名.; 4

CSS杂记

阅读更多关于 CSS杂记

1、自动截取字符串添加省略号 text-overflow：ellipsis 2、不自动换行 white-space: nowrap 与overflow: hidden和上边的一起使用 3、margin与padding 就像墙上挂着的两个相框，margin指的是相框与相框的距离，padding指的是每个相框里照片与相框边框的距离。镜框是border 4、背景设置为透明 background-color: transparent opacity: 0.90;filter:alpha(opacity=90) 5、float 属性定义元素在哪个方向浮动注：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止 6、去除li的前置标记 list-style-type: none; 7、鼠标获取焦点时的样式 cursor：pointer 8、em替换px。em替换px主要应用于文字缩放。计算公式为目标元素尺寸 / 上下文元素尺寸 = 百分比尺寸 9、line-height: 20px;内部高度 10、子元素按比例分配-moz-box-flex:1.0; /* Firefox */ -webkit-box-flex:1.0; /* Safari and Chrome */ box-flex:1.0; 11、[class^="test"]

使用 Emmet 提高编写 CSS 的效率

阅读更多关于使用 Emmet 提高编写 CSS 的效率

前面潜行者m 介绍了 Emmet 的功能和如何使用 Emmet 来生成 HTML 代码，这次再来讲解一下如何使用 Emmet 提高 CSS 编写效率。首先，Sublime Text 2 已经提供了比较强大的 CSS 样式所写方法来提高 CSS 编写效率。例如编写 position: absolute; 这一个属性，我们只需要输入 posa 这四个字母即可。它会弹出缩写样式的提示：你不妨在编写 CSS 的时候，留意一下 ST2 提供了哪些属性的缩写方法，这样就可以提高一定的效率了。但是 Emmet 提供了更多的功能，请往下看。简写属性和属性值如果你想生成 width:100px; 你只需要输入 w100 就可以了，因为 Emmet 的默认设置 w 是 width 的缩写，后面紧跟的数字就是属性值。默认的属性值单位是 px ，你可以在值的后面紧跟字符生成单位，可以是任意字符。例如，w100foo 会生成 width:100foo; 这样一条语句。你同样也可以简写属性单位，如果你紧跟属性值后面的字符是 p ，那么将会生成 width:100%; 这样的语句，其中 p 表示百分比单位。与此类似的还有： e → em; x → ex。例如 margin 这样的属性，可能并不是一个属性值，生成多个属性值需要用横杠（-）连接两个属性值，因为 Emmet 的指令中是不允许空格的

订阅 css样式