文章目录
- (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(图片地址),属性值;