CSS技术复习

发表于 更新于 分类于 阅读次数： Valine：

语法规则

选择器：浏览器根据选择器决定受CSS样式影响的HTML标签

属性：要改变的样式名，并且每一个属性都有一个值

声明：一般有多个声明，需要用分号将每个声明分开

CSS与HTML的结合方式

第一种

在标签的style上设置键值对即可，可读性差，多个标签比较难以定义

1
<div style="color: chartreuse">div1</div>

第二种

在head标签中根据语法规则进行定义，利用style标签进行辅助，但是只能给一个页面使用

1
2
3
4
5
6
7
8
9
10
11
<style type="text/css">
        div{
            border: 1px solid green;
            size: 10px;
        }
    </style>
</head>
<body >
<div>div1</div>
<div>div2</div>
<div>div3</div>

第三种

单独写一个css文件

1
2
3
4
5
6
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body >
<div>div1</div>
<div>div2</div>
<div>div3</div>
1
2
3
4
div{
    border: 1px solid green;
    size: 10px;
}

CSS选择器

标签名选择器

标签名{

属性：值

}

标签名选择器可以被动的选择

id选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
        #id1{
            color: blue;
            size: 19px;
        }
        #id2{
            color: green;
        }
    </style>
</head>
<body >
<div id="id1">div1</div>
<div id="id2">div2</div>

类选择器

.class{

属性：值

}

1
2
3
4
5
6
7
8
9
10
11
12
<style>
        .class1{
            color: blue;
        }
        .class2{
            color: red;
        }
    </style>
</head>
<body >
<div class="class1">div1</div>
<div class="class2">div2</div>

组合选择器

选择器1，选择器2.。。。{

属性：值

}

1
2
3
4
5
6
<style>
    .class1,#id1{
        color: blue;
    }

</style>

CSS常用样式

颜色：color

宽度高度：width，height

背景颜色：background-color

字体样式：font-size字体大小

边框：border

div居中：margin-left：auto；margin-right：auto

超链接去除下划线：text-decoration：none

列表修饰去除：list-style：none