CSS及其规则简介

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代码书写位置

1. 内部样式表：

   CSS代码写在中（不强制）——因为希望在页面加载的时候就可以将样式加载出来，其余地方也是可以放的。

2. 内联样式表：

   直接在HTML元素内中的特定属性style中书写，比如：。

3. 外部样式表：

   将样式书写到独立的CSS文件中。

   在外部样式表中要注意将外部文件引入HTML页面

<link rel="stylesheet" href="CSS外部文件的地址">

​ 其中，rel="sthlesheet"表示引入的是一个样式表。（还可以引入其他类型的文件，后续讲解）

外部样式表的优点

1. 外部要是可以解决多页面样式重复的问题
2. 有利于浏览器缓存，浏览器在加载页面的时候如果发现需要CSS文件会在缓存列表中查找文件，如果没有文件则会进行缓存，方便下次使用
3. 有利于代码分离，避免污染HTML页面

CSS 常见样式声明

1. color:表示文字的颜色

   共有三种写法：

   1. rgb：三个颜色的数值为0，代表黑色；三个颜色都为255时代表白色。——指颜色的透明度

   color:rgb(0,0,0);
   

   2. hex（16进制）：

   color:#000000;
   

   常见颜色数值

   淘宝红：#ff4400

   黑色：#000000

   白色：#ffffff

   红色：#ff0000

   绿色：#00ff00

   蓝色：#0000ff

   紫色：#ff00ff

   青色：#0ff

   黄色：#ff0

   灰色：#ccc

2. background-color：背景颜色——其用法与color相同，故不做赘述

   background-color:---
   

3. font-size：元素内部文字尺寸的大小

   其中共有两种单位：

   1. px：像素——简单来说是文字的高度占多少个像素点
   2. em：倍数——是该元素的父元素的字号的倍数（父元素没有设置字号，则会继承它的父元素的字号，如果一直到根元素也没有设置字号，则使用基准字号——浏览器中设置的字号）。一般来说浏览器字号为中（14px）

   font-size:10px;  /*10像素*/
   font-size:2em;	/*父元素字号（或基准字号）的2倍大小*/
   

4. font-weight：文字粗细程度

   有四个值：normal（普通）、bold（加粗）。

   也可以使用数字来设置，不过考虑到字体的规范，则一般只是用normal和bold来修改。

   font-weight:normal;
   font-weight:bold;
   font-weight:strong;
   font-weight:em;
   

5. font-family：文字类型（字体）

   必须用户计算机中存在的字体才可以使用

   开发时，一般会设置多个字体，让浏览器自己选择

   font-family:consolas,微软雅黑,sans-serif;
   

   为了匹配所有用户的使用，一般在最后字体设置为sans-serif，改字体表示为非衬线字体，具体解释如下：

   1. 衬线字体：字边缘有修饰的字体，例如：宋体；
   2. 非衬线字体：自边缘不修饰的字体，例如：微软雅黑。

   衬线字体在打印成纸质版的时候很好看，故一般用于印刷。在页面上一般使用非衬线字体。·

6. font-style：字体样式

   通常用它师者斜体。

   strong默认加粗；em默认斜体

   i 元素的默认样式是斜体，如果想要做出倾斜字体，请使用CSS样式，不要使用 i 元素。i 元素一般用来表示一个图标（icon）。

7. text-decoration：文本修饰——给文本加线。

   text-decoration:line-through;  /*文字中间加一条线*/
   text-decoration:overline;   /*文字上面加一条线*/
   text-decoration:underline;  /*文字下面加一条线*/
   

   1. text-indent：首行文本缩进

   有两个属性值：px和em。前者表示缩进的像素，后者表示缩进几个字的大小。

   text-indent:28px;
   text-indent:2em;
   

8. line-height：每行文本的高度

   line-height:14px;
   line-height:1.5;
   

   设置行高为容器的高度，可以使文字在容器中垂直居中

   行高可以设置为纯数字，表示相对于当前元素的字体的大小。

9. width：宽度

10. height：高度

11. letter-space：

    表示文字之间的间隙，可以使用em或px来表示文字之间的加个大小

12. text-align：元素内部文字的水平排列方式

    text-align:center;
    text-align:left;
    text-align:right;
    

总结

本篇笔记对一些基础的CSS规则进行了简单地说明，多数是对文字的样式，后续会对规则进行进一步的补充。