初识CSS
【摘要】 CSS是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css样式，选择器ID选择器#c1{}<div id='c1'>xxx</div>类选择器.c1{}<div class='c1'>xxx</div>标签选择器筛选全部div标签内容，并将其替换为该样式div{}<div>xxx</div>后代选择器<head...
CSS
是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css
样式，选择器
ID选择器
#c1{
}
<div id='c1'>xxx</div>
类选择器
.c1{
}
<div class='c1'>xxx</div>
标签选择器
筛选全部div标签内容，并将其替换为该样式
div{
}
<div>xxx</div>
后代选择器
<head>
<style>
定义一个格式
.aa > a{
color:pink;
}
这样会优先搜索aa标签，其次替换带有aa标签的内容样式
</style>
</head>
<body>
<div class="aa">
<a>xxx</a>
</div>
</body>将样式放在css文件内，用时引用文件
.c1{
color: blue;
}<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/q.css">
</head>
<body>
<span class="c1">
原神启动！！！
</span>
</body>多样式同时引用
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cs1{
color: blueviolet !important;
在cs1的color后加！important可以防止呗cs2的color替换
border: black;
}
.cs2{
color: black;
同时使用多个样式时，若两个样式具有同样的标签，会使用下面的cs2，与class中的顺序无关
font-size: 100px;
}
</style>
</head>
<body>
<div>
<h1 class="cs2 cs1">
登陆失败
</h1>
</div>
</body>.c2{
height: 200px;
width: 50%;
}
.c3{
height: 50%;
width: 50%;
}<div class="c2">父级标签
<div class="c3">子级标签
原神启动！
</div>
<div class="c3">
崩铁启动！
</div>
</div>
父级高度不可用%，子级可用既具备块级标签，有具备行内标签特点
<style>
.qq{
display: inline-block;
height: 100px;
width: 100px;
color: blueviolet;
border: 1px solid red;
}
</style>
<span class="qq">
乐
</span>
<span class="qq">
乐
</span>
<div style="display: inline（或者inline_block）">xxx</div>
<span style="display: block（或者inline_block）">xxx</span>字体
<style>
.csgo{
color: #4169E1; /*RGB色标颜色*/
font-size: 60px; /*字体大小*/
font-weight: 400; /*字体粗细*/
font-family: Microsoft YaHei UI; /*字体格式*/
}
</style>
<span class="csgo">
原神启动!!!
</span>
文字对齐
<style>
.ysqd{
height: 200px;
width: 20%;
border: 1px solid #4169E1;
text-align: center; /* 水平方向居中 */
line-height: 100px; /* 按100px的高度，竖直方向居中，且只能有单行数据 */
}
</style>
eg:
<style>
body{
margin: 0;
}
.header{
background-color: black;
}
.header .lift{
float: left;
color: whitesmoke;
height: 30px;
line-height: 30px;
margin-left: 30px;
}
.header .right{
float: right;
color: whitesmoke;
height: 30px;
line-height: 30px;
margin-right: 30px;
}
</style>
</head>
<body>
<div class="header">
<div class="lift">
左
</div>
<div class="right">
右
</div>
<div style="clear: both"></div>
</div>
</body>浮动
.majiang{
float: right;
width: 33%;
height: 200px;
border: 1px solid seagreen;
}
<span>左</span>
<span style="float: right" class="ysqd">右</span>
<div class="majiang"> <!--div被浮动后，将会具有span的特性-->
麻将
</div>
<!--大量div，可能会脱离文档流-->
<div style="background-color: aqua" >
<div class="majiang" style="background-color: brown">1</div>
<div class="majiang">1</div>
<div class="majiang">1</div>
<div class="majiang">1</div>
<div class="majiang">1</div>
<div class="majiang" style="background-color: crimson">1</div>
*** <div style="clear: both"></div><!--去除浮动，固定位置，撑起父级标签背景，但子级标签背景仍会覆盖父级标签-->
</div>
<div>
hello
</div>内边距
<div style="padding: 30px 10px 20px 15px">
上右下左，顺时针顺序
</div>
<div style="padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px">
上边距，左边距，右边距，下边距
</div>外边距
<div style="margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;">
</div>边距应用
.a1{
width: 1226px;
margin: 0 auto;
}
<div class="header">
<div class="a1">
<div class="lift">
</div>
<div class="right">
右
</div>
<div style="clear: both"></div>
</div>
</div>
<!--顶部栏文字居中显示-->居中
文本居中
<div style="width: 200px;text-align: center">
123321<!--文本在区域中居中-->
</div>区域居中
<div style="background-color: #4169E1;
height: 900px;
width: 1000px;
margin:auto"></div>
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）