HTML&CSS设计与构建网站 笔记CSS

1.CSS规则

如果两个选择器完全相同,后出现的为准

越具体的选择器,为准

2.letter-spacing word-spacing

字母间距,单词间距

3.:first-letter :first-line

p:first-letter 该p段落的第一个字母

4.[]

[attribute]         用于选取带有指定属性的元素。

[attribute=value] 用于选取带有指定属性和值的元素。

[attribute~=value] 用于选取属性值中包含指定词汇的元素。

[attribute|=value] 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。

[attribute^=value] 匹配属性值以指定值开头的每个元素。

[attribute$=value] 匹配属性值以指定值结尾的每个元素。

[attribute*=value] 匹配属性值中包含指定值的每个元素。

5.IE6 border-width

非IE6:margin+padding+width = 最终width,即改变margin,padding会改变width

IE6无DOCTYPE声明时:width = 最终width width包含margin和padding,即改变margin,padding不会改变width

6.属性

list-style-type

list-style-image

list-style-position

cursor 光标

7.HTML5布局

不支持HTML5的浏览器,会把这些标签当做内联元素,所以

header, section, nav, article, fotter, aside{
    display:block;
}

8.GOOGLE ANALYTICS 跟踪浏览者的行为

HTML&CSS设计与构建网站 笔记CSS

时间: 2024-08-12 19:03:59

HTML&CSS设计与构建网站 笔记CSS的相关文章

《css设计指南》 读书笔记 一

<css设计指南>这本书是一个大神同学介绍给我的,据说覆盖了几乎所有前端面试的有关css的知识点,所以赶紧买来看看.( ps:这本书貌似绝版了,可以上淘宝买复印本,也可直接看电子书. ) 闭合标签,自闭合标签. html5中,将忽略所有自闭合标签最后的 / .可是建议在最后仍然加上  空格加/ 以规范格式. 所有img标签都需要加上alt属性. ps:视障用户使用的屏幕阅读器会读出图片的alt属性. 行内.块级标签.  块级: h1~h6, p, ol/ul, li, blockquote .

CSS框架分析与网站的CSS架构

框架(framework)是一个基本概念上的结构,用于去解决或者处理复杂的问题,是一种可复用的构架. 我们对CSS框架这个词比较陌生,但对于JavaScript框架就比较熟悉了,比如jQuery 但为什么js框架大红大紫而CSS框架确始终没有流行起来呢?甚至有人说“在我有限的视野里,还没见到可以真正可以称得上css框架的东东~”CSS框架没有被大众接受的一个重要原因是: js框架是基于逻辑的,js框架简化了逻辑中的繁琐细节,封装了存在兼容性的函数,提供了丰富的选择器.函数和插件,给开发者带来方便

《CSS设计指南》笔记--CSS工作原理

通过阅读和学习书籍<CSS设计指南>总结 <CSS设计指南>/Charles lvyke-Smith著.李松峰译-人民邮电出版社 本书网站:http://www.stylinwithcss.com 强烈推荐!!深入浅出,精简,适合入门!! CSS工作原理 2.1 剖析CSS规则 ??规则实际上就是一条完整的CSS指令.规则声明了要修改的元素和要应用给该元素的样式. 2.1.1 为文档添加样式的三种方法 ??有三种方法可以把CSS添加到网页中,分别是写在元素标签里(行内样式),写在&

《CSS设计指南》笔记--HTML标记与文档结构

通过阅读和学习书籍<CSS设计指南>总结 <CSS设计指南>/Charles lvyke-Smith著.李松峰译-人民邮电出版社 本书网站:http://www.stylinwithcss.com 强烈推荐!!深入浅出,精简,适合入门!! HTML标记与文档结构 1.1 HTML标记基础 1.1.1 文本用闭合标签 ??闭合标签的基本格式如下: <标签名>文本内容<标签名/> <标签名 属性_1="属性值" 属性_2="属

【译】设计师/后端工程师也能马上实践!前端设计(CSS设计)的技巧

本文是我在众成翻译平台上认领并翻译的:设计师/后端工程师也能马上实践!前端设计(CSS设计)的技巧 ,正文内容如下: 大家好,我是2015年的应届毕业生小原,职位是前端工程师.不久前我加入了新业务的开发,负责前端的设计和实现.我想在回顾当时做法的同时,总结出一套能够轻松实现的前端编程设计方法. 什么是高灵活性的前端开发设计 不论开发什么样的业务,都可能面临界面样式没有完全确定,或者今后还需要增加或改变功能点的情况.因此代码开发与业务构思一样,都需要具备高度的灵活性,对变化频繁的前端来说更是如此.

【项目总结】扯一扯电商网站前端css的整体架构设计(1)

最近半忙不忙的写了一个外包网站,网站主要功能是艺术品竞拍和艺术衍生品的销售.工程已经完成了80%左右,现在前后端代码量已经50W行左右,我主要负责的是前端设计和前端布局.下面就先放一个网站的设计图吧,因为涉及到甲方的"商业机密",所以打一下马赛克: 这篇文章主要算是我对于这个项目的总结或者说是对于这阶段自己看的一些前端书或者经验的一个总结吧,所以设计图就不贴那么多了.整个项目的设计图由最开始的ui定了个首页稿基调,剩下的界面大部分都是我在首页稿基础上做出来的,以后有机会再唠.PS:不过

css设计指南第3版 读书笔记

html标记内容,css显示内容. html标记由一系列标签组成,包括闭合标签和自闭合标签,属性给标签提供了额外信息.标签可以嵌套. 标签分为块级别和行内级别,块级标签占一行(扩展到与父元素同宽),行内标签则相反,只有在空间不足才会折到下一行. html实体表示键盘上没有印刷的字符,它以&开始,;结束. dom层次可以使用父标签(直接祖先),子标签(直接后代),同胞标签,后代.祖先标签来表示. html标签都有一组样式,通过css来设定.css选择符和要应用的样式构成了一条css规则. css行

HTML+CSS笔记 CSS进阶再续

CSS的布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 CSS 布局样式或 CSS 布局模板.如果说布局模型是本,那么 CSS 布局模板就是末了,是外在的表现形式. CSS包含3种基本的布局模型,用英文概括为:Flow.Layer 和 Float. 在网页中,元素有三种布局模型:1.流动模型(Flow)2.浮动模型 (Float)3.

网站实战 从效果图开始CSS+DIV\布局华为网站

经过我们的前面css的学习,我们已经分模块的掌握的CSS的技术,但是,要是完整的做一个页面,我们还没有接触过,这次呢,小强老师来和大家完整的利用CSS+DIV做一个网站案例,我们来模仿下华为的网站. 主要分为以下6部分来做: 相信参看如下视频地址: 01   建立华为站点:               http://www.tudou.com/programs/view/Vbo8EffWPQw/ 02   华为站开始:                   http://www.tudou.com