CSS入门

css概述

css(Cascading Style Sheets)是层叠样式表，用来定义网页的显示效果， 对 html 标签进行操作 ( 标签中文本内容设置 )。

W3C指定的标准：

针对html：结构化标准

针对css：样式化标准 美化网页

css的使用方式

1.行内样式：

在每个html标签里面都会有style属性：

<a href="" style="font-size:24px;color:#F00">超链接</a>

缺点;标签和样式混合在一起，不利于维护，书写过程麻烦，不美观

2.内部样式

在head标签体中有一个style标签，

<style type = "text/css">

书写样式：

</style>

缺点：样式和标签混合在一起，不利于维护

3.外部样式

在head标签体中<link href = "连接外部的css文件" rel="stylesheet"/>

实际开发中，使用第三种方式，css样式和html标签分离开来，有利于维护

使用link标签来导入css文件

css语法

1.选择器(selector):通过一些选择器选择需要设置样式的标签

css属性(property):给标签设置:字体,颜色,背景…..

css属性值(value):给属性指定:字体带线,字体颜色,背景图片…

格式：属性:属性值;

标签选择器： 使用html标签名称来设置样式，选中所有同名的标签：使用标签选择器

/*css标签选择器*/ div{ font-size:24px; color:#F00; }

类选择器：

给标签设置class属性  class=”c”  

 使用类选择器的语法,在样式.c{样式}

/*类选择器*/ .c{ font-size:36px; color:#0F0; }

id选择器：

1)给标签设置id属性 id="d";

2)使用id选择器的语法，在样式中#id属性值

/*id选择器*/ #d{ font-size:24px; color:#00F; }

选择器优先级：id选择器>类选择器>标签选择器

注意：在同一个html页面中，不要去给多个标签指定同名的id属性，防止Javascript中有一个方法：

document.getElementById(“id属性值”)获取标签对象，可能获取不到！

并集选择器：

/*并集选择器*/ .c1,#dl{ font-size:24px; color:#F00; }

交集选择器： 选中选择器名称 1 中子标签的内容

选择器名称1 选择器名称2{

书写样式

}

/*交集选择器*/    -->选中的就是div中的子标签span标签 div span{ font-size:36px; color:#0F0; }

通用选择器

*:通配符，代表所有标签，给整体设置属性

*{ 样式; }

2.伪类选择器

例如：超链接标签，代表选中一种状态

link:没有访问过的状态

hover:鼠标悬浮的时候一种状态

active:鼠标激活（点击了，但是没有松开）的一种状态

visited:已经被访问过的状态（点了，并且松开了）的一种状态

超链接：状态 link---->visited--->hover--->active这些状态在实际场景中不停循环使用的！

3:CSS文本

color：设置文本颜色

letter-spacing:字符间距

text-decoration:给文本增加修饰

属性值:

none:没有下划线

underline：下划线

overline:上划线

line-through:中划线

word-spacing:单词间距（系统默认两个字组成叫单词）

4.css字体

font-family:字体类型，必须是系统中存在的字体类型，系统找不到默认是宋体

font-size:字体大小

font-style:设置字体样式

属性值:normal默认正体    italic：斜体

font-weight:给字体适当加粗

属性值：bold

font 的简写属性

font:字体的样式（normal/italic）字体的粗细（bold）字体的大小（font-size）字体的类型（font-family）

5.css背景

background-color 设置背景颜色

background-image将某个图像设置为背景

background-repeat:设置图像是否重复以及如何重复

no-repeat:不重复（默认图片的起始位置top left）

repeat-x:x轴重复

repeat-y:y轴重复

repeat:重复

background-position 设置背景图像的起始位置

background的简写属性：背景颜色 背景图片 背景图片是否重复及如何重复 背景图像的起始位置

6.css列表属性

设置列表项的类型 : list-style-type

自定义一个列表项的类型符号:list-style-image

7.css表格属性

table{border-collapse:collapse;}

8.css边框

边框的颜色：border-color

border-top-color:

border-left-color:

border-right-color:

border-bottom-color:

边框颜色的简写属性：默认的方向：上 右 下 左

边框的宽度：border-width

border-top-width

border-left-width

border-right-width

border-bottom-width

边框的简写属性: 上 右 下 左

边框的样式  border-style:

属性值:solid 单实线 

dashed 虚线 

dotted 点 

double 双实线

9.盒子模型

盒子模型中的一些属性：

盒子容量：盒子的宽度和高度决定

盒子的边框：border：边框的宽度 样式 颜色

内边距：padding 盒子的边框和盒子的内容之间的距离，padding使用的比较少

外边距：margin:外边距

10.CSS定位

1)相对定位：position:relative(相对原来位置向下移动10px;向右移动10px;)

top :10px;

left:10px;

2)绝对定位：position:absolute(针对父标签进行移动)

3)固定定位：position:fixed