CSS
CSS全称层叠样式表 (Cascading Style Sheets) ，是一种标记语言，用于给HTML结构设置样式，如：文字大小、颜色、元素宽高等
HTML搭建结构，CSS添加样式，实现结构与样式分离
CSS编写位置
行内样式
写在元素的style属性中，又称内联样式，style属性的值是key:value形式
行内样式只能控制当前标签的样式，对其他标签无效，没有体现出结构与样式分离的思想
<h1 style="color: black;font-size: 60px;">css2</h1>
内部样式
写在html页面内部，将所有的CSS代码提取出来，放在单独的style元素中，但依然没有体现出结构与样式分离，且样式无法复用
style元素理论上可以放在HTML的任何地方，但一般都放在head元素中
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1{
color: red;
font-size: 60px;
}
</style>
</head>
<body>
<h1>css</h1>
</body>
外部样式
写在单独的.css文件中，在HTML文件中引入使用
**优势：**样式可复用、结构清晰、可触发浏览器的缓存机制，提高访问速度 ，实现了结构与样式的完全分离，实际开发中，几乎都使用外部样式。
demo.css文件
h1{
color: red;
font-size: 60px;
}
在HTML文件中引入css文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="demo.css">
</head>
<body>
<h1>CSS</h1>
</body>
</html>
link元素：
rel：( relation ：关系）说明引入的文档与当前文档之间的关系href：引入文件路径
样式表的优先级
优先级：行内样式 > 内部样式 = 外部样式（内/外部样式的优先级相同，后面的覆盖前面的（后来者居上））
注意：项目中要先引入重置样式，再引入其它的css文件
CSS语法规范
CSS 语法规范由两部分构成：
选择器：找到要添加样式元素
声明块：设置具体的样式（声明块是由一个或多个声明组成的），格式为： 属性名:属性值;
CSS代码风格
**展开风格：**开发时推荐，便于维护和调试
h1{
color: red;
font-size: 60px;
}
**紧凑风格：**项目上线时通过工具将代码转换为紧凑风格，用于减小文件体积，节约网络流量（用户访问时加载更快）
h1{color:red;font-size:40px;}
长度单位
CSS中设置长度，必须加长度单位，否则样式无效
px：像素em：相对元素 font-size 的倍数，font-size为空就去找父元素或者祖先元素rem：相对根字体大小，html元素就是根%：相对父元素计算
元素的显示模式
块元素（block）
又称：块级元素
特点：
- 在页面中
独占一行，不会与任何元素共用一行，是从上到下排列的 - 默认宽度：撑满
父元素 - 默认高度：由
内容撑开 可以通过CSS设置宽高
常用块元素：
- 主体结构元素：
<html> 、 <body> - 排版元素：
<h1> ~ <h6> 、 <hr> 、 <p> 、 <pre> 、 <div> - 列表元素：
<ul> 、 <ol> 、 <li> 、 <dl> 、 <dt> 、 <dd> - 表格相关元素：
<table> 、 <tbody> 、 <thead> 、 <tfoot> 、 <tr> 、 <caption> <form> 与 <option>
行内元素（inline）
又称：内联元素
特点:
-
在页面中
不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列 -
默认宽度：由
内容撑开 -
默认高度：由
内容撑开 -
无法通过 CSS 设置宽高
行内元素：
-
文本元素：
<br> 、 <em> 、 <strong> 、 <sup> 、 <sub> 、 <del> 、 <ins> -
<a> 与 <label>
行内块元素：
行内块元素既有行内元素的特点，也有块级元素的特点，因此称为行内块元素
-
图片：
<img> -
单元格：
<td> 、 <th> -
表单控件：
<input> 、 <textarea> 、 <select> 、 <button> -
框架元素：
<iframe>
行内元素和行内块元素的区别：
行内元素只占据有内容的空间，不独占一行。行内块元素可以设置大小、内外边距，并可以容纳其他块级元素或行内元素。
修改元素的显示模式
通过display属性可以修改元素的默认显示模式，常用值如下
| 值 | 描述 |
|---|---|
none | 元素会被隐藏 |
block | 元素将作为块级元素显示 |
inline | 元素将作为行内元素显示 |
inline-block | 元素将作为行内块元素显示 |
a{
display: block;
}
默认样式
元素一般都些默认的样式，例如：
<a>元素：下划线、字体颜色、鼠标小手<h1> ~ <h6>元素： 文字加粗、文字大小、上下外边距<p>元素：上下外边距<ul> 、 <ol>元素：左内边距body元素： 8px 外边距（4个方向）
**优先级：**元素的默认样式 > 继承的样式，如果要重置元素的默认样式，选择器一定要直接选择到该元素
4173
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
