CSS （层叠样式表）选择器 字体 文本 块元素 行内元素 元素显示转换 背景

　　CSS主要由两部分组成，选择器以及一条和多条声明 　　

　　h1 　　{ color: red; font-size: 25px;}

　　↑　　　　　　↑　　　　　↑

　选择器　　属性: 值　　　　（声明）

 

一、选择器

　　就是选择标签用的，分为两类：基础选择器和复合选择器

基础选择器由单个选择器组成，包括：标签选择器（直接使用HTML标签名称）、类选择器（.类名 可以指定一个或多个同类元素）、ID选择器( #id 指定相同id的元素，只能调用一次 )、通配符选择器（* 所有元素）

复合选择器是对基础选择器的组合

二、字体

<font-family> 设置字体

<font-size> 字号大小

<font-weight>　字体粗细 属性：normal 默认值，bold 定义加粗，100-900 400等于normal 700等于bold

<font-style> 属性：normla 默认值，italic 斜体

复合属性 font：font-style font-weight font-size/line-height font-family　　（顺序不能修改）

　　　　不需要的属性可以省略，但是font-size和font-family不能省略

三、文本

<color> 文本颜色 属性：预定义颜色如green、pink 十六进制如#FF0000 RGB代码如rgb(255,0,0)或rgb(100%,0,0)

<text-align> 文本对齐 属性：left 左、right 右、center 居中对齐

<text-decoration> 装饰文本 属性: none 默认没有装饰线、underline 下划线

<text-indent> 首行缩进 属性:px em 相对大小 1em=16px

<line-height> 行高（行间距） 垂直居中的技巧：将<line-height>设置地与容器高度一样

四、内部样式表和外部样式表

内部样式表 就是在html页面内部写样式，但是单独写到style部分

行内样式表 元素标签内部的 style 属性中设定CSS样式

外部样式表 样式写到单独的CSS文件中，然后把CSS文件引入到HTML页面中

　　　　引入样式表：1.新建一个后缀名为.css的文件，将所有css代码写入此文件中

　　　　　　　　　　2.在HTML页面中，使用<link>标签引入这个文件

三个样式表中：外部样式表适合多个页面中

五、后代选择器和子元素选择器

后代选择器可以选择父类中的子类元素，格式：父类元素 子类元素

子元素选择器只能选亲儿子元素 格式：父元素 > 子元素

六、并集选择器

并集选择器可以选择多组标签，通过英文逗号连接成

七、伪类选择器

伪类选择器 用冒号 ( : ) 表示 

　　链接伪类选择器 a:link 选择未被访问的链接 a:visited 选择已被访问的链接 a:hover 选择鼠标经过的链接 a:active 鼠标按下还没有弹起 　　顺序是LVHA

　　focus选择器 选择获取焦点 一般用在input标签，如input:focus

八、块元素和行内元素

块元素特点：①块元素独占一行 　　②高度，宽度，内外边距都可以控制　　③宽度默认是容器的100%　　

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

行内元素特点：①相邻行内元素在一行上，一行上可以显示多个　　②高、宽度直接设计师无效的

　　　　③默认宽度是本身内容的宽度　　④行内元素只能容纳文本以及其他行内元素

行内块元素：<img />　　<input /> 　　<td>　　

特点：一行可以插入多个元素，默认宽度是内容本身宽度，可以控制高度，行高，内外边距

九、元素显示转换

选择器中的属性：display  属性：block 转换为块级元素 inline 转换为行内元素 转换为行内块元素

十、背景

<background-color> 背景颜色

<background-image> 背景图片 属性：url() none

<background-repeat> 背景平铺 属性： repeat | no-repeat | repeat-x | repeat-y

<background--position> 背景位置 属性:center | top | left | right |bottom

　　　　　　　　　　精确位置: 20px 50px  (x轴20px y轴50px)

<background-attachment> 背景附着 设置图像是否固定或随着页面其他部分滚动 属性：scroll 默认值滚动 | fixed  固定

背景图像复合写法： background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置