网页三剑客之CSS

1.CSS概述

　　CSS中文简称层叠样式表(英文全称：Cascading Style Sheets)，用来控制页面的表现，即使页面更好看的语言。

2.CSS基本语法和页面引用

　　2.1 css的定义方法

　　每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。

网页三剑客之CSS

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

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

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

　css通用书写结构

/*
解释性的信息
*/

/*全局通用的样式*/


/*导航条的样式*/

/*商品列表样式*/

p {
    color: red;
    font-size: 18px
}
/*标签选择器*/
h1 {
    color: green;
}
/*ID选择器*/
#p2 {
    color: black;
}
/*类选择器*/
.c1 {
    color: yellow;
}

　　2.2 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>
（4）、导入式：引用数量有限制
<style>@import"css/main.css";</style>
实际工作中，我们常用外联式和嵌入式。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联式</title>
</head>
<body>
    <div>
        <h2 style="text-align: center;">什么是CSS</h2>
        <p style="color: red;text-indent: 20px; font-size: 16px;">
            为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS由此思想而诞生，CSS是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表。有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁。
        </p>
        <hr>
        <p style="color: blue;text-indent: 20px;font-size: 16px;">
            第一行是文档声明，第二行"html"标签和最后一行“html”定义html文档的整体，“html”标签中的‘lang=“en”’定义网页的语言为英文，定义成中文是'lang="zh-CN"',不定义也没什么影响，它一般作为分析统计用。 “head”标签和“body”标签是它的第一层子元素，“head”标签里面负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和javascript文件等，设置的内容不会显示在网页上，标题的内容会显示在标题栏，“body”内编写网页上显示的内容。
        </p>
    </div>
</body>
</html>

内联式