CSS基础

CSS背景

1.背景

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

属性 

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

background-color 设置元素的背景颜色

background-image 把图片设置为背景

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

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

1.CSS3背景

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

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

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

CSS文本 属性可定义为文本外观

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

color文本颜色

direction 文本方向

line-height 行高

letter-spacing 字符间距

text-align 对齐元素中的文本

text-decoration 向文本添加修饰

text-indent 缩进元素中文本的首行  text-indent:2em;也可以百分比

panting-left:2em;

text-transform 元素中的字母

unicode-bidi 设置文本方向

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

word-spacing字间距

 

文本效果

text-shadow 向文本添加阴影 text-shadow: 5px 5px 1px #FF0000     左  上     背景颜色

text-wrap 规定文本的换行规则   

width:300px

text-wrap：normal

 

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

font-family 设置字体系列  font-family:fantasy;

font-size 设置字体的尺寸

font-style 设置字体风格

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

font-weight  设置字体的粗细

CSS中：

@font-face{

font-family:myfont

src:url();//字体名字

}

使用

div{

font-family:myfont；

}

 CSS链接的四种状态

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

a:visited 用户已访问的链接

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

a:active 链接被点击的时刻

 

chrome 历史记录-显示所有历史记录--清除浏览数据

text-decoration:none; 去掉链接中的下划线

设置背景颜色background-color:aquamarine;

 

 

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

list-style           简写列表项

list-style-image     列表项图像

list-style-position  列表标志位置

list-style-type      列表类型

list-style-type:decimal;

list-style-image:url("icon.png”);

class 可以重复  先加载样式再找结构内容

而id是唯一的 先加载结构内容在找样式

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

表格边框 border:1px solid blue;

折叠边框 border-collapse:collapse;

表格宽高width:400px;

height: 400px;

表格文本对齐 text-align:right;

表格内边距 padding:5px;

表格颜色background-color:aqua;

1.轮廓主要用来突出元素的作用

outline 设置轮廓属性

outline-color 设置轮廓的颜色

outline-style 设置轮廓的样式outline-style:groove;   

 double;

dotted;

outline-width 设置轮廓的宽度 outline-width:20px;