CSS入门学习笔记

1.CSS简介

CSS全称为“层叠样式表 (Cascading Style Sheets)”，是一组样式设置的规则，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。使用CSS样式可以通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等，实现内容与样式的分离，便于团队开发。

2.CSS基本用法

CSS语法：

选择器：要修饰的对象（东西）

属性名：修饰对象的哪一个属性（样式）

属性值：样式的取值

		<style type="text/css">
			.lcw .one:link{
				/*将行内元素转为行内块元素*/
				display: inline-block;
				/*设置大小*/
				width:120px;
				height:58px;
				/*插入图片*/
				background:url("images/bg1.png");
				/*去掉下划线*/
				text-decoration: none;
				/*文字居中*/
				text-align: center;
				/*设置行高*/
				line-height:50px;
			}

CSS应用方式：

内部样式：也称为内嵌样式，在页面头部通过style标签定义，对当前页面中所有符合样式选择器的 标签都起作用。

行内样式：也称为嵌入样式，使用HTML标签的style属性定义，只对设置style属性的标签起作用。

外部样式：使用单独的 .CSS 文件定义，然后在页面中使用 link标签 或 @import指令 引入。

3.选择器

每一条css样式定义由两部分组成，形式如下：
选择器{
    样式;
}
在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。

4.常用CSS属性

字体属性：

属性名	含义
font-family	设置字体类型
font-size	设置字体大小
font-style	设置字体风格
font-weight	设置字体粗细
font	设置所有字体属性

文本属性：

属性名	含义
color	设置文本颜色
text-align	设置文本水平对齐方式
line-height	设置文本的行高

背景属性：

属性名	含义
background-color	设置背景颜色
background-image	设置背景图片
background-repeat	设置背景图片重复方式
background-attachment	设置背景是否随页面滚动
background-position	设置背景图片位置

5.盒子模型

border：表示盒子的边框。

padding：表示盒子的内边距，即内容与边框之间的距离。

margin：表示盒子的外边距，即盒子与盒子之间的距离。

6.定位方式

相对定位：不脱离文档流布局，只改变自身的位置，文档流原位置遗留空白区域，定位的起始位置为此元素原文档流的位置。

绝对定位：脱离文档流布局，遗留下来的空间由后面的元素填充，定位的起始位置为最近的父元素(position不为static)，否则为Body文档本身。