CSS学习总结
一、前言
我们如果想让页面变得有特色、美观,那么我们就可以使用css语言来达到我们的目的。经过一段时间的了解与学习,我对css语言有了一定的认知,下面是我对CSS学习的一个简短总结:
1、简介
CSS全称为Cascading Style Sheets,是一种用来表现HTML等文件样式的计算机语言,CSS是用来美化网页,决定了如何呈现我们的内容。
2、如何使用CSS
- 外部样式表:是指在HTML文件的同一目录下新建一个样式表文件(后缀名为.css)
- 内部样式表:是指在HTML文件中的< head>标签下引入一个< style>标签,然后把css样式的代码放入其中即可
- 内联样式:是指直接将需要的样式放入所应用的元素中。
二、CSS语法
一条CSS样式规则由两个主要的部分构成:选择器,以{}包裹的一条或多条声明。
选择器:id和class选择器
1、id选择器(前面有“#”)
#sky{
color: blue;
}
这条规则表明,找到页面上id为sky的那个元素让它呈现蓝色。
由于元素的id值必须唯一,故,id选择器适用范围只有一个元素。
2、class选择器(前面有“.”)
.center{
text-align: center;
}
.large{
font-size: 30px;
}
.red{
color: red;
}
以上代码定义了三条规则,分别应用于页面上对应的元素,如只要页面上某元素的class为red,那么就让它呈现红色。
三、CSS样式表可进行的操作
1、内容的属性
css 可以操作的内容属性包括颜色、尺寸大小以及排列形式。
1.颜色:可以设定前景或背景颜色
<!-- 颜色名称 -->
<h3 style="background-color:Orange;">Orange</h3>
<!-- 文本颜色 -->
<h3 style="color:Orange;">Hello World</h3>
或者采用RGB16进制值来设定颜色
2.尺寸
可以使用height和 width 设定元素内容占据的尺寸。常见的尺寸单位有:像数 px,百分比 %等。
例如:
<html>
<head>
<link rel="stylesheet" href="./mycss.css">
</head>
<body>
<div class="example-1">
这个元素高 200 pixels,占据全部宽度
</div>
</body>
</html>
.example-1 {
width: 100%;
height: 200px;
}
3.对齐
对于元素中的文本,我们可以简单的设置text-align属性为left, center, right即可
例如:
.example-1 {
text-align: center;
}
2、css的布局
1)盒子模型
盒子模型是指HTML元素可以看做一个盒子,且该盒子由内容
content, 内边距 padding, 边框 border, 外边距 margin构成的。如下图:
各部分构成:
Content 盒子的内容,如文本、图片等
Padding 填充,也叫内边距,即内容和边框之间的区域
Border 边框,默认不显示
Margin 外边距,边框以外与其它元素的区域
2)其他
css还可以对页面的边框与边距、元素的定位(position)、溢出(overflow)、浮动(float)、不透明度(opacity)等进行合理的调节,以达到期望的结果。
四、总结
通过学习CSS,类比于HTML我们可以将CSS比喻成装修房子的材料,我了解到如何将网页设置的美观、耐看。并且也了解到CSS的多样性,想要掌握还需要花费更多的时间继续学习。