css参考手册:
https://zixuephp.net/manual-css-1099.html
- css的多重声明
h1 {
text-align:center;
color:red;
}
注意:
-
每行只描述一个属性,这样可以增强样式定义的可读性
-
定义不止一个声明时,则需要用分号将每个声明分开。
-
分号在英语中是一个分隔符号,不是结束符号
-
.在每条声明的末尾都加上分号,这么做的好处是,当你从现有的规则中增减声明时,会尽可能地减少出错的可能性
- 分组选择器
h1,h2,h3,h4,h5,h6 {
color: red;
}
注意:
- 用逗号将需要分组的选择器分开
- 可以对选择器进行分组,这样,被分组的选择器就可以有相同的声明
- css背景
body
{
background-image:url(./pic.jpg),url(pic2.gif);
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed
}
注意:
- background-image 图像设置为背景(多个背景图时用,号隔开)
- background-repeat背景图像是否重复
- background-position 背景图像的起始位置
- background-origin 背景图片相对于什么来定位(padding-box border-box content-box)
- background-attachment 背景图像是否固定或者随着页面的其余部分滚动
-
text-align 水平对齐方式
值为:center / left / right /justify
(两端对齐) -
white-space 空白符
值为:normal nowrap pre pre-wrap pre-line
-
字体系列
p{
font-family: Times, TimesNR, 'New Century Schoolbook',Georgia, 'New York', serif;
}
注意:
- 当字体名中有一个或多个空格(比如 New York),或者如果字体名包括 # 或 $ 之类的符号,才需要在 font-family
声明中加引号
- 列表样式
li {
list-style : url('') square inside
/**/
}
- css表格
- CSS 轮廓outline
属性:
outline-color
outline-style
outline-width
- 伪类选择器
ul:first-child li {
color:blue;
}
/*匹配所有作为第一个子元素的 <ul> 元素中的所有 <li> 元素*/
14. 媒介类型(@media规则)
@media screen
{
p.test {font-family:verdana,sans-serif; font-size:14px}
}
/*告知浏览器在显示器上显示 14 像素的 Verdana 字体*/
@media print
{
p.test {font-family:times,serif; font-size:10px}
}
/*页面需要被打印,将使用 10 个像素的 Times 字体*/
@media screen,print
{
p.test {font-weight:bold}
}
/*font-weight 被设置为粗体,不论显示器还是纸媒介*/
- css参考手册
https://zixuephp.net/manual-css-1099.html
- css听觉样式参考手册
https://zixuephp.net/manual-css-1101.html
- css单位
https://zixuephp.net/manual-css-1103.html