3. CSS
3.1 添加全局变量（类似）
3.1.1 class 类选择器（使用最多）
在head中添加 style 标签
<head>
<!--添加darkred style 命名为c1-->
<style>
.c1{
color: darkred;
}
</style>
</head>
<body>
<h1 class="c1"> xxx </h1>
</body>
3.1.2 id 选择器（只能用一个）
<head>
<!--添加darkred style 命名为c1-->
<style>
#c1{
color: darkred;
}
</style>
</head>
<body>
<h1 id="c1"> xxx </h1>
</body>
3.1.3 标签选择器
<!--直接键入标签名字-->
<head>
<style>
div{
}
</style>
</head>
<body>
<div>aaa</div>
</body>
3.1.4 属性选择器
<head>
<style>
input[type='text']{
border: 1px solid red;
}
.v1[xx="456"]{
color: aquamarine;
}
</style>
</head>
<body>
<input type="text">
<div class="v1" xx="123">s</div>
<div class="v1" xx="456">aa</div>
</body>
3.1.5 后代选择器
<style>
.yy li{
color: aliceblue;
}
.yy > li{
color: black;
}
</style>
3.1.6 多个和覆盖
<head>
<style>
.c1{
...
}
.c2{
...
}
</style>
</head>
<!--若c1，c2中有重复的，则c2覆盖c1-->
<body>
<div class="c1 c2">aaa</div> <!--于此处的c1c2排序无关，只与上面style中的排序有关-->
</body>
若就是不想上面的被覆盖，可加上！ important
如下：
<style>
.c1{
color: aliceblue !important;
}
</style>
3.2 link 以文件形式导入
<head>
<link rel="stylesheet" href="xxx.css"/>
</head>
3.3 样式
3.3.1 高度和宽度
<style>
.c1{
height: auto;
width:auto;
}
</style>
3.3.2 使用display将行内标签转换为块级标签
inline：串联的；在线中的；在一直线上的；轴向的
<head>
<style>
.c1{
display: inline-block;
height: auto;
width:auto;
border: ;
}
</style>
</head>
<body>
<span class="c1"> aaa </span>
</body>
3.3.3 font 字体属性
<style>
.c1{
color: ;
font-size: ; /*大小*/
font-weight: ; /*粗细*/
font-family: ; /*字体*/
}
</style>
3.3.4 text-align 文字的对齐方式
<style>
.c1{
text-align: center;/*水平方向居中*/
}
</style>
30万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
