第二课- CSS基本样式和元素选择器

一、什么是CSS？

CSS全称（英语：Cascading Style Sheets，），中文翻译为“层叠样式”,是一种用来为HTML文档添加样式（字体、间距、位置、颜色、角度等显示效果）的计算机语言

HTML是内容的展示，CSS是内容的装饰。

二、CSS的引用

（一）style标签（内联样式）

<head>
    <style>
    /*层叠样式表：CSS，专门用来装饰网页内容的显示效果*/
    </style>
</head>

在head标签中间新建一个style标签，该标签内部存放的就是网页文件中的CSS代码

CSS中的代码注释格式采用的是：/* 注释文字 */

（二）外部引用CSS文件（外联样式）

<!-- 引用网页文件外部的一个CSS文件 -->
<link rel='stylesheet' href='这里写css文件的地址'>

在head标签中间新建一个link标签，通过href属性设置外部CSS文件地址。
rel是relationship的缩写（指定当前文档与被链接文档的关系），rel=“stylesheet”表示我们引用的是一个样式表（CSS）文件

<!-- 引用网页文件外部的一个CSS文件 -->
<link rel='stylesheet' href='./style.css'>

在左侧这样的项目文件结构下，在名为demo.html的网页文件中引用名为style.css的方法

（三）标签内部style属性（行内样式）

<div style="存放该元素的CSS样式代码"></div>

在开始标签的内部可以设置一个叫做style的属性，属性的双引号内存放该元素代码的CSS样式

覆盖

行内 > 内联 > 外联

行内最好不要去写

html 是html结构 css

三、CSS代码的基本格式

（一）元素/标签命名的基本格式

1.class命名（别称：类名）

class命名：谁都可以取，可以取任意次

<div class="message">
<!-- class命名，名字可以重复使用-->   
</div>

以.开头加上名称写style可以重复使用可以写多个

子选择器 > 只能选择自己的儿子

后代选择器空格选择自己的所有后代

兄弟选择器 ~ 通过兄弟选择到自己

相邻选择 + 通过紧挨着的邻居找到自己

* 通配符会选择到所有的标签生效css样式

, 合并符格式相同才能合并

标签选择器选中所有的标签 p div span

取名是规范的

不能以数字开头不要以特殊符号开头关于js的

不要使用中文引入图片不支持你使用中文

最好是以字母开头

2.id命名

ID命名：只能是唯一的，一旦被使用了一次，其他人再也不能用

以#开头加上名称写style 可以重复使用

<div id="message">
    <!-- id命名，名字只能用一次-->
</div>

id一个页面不要使用太多权重问题最好不要超过5-10

网页中除去DTD标签和注释标签外，皆可称呼为元素，元素即是标签，标签即是元素。

（二）CSS样式设置的基本格式

（三）常用样式类别

四、常用选择器的使用

（一）网页文档结构分析

代码结构：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>表格布局</title>
    </head>
    <body>
        <div class="main">
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div id="msg">
                <ol class="msglist">
                    <li class="listcon">
                        <div></div>
                    </li>
                </ol>
            </div>
            <div class="nav">
                <ol>
                    <li>
                        <div></div>
                    </li>
                </ol>
            </div>
        </div>
    </body>
</html>

模拟树状结构：