CSS (Cascadins Style sheets)层叠样式表
html主要做结构,CSS则是样式
选择器:声明
基础选择器:
1、标签选择器:某一类标签全部选出来,但不能差异化更改
<style>
/* 选择器{样式} */
/* 给谁改 {改什么样式} */
p {
color:red;
/* 修改文字大小 12像素 */
font-size: 12px;
}
</style>
</head>
<body>
<p>有点意思</p>
</body>
2、类选择器:有点像函数嗷(名字)
<style>
/* 类选择器口诀: 样式点定义 结构类(class)调用 一个或多个 开发最常用*/
.red {
color: red;
}
.star-sing {
color: green;
}
.memeda {
color: pink;
}
</style>
</head>
<body>
<ul>
<li class="red">冰雨</li>
<li class="red">来生缘</li>
<li>李香兰</li>
<li class="memeda">生僻字</li>
<li class="star-sing">江南style</li>
</ul>
<div class="red">我也想变红色</div>
</body>
三个盒子 红绿红
<style>
.red{
width: 100px;
height: 100px;
/* 背景颜色 */
background-color: red;
}
.green{
width: 100px;
height: 100px;
/* 背景颜色 */
background-color: green;
}
</style>
</head>
<body>
<div class="red">red</div>
<div class="green">green</div>
<div class="red">red</div>
</body>
多类名调用
一下调用俩函数 中间用空格分开
<style>
.red {
color: red;
}
.font35 {
font-size: 35px;
}
</style>
<div class="red font-size">刘德华</div>
2.5、id选择器(身份证号)
id选择器的口诀: 样式#定义, 结构id调用, 只能调用一次, 别人切勿使用
#pink {
color: pink;
}
<div id="pink">迈克尔·杰克逊</div>
<div>pink老师</div>
3、通配符选择器
选取页面中所有的元素(标签),不用调用
全选啊,ctrl+a
<style>
* {
color: red;
}
/* * 这里把 html body div span li 等等的标签都改为了红色 */
</style>
</head>
<body>
<div>我的</div>
<span>我的</span>
<ul>
<li>还是我的</li>
</ul>