CSS 的作用是让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开。CSS 是 Cascading Style Sheets 的首字母缩写,意思是层叠样式表。有了 CSS ,html中大部分表现样式的标签就废弃不用了,html只负责文档的结构和内容,表现形式完全交给CSS,html文档变得更加简洁。

 

CSS 基本语法: 选择器{属性:值;属性:值;属性:值} 选择器是将样式和页面元素关联起来的名称,属性是希望设置的样式属性每个属性有一个或多个值

 

CSS 页面引入的方法: 推荐使用第一种方法,第二种比较直观,演示的时候用

1 外联式 通过link标签,连接到外部样式表到页面中 <link rel="stylesheet" type="text/css" href="css/main.css">

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

3 内敛式 通过标签的style属性,在标签上直接写样式

 

外联式案例

在 css 目录下创建 main.css

div{

    font-size:160px;

    color:red;

}

 

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>link_document</title>

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

</head>

<body>

    <div>this is a div label</div>

</body>

</html>

 

 

HTML+CSS_04-CSS基本语法

 

 

 

 

 

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>link_document</title>

 

 

<!--    <style type="text/css">

        h1{

            font-size:120px;

            color:gold;

        }

    </style>-->

 

 

<!--

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

-->

 

</head>

<body>

    <h1>page_label</h1>

    <div>this is a div label</div>

    <!-- zhi jie zai biao qian zhogn xie geshi -->

    <a href="www.baidu.com" style="font-size:120px;color:red">habby_yang</a>

</body>

</html>

 

 

 

 

 

 

 

相关文章: