CSS样式表详解-优快云博客

引用CSS

使用外部样式表
使用内部样式表
使用行内样式表
外部样式表：css代码在一个独立的文件中HTML通过link元素表引入到页面，link元素是一个空元素。
使用外部样式表的特点：
1.实现了内容结构和表现形式代码分离，方便复用和维护。
2.使HTML代码更加纯净，有利于程序员和搜索引擎的阅读。
使用内部样式表：将css代码写到HTML文档的style元素内容中（并且是要写在head元素中）。
例：

         <style>h1{color:red}</style> 
        

内部样式表的特点：
1.没有了样式表文件，在某些时候可以提高效率
2.多个页面难以共享使用，不利于代码重复利用
3.HTML和CSS代码混杂，不利于程序员和搜索引擎的阅读
4.可在某些要求效率高或者测试的场景下使用

使用行内样式表：css代码写在元素的style属性中，行内样式不写选择器，如：

         <h1 style="color:green">内容</h1> 
        

行内样式表的特点：
1.HTML和CSS代码混杂，不利于程序员和搜索引擎的阅读以及不利于代码的修改
2.不利于代码重复利用
3.javascript操作的是行内样式
4.适合在测试的场景下使用
以上三种样式的优先级：
同一个页面，同一个元素，不同css引用，不同的样式添加，行内样式权重最高，其次是内部样式

CSS规则

css代码由一个一个的规则组成，css选择器决定了样式规则适用于哪些元素，目前我们学过的三种选择器：

元素选择器

h1{color:blue}

这就是一个规则，表示让h1的元素字体为蓝色，h1就是选择器，括号里面就是声明块，所有与该元素名匹配的元素，都将应用声明块中的规则。

类选择器

书写格式为：.类名{/声明块/}，类名是由我们自定义的名称，所有class属性为指定类名的元素，都将应用声明块中的规则；例如：

         <h1 class="F53">元素内容</h1> 
        

.F53{font-size:18px}

F53所在的元素，字体都为18像素。
####ID选择器
书写格式：id值{/声明块/}
属性id为指定值的元素，都将应用声明块中的规则，并且同一个元素中，元素的id值必须唯一。
当元素、类、id选择器同时应用到一个标签里，id权重最高，其次是类。
###语义化结构元素表：
在HTML5出现之前，一直使用DIV来划分页面区域，单div元素无法明确表示该区域的内容的含义，HTML5中新增了一系列带有语义的元素
结构元素：
<header>用于表示某个页面或区域的头部（同一个页面可以出现多次）
<nav>用于表示导航栏
<aside>用于表示跟周围主题相关的附加信息
<article>用于表示文章或其他可以独立页面存在的内容
<section>用于表示一个整体的一部分主题（多个section组成了artic）。
###插入链接：
超链接：
书写格式<a href="目标">内容</a>或<a target="页面打开的位置" href="目标">内容</a>（关于页面打开位置：._blank表示在新的窗口打开；._self表示在当前窗口打开）
锚点：是在当前页面跳转
书写格式：<a href="#lovo">内容</a>
锚点链接可指向一个特定段落，更方便查看一些大型的网页。
功能链接：
书写格式例：<a href="tel1832847...">拨打电话</a>