CSS 设计指南3 读后感

时间：2016-01-21 19:57:28 阅读：269 评论：0 收藏：0 [点我收藏+]

HTML标记与文档结构
块状元素、行内元素、样式元素、结构化标签、盒模型、文档对象模型?
块状元素

div,p,h1-h6,address,ol,ul,pre,table,fieldset,legend,header,footer,nav,section,article,aside

行内元素

a ,img,span,input,label,select,abbr,I,big,small,em,bold,strong

样式元素

Center,font,basefont,s,strike,u,big,small,em,bold,strong

结构化标签

Header,footer,section,article,aside,nav

盒模型

不管是行内元素还是块状元素都有属于自己的盒模型

技术分享

如图：

493*18:此空间表示元素内容所占有的实际空间

Padding:表示这个盒除内容外的空间到盒border之间的距离

Border:表示这个盒最外层的高度

Margin：表示此元素距离其他位置的距离

文档对象

<html>

<body>

<div>

</div>

</body>

</html>

此时的文档结构就是body>div>h1,是具有一定的顺序及选择的相对性的。

CSS工作原理

原理:先通过css定义的查找规则，将元素查找到，然后设置样式

给文档添加样式的几种方式：

行内元素样式

通过style设置:<p style=‘color:red‘>M</p>
行内样式的作用范围非常有限，且样式只会作用于他所在的元素上，并且行内样式总会覆盖嵌入样式与链接样式

嵌入样式

在当前页面通过<style></style>设置
样式只会在当前页面上有效，且会覆盖链接样式，但会被行内样式覆盖

链接样式

通过link 指定外部的css文件:<link href=‘xx.css‘ />
在css文件中可以通过@import引入其他css文件。注意：此时需要把@import放在指定样式最前面设置，不然该指令无效

Css命名惯例

P{color:red};

P:选择符,指定需要操作的元素

Color：属性，指定需要影响元素的哪方面样式

Red：设置属性值

常见选择符：

上下文选择符
1.1常规上下文选择符 p1 p2:此时p1 可以是p2的直接父元素，也可以是祖先元素
1.2子选择符 p1>p2：此时的p1必须是p2的直接父元素
1.3.紧邻的同胞元素p1+p2:p2必须紧邻p1后
1.4一般相邻元素：p1~p2:p2在p1元素之后，但不一定是紧邻
1.5通配符:*,匹配用到的所有元素
Id与类选择符
Id与class选择器的使用范围
Id是标记唯一元素时，使用。Class是使用一组样式时使用。记住:不用乱用class元素，应多食用继承及上下文选择器
属性选择符
属性名选择器：img[title]
属性值选择器: input[type=‘date‘]
伪类
UI伪类:当界面上处于某个状态时，发生变化
链接伪类：
A:hover,a:link,a:visited,a:active
Hover:鼠标放在上面
Link：未访问时
Visited：访问过后的
Active：鼠标正好被点击，还没有释放
:focus:当焦点在某个元素上就触发
:target:如果在页面上点中一个指向其他元素的链接，则这个元素会被触发
有些伪类可以时候很多元素，有些伪类只适合特定元素。如：link,Visited就只适合a标签
结构伪类：当关系中存在某种结构变化时
First-child:第一个子元素
Last-child:最后一个子元素
Nth-child:指定是哪个元素，如可以指定odd(奇数),even(偶数)，可以是公式，如nth-child(3n+1),表示选择奇数的子元素并且周期为3
伪元素
::first-letter:第一个字符
::first-line:第一行元素
::before,::after:可用于在特定元素前后加内容
?

继承

http://blog.163.com/yhwwen@126/blog/static/170468853201326421822/

层叠

对于某个元素的样式控制可能来至多个样式，此时判断哪个样式进行显示

http://www.cnblogs.com/wangfupeng1988/p/4277959.html

样式来源:

1.浏览器默认有的

2.用户样式

3.作者链接样式【按照先后顺序加载】

4.作者嵌入样式

5.行内样式

层叠规则：

规则一:找到应用给每个元素和属性的所有声明

规则二:按照顺序和权重排序【!important】

规则三:按照特指度排序

通过ICE规则来计算特指度

I:id,C:class,E:Element

技术分享

规则四:顺序决定权重

简要总结:

规则一:含有id的选择符的权重高于含有class的选择符，含有class选择符的高于含有标签的选择符
规则二:对于样式来至不同来源：行内样式胜过内嵌样式，内嵌样式胜过链接样式。在连接样式中如果对同一个属性声明的多个选择符,后声明的胜过先声明的
规则一胜过规则二,及不管在哪声明的，权重高的都胜出

