前端 HTML CSS基础_html-js-css

概述CSS css导读 """1、csss是什么：级联样式表（Cascading Style Sheet）2、css属于标记语言，没有逻辑3、css是完成页面样式(张什么样) 与布局(标签位置)4、学习的内容： css如何控制html标签 - 建立联系 - css选择器 css可以控制哪些样式(样式与布局) css如何导入到html文件中5、学习目的： CSS CSS导读

"""1、CSSs是什么：级联样式表 （Cascading Style Sheet）2、CSS属于标记语言，没有逻辑3、CSS是完成页面 样式(张什么样) 与 布局(标签位置)4、学习的内容：    CSS如何控制HTML标签 - 建立联系 - css选择器    CSS可以控制哪些样式(样式与布局)    CSS如何导入到HTML文件中5、学习目的：    完成页面的样式"""

CSS三种引入方式

<!DOCTYPE HTML><HTML><head>    <Meta charset="utf-8">    <Title>CSS的引入</Title>    <!--2、内联式-->    <!--书写位置:在head标签中的style标签内-->    <!--CSS语法：css选择器 { 样式1; 样式2; } -->    <!--优缺点: 可读性强，有复用性，样式被HTML页面绑定了，不能提供给其它HTML页面使用-->    <style>        h2 {            color: red;            Font-size: 100px;            text-align: center;        }    </style>    <!--3、外联式-->    <!--书写位置:在外部CSS文件中，在HTML文件中通过link标签引入CSS文件-->    <!--CSS语法：css选择器 { 样式1; 样式2; } -->    <!--优缺点: 可读性强，有复用性，适合团队开发(文件级别的复用性)-->    <link rel="stylesheet" href="CSS/样式引入.CSS"></head><body>    <!--1、行间式-->    <!--书写位置:在标签的style属性中书写样式-->    <!--优缺点: 可读性差，没有复用性，书写直接-->    <h1 >CSS的引入</h1>    <h1>h1标签</h1>    <h2>h2标签</h2>    <h2>h2标签</h2>    <h3>h3标签</h3>    <h3>h3标签</h3>    <h4>h4标签</h4>    <h4>h4标签</h4></body></HTML>

外部CSS文件

/* CSS/样式引入.CSS */h3 {    color: green;}h4 {    Font-size: 50px;    text-align: center;}

三种CSS引入直接的优先级

<!DOCTYPE HTML><HTML><head>    <Meta charset="utf-8">    <Title>CSS的引入</Title>    <!--优先级：    1、内联与外联之间没有优先级区别，由于HTML属于解释性语言，书写在下方的会覆盖上方的样式    2、行间式的优先级要高于一切    --></head><body>    <h3>h3标签</h3>    <h3>h3标签</h3>    <h4>h4标签</h4>    <h4 >h4标签</h4></body><style>    h4 {        color: #ff7800;        Font-size: 20px;    }</style><link rel="stylesheet" href="CSS/样式引入.CSS"></HTML>

CSS基础选择器

<!DOCTYPE HTML><HTML><head>    <Meta charset="utf-8">    <Title>CSS基础选择器</Title>    <style>        /*优先级：可以从作用范围来判断 - 作用范围越精确，优先级越高 */        /*1、统配选择器*/        * {            color: pink;            Font-size: 12px;        }        /*2、标签选择器*/        h1 {            Font-size: 20px;        }        /*3、类选择器*/        .h {            Font-size: 30px!important;        }        .h2 {            Font-size: 40px;        }        .h.h2 {            Font-size: 50px;        }        /*4、ID选择器*/        #hhh {            Font-size: 100px;        }        /*优先级：!important > 行间式 > ID > class > 标签 > 统配 */    </style></head><body>    <h1 >1标题</h1>    <h2 ID="hhh"  >2标题</h2></body></HTML>

总结

以上是内存溢出为你收集整理的前端 HTML CSS基础全部内容，希望文章能够帮你解决前端 HTML CSS基础所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1051744.html