css入门 - leileigwl

Css#

优先级#

内嵌样式优先级是最高的，后面外联和行内看定义时候的就近原则

补充：

块级元素：要分段的
行内元素：不要分段的

选择器（重点）#

1.基本选择器#

标签选择器

选了之后，所有这个标签就是统一的样式，太死了

1
<style>
2
    标签{
3
        ;
4
        ;
5
    }
6
</style>

类选择器

可跨，方便

1
<style>
2
    .类名{
3
        ;
4
        ;
5
        ;
6
    }
7
</style>

id选择器

id只能有一个，有点局限

1
<style>
2
    #id名{
3
        ;
4
        ;
5
        ;
6
    }
7
</style>

优先级：id选择器 > class选择器 > 标签选择器，不遵循就近原则

2.层次选择器#

后代选择器

在某个元素的后面，这一代的后面所有

1
/*后代选择器*/
2
body 标签名{
3
    ;
4
    ;
5
}

子选择器

在这个元素的后面，但是只有后面一代

1
/* 子代选择器 */
2
body>标签名{
3
    ;
4
}

相邻兄弟选择器

选择这一代的下一个，不能隔着东西

1
.类名 +下面的一个标签{
2
    ;
3
    ;
4
}

通用选择器

这个类的下面的所有这个标签

1
.类名~下面的标签{
2
    ;
3
    ;
4
}

3.结构伪类选择器#

标签: 的形式，用来过滤一些条件

1
ul li:first-child {
2
    /* 选择ul标签下的li标签中第一个元素 */
3
    background-color: blue;
4
}
5
ul li:last-child{
6
    /* 选择ul标签下的li标签中最后一个元素 */
7
    color: red;
8
}
9
p:nth-of-type(x){
10
    /* p的上级标签下面选择p标签的第x个 */
11
    background-color: red;
12
}

4.属性选择器#

= 绝对等于
*= 包含
^= 以这个符号开头
$= 以这个符号结尾

1
a[herf^=http]/*选择a标签中的herf属性开头是http*/
2
/*标签[属性/id/class 表达式]*/

样式美化#

1.字体样式#

1
/*
2
font-family:字体
3
font-size:字体大小
4
font-weight:字体粗细
5
color:字体颜色
6
*/
7
body{
8
    font-family:"Arial Black",楷体;
9
    color:#a13d30;
10
}
11
h1{
12
    font-size: 50px;
13
}
14
.p1{
15
    font-weight:bolder;
16
}

2.文本样式#

1
/* 颜色 color rgb rgba
2
   文本对齐的方式 text-align=center
3
   首行缩进 text-indent:2em;
4
   行高 line-height
5
   装饰 text-decoration->删除a标签的下划线
6
   文本图片水平对齐 vertical-align:middle
7
*/
8
p {
9
    color: brown;
10
    text-align: center;
11
    text-indent: 2em;
12
    line-height: 2em;
13
}
14
a {
15
    text-decoration: none;
16
}

3.超链接伪类#

1
/*超连接伪类，还有阴影*/
2
a {
3
    text-decoration: none;
4
    color: black;
5
}
6
/* 鼠标悬浮颜色,也只要记住这个 */
7
a:hover {
8
    color: orange;
9
    font-size: 30px;
10
}

4.阴影效果#

1
/* text-shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径 */
2
p {
3
    text-shadow: #3cc7f5 10px -10px 2px;
4
}

盒子模型#

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都是由元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。

margin:外边距
padding:内边距
border:边框

1
.box {
2
    width: 200px;
3
    height: 100px;
4
    padding: 20px;
5
    box-sizing: border-box;
6
    background-color: blue;
7
}

盒子的大小=外边距+内边距+边框+内容