CSS基础

一、入门基础知识

1，CSS概述

CSS指层叠样式表,极大地提高了工作效率

2， 基础语法

selector {

　　　　property:value

　　　　}

eg:  h1{color:red; font-size:14px;}

属性大于1个之后，属性之间用分号隔开

如果值大于1个单词，则需要加上引号:

p {font-family:"sans sefif";}

3,高级语法

1)选择器分组:

　　h1,h2,h3,h4,h5,h6{color:red;}

2)继承(未申明自己的样式的标签会继承)

body{

color:green;

}

4，派生选择器：

通过依据元素在其位置的上下文关系来定义样式

5,id选择器

     id选择器可以为标有id的HTML元素指定特定的样式

　　id选择器以"＃"来定义

  目前比较常用的方式是 id选择器常常用于建立派生选择器

6,类选择器

类选择器一一个点显示。class也可以用作派生选择器

.pclass{

}

 

 <p class="pclass"></p>

7,属性选择器 ,在IE6及其更低的版本中是不支持的。

<style type="text/css">

[title]{

color:blue;

}

[title=te]

{

 } 

eg:

<p title="te">属性选择器</p>

二，背景

1，CSS允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。

background-attchment 　　　　　　背景是否固定或者随着页面的其余部分滚动  fixed

background-color　　　　　　　　　　

background-image

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

background-repeat　　　　　　　　　设置背景图片是否及如何重复  repeat no-repeat repeat-x repeat-y等等

背景不允许继承

2，CSS3背景

background-size:规定背景图片的尺寸

background-origin:规定背景图片的定位区域

background-clip:规定背景的绘制区域

三 文本

1,CSS文本属性可定义文本外观

通过文本属性，可以改变文本的颜色，字符间距、对齐文本、装饰文本、对文本缩进

2，color  文本颜色

   direction 文本方向

　line－height 行高

letter-spacing 字符间距

text-align  对齐元素中的文本

text-decoration 向文本添加修饰

text-indent 缩进元素中文本的首行  text-indent: 2em;

text-transform 元素中的字母  :capitalize(首字母大写) lowercase uppercase

unicode-bidi 设置文本方向

white-space 元素中空白的处理方式

world-spacing  字间距

3，CSS3文本效果:

text-shadow:向文本添加阴影  eg:text-shadow :5px,5px,1px,#FF0000 (距离左，距离上，宽度，颜色)

word-wrap:规定文本的换行规则

4，CSS字体

CSS字体属性定义文本的字体系列、大小、加粗、风格和变形

font-family   设置字体系列

font-size 设置字体的尺寸

font-style 设置字体风格

font-variant 以小型大写字体或正常字体显示文本

 

引入下载字体:

@font-face {

　　　　font-family:myfont;

　　　　src: url();

}

font-weight 设置字体的粗细

四 CSS链接

1，链接四种状态：

a:link 普通的、未被访问的链接

a:visited用户已访问的链接

a:hover鼠标指针位于链接的上方

a:active 链接被点击的时刻

2，常见的链接样式:

text-decoration 属性大多用于去掉链接中的下划线: none

3，设置背景颜色:

background-color

五、列表

CSS列表属性允许你放置、改变列表标志，或者将图像作为列表项标志。

list-style   简写列表项  

list-style-image  列表项图像 : url("");

list-style-position  列表标志位置 :inside outside

list-style-type  列表类型  : decimal  circle

 六 CSS表格

CSS表格属性可以帮助我们极大的改善表格的外观

1)表格边框

2）折叠边框

3）表格宽高

4）表格文本对齐

5）表格内边距

 

七 CSS轮廓   

主要是用来突出元素的作用

outline  设置轮廓属性

outline-color 设置轮廓颜色

outline-style 设置轮廓样式

outline-width 设置轮廓宽度

 

****************

id是不可以重复的，是唯一的，class是可以重复的。

资源加载上:id先找到结构内容再加载样式；class：先加载样式再去找结构内容。

一般id用于框架级的身上，class用于内部具体数据构造。

<strong> 标签和 <em> 标签一样，用于强调文本，但它强调的程度更强一些。