初学CSS近期总结

一、CSS认知

• CSS（Cascading Style Sheet）全称：层叠样式表，简称样式表。

CSS作用

• 替代之前的table表格进行布局
• 对网页进行美化（颜色、图片、排版）

CSS的特点

• 表现层和结构层完全分离，符合web标准
• 便于团队开发 （视觉设计师和内容编辑分离）
• 便于网站的更新升级，网站性能高
• 能够适应不同的显示设备

---

二、CSS的基本语法

引入CSS的三种方式

• 行内样式
• 内部样式
• 外部样式

行内样式：在标签的开始标签中直接通过使用style属性
内部样式：在head 中添加style标签
外部样式：创建CSS文件（后缀.css），通过link连接到该样式

CSS选择器

基本选择器

• 类型选择器
• id选择器
• class选择器（最常用）

类型选择器即直接对标签设置属性，如p {},a {}
id选择器即标签中加入id属性，然后在CSS中所用#+id属性值，注意：不要在同一个页面中设置相同的id 属性
class选择器即类选择器，标签中设置class 属性，设置对应值，然后在CSS中设置 .+class 属性值

三、CSS排版初步

字体设置

font-style设置字体斜体还是普通
font-weight 设置字体加粗还是普通
font-size 设置字体大小
font-family 设置字体 （宋体、微软雅黑…）
font复合使用
color 设置字体颜色

文本设置

text-decoration(设置文本的修饰线，underline下划线、overline上划线、line-through删除线、none清除设置)
text-intent(设置文本缩进，单位通常使用em，1em表示一个文字的宽度，在添加logo 中通常用该属性将文本移出浏览器)
text-align(设置文本对齐的水平方式，left左对齐默认值，center居中，right右对齐，justify两端对齐，只对英文有效)
line-height(设置行高，可以加px设置高度，可以直接加数字，如1.5 2 分别表示文本的1.5倍 2倍高)

四、CSS的继承性

• 继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代即特定的CSS属性向下传递到子孙元素。
• 可以继承的常见属性有：
  font-family,font-size,font-style,font-weight,font, line-height,text-align,text-indent,color

---

五、 CSS的层叠性

• 同一个元素的样式可能被声明多次，这就涉及到css的层叠性
• 根据三种基本选择器中的优先级来考虑哪一个声明起作用
• 优先级

id选择器 >class选择器 >标签选择器
id选择器： 0 1 0 0 100块
class选择器:0 0 1 0 10块
类型选择器:0 0 0 1 1块

• 多个选择器同时出现时，对这些选择器累加求和，总体比较优先级

---

六、CSS的布局

• 盒模型 （流动布局）
• 浮动 （浮动布局）
• 定位 （层布局）

盒模型

• CSS定义所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含边界、边框、补白、内容区域、背景（包括背景颜色和背景图片），这就是盒模型。
• 盒模型六大属性：

width: 宽度
height：高度
border：边框
padding：内边距 补白
margin：外边距 边界
background：背景

• width和height设置

它们表示元素的宽度和高度。不是指整个盒子所占据的空间。
在设置的时候，通常使用px来进行，如果要实现响应式，则可以使用百分比。

• border设置

border右三部分构成：边框的粗细、边框的样式、边框的颜色
如：border:5px solid red

• padding设置

在设置padding属性值的，可以按照上、右、下、左的顺序来设置四边的padding值。
（只有一个值 上、右、下、左都相同；
有两个值：上下是相同的，左右是相同的
）

• margin设置

常用技巧：margin: 0 auto; 实现水平居中
margin写法同padding 一个值、两个值…

• background设置

background-color:设置盒子的背景颜色 背景颜色可以填充padding 也可以填充border
background-image:设置盒子的背景图片 img标签也是盒子 也可以给img这个盒子设置背景图片
一个盒子大小正好和背景图大小一样：正好装进去
一个盒子如果大于背景图：默认会在x和y轴都进行平铺
一个盒子如果小于背景图：只会显示背景图的一部分，背景图的左上角和盒子的左上角对齐 左上角是指从pddding开始 但是border中也会填充图片图片
background-repeat:
控制是否平铺　　repeat-x 只平铺x轴 repeat-y 只平铺y轴 repeat x和y轴都平铺 no-repeat x和y轴都不平铺
background-position:
一个小盒子中放一个大的背景图，可以使用background-position定位。
一个大盒子中放一个小的背景图，也可以使用background-position定位

浮动

• 用来实现布局，使得块级元素能够同处一行。

属性：float
属性值：left、right

• 特点

1）贴靠性 如果都向同一个方向浮动，这两个浮动的元素会紧紧的贴在一起，如果后面的空间不够贴靠的话，它会自动换行。
2）包裹性 如果是一个男盒子，在没有设置宽度的情况下，只要它浮动了，那么它的宽度会尽可能小
3）一个元素内部所有元素都浮动了，如果父元素在没有设置高度的情况下，它的高度会变成0，也就说父元素的高度塌陷了。
4）如果一个女盒子浮动了，就可以设置宽度和高度.

• 浮动造成的影响

对父元素造成的影响
对后面的兄弟元素影响

• 解决方案

清除浮动
清除对父元素所造成影响
1.overflow:hidden
2.加高法
清除对后面兄弟的影响
clear: left/right/both
常用 clear:both

---

综上：近期学习CSS样式表，并逐步开展页面的制作，通过这些基础点的学习，有一些心得感悟分享给大家。
我感觉在看到一个页面时，一定不要直接下手去做，这样很可能走弯路，绕来绕去；建议先仔细观察，把整个页面分解成多个盒子模型，自上而下，从左到右。在CSS的书写中，先写上重置样式 如“*{margin :0; padding : 0;}、body{font-size: 14px;}”。
常用div来建立盒子模型、当然有时候ul 无序列表也很常用 如导航栏的书写，一般左侧logo,右侧导航栏；logo左浮动，ul右浮动，最后再把li左浮动,即可实现效果。说到这常用ul时，list-style:none;
去掉默认的无序列表中小黑点。