CSS理论学习

2020-07-10 19:01:35 阅读：206 来源： 互联网

CSS简介

CSS概述

css指层叠样式表（Cascading Style Sheets）
样式定义如何显示HTML元素
样式通常保存在外部的 .css文件中

多层样式将层叠为一个

当同一个HTML元素被不止一个样式定义时，会使用哪个样式？
一般而言，所有的样式会根据下面的规则层叠与一个新的虚拟样式表中，其中数字4拥有最高的优先权
　1、浏览器缺省设置
　2、外部样式表 ：外部的CSS文件
　3、内部样式表 ：<head>标签内部
　4、内联样式 ：HTML元素内部

CSS基础语法

CSS规则主要由两个主要的部分构成：选择器，以及一条或多条声明
　　selector{ declaration;…… }

选择器 ：需要改变样式的HTML元素
　声明 ：属性 + 属性值
　　　　　selector{ property ：value }
　　属性（property）：希望设置的样式属性（style attribute）

CSS注释 ：
　　/* CSS注释的内容 */

选择器的分组

对选择器进行分组，这样，被分组的选择器就可以分享同样的声明，用'逗号'将需要分组的选择器分开

h1,h2,h3,h4,h5,h6 {
  color: green;
  }

id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式
id选择器以"#"来定义

#red {color:red;}
#green {color:green;}

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

注意：id 属性只能在每个 HTML 文档中出现一次

CSS样式的引入方式

1、内联（行内、行间）样式

（通过在html标签上添加style属性）
　　<div style="width: 50% ;height: 10%;background-color: red">这是一个块</div>

2、内部样式

（通过style标签）
　　<style type="text/css">
　　　　div{width: 50%; background-color: cadetblue;}
　　</style>

区别：
　　内部样式的代码可以复用，符合w3c的标准，让结构和样式分开处理

3、外部样式

（引入一个单独的css文件）
link标签 ：通过link标签引入外部资源
　　 rel属性 ：指定资源跟页面的关系
　　href属性 ：指定资源的地址

<link rel="stylesheet" type="text/css" href="out.css"/>

标签：样式,理论,id,学习,HTML,选择器,CSS,属性
来源： https://www.cnblogs.com/qingying-wh/p/13280821.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS理论学习