CSS的简单介绍
【摘要】
文章目录
概念 特点选择器优先级CSS核心内容盒子模型浮动块级元素和行列元素相对定位和绝对定位
CSS的其他样式 HTML
概念
层叠样式表(英文全称：Cascading Styl...
概念
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
特点
实现网页内容与样式的分离
选择器优先级
ID选择器（id）>类选择器（class）>HTML标签选择器
CSS核心内容
盒子模型
标准盒子模型
margin（画框） border（外边距） padding （内边距） content（内容）
一般都有 上top右right下bottom左left 四个描述。
border: 1px solid #00f; /*外边框的，边框宽度，样式，颜色*/
padding: 5px; /*内边框的，宽度，*/
margin: 5px; /*画框的*/
- 1
- 2
- 3
浮动
float: right; /*盒子向右浮动*/
clear: right; /*清除浮动*/
- 1
- 2
块级元素和行列元素
块级元素（div 单独一行），行列元素（一行罗列 span）或者是使用
<span class="menu">栏目二</span><!--行列元素-->
<div class="menu">栏目三</div><!--块级元素，单独一行-->
- 1
- 2
display:block;/*加这个可以将行列元素变为块级元素*/
- 1
相对定位和绝对定位
position: relative; /*相对定位，盒子内部各个框框的相对位置是不变的*/
top: 80px;
left: 30px;
- 1
- 2
- 3
position: absolute; /*绝对定位,这个盒子对应外面的盒子的位置*/
top: 80px;
left: 30px;
- 1
- 2
- 3
CSS的其他样式
body {/*HTML标签的名称*/
}
.menu { /*栏目样式*/
color: #00f; /*文字颜色*/
background-color: #FFE7F7; /*背景颜色*/
width: 150px;
height: 60px;
line-height: 60px; /*让文本垂直居中*/
}
.title{ /*新闻标题样式 */
text-decoration :underline;/*下划线*/
}
#special {
font-weight:bold;/*粗体*/
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
HTML
<html>
<head>
<meta charset="utf-8" />
<title>CSS测试</title><!--标题-->
</head>
<body>
<!--主体内容-->
<span class="menu">栏目一</span><!--span这是一个容器，可以放内容也可以放格式-->
<span class="menu">栏目二</span><!--行列元素-->
<div class="menu">栏目三</div><!--块级元素，单独一行-->
<font color="#00f">栏目一</font><!--颜色-->
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
文章来源: blog.csdn.net，作者：张艳伟_Laura，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/Laura__zhang/article/details/115014443
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）