一、字体样式和文本样式
1.span标签
span标签的作用:能让某几个文字或者是词语
凸显出来
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>span</title><style>.show{color: red;}</style>
</head>
<body><p>享受华为<span class="show">人工智能</span>带来的方便</p>
</body>
</html>
2字体样式
属性名 | 含义 | 举例 |
---|---|---|
font-family | 设置字体类型 | font-family:“华文彩云”; |
font-size | 设置字体大小 | font-size:12px; |
font-style | 设置字体风格 | font-style:italic; |
font-weight | 设置字体粗细 | font-weight:bold(700); |
font(注意顺序) | 在一个声明中设置所有字体属性 | font:italic bold 30px “华文彩云”; |
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>03字体样式</title><style>p{font-family: "华文彩云"; /*字体类型*/font-size: 30px; /*字体大小*/font-style: italic; /*字体风格 italic:斜体*/font-weight:700; /*设置字体的粗细 bold (700):加粗*/}span{font: italic bold 30px "华文彩云"; /*注意顺序:风格 粗细 大小 类型*/}</style>
</head>
<body><p>基建大国</p><span>厉害了,我的锅</span>
</body>
</html>
2.1字体类型
可以在一个页面中分别设置中文和英文字体
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>04字体类型补充</title><style>p{font-family:'Times New Roman', "Times", "华文彩云";}</style>
</head>
<body><p>of people or behaviour 人或举止大胆自信的;敢于表白情感的;敢于冒险的
brave and confident; not afraid to say what you feel or to take risks
</p>
</body>
</html>
2.2字体大小
font-size单位:
- px(像素)
- em、rem、cm、mm、pt、pc(1em大概是16px)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>05字体大小</title><style>p{font-size: 32px;}span{font-size: 2em; /*1em大概是16px*/}</style>
</head>
<body><p>我爱中国</p><span>我爱世界</span>
</body>
</html>
2.3font属性
font的属性顺序:字体风格-字体粗细-字体大小-字体类型
3.文本样式
3.1文本属性
属性 | 含义 | 举例 |
---|---|---|
color | 颜色 | color:#00c; |
text-align | 水平对齐方式 | text-align:right; |
text-indent | 首行文本缩进 | text-indent:20px; |
line-height | 文本行的高度 | line-height:25px; |
text-decoration | 文本装饰 | text-decoration:underline; |
3.2文本颜色
RGB (Red Green Blue):
十六进制方法表示颜色:前两位表示红色分量,中间两位表示绿色的分量,最后两位表示蓝色的分量
rgb(r,g,b),RGB的取值只能是正整数,取值范围为0~255 ,如:rgb(255,0,0)
因为是十六进制可以取值:0 1 2 3 4 5 6 7 8 9 A B C D E F。,也可以取值:#FF0000
RGBA:
在rgb的基础上增加了一个控制alpha透明度的参数,其中可以取值0~1,如:color: rgba(255, 0, 0, 0.2);
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>06文本颜色</title><style>p{/* color: red; *//* color: #fa0000; *//* color: rgb(0,0,0); */color: rgba(255, 0, 0, 0.5);}</style>
</head>
<body><p>世界你好!</p>
</body>
</html>
3.3 水平对齐方式(text-align)
适用于块级元素 原因:块级元素独占一行
块级元素:h1-h6 p li dl/dt/dd div
属性值 | 说明 |
---|---|
left | 文本排列到左边,默认值 |
right | 文本排列到右边 |
center | 文本排列在中间 |
justify | 实现文本两端对齐效果 |
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>07text-align</title><style>p{text-align: center;}</style>
</head>
<body><h1>你好中国</h1><p><span>厉害了,我的国!</span><span>遥遥领先</span></p><span>你好世界</span>
</body>
</html>
3.4首航文本缩进(text-indent)
单位:
- em(推荐,1em就等于一个汉字)
- px
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{/*text-indent: 28px; 缩进可以使用像素为单位*/text-indent: 2em;}</style>
</head>
<body><p>当地时间9月19日,中国第22批赴黎维和部队多功能工兵分队营区周边多枚航弹爆炸,造成部分设施受损。</p>
</body>
</html>
3.5行高(line-height)
单位:px
设置行高后字体会自动放在整行的中间
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>05行高</title><style>#test{line-height: 100px;}</style>
</head>
<body><p id="test">初步计票结果显示</p><p >斯里兰卡国家人民力量党领导人迪萨纳亚克赢得总统选举】斯里兰卡选举委员会22日公布的初步计票</p><p >国家人民力量党领导人迪萨纳亚克在21日举行的总统选举中胜出。(新华社)</p></body>
</html>
3.6文本装饰(text-decoration)
值 | 说明 |
---|---|
none | 默认值,无文本装饰(定义的标准) |
underline | 文本的下划线 |
overline | 文本的上划线 |
line-through | 文本的删除线 |
4.文本阴影
4.1语法
x轴位移:用来指定阴影水平位移(x轴数值为正)向右
y轴位移:用来指定阴影垂直位移(y轴数值为正)向下
模糊半径:阴影向外模糊的范围
语法中不需要逗号,只需要以
;
结尾
text-shadow:阴影颜色 x轴位移 y轴位移 模糊半径;
二、超链接伪类
伪类:伪类(Pseudo-classes)是CSS(层叠样式表)中的一种特殊选择器,用于选择处于特定状态或满足特定条件的元素,并为其定义不同的样式。伪类选择器的基本语法是在选择器后面加上冒号和伪类名称,然后是花括号中包含的CSS属性和值。
1.伪类样式
语法:
标签名:伪类名{声明;}
如:
a:hover{color:red;text-decoration:underline;
}
2.常用伪类
伪类名称 | 含义 |
---|---|
a:link | 未单击访问时超链接的样式 |
a:hover | 鼠标悬浮其上的超链接样式 |
a:active | 鼠标单机未释放的超链接样式 |
a:visited | 单击访问后超链接的样式 |
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>15超链接伪类</title><style>a {font-size: 25px;}/* 未单击访问时超链接的样式 (可以不用) */a:link {color: black; /*字体颜色为黑色*/text-decoration: none; /*无下划线*/}/* 鼠标悬浮其上的超链接样式 */a:hover {color: green; /*字体颜色为绿色*/}/* 鼠标单击未释放的超链接样式 */a:active {color: blue; /*字体颜色为蓝色*/}/* 单击访问后超链接的样式 */a:visited {color: red;}</style>
</head>
<body><a href="#">这是百度链接地址</a>
</body>
</html>
三、列表样式
list-style-type: 列表中项目符号的类型 如实心圆点、空心圆点、实心方块
list-style-image:这个属性允许开发者使用一张图片来替换默认的列表项符号
list-style-position:用于设置列表项标记(通常是项目符号或编号)相对于列表项内容的位置
list-style
1.list-style-type
设置列表中项目符号的类型 如实心圆点、空心圆点、实心方块
值 | 说明 |
---|---|
none | 无标记符号 |
disc | 实心圆点(默认值) |
circle | 空心圆点 |
square | 实心方块 |
decimal | 十进制阿拉伯数字 |
2.list-style-image
这个属性允许开发者使用一张图片来替换默认的列表项符号
3.list-style-position
list-style-position:用于设置列表项标记(通常是项目符号或编号)相对于列表项内容的位置
4.list-style
<style>p{list-syle:none; }
</style>
四、背景
1.background-color
背景颜色
<style>#nav {width: 230px; /*宽度*/background-color: #D7D7D7; /*背景颜色*/}
</style>
2.background-image和background-repeat
背景图片
background-repeat
是CSS(层叠样式表)中的一个属性,用于设置背景图像是否以及如何重复。它定义了背景图像在元素背景区域中的平铺模式
属性值 | 说明 |
---|---|
repeat | 沿水平和垂直两个方向平铺 |
no-repeat | 不平铺,图像只显示一次 |
repeat-x | 沿水平方向平铺 |
repeat-y | 沿垂直方向平铺 |
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>18背景图片</title><style>div{width: 800px;height: 600px;border: 1px solid red; /*边框:粗细1px、实线、红色*/background-image: url(image/1.jpg); /*背景图片,默认会铺满整个*/background-repeat: repeat-y; /*背景图片重复方式*/}</style>
</head>
<body><div></div>
</body>
</html>
3.background-position
调整背景图片位置
值 | 含义 |
---|---|
X、Y方向关键字 | 水平方向的关键词:left、center、right 垂直方向的关键词:top、center、bottom |
X%、Y% | 使用百分比表示背景图片的位置 |
Xpos Ypos | 单位:px Xpos表示水平位置,Ypos表示垂直位置 |
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>18背景图片</title><style>div{width: 800px;height: 600px;border: 1px solid red; /*边框:粗细1px、实线、红色*/background-image: url(image/1.jpg); /*背景图片,默认会铺满整个*/background-repeat: no-repeat; /*背景图片重复方式*//* 第一个控制水平方向,第二个控制垂直方向*//* background-position: left bottom; *//* background-position: 0% 50%; */background-position: 30px 20px;}</style>
</head>
<body><div></div>
</body>
</html>
4.background-size
/*背景图片的大小,第一个表示宽,第二个表示高度*/
background-size:20px 120px;
属性值 | 说明 |
---|---|
auto | 默认值 |
percentage | 当使用百分比值的时候,不是相对于背景的尺寸大小来计算的,而是相对于元素宽度来计算的 |
cover | 图片放大填充了整个元素 |
contain | 让背景图片保持本身的宽高比例,将背景图片缩放到宽度或高度正好适应所定义背景的区域 |
5.合在一起写
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 200px;border: 1px solid red;/* background-image: url(image/1.jpg);background-size: 20px 20px;background-repeat: no-repeat;background-position: 50%; */background: url(image/1.jpg) no-repeat center center; /*可以写一起,没有顺序和全部必写的要求*/background-size: 20px 20px;}</style>
</head>
<body><div></div>
</body>
</html>
五、CSS渐变
- 线性渐变
- 颜色沿着一条直线过度:从左到右、从右到左,从上到下等等
- 径向渐变
- 圆形或椭圆形渐变,颜色不再沿着一条直线变化,而是从一个起点朝着所有的方向混合
1.CSS渐变兼容
- IE浏览器的内核
Trident
,加前缀:-ms- - Chrom浏览器内核是
Webkit
,前缀加:-Webkit- - Safari浏览器内核是
Webkit
,加前缀:-Webkit- - Opear浏览器内核是
Blink
,加前缀:-o- - Firefox浏览器内核是
Mozilla
,加前缀:-moz-
2.渐变性
linear:直线
gradient:坡度
语法:
linear-gradient(渐变方向,第一种颜色,第二种颜色...后面可以包含多种颜色)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>20渐变</title><style>div{width: 100px;height: 100px;/* to top background: linear-gradient(to top,orange,blue);*//* background: -webkit-linear-gradient(to top,orange,blue); *//* to bottom background: linear-gradient(to bottom,orange,blue);*//* to left background: linear-gradient(to left,orange,blue);*//* to right background: linear-gradient(to right,orange,blue);*//* to top left background: linear-gradient(to top left,orange,blue);*//* to top right */background: linear-gradient(to top right,orange,blue,green,red);/* to bottom left *//* to bottom right */}</style>
</head>
<body><div></div>
</body>
</html>