css 基本语法及页面引用:

时间:2022-06-30 09:01:10

css基本语法:

css的定义方法是:

选择器{ 属性:值; 属性:值; 属性:值; }

选择器是将样式和页面元素关联起来的名称,属性是希望设置的样式属性,每个属性有一个或多个值。

如:

div{

width:100px;

height:100px;

color:red

}

css页面引入方法:

(1)外联式:通过link标签,链接到外部样式表到页面

<link rel=”stylesheet” type=”text/css” href=”css/main.css”>

(2)嵌入式:通过style标签,在网页上创建嵌入的样式表

<style type=”text/css”>

div{ width:100px; height:100px; color:red }

......

</style>

(3)内联式:通过标签的style属性,在标签上直接写样式。

<div style=”width:100px; height:100px; color:red ”>......</div>

代码:

main.css:

div{

font-size:20px;

/* 文字默认大小是16px */

color:red;

}

css.html:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>css</title>

<!-- 第一种插入样式的方式:外联式 -->

<link rel="stylesheet" type="text/css" href="css/main.css">

<!-- 第二种插入样式的方式:嵌入式 -->

<style type="text/css">

h1{

font-size: 20px;

color: gold;

}

</style>

</head>

<body>

<h1>页面标题</h1>

<div>这是一个div标签</div>

<!-- 第三种插入样式的方式:内联式或行内式 -->

<a href="https://www.baidu.com" style="font-size: 20px;color:pink">百度</a>

</body>

</html>