3.设定样式胜过继承样式

规则声明

文本值

使用关键值表示，如:font-weight:bold;这里的bold就是一个关键字

数字值

数字值主要用来描述长度的（长度、宽度、粗细）.主要有2种类型：绝对与相对

技术分享

颜色值

http://www.w3.org/TR/css3-color/

颜色名【red,blue,gray 等】
十六进制颜色
#rrggbb这个格式设置颜色
以#开头，头2位：红，中间2位：绿，最后2位：蓝
RGB 值
RGB百分比
?

R:red,G:green,B:blue

如：rgb(0,0,0)

HSL(色相,饱和度，亮点)
Alpha 通道
Rgba hsla

定位元素
所谓盒模型，就是浏览器为页面中的每个 HTML 元素生成的矩形盒子。这些盒子
们都要按照可见版式模型（visual formatting model）在页面上排布。可见的页面
版式主要由三个属性控制： position 属性、 display 属性和 float 属性。其中，
position 属性控制页面上元素间的位置关系， display 属性控制元素是堆叠、并
排，还是根本不在页面上出现， float 属性提供控制的方式，以便把元素组成成多
栏布局。所谓盒模型，就是浏览器为页面中的每个 HTML 元素生成的矩形盒子。这些盒子
们都要按照可见版式模型（visual formatting model）在页面上排布。可见的页面
版式主要由三个属性控制： position 属性、 display 属性和 float 属性。其中，
position 属性控制页面上元素间的位置关系， display 属性控制元素是堆叠、并
排，还是根本不在页面上出现， float 属性提供控制的方式，以便把元素组成成多
栏布局。

简写样式
CSS 为边框、内边距和外边距分别规定了简写属性，让你通过一条声明就可以完成设定。在每
个简写声明中，属性值的顺序都是上、右、下、左。想象一下顺时针旋转就记住了。举个例子
吧，如果要设定盒子的外边距，不用简写属性就得这样写：
{margin-top:5px; margin-right:10px; margin-bottom:12px; margin-left:8px;}
使用简写属性，则可以简写为这样：
{margin:5px 10px 12px 8px;}
注意，4 个值之间有空格，但不能是其他分隔符（比如逗号之类的）。甚至，你都不用把 4 值
全都写出来——如果哪个值没有写，那就使用对边的值。
{margin:12px 10px 6px;}
对这个例子来说，由于没有写最后一个值（左边的值），所以左边就会使用右边的值，即 10px。
而在下面的例子中：
{margin:12px 10px;}
只写了两个值，上和右，因此缺少的下和左就会被设定为 12px 和 10px。最后，如果你只写
一个值：
{margin:12px;}
那么 4 个边都取这个值。使用这种简写属性，不能绕开上和右，只给下和左设定值，即使上和
右都是零也不行。绕不开怎么办？如果它们真是零的话，那就写 0 呗，比如：
{margin:0 0 2px 4px;}
另外，每个盒子的属性也分三种粒度，到底选择哪个粒度的属性，要看你想选择哪条边，以及
那条边的哪个属性。这三种粒度从一般到特殊分别是举例如下。
1. 全部 3 个属性，全部 4 条边
{border:2px dashed red;}
2. 1 个属性，全部 4 条边
{border-style:dashed;}
3. 1 个属性，1 条边
{border-left-style:dashed;}

混合使用这三种粒度的简写属性达成设计目标是很常见的。比如说吧，我想为盒子的上边
和下边添加 4 像素宽的红色边框，为左边添加 1 像素宽的红色边框，而右边没有边框。可
以这样写：
{border:4px solid red;} /* 先给 4 条边设置相同的样式 */
{border-left-width:1px;} /* 修改左边框宽度 */
{border-right:none;} /* 移除右边框 */

盒子边框【border】

Border有3个样式：宽度【border-width】，样式【border-style】,颜色【border-color】

宽度（border-width）。可以使用 thin、 medium 和 thick 等文本值，也可以使用
除百分比和负值之外的任何绝对值。
q?样式（border-style）。有 none、 hidden、 dotted、 dashed、 solid、 double、 groove、
ridge、 inset 和 outset 等文本值。
q?颜色（border-color）。可以使用任意颜色值，包括 RGB、 HSL、十六进制颜色
值和颜色关键字。
CSS 推荐标准并未明确规定 border-width 这几个文本值 thin、 medium 和 thick 的确
切宽度，实际显示的宽度可能会因浏览器而异。对于边框样式（border-style），除
了 solid 值（实线）之外， CSS 规范也没有明确规定。因此 dashed 值（虚线）在不

