阅读CSS设计指南前5章节时所做的笔记，有些为摘录书本中的原句，有些为自己的想法，如果有什么错误的地方还请大家指教。
一、为文档添加样式的4种方法
1.行内样式：写在特定HTML标签的style属性里。
<p style="font-size:12px; color:red">行内样式</p>
2.嵌入样式：放在HTML文档的head元素中。
<head>
<style>
P { color:blue }
h1 { font-size:16px }
</style>
</head>
3.链接样式：把样式集中在一个单独的.css样式表文件中。可以在任意HTML页面中链接。
<link style=”text/css” href=”style.css” rel=”stylesheet” />
4.@import 指令 ：必须出现在上面三种样式表之前，否则不会被加载
@import url(css/styles.css)
二、CSS结构
CSS基本结构
对基本结构的三种扩展方法：
1.多个声明包含在一条规则中，以";-分号"隔开
p { color:red ; font-size:12px ; font-weight:bold; }
2.多个选择符组合在一起，组合符之间以”逗号,”隔开
h1, h2, h3 { color:red ; font-weight:bold ;}
3.多条规则用于同一个选择符。
h1, h2, h3 { color:red ; font-weight:bold; }
h3 { font-style:italic; }
三、CSS选择符
1.后代组合式选择符 ：一组以空格分隔的标签名。用于选择作为指定祖先元素后
代的标签。
<body>
<article>
<p> article的后代</p>
</article>
<p>其他p标签</p>
</body>
article p{color : red;} //只应用于article里面p标签
- 特殊的后代组合式选择符：
<section>
<h2>An H2 Heading</h2>
<p>This is paragraph 1</p>
<p>Paragraph 2 has <a href="#">a link</a> in it.</p>
<a href="#">Link</a>
</section>
(1). 子选择符 >
section > h2 { font-style:italic; }
此例中，section是h2的爸爸，只能是父子，而不能是爷孙或其他祖先的关系
(2). 紧邻兄弟选择符 +
h2 + p { font-variant:small-caps; }
此例中，p为紧跟在h2后面的兄弟元素
(3). 一般兄弟选择符 ~
h2 + a { color:red; }
此例中，a为h2后面的兄弟元素,不要求紧跟，但是不能在h2前面的兄弟元素
(4). 通用选择符 *
*{color：green}
此例中，页面中所有元素(文本和边框)均变成绿色
section * a{color:yellow}
此例中，选中任何是section的孙子元素的a标签，a的父元素是谁没关系
- 类选择符和ID选择符：
<h1 class="specialtext featured">This is a heading with the <span>same class</span>as the second paragraph.</h1>
<p id=”paragraphid”>This tag has no class.</p>
<p class="specialtext"> When a tag has a class attribute, you can target it<span>regardless</span> of its position in the hierarchy.</p>
(1). 类选择符 .类名{}
.specialtext{color:red;} //选择specialtext所有元素
p.specialtext{font-style:italic;} //只选择specialtext 类的p标签
.specialtext.featured{font-size:120%;} //只选择同时具有pecialtext和featured类的标签
(2). ID选择符 #ID (在选择符上与类的用法几乎一致)
#paragraphid {color:red;} //选择ID为paragraphid的一个元素
- 属性选择符：
(1). 属性名选择符
[title] {color：red;} // 选择带有title属性的所有标签
img[title] {border:2px solid blue;} 选择带有title属性的所有img标签
(2). 属性值选择符 (属性名选择符的更进一步 属性名跟属性值均要符合常用于表单元素input)
img[title="red flower"] {border:4px solid green;}
四、伪类(单个冒号)
- UI伪类：UI 伪类会基于特定 HTML 元素的状态应用样式。
(1). 链接伪类
a:link{color:black;} //等待点击
a:visited{color:gray;} //此前点击过这个链接
a:hover{color:red; text-decoration:none;} //鼠标指针悬停在链接上
a:active{color:pink;} //正在被点击(鼠标按下还没释放时的状态)
(2). :focus 伪类
表单中通过点击获得焦点时的样式设定
input:focus { border: 1px solid red }
(3). :target伪类
点击链接时对同一页面中的跳转目标元素设定样式
<a href=”#target”>To Target Element</a>
<p id=”target”>I am Target Element</p>
#target:focus{background:red;} //点击a链接，会给p标签加上红色背景
(4). 结构化伪类
:first-child :last-child :nth-child(n) //n为一个数值，也可以使用odd even
五、伪元素（两个冒号）
(1).
::first-letter //选中第一个字母
(2).
::first-line //选中段落第一行
(3).
e::before e::after // 在特定元素前面或后面添加特殊内容 注意是元素内容后面而不是元素后面插入一个伪元素(伪元素被包含)
六、常见CSS选择器列表：
CSS选择器列表
七、样式来源
浏览器默认样式表
用户样式表
作者链接样式表
作者嵌入样式
作者行内样式
八、层叠规则
-
层叠规则1：找到应用给每个元素和属性的所有声明
-
层叠规则2：按照顺序和权重排序
-
层叠规则3：按特指度排序
-
层叠规则4：顺序决定权重
-
计算特指度 I-C-E ( ID-Class- Element)
选择符中有一个ID , 就在I的位置上加1
选择符中有一个Class , 就在C的位置上加1
选择符中有一个元素名，就在E的位置上加1
p 0-0-1 特指度=1
p.largetext 0-1-1 特指度=11
p#largetext 1-0-1 特指度=101
body p#largetext 1-0-2 特指度=102
body p#largetext ul.mylist 1-1-3 特指度=113
body p#largetext ul.mylist li 1-1-4 特指度=114
九、盒子模型
-
盒模型属性
边框(border) 内边距(padding) 外边距(margin)
以上三个属性各有4个方向：上 右 下 左(设置简写时按这个顺序，如果那个值没写就用对边的值) -
盒子边框属性
宽度(border-width)
样式(border-style)
颜色(border-color)
圆角角度(border-radius) -
叠加垂直外边距
<p>the first paragraph<p>
<p>the second paragraph<p>
p { height:50px ; border:1px solid red; background-color:#333 ; margin-top:50px ; margin-bottom:30px ;}
以上两个p标签相邻边距为50px 而非(50px+30px)，在垂直间距上会叠加边距，取绝于较大的数值水平外边距则没有这个叠加效果。
- 盒子宽度
(1). 没有设置宽度的盒子
没有设置width的元素始终会扩展到填满其父元素的宽度。添加水平边框、内边距和外边距会导致内容宽度减小，减小量为border-width ，padding ，margin的和。
(2). 设置宽度的盒子
设定了宽度的盒子添加水平边框、内边距和外边距会导致盒子扩展得更宽。实际上之前设置的盒子width属性只是盒子内容去的宽度，而非盒子要占据的水平宽度。
十、浮动与清除
浮动元素脱离常规文档流后，紧跟其后的元素在空间允许的情况下，向上提升到与浮动元素平起平坐。如果浮动元素后面有两个元素，而只想让第一个元素与浮动元素并列(就算旁边还能放下第二个元素，也不想让他上来)，可以用clear属性来清除第二个元素。当块元素的高度是默认或者auto时，如果元素包含浮动元素，那么浮动元素不参与高度计算。
原始界面
对img添加float:left 后的界面
使用以下三种方法后的界面
- 围住浮动元素的三种方法
(1). 对父元素(容器元素)使用overflow:hidden
Overflow真正的用途是防止容器元素被超大内容撑大，容器元素保持设定宽度，超大子元素内容会被容器剪切掉。其还有另一个作用就是迫使容器元素包围其浮动的子元素。
(2). 同时浮动父元素(容器元素)
浮动容器元素，不管其子元素是否浮动，都会被包围起来。同时还要对容器元素的下一个兄弟元素应用clear:left，强制兄弟元素待在容器元素下方。
(3). 在父元素内容的末尾添加非浮动元素，可以直接在标记中加，也可以通过给父元素添加 clearfix 类来加（当然，样式表中得需要相应的 clearfix:after 规则）
.clearfix:after {
content: ”.” ;
display:block;
height:0;
visibility:hidden;
clear:both; } //确保伪元素高度为0，不可见
十一、定位
position 属性有 4 个值： static、 relative、 absolute、fixed，默认值为 static
<p> First paragraph </p>
<p>Second paragraph </p>
<p id=”specialpara”> Third paragraph (with ID) </p>
<p> Fourth paragraph </p>
1.相对定位
相对定位相对的是它再原文档流的位置(默认位置)，然后通过top、right、bottom、left属性来改变位置
p#specialpara { position:relative; top:25px; left:30px;}
这个元素相对原始位置移动了位置，页面其他没发生变化，也就是说这个元素原来占据的空间没动，其他元素也没有移动
相对定位
2.绝对定位
绝对定位会把元素彻底从文档流中拿出来，相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body），使用绝对定位后元素的display(非none情况)会变成inline-block
p#specialpara { position:absoult; top:25px; left:30px;}
绝对定位
十二、文字版式
CSS中的行高平均分布在一行文本的上方和下方。如果字体大小是12px，行高是20px，则浏览器会在文本上方和下方各加4px的 ，以凑足20px的行高。
十三、页面布局
多栏布局三种基本实现方案：固定宽度，流动和弹性
-
布局高度
多数情况下不居中结构化元素的高度是不必设定的，这样元素才能随自己包含内容的增加而在垂直方向上扩展。 -
布局宽度
我们需要更精细地控制布局宽度，但是不要给包含在其中的内容元素设定宽度，应该让这些内容元素自动扩展到填满栏的宽度。 -
三栏-固定宽度布局
问题：为有宽度的浮动栏设定水平外边距，内边距，增加栏间距，添加栏外边距，在栏中添加大图片或者没空格的场字符串可能会导致栏宽超过布局宽度，从而使右边的浮动栏没有足够的空间与其他栏并列而滑到左边栏下方。
解决方法：
(1). 从设定的元素宽度中减去添加的水平外边距、边框和内边距的宽度和。(需每次调整，不理想)
(2). 给栏添加一个没宽度的div，让它包含所有内容元素后给div应用边框和内边距等。
(3). 使用CSS3的box-sizing属性后，给section添加边框和内边距都不会增大盒子，相反会导致内容变窄。 -
三栏-中栏流动布局
-
多栏布局
多栏布局
第七章实践
实践
网友评论