CSS简介及常用样式
一、CSS简介
CSS：层叠样式表(英文全称：Cascading Style Sheets)：是一种用来表现HTML样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
二、CSS选择器
2.1基本选择器（三种）
1.标签选择器
<style>
p {
font-size:20px;
}
</style>
2.类选择器（不唯一，用
.）
<style>
.one {
font-size:20px;
}
</style>
<p class="one">这是一个p标签</p>
3.id选择器（唯一，一个网页只能出现一次，用
#）
<style>
#one {
font-size:20px;
}
</style>
<p id="one">这是一个p标签</p>
2.2层次选择器
1.后代选择器
下面div中的全部p中都会字体变大，div外的p则不会
<style>
div p {
font-size:20px;
}
</style>
<div>
<p>这是div里的p标签</p>
<p>这是div里的p标签</p>
</div>
<p>这是p标签</p>
2.子选择器
只能找到前两个p无法再找到里面的p
<style>
div > p {
font-size: 20px;
}
</style>
<div>
<p>这是div里的p标签</p>
<p>这是div里的p标签</p>
<ul>
<li><p>这是div里的p标签</p></li>
</ul>
</div>
<p>这是p标签</p>
3.兄弟选择器
相邻兄弟选择器：找一个元素下边的第一个兄弟元素，操作符是+号
所有兄弟选择器：找一个元素下边所有兄弟元素，操作符是~号
<style>
/*第2，4，5，7的p会放大字体，因为他们上面还有个p，第三个p没有放大是因为被h3中断了导致上面并不是p*/
p + p {
font-size: 20px;
}
</style>
<div>
<p>这是div里的p标签</p>
<p>放大</p>
<h3>断开</h3>
<p>这是div里的p标签</p>
<p>放大</p>
<p>放大</p>
</div>
<p>这是p标签</p>
<p>放大</p>
<style>
/*跟他同级的不含它本身*/
p ~ p {
font-size: 20px;
}
</style>
<div>
<p>这是div里的p标签</p>
<p>放大</p>
<h3>断开</h3>
<p>放大</p>
<p>放大</p>
<p>放大</p>
</div>
<p>这是p标签</p>
<p>放大</p>
4.群组选择器
前三个p中字体都变大了
<style>
div > p,li > p {
font-size: 20px;
}
</style>
<div>
<p>这是div里的p标签</p>
<p>这是div里的p标签</p>
<ul>
<li><p>这是div里的p标签</p></li>
</ul>
</div>
<p>这是p标签</p>
2.3伪类选择器
1.:first-of-type：选择一组子元素中的第一个（即使有其他子元素，也不会受到影响）
<style>
div p:first-of-type{
color: red;
}
</style>
<div>
<p>one</p>
<p>two</p>
<p>three</p>
</div>
2.:last-of-type：选择一组子元素中的最后一个（即使有其他子元素，也不会受到影响）
<style>
div p:last-of-type {
color: red;
}
</style>
<div>
<p>one</p>
<p>two</p>
<p>three</p>
</div>
3.:nth-of-type()：使用索引来选择某一个子元素（即使有其他子元素，也不会受到影响）
<style>
div p:nth-of-type(2){
color: red;
}
</style>
<div>
<p>one</p>
<p>two</p>
<p>three</p>
</div>
三、CSS引入方式
- 行内样式
- 内部样式
- 外部样式
3.1行内样式
只对写入本标签生效，多个用
,隔开
<p style="color: orange;font-size:23px;">行内样式</p>
3.2内部样式
可以参考上面第二模块部分
<style>
div p:nth-of-type(2){
color: red;
}
</style>
<div>
<p>one</p>
<p>two</p>
<p>three</p>
</div>
3.3外部样式
要单独写一个
.css文件，并且要在html页面中导入，在head中添加
<link rel="stylesheet" href="css/index.css">
四、CSS优先级
4.1基本规则
从引用方式方面来说：行内样式 > 内嵌样式/外部样式
从选择器方面来说：ID 选择器 > 类选择器（属性选择器、伪类选择器） > 标签选择器
4.2叠加时的优先级
- 就近原则：距离最近的样式有效。
- 顺序原则：这里的顺序是指的书写顺序，也就是最后书写(不是调用)的样式有效。
- 精细原则：或者叫特殊原则。既选择器的指向越精细越优先。
五、CSS中的颜色
这里仅仅写了我常用的，更多的读者可以进一步查询如：HSL、HSLA
5.1直接使用颜色英文单词
red、green、orange、blue...
5.2使用十六进制表示
//前两位红，中间两位绿，后面两位蓝
通常是6位
#99CCFF
也可以简写为3位
#9CF
5.3RGB与RGBA
//RGB由三部分组成
//第一位红，第二位绿，第三位蓝(范围0-255)
RGB(255,0,0);
//RGBA由四部分组成，最后一位用于加透明度
//最后一位(范围(0-1),0完全透明,1完全不透明
RGBA(255,0,0,0.6);
六、常用样式
6.1字体样式
| 属性名 | 含义 | 值 |
|---|---|---|
| font-family | 设置字体名称 | 宋体、黑体... |
| font-size | 设置字体大小 | px,em |
| font-style | 设置字体风格 | normal,italic |
| font-weight | 设置字体粗细 | normal,bold,100-900(400为normal,700为bold) |
6.2文本样式
| 属性名 | 含义 | 值 |
|---|---|---|
| color | 设置文本颜色 | #45F78,#ff6600,#f60, rgb(0,0,0) |
| text-align | 设置元素水平对齐方式 | left, center,right, justify |
| vertical-align | 设置元素垂直对齐方式 | middle, top, bottom,长度或百分比(可为负值) (只对内联元素有效。或对td、th有效。) 图片居中有时候也会用它 |
| line-height | 设置文本的行高 | normal,长度或百分比(可为负值) |
| text-decoration | 设置文本的装饰 | none, underline, overline, line-through |
6.3尺寸样式
| 属性名 | 含义 | 值 |
|---|---|---|
| width | 宽度 | 长度或百分比 |
| height | 高度 | 长度或百分比 |
6.4列表样式
| 属性名 | 含义 | 值 |
|---|---|---|
| list-style | 设置列表自身样式 | none |
6.5背景样式
| 属性名 | 含义 | 值 |
|---|---|---|
| background-color | 背景颜色 | #45F78,#ff6600,#f60, rgb(0,0,0) |
| background-image | 背景图象 | 图片URL或none |
| background-repeat | 背景重复 | repeat、repeat-x、repeat-y、no-repeat |
6.6鼠标样式
| 属性名 | 含义 | 值 |
|---|---|---|
| cursor | 设置鼠标放置样式 | default、pointer（小手常用）、wait、help、text、crosshair |
6.7伪类样式
这个顺序不能变从上到下lvha
| 属性名 | 含义 | 值 |
|---|---|---|
| a:link | 未单击访问时超链接样式 | a:link |
| a:visited | 单击访问后超链接样式 | a:visited |
| a:hover | 鼠标悬浮其上的超链接样式 | a:hover |
| a:active | 鼠标单击末释放的超链接样式 | a:active |
6.8透明度样式
| 属性名 | 含义 | 值 |
|---|---|---|
| opacity | 设置透明度 | 0-1 |