盒模型【内边距padding】

????盒子外边距

中和外边距与内边距{margin：0;padding:0}，对需要使用margin、padding的再进行设置

在垂直边距上叠加计算

盒子有多大

对于未指定宽度的盒子来说

未指定宽度的盒子，随着指定border、padding、margin后盒子内容的实际宽度在不断的减小

对于指定了宽度的盒子来说
对于指定了盒子的宽度，会随着指定border、padding、margin后，盒模型不断变大
?
盒模型结论一：没有（就是没有设置 width 的）宽度的元素始终会扩展到填满其父
元素的宽度为止。添加水平边框、内边距和外边距，会导致内容宽度减少，减少量
等于水平边框、内边距和外边距的和。
?
盒模型结论二：为设定了宽度的盒子添加边框、内边距和外边距，会导致盒子扩展
得更宽。实际上，盒子的 width 属性设定的只是盒子内容区的宽度，而非盒子要占
据的水平宽度。

浮动与清除

Float，clear

围住浮动元素的3中方法

方法一：为父元素添加 overflow:hidden

方法二: 同时浮动父元素

方法三：添加非浮动的清除元素

定位

Static:元素默认使用的上定位方式

Relative:相对于元素在文档流中原来的位置进行定位【未完全脱离文档流】,就是一个普通的定位

Absolute:默认相对于body进行定位，但可以根据他的上下文进行定位【脱离文档流】，此时定位与上下文有关系。此时寻找上下文是找他最近一个设置了position的元素作为上下文使用。

Fixed:与绝对定位类似，只不过，fixed的定位上下文是相对于视口来说的，具有绝对性，absolute的上下文具有相对性

背景属性

Background-color:

Background-image:

Background-repeat

Background-position: http://www.jb51.net/css/23213.html

Background-size: http://blog.sina.com.cn/s/blog_475e4b9b0100vpeb.html
background-attachment:

渐变：

4字体和文本

字体

字体来源方式：

客户端的字体
第三方服务器上的字体
自己服务上的字体:通过@font-face
?
设置字体属性:
Font-family:字体样式
Font-size:

Font-style:字体风格

Font-weight:字体粗细
Font-variant:

Font:
?
?
字体族：
当使用本地或网络中的字体时，为了防止字体可能不存在，指定多个字体以备前面字体不存在时使用。

文本属性

Text-indent：文本缩进

Letter-spacing:字符间距

Word-spacing:单词间距 CSS 把任何两边有空白的字符和字符串都视作"单词" ①

Text-decoration:文本装饰【underline、overline，line-through、blink、none】

Text-align:文本水平方向对齐方式【left,right,center,justify】

Line-height:行高

Text-transform:文本转换【none,uppercase,lowercase,capitalize[每个单词首字母转为大写]】

Vertical-align: 以基线为参照上下移动文本，但这个属性只影响行内元

Web字体

q?使用 Google Web Fonts 或 Adobe 的 Typekit 等公共字体库。
q?使用事先打好包的@font-face 包。
q?使用 Font Squirrel 用你自己的字体生成@font-face 包

公共字体库

Google Web Fonts 和 Adobe 的 Typekit

使用@font-face http://www.fontsquirrel.com/字体库

使用这个时，需要注意先目前浏览器使用的格式不一样eof,svg、ttf

http://www.php100.com/manual/css3_0/@font-face.shtml

@font-face{

Font-family:‘定义将将要使用的字体名‘

Src:url(指定字体路径)，

Font-weight:

Font-style:

}

5页面布局

三栏-固定宽度布局

通过给内部容器指定float，及固定宽度

问题：

当使用float、固定宽度后，如果在每个容器中做了其他操作[让当前块的宽度增加]，容易让容器超出已有的宽度，从而挤下元素，破坏原有的布局
q?从设定的元素宽度中减去添加的水平外边距、边框和内边距的宽度和。
q?在容器内部的元素上添加内边距或外边距。[内部元素未指定宽度]
q?使用 CSS3 的 box-sizing 属性切换盒子缩放方式，比如 section {box-sizing:
border-box;}。应用 box-sizing 属性后，给 section 添加边框和内边距都不会增
大盒子，相反会导致内容变窄。
?
?