CSS基础
2016-07-05 14:01
127 查看
什么是 CSS?
CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一
CSS 实例
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:![](http://www.runoob.com/images/selector.gif)
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。
CSS Id 和 Class
id 和 class 选择器
如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 "class"选择器。id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。class 选择器
class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示:
在以下的例子中,所有拥有 center 类的 HTML 元素均为居中
如何插入样式表
插入样式表的方法有三种:外部样式表
内部样式表
内联样式
CSS 背景
CSS 背景属性用于定义HTML元素的背景。CSS 属性定义背景效果:
background-color
background-image
background-repeat
background-attachment
background-position
CSS Text文本格式
![](https://images2015.cnblogs.com/blog/341676/201607/341676-20160705140146592-704130657.png)
CSS 字体
![](https://images2015.cnblogs.com/blog/341676/201607/341676-20160705140320905-1032656372.png)
CSS 链接
链接样式
链接的样式,可以用任何CSS属性(如颜色,字体,背景等)。特别的链接,可以有不同的样式,这取决于他们是什么状态。
这四个链接状态是:
a:link - 正常,未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
实例
a:link {color:#FF0000;} /* unvisited link */a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
所有的CSS列表属性
属性 | 描述 |
---|---|
list-style | 简写属性。用于把所有用于列表的属性设置于一个声明中 |
list-style-image | 将图象设置为列表项标志。 |
list-style-position | 设置列表中列表项标志的位置。 |
list-style-type | 设置列表项标志的类型。 |
CSS 盒子模型
CSS 盒子模型(Box Model)
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model):
![](http://www.runoob.com/images/box-model.gif)
不同部分的说明:
Margin(外边距) - 清除边框外的区域,外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域,内边距是透明的。
Content(内容) - 盒子的内容,显示文本和图像。
为了在所有浏览器中的元素的宽度和高度设置正确的话,你需要知道的盒模型是如何工作的。
CSS 组合选择符
CSS 组合选择符
![]() | 组合选择符说明了两个选择器直接的关系。 |
---|
在 CSS3 中包含了四种组合方式:
后代选取器(以空格分隔)
子元素选择器(以大于号分隔)
相邻兄弟选择器(以加号分隔)
普通兄弟选择器(以破折号分隔)
相关文章推荐
- CSS3阴影 box-shadow的使用和技巧总结
- 修改 文件上传 默认样式
- css3 box-sizing属性
- css 一些灵动性的小方法
- CSS实现垂直居中水平居中的绝对定位居中技术
- CSS深入理解vertical-align和line-height的基友关系
- CSS-行内框、行框、行高
- CSS中设置DIV垂直居中的N种方法 兼容IE浏览器
- web iphone css 兼容性
- CSS3 transition 属性
- CSS滤镜(Filters)
- CSS3 Flexbox布局
- css 设置字体
- JQ添加移除css样式
- 关于display inline-block的对齐问题
- 为导航栏创建下拉菜单
- CSS的三种使用方法。 行内样式: 内嵌式: 外部式:
- css 选择器 有待练习
- css 注意点
- css 选择器