Css的四种引入方式:

一、内嵌式引入

在html文件的<head>标签里面的<style>标签里面,直接写css代码。在html中以这种方式引入css,叫做内嵌式方法。

二、链接式

所谓链接式方法,其实就是把html文件外部的css文件,通过<link>标签像"超链接"一样引入这个css文件的方法。

2.链接式引入css方法,主要是2个步骤:

1)创建单独的css文件

2)用<link>标签引入外部css文件

创建了独立于html文件的外部css文件之后,我们只需要把它引入html文件中,这个外部css文件中的代码就会起作用。

html中,有一个<link>标签,<link>标签是这样写的:

<link href="css文件路径" type="text/css" rel="stylesheet" />

在<link>标签的href属性中,我们要写上需要引入的css文件的路径,这样就把外部的css文件引入到当前的html页面了。

<link>标签是写在<head>标签里面的。

三、行内样式

行内样式,就是在html的标签上写css代码,比如:

<p style="background-color: #999900">行内元素,控制段落-1</p>

四、导入式

导入样式,就是在html文件的<style>标签里面,写上@import css路径。

有6种书写方式:

1.@import daoru.css;
2.@import 'daomxss';
3.@import "daoru.css";
4.@import url(daoru.css);
5.@import url('daoru.css');
6.@import url("daoru.css");

Css选择器:

       选择器也称为选择符,所有的html语言中的标记都是通过css选择器控制的。常见的css选择器有标签选择器、类选择器、id选择器、全局选择器、继承选择器、伪类选择器、组合选择器。

1.标签选择器,也成为元素选择器。

       标签选择器的基本形式如下:tagName{property:value},其中tagName是标签名称,property是css的属性。

如何连接css和JavaScript 如何链接css文件_选择器

如何连接css和JavaScript 如何链接css文件_css_02

2.类选择器 ,类选择器用来为一系列标签定义相同的呈现方式,

       常用的语法是 .classValue{property:value}。其中classValue是类选择器的名称,这是由css编写者自己命名。

如何连接css和JavaScript 如何链接css文件_css_03

如何连接css和JavaScript 如何链接css文件_选择器_04

3.ID选择器,ID选择器定义的是某一个特定的html元素,一个网页中只有一个标签或元素使用某一ID的属性值。

       ID选择器的基本语法格式如下:#idValue{property:value}。其中idValue是ID选择器的名称,可以由CSS编写者自己编写。

如何连接css和JavaScript 如何链接css文件_选择器_05

如何连接css和JavaScript 如何链接css文件_css_06

4.全局选择器,全局选择器就是对所有的htmlz元素起作用。

       语法格式为: *{propery:value}。其中“*”表示对所有元素起作用,property表示css的属性,value表示属性值。

如何连接css和JavaScript 如何链接css文件_如何连接css和JavaScript_07

如何连接css和JavaScript 如何链接css文件_选择器_08

5.组合选择器,就是将多种选择器进行搭配,可以构成一种复合选择器,也称为组合选择器。

如何连接css和JavaScript 如何链接css文件_如何连接css和JavaScript_09

如何连接css和JavaScript 如何链接css文件_选择器_10

6.继承选择器,继承的规则是子标签在没有定义的情况下,继承父标签的选择器;当子标签重复定义了父标签的声明时,执行子标签选择器。

如何连接css和JavaScript 如何链接css文件_css_11

如何连接css和JavaScript 如何链接css文件_选择器_12

7. 伪类选择器,伪类选择器主要应用在<a>标签上,它由四种状态:未访问链接(link)、已访问链接(visited)、激活链接(active)、鼠标停留在连接上(hover)。

如何连接css和JavaScript 如何链接css文件_css_13

如何连接css和JavaScript 如何链接css文件_html_14