css基础知识

引子:前期有看过一些css相关的书籍,但是一直都没有做总结和记录,现在开始吧~~

目录:

css设计指南3

1.Html标记与文档结构

1-1.Html标记基础

1-2.Html文档结构

2.css工作原理

2-1.css基本使用

2-2.选中Html标签的方法

2-3.伪类和伪元素

3.定位元素

3-1.盒子模型

3-2.浮动与清除

3-3.定位

4.页面布局

4-1.布局的基本概念

4-2.三栏布局

4-3.多栏布局

参考

1、网络资源

2、书籍-css设计指南3

3、百度前端学院

css设计指南3

1.Html标记与文档结构

1-1.Html标记基础

1-1-1.html标签的2种写法
1-1-2.基本的块级标签和行内标签

1-2.Html文档结构

2.css工作原理

2-1.css基本使用

2-1-1.Html添加样式的3种方法(代码放在何处)
2-1-2.css命名使用规则(最简单的例子)

2-2.选中Html标签的方法(id,属性,上下文选择符)

2-2-1.上下文选择符

上下文选择符(后代组合式选择符)的格式如下:

标签 1 标签 2 {声明}

其中,标签 2 就是我们想要选择目标,而且只有在标签 1 是其祖先元素(不一定是父元素)的情况下才会被选中。无论从该标签到作为 祖先的上下文之间隔着多少层次都没有关系。

article p {font-weight:bold;}
2-2-2.子选择符>

标签 1 > 标签 2

标签 2 必须是标签 1 的子元素,或者反过来说,标签 1 必须是标签 2 的父元素。与常 规的上下文选择符不同,这个选择符中的标签 1 不能是标签 2 的父元素之外的其他 祖先元素。

section > h2 {font-style:italic;}
2-2-3.紧邻同胞选择符+

标签 1 + 标签 2

标签 2 必须紧跟在其同胞标签 1 的后面。

h2 + p {font-variant:small-caps;}
2-2-4.通用选择符*

通用选择符*(常被称为星号选择符)是一个通配符,它匹配任何元素,因此下面这条规则

* {color:green;}

会导致所有元素(的文本和边框)都变成绿色。

2-2-5.ID 和类选择符

ID 和类为我们选择元素提供了另一套手段,利用它们可以不用考虑文档的层次结构。 只要你在 HTML 标记中为元素添加了 id 和 class 属性,就可以在 CSS 选择符中使用 ID 和类名,直接选中文档中特定的区域。

ID 的用途是在页面中唯一地标识一个元素。正因为如此,同一个页面中的每一个 ID 属性,都必须有独一无二的值(名字)。好吧,换一个角度讲,每个 ID 名在页面中 都只能用一次。

类的目的是为了标识一组具有相同特征的元素,比如本章前面例子中的那个specialtext 类。

2-3.伪类和伪元素

2-3-1.伪类

伪类这个叫法源自它们与类相似,但实际上并没有类会附加到标记中的标签上。伪类分两种。

1.UI(User Interface,用户界面)伪类会在 HTML 元素处于某个状态时(比如鼠标 指针位于链接上),为该元素应用 CSS 样式。

2.结构化伪类会在标记中存在某种结构上的关系时(如某个元素是一组元素中的第 一个或最后一个),为相应元素应用 CSS 样式。

2-3-2.伪元素

顾名思义,伪元素就是你的文档中若有实无的元素。以下我们介绍几个最有用的伪 元素

1、::first-letter 伪元素

p::first-letter {font-size:300%;}

段落首字符放大的效果。

2、::first-line 伪元素

p::first-line {font-variant:small-caps;} 

可以把第一行以小型大写字母显示

3、::before 和::after 伪元素

<p class="age">25</p>
p.age::before {content:"Age: ";}
p.age::after {content:" years.";}

Age: 25 years.

3、定位元素

3-1、盒子模型

3-1-1、盒子模型属性

1、边框(border)。可以设置边框的宽窄、样式和颜色。

宽度(border-width)。可以使用 thin、medium 和 thick 等文本值,也可以使用 除百分比和负值之外的任何绝对值。

样式(border-style)。有 none、hidden、dotted、dashed、solid、double、groove、 ridge、inset 和 outset 等文本值。

颜色(border-color)。可以使用任意颜色值,包括 RGB、HSL、十六进制颜色 值和颜色关键字。

2、内边距(padding)。可以设置盒子内容区与边框的间距。

3、外边距(margin)。可以设置盒子与相邻元素的间距。

垂直方向上的外边距会叠加,这可是你必须得知道的一件事。

