CSS学习笔记（一）

CSS基本语法

1
2
3
4
5
6
7
<style>
    p {
        background-color: gray;
        font-size: 16px;
    }
</style>
<p style="background-color:gray;font-size:16px"> Paragraph1 </p>

每个属性后面要加分号，最后一个属性最后可加可不加。

一、CSS背景

  1. 背景颜色:
  2. 背景颜色可以指定颜色名，如: blue,red,gray,green. etc
1
background-color: gray;
  • 也可以指定16进制名，如：#FFFF00。
1
background-color: #FFF000;


  1. 背景图片
  • 设定图片，url的路径为相对路径
1
background-image: url(/back.jpg);
  • 背景的图片可以选择样式，比如在水平或垂直方向上平铺。
1
2
3
backgounrd-repeat: repeat-x;
backgounrd-repeat: repeat-y;
backgounrd-repeat: no-repeat;
  • 改变图片在背景中的位置
1
2
3
background-position: center/top/bottom/left/right;
background-position: 66% 33%;    //水平，垂直
background-position: 50px 100px; //左、上
  • 文档下滚时背景不滚动
1
background-attachment: fixed;

二、CSS文本

1.  通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进

  • 字体
1
font-family: sans-serif;
  • 字体大小
1
2
font-size: 16px;
font-size: 1em;    //浏览器中默认的是1em=16px大小
  • 字体加粗斜体
1
2
3
font-style: italic;
font-weight: bold;
font-weight: 900;
  • 改变颜色
1
color: red;
  • 字符间距(每个字符)
1
letter-spacing: -0.5em,20px;
  • 词间距(每个word)
1
word-spacing: 30px;
  • 字符转换(大小写转换)
1
text-transform: none,uppercase,lowercase,capitlize;
  • 缩进文本
1
text-indent: 5em;
  • 水平对齐
1
text-align: center;

<center>和text-align的区别是text-align只把文本对齐，而<center>则把整个元素居中

  • 处理空白字符
    HTML默认会忽略空白字符，如果要使文本显示如html代码一样，可以加<pre>标签
1
2
white-space: pre;
white-space: nowrap;    //不处理换行

2.  处理连接样式
链接的四种状态
    1. a:link 普通的、未被访问的连接
    2. a:visited 用户已访问的连接
    3. a:hover 鼠标指针位于连接的上方
    4. a:active 链接被点击的时刻

三、CSS列表

  1. 更改列表的标志
1
2
3
4
ul {
    list-style-type: square              //方块
    list-style-image: utl(xxx.jpg)       //图片
    }

四、CSS表格

1.  表格边框

1
2
3
table, th, td {
    border: 1px solid blue;              //双线条边框
}

2.  表格宽度和高度

1
2
3
4
5
6
7
table {
    width: 100%;
}
th {
    height: 50px;
}

3.  表格文本对齐

1
2
3
4
td {
    text-align: right;
    vertical-align: bottom;
}

4.  表格内边距

1
2
3
td {
    padding: 15px;
}