文章目录
- （1）软件使用
- 1.用visual studio创建css文件
- （2）CSS中的注释 /* */
- 1.例子
- （3）CSS引入方式
- 1.外部样式表 link (用于整个html)
- 2.内部样式表 style
- 3.行内样式表
- （4）CSS选择器
- 1.用元素的id属性作选择器
- 2.用元素的class属性作选择器
- 3.群组选择器
- （5）css实现字体样式
- 1.字体类型 font-family
- 2.字体大小 font-size（一般用数值）
- 3.字体粗细（一般用关键字）
- 4.字体风格 font-style
- 5.字体颜色
- （6）css实现文本样式
- 1. 首行缩进 text-indent
- 2.水平对齐 text-align
- 3.text-decoration
- 4.大小写 text-transform
- 5.行高（行距） line-height
- 6.字间距 letter-spacing
- 7.词间距 word-spacing
- （7）css实现边框样式
- 1. 边框宽度(是粗细)border-width
- 2.边框外观 border-style
- 3.边框颜色 border-color
- 4.上面三个属性的例子：
- 5.局部样式，上border-top下border-bottom左border-left右border-right边框
- （8）css实现列表样式
- 1.有序列表 list-style-type
- 2.无序列表 list-style-type
- 3.列表项图片（前面的图标是图片） list-style-image （开发中最常用的是这种了！）
- （9）css实现表格样式
- 1.标题位置 caption-side
- 2.表格边框合并 border-collapse
- 3.表格边框间距 border-spacing
- （10）css实现图片样式
- 1.图片大小 宽width和高height（像素值）
- 2.图片边框 border（前面提到过了）
- 3.图片对齐 （text-align放在父元素）
- 4.垂直对齐 （vertical-align放在img）（是其它元素相对于图片的垂直对齐方式）
- 5.文字环绕 float
- （11）css实现背景样式
- 1.背景颜色（直接上色） background-color
- 2.背景图片（直接上图） background-image
- 3.重复背景图片 background-repeat
- 4.背景图片位置 background-position
- 5.背景图片固定 background-attachment
- （12）css实现超链接样式
- （13）css实现鼠标样式 :hover或者cursor
- 1.任何一个元素在鼠标经过时的伪类 :hover{...}
- 2.浏览器鼠标样式 cursor:
（1）软件使用
1.用visual studio创建css文件
即可添加一个css文件
（2）CSS中的注释 /* */
1.例子
（3）CSS引入方式
1.外部样式表 link (用于整个html)
rel="stylesheet"是固定的，type="text/css"也是固定的。
href="文件路径"里面填路径
2.内部样式表 style
比如下面例子就是将这个html的div里的字都变成红色，除了div之外的其他东西不变
3.行内样式表
比如下面例子就是在行内元素的标签里写css语句
（4）CSS选择器
1.用元素的id属性作选择器
①作用
id属性是唯一的，每个页面种的id只能出现一次
②例子
head里的是css语句，id前面加#，class前面加.
2.用元素的class属性作选择器
①作用
class是类，与c++种类相似，所以class不是唯一的，不同元素可以属于同一个class，同一class具有相同css样式。
②例子
head里的是css语句，id前面加#，class前面加.
3.群组选择器
id前面加#，class前面加,其它标签就直接加，各种属性或之间用逗号连接表示同时选择。
（5）css实现字体样式
| 属性 | 说明 |
|---|---|
| font-family | 字体类型 |
| font-size | 字体大小 |
| font-weight | 字体粗细 |
| font-style | 字体风格 |
| color | 字体颜色 |
1.字体类型 font-family
①默认宋体
②例子
③可以有多个字体类型的原因
2.字体大小 font-size（一般用数值）
3.字体粗细（一般用关键字）
lighter是100，normal是400，bold是700，bolder是900
4.字体风格 font-style
| 属性 | 说明 |
|---|---|
| normal | 正常（默认） |
| italic | 斜体 |
| oblique | 斜体 |
5.字体颜色
有两种格式，一种是关键字，一种是十六进制RGB值
(#FFFFFF是白色，#000000是黑色)
（6）css实现文本样式
| 属性 | 说明 |
|---|---|
| text-indent | 首行缩进 |
| text-align | 水平对齐 |
| text-decoration | 文本修饰 （上中下划线） |
| text-transform | 大小写转换 |
| line-height | 行高 |
| letter-spacing、word-spacing | 字母间距、词间距 |
1. 首行缩进 text-indent
ps：text-indent是font-size的两倍，段首才可以缩进两个字空间
2.水平对齐 text-align
3.text-decoration
| 属性 | 说明 |
|---|---|
| none | 没有划线效果（默认）（用于去除超链接中自带的的下划线） |
| underline | 下划线 |
| line-through | 中划线（中间的删除线） |
| overline | 顶划线(一般用不到) |
在html中学过s标签和u标签
（s和u这两个标签一般不用，因为常用的是css的）
ps：超链接的时候会自动带有下划线，如果想去掉超链接的下划线怎么办呢？用text-decoration:none;
4.大小写 text-transform
| 属性 | 说明 |
|---|---|
| none | 没有转换效果（默认） |
| uppercase | 转换为大写 |
| lowercase | 转换为小写 |
| capitalize | 只将每个英文 单词 首字母转换为大写 |
5.行高（行距） line-height
默认22px
6.字间距 letter-spacing
字包括：单词的每个字母和中文的每个字。
默认2px
7.词间距 word-spacing
词包括：每个英文单词之间的距离，只有英文。
默认3px
（7）css实现边框样式
| 属性（必须同时设置 宽度、外观、颜色 三个属性） | 说明 |
|---|---|
| border-width | 边框宽度（是一个像素px值） |
| border-style | 边框外观 |
| border-color | 边框颜色 |
几乎所有元素都可以定义边框，div可以，img可以，table可以，span也可以。
1. 边框宽度(是粗细)border-width
2.边框外观 border-style
| 属性 | 说明 |
|---|---|
| none | 无样式 |
| dashed | 虚线 |
| solid | 实线 |
3.边框颜色 border-color
取值为关键字或16进制RGB（和字体差不多）
4.上面三个属性的例子：
① ps: 下面这两个是定义div的框框大小（不是border的粗细、格式、颜色）
②边框属性的完整写法和简写（就算是简写也是三个属性都要有）
比如下面的div
（其实在div里的那两个东西也可以写到div1和div2里的）
③img、span、table也可以
css里的img里面border一般用简写
5.局部样式，上border-top下border-bottom左border-left右border-right边框
当只想给其中一条或几条边加边框时，就可以用这个写法
简写：
ps：想去掉其中一条或几条边
- 这样可以：
(border-bottom:0px或者border-bottom：0或者border-bottom：none是一样的)
- 但下面这样不行（因为局部需要写在整体后面才能生效）：
（8）css实现列表样式
1.有序列表 list-style-type
其实和html的没什么区别：https://blog.csdn.net/weixin_44575911/article/details/107419567
| 属性 | 说明 |
|---|---|
| none | 没有符号（最常用） |
| decimal | 阿拉伯数字（较常用） |
| lower-roman | 小写罗马字母 |
| upper-roman | 大写罗马字母 |
| lower-alpha | 小写英文字母 |
| upper-alpha | 大写英文字母 |
2.无序列表 list-style-type
其实和html的没什么区别：https://blog.csdn.net/weixin_44575911/article/details/107419567
| 属性 | 说明 |
|---|---|
| none | 没有符号（常用） |
| disc | 实心圆 |
| circle | 空心圆 |
| square | 实心正方形 |
3.列表项图片（前面的图标是图片） list-style-image （开发中最常用的是这种了！）
语法：list-style-image:url(图片路径);
（图片要缩放得很小很小很小才可以）
（9）css实现表格样式
ps:th是表头，tr是行，th是单元格
1.标题位置 caption-side
| 属性 | 说明 |
|---|---|
| top | 标题在顶部(默认) |
| bottom | 标题底部 |
2.表格边框合并 border-collapse
| 属性 | 说明 |
|---|---|
| separate | 边框分开，有空隙 (默认) |
| collapse | 边框合并，无空隙 |
3.表格边框间距 border-spacing
当取40px：
当取10px：
（10）css实现图片样式
1.图片大小 宽width和高height（像素值）
2.图片边框 border（前面提到过了）
3.图片对齐 （text-align放在父元素）
ps:text-align可用于文本水平对齐和图片水平对齐
| 属性 | 说明 |
|---|---|
| left | 左对齐 (默认) |
| center | 居中 |
| right | 右对齐 |
但是并不是在img中定义水平对齐，而是在它的父元素
4.垂直对齐 （vertical-align放在img）（是其它元素相对于图片的垂直对齐方式）
ps：比如：旁别的字在图片顶部，字在图片中部，字在图片底部
| 属性 | 说明 |
|---|---|
| top | 顶部对齐(默认) |
| middle | 中部对齐 |
| baseline | 基线对齐 |
| bottom | 底部对齐 |
比如下面这个是图片中部和字对齐：
比如这个字和图片底部对齐：
基线，感觉和底部没什么太大区别，基线靠会上一点点：
5.文字环绕 float
left居左，right居右
float：right之后图片有居最右的效果
（11）css实现背景样式
1.背景颜色（直接上色） background-color
2.背景图片（直接上图） background-image
必须要先设置宽度width高度height，再加背景图片background-image才能显示
3.重复背景图片 background-repeat
| 属性 | 说明 |
|---|---|
| repeat | 在水平和垂直方向上都平铺（默认） |
| repeat-x | 只在水平方向（x轴）上平铺 |
| repeat-y | 只在垂直方向（y轴）上平铺 |
| no-repeat | 不平铺 |
正确例子：
错误例子：因为父元素div把第一个div1给覆盖掉了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>这是网页标题</title>
<style type="text/css">
div
{
width:180px;
height:180px;
border:1px solid silver;
background-image:url(../image/狗爪50.png);
}
#div1
{
background-repeat:repeat-x;
}
#div2
{
background-repeat:repeat-y;
}
#div3
{
background-repeat:repeat;
}
#div4
{
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div id="div1"></div><hr />
<div id="div2"></div><hr />
<div id="div3"></div><hr />
<div id="div4"></div><hr />
</body>
</html>
4.背景图片位置 background-position
①像素值定位
语法：
background-position：水平距离 垂直距离;
只有在no-repeat的时候才能弄position
②关键字定位
| 属性 | 说明 |
|---|---|
| top left | 左上（默认） |
| top center | 靠上居中 |
| top right | 右上 |
| left center | 靠左居中 |
| center center | 正中 |
| right center | 靠右居中 |
| bottom left | 左下 |
| bottom center | 靠下居中 |
| bottom right | 右下 |
5.背景图片固定 background-attachment
| 属性 | 说明 |
|---|---|
| scroll | 随元素一起滚动（默认） |
| fixed | 固定不动 |
滑动右边的滚动条，背景图片也在那个位置不动，不会随着滚动条往下而到了上面。
（有一些广告就是这样实现的）
（12）css实现超链接样式
默认：点击前字蓝有下划线，单击时（一瞬间）字红有下划线，单击后字紫有下划线
| 伪类 | 说明 |
|---|---|
| a:link | 类里是a元素未访问时的样式 |
| a:visited | 类里是a元素访问后的样式 |
| a:hover | 类里是鼠标经过a元素时的样式 |
| a:active | 类里是鼠标单击激活时的样式 |
如果要定义四个伪类，则必须要按"link、visited、hover、active"的顺序进行定义，否则可能无法正常显示，所以这四个的定义顺序不能改变（一般只会用到a:link和a:hover，而其中a:link可直接用a没必要写a:link）
记忆：l v h a
（13）css实现鼠标样式 :hover或者cursor
1.任何一个元素在鼠标经过时的伪类 :hover{…}
比如div:hover{…}、img:hover{…}
div:
img:
2.浏览器鼠标样式 cursor:
① 默认属性值
语法：
cursor：属性;
(截图截不了鼠标样式)
②自定义鼠标样式（外部图片）
语法：
cursor:url(图片地址),属性值;
