List

  1. CSS样式表
  2. 选择器
  3. 字体
  4. 文本
  5. CSS复合选择器
  6. 标签显示模式
  7. CSS特性
  8. 盒子模型-普通流(标准流)
  9. 盒子模型-浮动

一、CSS样式表

1.行内式(内联样式)

可作为特殊设定
style="color: blue; font-size: 60px;"

2.内部样式表(内嵌样式表)


3.外部样式表(外链式)

将所有样式放在一个或多个以.css为扩展名的外部样式表文件中

通过link标签将外部样式表文件链接到html文档中



二、选择器

1.基础选择器

1.1 标签选择器

全部选择

全部选择

全部选择

全部选择


1.2 类选择器

1.指定标签类名
2.多类名 (相同属性以第一个类名为准)
Google

1.3 id选择器

id仅针对于唯一标签,在js中应用较多,css写样式应该较少

1.4 通配符选择器



三、字体

1.font-size

不同浏览器的默认字号不同,故应给body标签指定一个文字大小

2.font-family


3.font-weight

weight = 700
weight = 400

4.font-style

style: normal;
style: italic;

5.font:综合设置字体样式

顺序:font: font-style font-weight (font-size/line-height font-family)
括号内不可省略,感觉不是很好用


四、文本

1.文本颜色(color)


2.文本对齐(text-align)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id omnis temporibus reiciendis corporis, iusto culpa suscipit voluptate in aliquid sequi ratione, hic placeat cum minus nobis at ea qui vero.

3.文本行距(line-height)

Quas numquam ab itaque! Sint, quam fugit voluptatibus dignissimos fuga dolorem dicta odio iure, vel, adipisci asperiores corporis maxime error doloremque repellat.

Autem veritatis ex quisquam impedit, blanditiis delectus earum. Laboriosam tempore, laudantium, facilis a rerum quis optio officiis sunt harum maxime porro illo.


4.文本首行缩进(text-indent)

Ut provident sit saepe blanditiis nostrum dignissimos id laudantium neque. Dolores distinctio dolore tempora, nulla porro deleniti voluptas consequatur vel magnam cupiditate!

Laudantium, optio similique omnis earum doloremque qui nulla, magnam quibusdam officiis saepe ut eius sed nesciunt dignissimos dolor explicabo numquam, pariatur repellendus!


5.文本的装饰(text-decoration)

不加下划线的链接

6.Emmet 快捷操作语法



五、CSS复合选择器

1.后代选择器

child1 child2 child3 child4
dt
dd
dd
dd

无限向上继承


2.子元素选择器

dt
dd
dd
dd

必须指明继承关系


3.交集选择器

div.green

4.并集选择器

span
div

5.(链接)伪类选择器

百度链接 百度链接 小米链接


六、标签显示模式

1.块级元素(block-level)

div

独占一行

宽高及外边距均可调

默认宽度是父级元素的100%

是一个容器及盒子,里面可以放行内或者块级元素


2.行内元素(inline-level)

span

一行多个

无法设置宽高,默认为内容的宽高

只能容纳文本或其他行内元素


3.行内块元素(inline-block)


一行多个

默认宽度是其内容宽度

可以控制宽高


4.标签显示模式转换

span display block
百度链接

简单导航栏:

图片背景(背景附着)

图片导航栏


背景半透明



七、CSS特性

1.层叠性

后来的样式会覆盖先前的样式


2.继承性

带“-”的属性(样式)均会继承父元素的属性(样式)

如 text-decoration text-align margin-top 等


3.权重

权重大的选择器样式会覆盖权重小的选择器样式

!important > 行内样式 > id > 类/伪类 > 标签 > 通配符/继承

同等级比较出现个数多少



八、盒子模型-普通流(标准流

1.盒子边框(border)

1.1 边框


1.2 指定边框

ID:

1.3 表格边框

td td td
td td td

2.内边距(padding)

2.1 内边距

consectetur dignissimos impedit nisi quas tempora modi architecto quasi beatae eaque. Perferendis!

2.2 简约导航栏


2.3 内盒尺寸计算(元素实际大小)


盒子边框以内的部分等于width + padding

所以想要200 * 200 的盒子,width + padding 就要等于200


例外情况:

如果盒子没有width属性,那么内边距不会使盒子变大

除非内边距过大,鼠标放在内部盒子上观查padding增大的效果

lorem


3.外边距

3.1 外边距


3.2 块级盒子水平居中对齐

3.2 清除盒子的默认外边距

通过通配符选择器为所有标签设置样式

		
*{
	margin: 0;
	padding: 0;
}
		
	

3.3 外边距垂直合并(塌陷)(仅垂直方向)


父子边距塌陷:

3.4 盒子模型布局稳定性

优先使用width、然后是padding、最后考虑使用margin


4.新闻列表

最新文章/New Articles


5.CSS3拓展:

圆角盒子 + 阴影