02CSS3基本语法05

day05

02CSS

HTML,CSS和javascript之间的关系

HTML是网页内容的载体
CSS样式是表现（外观控制）
JavaScript是行为，用来实现网页特效效果


CSS层叠样式表（Cascading Style Sheets）
用于定义HTML内容再浏览器内的显示样式


为什么学习CSS

CSS简化HTML相关标签代码，网页体积小，下载快
解决内容与表现分离的问题
更好地维护网页，提高工作效率


CSS基础语法
CSS使用方法
CSS选择器
CSS继承和层叠
CSS优先级
CSS命名规范


CSS样式规则
CSS规则由两部分构成：选择器，声明


CSS引用

写在<head></head>标签内：
<style type="text/css">
CSS样式
</style>

CSS注释 /*注释内容*/


引用CSS样式

行内样式(内联样式)
<p style="color:red;">内容</p>
内部样式表(嵌入样式)
<style type="text/css">
样式
</style>
外部样式表,把CSS样式代码写在独立的一个文件中 扩展名：CSS文件名.css
引入外部文件：<link href="XX.css" rel="stylesheet" type="text/css" />
导入式
@import "css.css" 或url(css.css)


CSS使用方法优先级

行内优先级最高
行内样式>内部样式>外部样式
说明：
1.链入外部样式表语内部样式表之间的优先级取决于所处位置的先后
2.最后定义的优先级最高(就近原则)

 

css_use1.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css使用方法优先级</title>
    <link rel="stylesheet" type="text/css" href="css2.css"><!--color:gray-->
    <style type="text/css">
        @import url(css1.css);
        p{
            /*color: blue;*/
        }
    </style>
    <link rel="stylesheet" type="text/css" href="css3.css"><!--color:orange-->
</head>
<body>

    <p style="color: red;"><b>css使用方法</b></p>

</body>
</html>

 

图示：

 

posted @ 2018-02-02 17:30  cheinlbb  阅读(101)  评论(0)  编辑  收藏  举报