目录
1、CSS简介
①语法规范
- CSS规则主要由两个主要的部分构成：选择器和一条或多条声明；
- CSS都写在head标签的style标签里:
<head>
<style>
选择器 {
样式1;
样式2;
...
}
</style>
</head>- 选择器用于指定CSS样式，花括号内是对该对象设置的具体形式；
- 属性和属性值以”键值对“形式出现，“属性:属性值”；
- 多个“键值对”之间用;区分。
②代码风格
- 紧凑格式：
h3 {color: pink; font-size: 20px;}- 展开格式：
h3 {
color: pink;
font-size: 20px;
}- 展开格式更推荐，更直观；
- 推荐全部使用小写字母书写，特殊情况除外；
- 属性值前面、冒号后面保留一个空格；
- 选择器和大括号之间保留一个空格；
2、css选择器
①作用：
- 根据不同需求把不同的标签选出来；
②分成两大类：
- 选择器分为基础选择器和复合选择器两大类；
③基础选择器
- 由单个选择器组成的；
- 基础选择器又包括标签选择器、类选择器、id选择器、通配符选择器；
--标签选择器：
- 用HTML标签名称作为选择器
- 语法：
标签名{
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
...
}- 应用：
/*css*/
<style>
p {
color: aquamarine;
}
div {
color: brown;
}
</style>
<!--html-->
<body>
<p>男生</p>
<p>男生</p>
<p>男生</p>
<div>女生</div>
<div>女生</div>
<div>女生</div>
</body>
- 标签选择器把一类标签全部选择出来，能快速为页面中同类型的标签统一设置样式，但不能设计差异样式。
--类选择器：
- 单独选一个或者几个标签差异设计；
- 使用的最多；
- 语法：
/*css:先定义一个类*/
.类名{
属性1: 属性值1;
...
}
<!--html:再用class属性来调用-->
<div class='类名'>...</div>- 多类名：可以给一个标签指定多个类名；
- 多类名使用方式：在标签class属性中写多个类名，多个类名之间用空格隔开；
<div class="red font20">...</div>- 应用：
/*css*/
<style>
.red {
color: red;
}
.font35 {
font-size: 35px;
}
</style>
<!--html-->
<body>
<ul>
<li class="red font35">水煮
最低0.47元/天 解锁文章
83
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
