CSS及其规则简介
简介
CSS以规则为基础单位,其中包括选择器和声明块,其中:
选择器:选中元素(确定样式的范围)。
声明块:书写对的样式规则。
选择器
选择器的基本写法中包括三种:
id选择器:
<!--根据元素中的id来选择,例如:选择id为top的元素-->
<style>
#top{
想要执行的CSS规则;
}
</style>
<span id="top">
想要更改的元素;
</span>
该选择器仅会将id为top的元素更改为CSS规则指定的样子。
元素选择器:
<!--根据元素(标记来选择),例如:选择<h1>-->
<style>
h1{
执行的CSS规则;
}
</style>
类选择器
<!--根据元素的类(class)来选择,例如:选择class=“test”-->
<style>
.test{
执行的CSS规则;
}
</style>
<span class="test">
想要更改的元素;
</span>
一般来说,类选择器使用的情况要比其他两种多一些,其他两种在使用过程中的局限性比较大
声明块
声明块中会包含很多说明(属性),每一个声明(属性)表示了某一个样式的规则。
<style>
.text{
color:red;
background-color:black;
}
</style>
CSS代码书写位置
-
内部样式表:
CSS代码写在
中(不强制)——因为希望在页面加载的时候就可以将样式加载出来,其余地方也是可以放的。
-
内联样式表:
直接在HTML元素内中的特定属性style中书写,比如:
。
-
外部样式表:
将样式书写到独立的CSS文件中。
在外部样式表中要注意将外部文件引入HTML页面
<link rel="stylesheet" href="CSS外部文件的地址">
其中,rel="sthlesheet"
表示引入的是一个样式表。(还可以引入其他类型的文件,后续讲解)
外部样式表的优点
- 外部要是可以解决多页面样式重复的问题
- 有利于浏览器缓存,浏览器在加载页面的时候如果发现需要CSS文件会在缓存列表中查找文件,如果没有文件则会进行缓存,方便下次使用
- 有利于代码分离,避免污染HTML页面
CSS 常见样式声明
-
color:表示文字的颜色
共有三种写法:
- rgb:三个颜色的数值为0,代表黑色;三个颜色都为255时代表白色。——指颜色的透明度
color:rgb(0,0,0);
- hex(16进制):
color:#000000;
常见颜色数值
淘宝红:#ff4400
黑色:#000000
白色:#ffffff
红色:#ff0000
绿色:#00ff00
蓝色:#0000ff
紫色:#ff00ff
青色:#0ff
黄色:#ff0
灰色:#ccc
-
background-color:背景颜色——其用法与color相同,故不做赘述
background-color:---
-
font-size:元素内部文字尺寸的大小
其中共有两种单位:
- px:像素——简单来说是文字的高度占多少个像素点
- em:倍数——是该元素的父元素的字号的倍数(父元素没有设置字号,则会继承它的父元素的字号,如果一直到根元素也没有设置字号,则使用基准字号——浏览器中设置的字号)。一般来说浏览器字号为中(14px)
font-size:10px; /*10像素*/ font-size:2em; /*父元素字号(或基准字号)的2倍大小*/
-
font-weight:文字粗细程度
有四个值:normal(普通)、bold(加粗)。
也可以使用数字来设置,不过考虑到字体的规范,则一般只是用normal和bold来修改。
font-weight:normal; font-weight:bold; font-weight:strong; font-weight:em;
-
font-family:文字类型(字体)
必须用户计算机中存在的字体才可以使用
开发时,一般会设置多个字体,让浏览器自己选择
font-family:consolas,微软雅黑,sans-serif;
为了匹配所有用户的使用,一般在最后字体设置为
sans-serif
,改字体表示为非衬线字体,具体解释如下:- 衬线字体:字边缘有修饰的字体,例如:宋体;
- 非衬线字体:自边缘不修饰的字体,例如:微软雅黑。
衬线字体在打印成纸质版的时候很好看,故一般用于印刷。在页面上一般使用非衬线字体。·
-
font-style:字体样式
通常用它师者斜体。
strong默认加粗;em默认斜体
i 元素的默认样式是斜体,如果想要做出倾斜字体,请使用CSS样式,不要使用 i 元素。i 元素一般用来表示一个图标(icon)。
-
text-decoration:文本修饰——给文本加线。
text-decoration:line-through; /*文字中间加一条线*/ text-decoration:overline; /*文字上面加一条线*/ text-decoration:underline; /*文字下面加一条线*/
- text-indent:首行文本缩进
有两个属性值:px和em。前者表示缩进的像素,后者表示缩进几个字的大小。
text-indent:28px; text-indent:2em;
-
line-height:每行文本的高度
line-height:14px; line-height:1.5;
设置行高为容器的高度,可以使文字在容器中垂直居中
行高可以设置为纯数字,表示相对于当前元素的字体的大小。
-
width:宽度
-
height:高度
-
letter-space:
表示文字之间的间隙,可以使用em或px来表示文字之间的加个大小
-
text-align:元素内部文字的水平排列方式
text-align:center; text-align:left; text-align:right;
总结
本篇笔记对一些基础的CSS规则进行了简单地说明,多数是对文字的样式,后续会对规则进行进一步的补充。