CSS 简介
HTML 的局限性
HTML 做样式：
- 臃肿
- 丑
CSS-网页的美容师
CSS 是层叠样式表(Cascading Style Sheets) 缩写, 也是一种标记语言.
CSS 主要用于设置 HTML 页面的文本内容 (字体, 大小, 对齐方式) , 图片的外形 (宽高,边框样式, 边距等) 以及版面的布局和外观显示方式.
CSS 使网页变得更加漂亮.
CSS 语法规范
选择器+一条或者多条声明.
<style>
dt {
padding: 0px 6px;
text-align: right;
100px;
vertical-align: top;
}
</style>
- 选择器 用于指定 CSS 样式的 HTML 标签, 花括号内是对该对象设置的具体样式.
- 属性和属性值以键值对的形式出现.
CSS 基础选择器
CSS 选择器的作用
选择器: 根据需求把不同的标签选择出来, 然后设置这些标签的样式
选择器分类
- 基础选择器: 单个选择器组成
- 标签选择器
- 类选择器
- id 选择器
- 通配符选择器
- 复合选择器: ****
标签选择器
语法:
tag {
attribute1: val;
attribute2: val;
attribute3: val;
}
某一类标签全部选中
优点:
- 快速为页面中同类型的标签统一设置样式
缺点:
- 不能设置差异化样式
类选择器
差异化选择不同的标签, 单独选择一个或者几个标签
语法:
.red{
color: red;
}
<div class="red">第一个div</div>
<div>第二个div</div>
- "." + 类名(自定义), 注意命名规范
多类名
给一个标签指定多个类名, 从而达到更多的选择目的.
-
class 属性中可以写多个类名
-
多个类名之间用空格分开
-
这个标签具有这些类名的样式
-
节省 CSS 代码, 统一修改方便
id 选择器
id 选择器可以为表有特定 id 的 HTML 元素指定特定的样式
CSS 中 id 选择器以 "#" 来定义
语法:
#id-name {
color: red;
font-size: 40px;
}
<div id="id-name">第一个div</div>
注意: 不能出现2个或2个以上同名的 id 选择器(但是经测试可以)
百度到的解释(https://zhidao.baidu.com/question/582814229647653165.html):
通配符选择器
语法:
* {
margin: 0;
padding: 0;
}
CSS3 属性选择器
可以不借助类或者 id 选择器
| 选择符 | 简介 |
|---|---|
| E[att] | 具有 att 属性的 E 元素 |
| E[att="val"] | 具有 att 属性且值为"val"的 E 元素 |
| E[att^="val"] | 具有 att 属性且值以"val"开头的 E 元素 |
| E[att$="val"] | 具有 att 属性且值以"val"结尾的 E 元素 |
| E[att*="val"] | 具有 att 属性且值含有"val"的 E 元素 |
CSS3 结构伪类选择器
CSS3 伪元素选择器(重要)
伪元素选择器可以帮助我们利用 CSS 创建新标签元素, 而不需要 HTML标签,从而简化 HTML 结构.
before和after创建一个元素,但是属于行内元素- 新创建的这个元素在文档树中是找不到的,所以我们称为伪元素
- 语法:
element::before {}, 它是 element 元素的子元素, 位于父盒子内部前边 before和after必须有content属性before在父元素内容的前面创建元素,after在父元素内容的后面插入元素- 伪元素选择器和标签选择器一 样,权重为1
CSS 字体属性
字体系列
CSS 使用 font-family 属性定义文本的字体系列:
p{
font-family: "微软雅黑";
}
- 各种字体之间用 "," 隔开
- 若字体名称含有多个单词, 用引号包裹
- 尽量使用系统自带字体
- 浏览器会按照
font-family指定的顺序加载可以使用的第一个字体
字体大小
p {
font-size: 20px;
}
- 不同浏览器默认字体大小可能不一致, 最好指定一个明确的字体大小
- 可以给 body 指定整个页面文字的大小
字体粗细
语法:
font-weight: normal|bold|bolder|lighter|number;
number 范围为100~900, 不跟单位
字体样式
语法:
font-style: normal | italic;
注意: 一般用于将斜体标签( em i )改为不倾斜字体
字体复合属性
语法:
font: font-style | font-weight | font-size/line-height | font- family;
顺序不可交换, 前两个可以省略
CSS 文本属性
CSS 的 Text (文本) 属性可以定义文本的外观, 比如文本的颜色, 对齐文本, 装饰文本, 文本缩进. 行间距等.
文本颜色
语法:
color: 预定义颜色值 | 十六进制 | RGB 代码 | HSL代码;
例子:
div {
color: red;
/*color: #ff0000;
color: rgb(255,0,0);
color: hsl(0, 100%, 50%);*/
}
对齐文本
语法:
text-align: left | right | center...;
水平对齐方式
装饰文本
语法:
text-decoration: none | underline | overline |line-through...;
文本缩进
语法:
text-indent: number px| number em;
首行缩进相应像素值|字符数
行间距
语法:
line-height: number px;
CSS 引入方式
内部样式表
在 HTML 页面内写样式， 单独写到 <style> 标签内部
<style>
div {
color: red;
}
</style>
- 可以放在 HTML 文档的任何地方, 一般放在 <head> 标签中
- 可以方便的控制整个页面的元素样式设计
- 代码结构清晰,但没有实现结构与样式完全分离
行内样式表
直接在元素标签内部设置 CSS 样式, 适合简单的样式
例:
<div style = "color:red; font-size: 12px;">
Explosion!
</div>
- style 是标签的属性
- CSS 内容写在引号内
- 控制该标签的样式
- 较繁琐, 不推荐大量使用
外部样式表
样式单独写入 CSS 文件中, 之后引入 HTML 文件使用
引入:
<link rel = "stylesheet" href = "文件路径">
- 最常用的方式