什么是css
CSS, Cascading Style Sheet, 层叠样式表
html是网页的骨架和身体, css是衣服, 是表现, 是外观
语法:
选择器{
属性名称: 值;
...
}
可以在哪里写
- 行内样式
<element style="..."></element> - 内部样式
<head>
<style>
样式
</style>
</head> - 外部样式(独立的.css文件)
如何使用外部样式表
<link rel="stylesheet" type="text/css" href="css文件的地址" />
或
<style>
@import url("css文件的地址");
</style>
建议选择link方式
基本选择器
选择器,又称selector,它用于匹配页面中的元素,基本的有:
1.标签选择器,自动应用于该标签上
标签名{}
2.类选择器,通过class属性来引用
.className{}
<element class="className">
- ID选择器,通过id属性引用,但一个页面中最好只使用一次
#id{}
<element id="id">
复合选择器
- 后代
E1 E2{}
这表示E2是E1的后代 - 子元素
E1>E2{}
E2是E1的子级元素 - 交集
E1E2{}
这表示既是E1又是E2的元素 - 并集
E1,E2{}
这表示E1或E2
优先级
一个元素可参应用多个选择器中的样式, 也可以同时应用行内,内部,外部样式, 如果样式属性值发生冲突了怎么办?
以优先级最高的为准!
高---------------------------->低
行内 > 内部 > 外部
ID > class > 标签
继承
后代元素自动继承祖先元素的样式属性
但有可能发生意外, 例如: a标签继承了body选择器中设置的颜色, 但由于浏览器强制给a标签设置了一种默认颜色, 所以, 继承而来的颜色不生效.
常用样式属性及值
字体
- font-family: 字体类型
- font-size: 字体大小
- font-weight: normal|bold
normal: 不加粗
bold: 粗体 - font-style: normal|italic
italic: 斜体
文本
- text-align: left|center|right; 水平对齐方式
- vertial-align: top|middle|bottom; 垂直对齐方式
- color: 前景色
- text-indent: 文本缩进
- line-height: 行高
- text-decoration: none|underline|overline|line-through
none: 无装饰
underline: 下划线
overline: 上划线
line-through: 删除线
超链接伪类
- :link 未访问的超链接
- :visted 访问过的超链接
- :hover 鼠标悬浮在上的超链接
- :active 正在点击的超链接
例如:
.nav a:hover{
color:red;
}
背景
- background-color: 颜色
- background-image: url("图片地址")
- background-repeat: repeat|no-repeat|repeat-x|repeat-y
repeat: 平铺,重复
repeat-x: 横向平铺
repeat-y: 纵向平铺
no-repeat: 不平铺 - background-position: x y; 背景图定位
x: 横坐标
y: 纵坐标
列表
- list-style-type: circle|disc|square|decimal|none; 列表符号
- list-style-image: url("图片地址"); 自定义列表符号
- list-style-position: inside|outside; 列表符号在li内还是外
