CSS 简介

层叠样式表(Cascading Style Sheelts)

CSS 语法

选择器，声明，属性，值

CSS 创建

  • 外部样式表(External style sheet)
  • 内部样式表(Internal style sheet)
  • 内联样式(Inline style)

外部

1
2
3
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

内部

1
2
3
4
5
6
7
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

内联

1
<p style="color:sienna;margin-left:20px">这是一个段落。</p>

CSS选择器

后代选择器，子选择器，兄弟选择器，并集选择器

后代选择器

1
.box p {}

子选择器

1
.box > p {}

兄弟选择器

1
.box+ p {}

并集选择器

1
.box,p{}

CSS图片

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

CSS 文本格式

文本对齐

1
h1 {text-align:center;}

文本修饰

1
a {text-decoration:none;}

文本转换

1
2
3
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

文本转换

1
p {text-indent:50px;}

CSS 链接

  • a:link - 正常，未访问过的链接
  • a:visited - 用户已访问过的链接
  • a:hover - 当用户鼠标放在链接上时
  • a:active - 链接被点击的那一刻
1
2
3
4
a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */

CSS 列表

无序ul，有序ol

CSS 表格

table tr td 

1
2
3
4
5
6
7
8
table
{
    border-collapse:collapse;
}
table,th, td
{
    border: 1px solid black;
}

CSS 盒子模型

  • Margin(外边距) - 清除边框外的区域，外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域，内边距是透明的。
  • Content(内容) - 盒子的内容，显示文本和图像。
1
2
3
4
5
6
div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

CSS 边框

1
border:5px solid red;

Display 与 Visibility

显示与可见，display不占有原来位置，脱离文档流，visiblity不脱离文档流

1
2
h1.hidden {visibility:hidden;}
h1.hidden {display:none;}

CSS Position(定位)

CSS 布局 - Overflow

文章溢出时候使用

值 描述
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

CSS Float(浮动)

常用与图片，ul。元素一行排列显示，浮动了会重绘

1
2
3
4
img
{
    float:right;
}

清除浮动

1
2
3
4
.text_line
{
    clear:both;
}

下面这个因为浮动所以上去了

给受影响的元素加上清除浮动

1
2
3
.clear {
  clear: both;
}

CSS 布局 - 水平 & 垂直对齐

1.元素居中对齐

1
2
3
4
5
6
7
.box {
            width: 200px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: #c99c9c;
        }

2.盒子居中对齐

定义方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.big {
    position: relative;
    margin-top: 20px;
    width: 400px;
    height: 100px;
    background-color: yellow;
}

.small {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 30px;
    background-color: #fff;
}

flex方式

CSS 伪类

链接伪类

1
2
3
4
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

元素伪类

1
2
3
4
p:first-child
{
    color:blue;
}