CSS基础知识及其基本语法

标签：css引入方式   使用   htm   综合   的区别   功能   ext   知识   选择器   

一、什么是CSS

• CSS 是层叠样式表( Cascading Style Sheets ) 的简称。

• 有时我们也会称之为CSS 样式表或级联样式表。

• CSS 也是一种标记语言

• CSS 主要用于设置HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。

二、CSS能做什么

? HTML能搭建一个基本的网页，但是我们能发现其构造的网页是极其简陋的，这时候就需要CSS来

美化网页。CSS的功能非常强大，不仅能改变各个HTML元素的颜色，文字大小等，还能改变元素的内

边距，外边距等。除此之外，CSS还能改变网页元素的布局，通过浮动，定位等方式将各个元素重新排

列，构造一个整洁，简约的网页。

三、CSS引入方式

内部样式表

内部样式表（内嵌样式表）是写到html页面内部. 是将所有的CSS 代码抽取出来，单独放到一个

标签中

行内样式表

行内样式表（内联样式表）是在元素标签内部的style 属性中设定CSS 样式。适合于修改简单样式

HELLO WORLD

外部样式表

样式单独写到CSS 文件中，之后把CSS文件引入到HTML 页面中使用

引入外部样式表分为两步：

1. 新建一个后缀名为.css 的样式文件，把所有CSS 代码都放入此文件中。

2. 在HTML 页面中，使用 标签引入这个文件。

这种方式也是使用最多的方式，实现了文档样式相分离

四、CSS语法规范

CSS 规则由两个主要的部分构成：选择器以及一条或多条声明

p {
        color: blue;
        font-size: 14px;
  }

? 如上，p是选择器，表示选择了p元素（段落），将其中的颜色设置为蓝色，将字体大小设置为

14px（px为像素，是最常用的一个单位）。

1. 选择器是用于指定CSS 样式的HTML 标签，花括号内是对该对象设置的具体样式
2. 属性和属性值以“键值对”的形式出现
3. 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
4. 属性和属性值之间用英文“:”分开
5. 多个“键值对”之间用英文“;”进行区分

五、CSS选择器

CSS选择器分为选择器分为基础选择器和复合选择器两个大类

• 基础选择器是由单个选择器组成的

• 基础选择器又包括：标签选择器、类选择器、id 选择器和通配符选择器

标签选择器

标签选择器（元素选择器）是指用HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签

指定统一的CSS 样式

标签名 {
    属性1: 属性值1;
    属性2: 属性值2;
    属性3: 属性值3;
    ...
}

类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。

语法

结构需要在html中用class属性来调用class 类

HTML代码：

红色

类选择器在HTML 中以class 属性表示，在CSS 中，类选择器以一个点“ . ”号显示

CSS代码：

.red {
	background-color: red;
}

多类名使用方式

HELLO WORLD

1. 在标签class 属性中写多个类名

2. 多个类名中间必须用空格分开

3. 这个标签就可以分别具有这些类名的样式

ID选择器

id 选择器可以为标有特定id 的HTML 元素指定特定的样式。

HTML 元素以id 属性来设置id 选择器，CSS 中id 选择器以“#" 来定义。

语法：

#id名{
	属性1: 属性值1;
	...
}

如

#nav {
	color: red;
}

注意：id 属性只能在每个HTML 文档中出现一次。

类选择器与ID选择器的区别

• 类选择器可以在同一个HTML文档中多次使用，但是ID选择器一个HTML文档中只能使用一次

• 类选择器可以实现复用，所以设置样式时一般使用类选择器；而在JS代码中便可以使用ID选择器

六、CSS基础属性

CSS字体属性

font-family ：字体系列属性，设置字体属性，如：微软雅黑

font-size：字体大小属性，设置字体大小，通常以px为单位

font-weight：字体粗细属性，设置字体粗细，400为正常，700为加粗，注意后面不跟单位

font-style：字体样式属性，设置字体为斜体还是正常

如：

div {
        font-family: ‘Courier New‘, Courier, monospace;
        font-size: 14px;
        font-weight: 400;
        font-style: normal;
    }

字体复合属性

字体属性可以把以上文字样式综合来写, 这样可以更节约代码:

div {
	font: font-style font-weight font-size/line-height font-family;
}

• 使用font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
• 不需要设置的属性可以省略（取默认值），但必须保留font-size 和font-family 属性，否则font 属性将不起作用

CSS文本属性

text-decoration：文本修饰属性，通常修饰文本下划线

text-align：文本起始位置属性，设置文本位置，左靠齐、右靠齐还是居中

color：文本颜色属性，设置文本颜色

line-height：行高属性，设置每一行文本的高度

CSS基础知识及其基本语法

标签：css引入方式   使用   htm   综合   的区别   功能   ext   知识   选择器   

原文地址：https://www.cnblogs.com/JSW79/p/14693338.html