p {height:50px; border:1px solid #000; backgroundcolor:#fff; margin-top:50px;margin-bottom:30px;}

warning:

由于第一段的下外边距与第二段的上外边距相邻,你自然会认为它们之间的外边距 是 80 像素(50+30),但是你错啦!它们实际的间距是 50 像素。像这样上下外边距 相遇时,它们就会相互重叠,直至一个外边距碰到另一个元素的边框。就上面的例 子而言,第二段较宽的上外边距会碰到第一段的边框。也就是说,较宽的外边距决 定两个元素最终离多远,没错——50 像素。这个过程就叫外边距叠加。

外边距的左右边距则和外边距的上下边距原理相反,左右边距是2者相加。

3-1-2、盒子有多大

首先,谈一谈设定盒子的宽度,因为控制元 素的宽度是创建多栏布局的头等大事。一开始我们会看到给没有宽度的元素添加边 框、内边距和外边距的效果,然后再看看通过 CSS 给它设置了宽度之后,它的行为有什么不同。

3-2、浮动与清除

3-2-1、浮动

CSS 设计 float 属性的主要目的,是为了实现文本绕排图片的效果。然而,这个属 性居然也成了创建多栏布局最简单的方式。

说得形象一点,在你浮动一张图片或者其他元素时,你是在要求浏览器把它往上方 推,直到它碰到父元素(也就是 body 元素)的内边界。后面的段落(带灰色边框) 不再认为浮动元素在文档流中位于它的前面了,因而它会占据父元素左上角的位置。 不过,它的内容(文本)会绕开浮动的图片。

接下来我们再看看浮动的另一面,这也是必须得理解的。浮动元素位于“文档流外 部”,因而它已经不被包含在标记中的父元素之内了。正因为如此,它对布局可能产 生破坏性影响。

围住浮动元素的三种方法

1、为父元素添加 overflow:hidden

 <section>
     <img src="images/rubber_duck2.jpg">
     <p>It's fun to float.</p>
</section>
<footer> Here is the footer element that runs across the bottom of the
   page.
</footer>

section {border:1px solid blue; margin:0 0 10px 0; overflow:hidden;}
img {float:left;}
p {border:1px solid red;}

2、同时浮动父元素

section {border:1px solid blue; float:left; width:100%;} 
img {float:left;}
footer {border:1px solid red; clear:left;}

3、添加非浮动的清除元素

方案一:
<section> 4 <img src="images/rubber_duck.jpg">
    <p>It's fun to float.</p>
    <div class="clear_me"></div>    
</section>
<footer> Here is the footer element...</footer>

section {border:1px solid blue;}
img {float:left;}
.clear_me {clear:left;}
footer {border:1px solid red;}

方案二:
<section class="clearfix">
  <img src="images/rubber_duck.jpg">
  <p>It's fun to float.</p>
</section>
<footer> Here is the footer element...</footer>

.clearfix:after {
       content:".";
       display:block;
       height:0;
       visibility:hidden;
       clear:both;
}
3-2-3、浮动与清除的例子(源码中也有解释)

浮动与清除Demo

3-3、定位

3-3-1、相对定位

相对定位是相对哪里定位的呢?相对的是原来它在文档流中的位置,发生移动,不影响其他的元素布局,原来自身所在的空间保留不动,也可能超过body的边界

3-3-2、绝对定位

与相对定位相反,绝对定位是将元素连根拔起,然后在相对定位上下文(默认是body,当将其某个祖先元素设置为position:relative之后,该元素就是定位上下文了),来进行位置确定。

3-3-3、固定定位

和绝对定位类似,也是完全将元素连根拔起,但是它参考的浏览器的边界或者手机的屏幕,不会随着滚动发生偏移。

3-3-4、显示属性(display:inline||block)

把块级元素变成行内元素(或者相反)的魔法如下

/*默认为 block*/
p {display:inline;} 
/*默认为 inline*/
a {display:block;}

warning:

Top的值表示对象相对原位置向下偏移的距离,bottom的值表示对象相对原位置向上偏移的距离,两者同时存在时,只有Top起作用。

left的值表示对象相对原位置向右偏移的距离,right的值表示对象相对原位置向左偏移的距离,两者同时存在时,只有left起作用。

4、页面布局

4-1、布局的基本概念

4-1-1、多栏布局的实现方案
4-1-2、布局高度和布局宽度

4-2、三栏布局

只要掌握了创建三栏布局的技术,你想搞多少栏就 能搞多少栏。

4-2-1、三栏固定宽度布局

例子详解

4-2-2、三栏中栏流动布局

例子详解

4-3、多栏布局

参考

1、网络资源

css布局-dispaly,position,float

css布局-float详解,英文

css相对定位和绝对定位

关于css position: absolute、relative定位问题

HTML、CSS知识点总结,浅显易懂

2、书籍相关

css设计指南3

3、练手项目

百度前端技术学院