CSS基础知识学习笔记
2015-08-21 11:10
801 查看
1.css基本样式讲解
1.1 css背景background-attachment:背景图像是否固定或者随着页面的其余部分滚动
background-color:设置元素的背景颜色
background-image:把图片设置为背景
background-position:设置背景图片的起始位置
background-repeat:设置背景图片是否及如何重复
background-size:规定背景图片的尺寸
background-orgin:规定图片的定位区域
background-clip:规定背景的绘制区域
1.2 css文本
color :文本颜色
direction :文本方向
line-height :行高
letter-spacing: 字符间距
text-align :对齐元素
text-decoration :向文本添加修饰
text-indent :缩进元素中文本首行
text-transform :元素中的字母
unicode-bidi :设置文本方向
white-space :元素中空白的处理方式
word-spacing :字间距
text-wrap:自动换行
text-shadow:向文本添加阴影
1.3 css字体
font-family :设置字体系列
font-size :设置字体尺寸
font-style :设置字体风格
fongt-variant: 以小型大写字体或正常字体显示文本
font-weight: 设置字体的粗细
1.4 css链接
a:link 普通的、未被访问的链接
a:visited 用户已经访问的链接
a:hover 鼠标指针位于链接的上方
a:active 链接被点击的时刻
text-decoration:这个属性大多用于去掉链接中的下划线
background-color:背景颜色
1.5 css列表
CSS列表属性可以灵活的放置、改变标志,或者将图像作为列表项标志
list-style :简写列表项
list-style-image :列表项图像
list-style-position: 列表项标志位置
list-style-type :列表类型
1.6 css表格
表格边框:
#tb,th,td,tr{ border: 1px solid blue; }
折叠边框:
#tb{ border-collapse: collapse; }
1.7 css轮廓
outline :设置轮廓属性
outline-color :设置轮廓的颜色
outline-style :设置轮廓的样式
outline-width :设置轮廓的宽度
2.css盒子模型
内边距:内容外部,边框内部
padding 设置所有边距
padding-bottom、left、right、top 单独设置某个方向的边距
边框:
可以创建出效果出色的边框,并且可以用于任何元素
border-style:定义了10种样式
border-(top,bottom,left,right)-style:定义单边样式
border-width:边框宽度设置
border-(top,bottom,right,left)-width 单边框宽度
border-color 边框颜色
border-(top,left,bottom,right)-color 单边框颜色
CSS3边框:
border-radius 圆角边框
box-shadow 边框阴影
border-image 边框图片
外边距:
margin 整体外边距
margin-(top,bottom,left,right) 单边外边距
外边距合并:就是一个叠加的概念
3.css定位与浮动
css定位:position:static、relative、absolute、fixed;
top
left
right
bottom
overflow
….
css浮动:
float属性:left,right,none,inherit
clear属性:去掉浮动属性
left,right:去掉左右浮动
both:左右两侧浮动均去掉
inherit:从父级继承来clear值
4.css选择器
派生选择器:li strong{ color:red; }
具体制定列表项里的strong标签效果,已经被定义好的效果是不会被覆盖。
id选择器:
#id { color:red; }
id选择器可以和派生选择器组合使用,id选择器不好与id组合使用
类选择器:
.pclass{ color:red; }
类选择器也可以和派生选择器进行组合使用
属性选择器:
缺省属性选择器:
[title]{ color:red; }
带名字的属性选择器:
[title=te]{ color:red; }
在IE6及更低版本,不支持属性选择器
属性选择器必须完全匹配才会起作用
子元素选择器:
采用>符号,只是只能用一级一级定位
相邻兄弟选择器:
标签+标签的形式,这个只要做一个简单的了解即可
相关文章推荐
- css的#和.的区别
- css style与class之间的区别,cssclass
- NSMutableAttributedString 自定义文字内容的样式 间距,对其 方向 间隔之类
- 网页分页实现(css+js)
- CSS hack方式一览
- 81 css ie8无法识别背景图片
- 使用CSS3画出一个叮当猫(超级可爱!)
- div+css 居中布局
- CSS盒子模型
- 用Emmet写CSS3属性会自动添加前缀
- CSS:重量和级联规则,确定其优先级
- Html和CSS的关系
- 一些简单的css和js知识
- Qt中设置widget背景颜色/图片的注意事项(使用样式表 setStyleSheet())
- CSS基础知识整理二
- css 浮动和绝对定位的区别
- CSS--利用CSS实现一个简易的二级菜单(仿京东)
- 纯CSS3代码实现表格奇偶行异色,鼠标悬浮变色
- CSS中列表样式的简介
- Web前端从入门到精通-9 css简介——盒模型1