1.CSS字体属性
color:颜色单词/颜色码---设置字体颜色
font-family:具体字体的名称--指定一个元素的字体
font-size:数字px--用于设置字体大小
font-style:normal /italic / oblique---指定文本的字体样式
一些不常用的字体,或许就只有个正常体,如果你用italic,就没有效果了。这时候你就要用oblique,可以理解成italic是使用文字的斜体,oblique是让没有斜体属性的文字倾斜
font-weight:normal /lighter /bold整百的数字【100-900】设置文本的粗细
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css字体属性设置</title>
<style>
#p1{
color: aquamarine;
font-family: '楷体';
font-size: 30px;
font-style: normal;
font-weight: 900;
}
</style>
</head>
<body>
<h4>css字体属性设置</h4>
<h5>color:颜色单词/颜色码--设置字体颜色</h5>
<h5>font-family:具体字体的名称---指定一个元素的字体</h5>
<h5>ont-size:数字px----用于设置字体大小</h5>
<h5>font-style:normal/italic/oblique----指定文本的字体样式</h5>
<h5>一些不常用的字体,或许就只有个正常体,如果你用 italic,就没有效果了。<br>
这时候你就要用 oblique,可以理解成 italic 是使用文字的斜体,oblique
是让没有斜体属性的文字倾斜
</h5>
<h5>font-weight:normal / lighter / bold /整百的数字【100--900】 设置文本的粗细</h5>
<p id="p1">测试字体属性设置</p>
</body>
</html>
2.链接样式
链接的样式,可以用任何css属性(如颜色,字体,背景等)
四个链接状态:
a:link--正常,为访问过的链接
a:visited--用户已访问过的链接
a:hover--当用户鼠标放在连接上时
a:active--链接被点击的那一刻
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>链接样式</title>
<style>
a:link{
color: aquamarine;
font-size: 30px;
text-decoration: none;
}
a:visited{
color: #FFA07A;
font-size: 30px;
text-decoration: none;
}
a:hover{
color: brown;
font-size: 30px;
text-decoration: none;
}
a:active{
color:cornflowerblue;
font-size: 30px;
text-decoration: none;
}
</style>
</head>
<body>
<h4>a:link - 正常,未访问过的链接</h4>
<h4>a:visited - 用户已访问过的链接</h4>
<h4>a:hover - 当用户鼠标放在链接上时</h4>
<h4>a:active - 链接被点击的那一刻</h4>
<a href="#">测试连接的基本设置</a>
</body>
</html>
3.css列表属性
list-style-image:url("")---使用图像来替换列表项的标记。
list-style-type: [disc/square/circle/decimal/lower-roman/upper-roman/lower-alpha/upper-alpha]
设置列表标记的类型。
list-style-position:inside/outside---指示如何相对于对象的内容绘制列表项标记
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表样式</title>
<style>
ul{
list-style-image: url(img/微信截图_20210916152812.png);
width: 15%;
list-style-position: outside;
}
ul li{
border: 1px solid black;
}
</style>
</head>
<body>
<ul>
<li>班级</li>
<li>姓名</li>
<li>年龄</li>
</ul>
</body>
</html>
4.css表格属性
boder属性:设置表格边框
border-collapse:collapse/separate属性设置表格的边框是否被折叠成一个单一的边框或隔开
width和height属性定义表格的宽度和高度
text-align属性设置水平对齐方式,向左,右,或中心
vertical-align属性设置垂直对齐方式,顶部,底部或中间
padding控制边框和表格内容之间的间距,应使用td和th元素
background-color设置背景颜色
background-image设置背景图片
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格样式</title>
<style>
table,tr,td{
border: 1px solid black;
vertical-align: bottom;
padding: 20px;
}
table{
border-collapse: collapse;
width: 300px;
height: 200px;
text-align: center;
vertical-align: bottom;
background-color: cornflowerblue;
}
#th{
background-color: cyan;
}
</style>
</head>
<body>
<h3>border属性--设置表格边框 solid实线</h3>
<h3>border-collapse:collapse/separ属性设置表格边框是否被折叠成一个单一的边框或者隔开</h3>
<h3>width和height属性定义表格的宽度和高度</h3>
<h3>text-align属性设置水平对齐方式,向左,右,或中心</h3>
<h3>vertical-algin属性设置垂直对齐方式,顶部,底部或中间</h3>
<h3>padding控制边框和表格内容之间的间距,应使用td和th元素</h3>
<h3>background-color设置背景颜色</h3>
<h3>>background-image设置背景图片</h3>
<table>
<tr>
<td>芜湖</td>
<td>起飞</td>
<td>~~~</td>
</tr>
<tr>
<td>芜湖</td>
<td>起飞</td>
<td>~~~</td>
</tr>
<tr>
<td>芜湖</td>
<td>起飞</td>
<td id="th">~~~</td>
</tr>
</table>
</body>
</html>
5.css边框属性
border:border-width粗细 border-style样式 ,border-color颜色。设置四边的边框样式
单独设置某一边的边框样式:border-top/border-right/border-bottom/border-left
例如:border-top:粗细 样式 颜色
设置4边边框不同的样式:
border-top-color,border-right-color,border-bottom-color,border-left-color
border-top-style,border-right-style,border-bottom-style,border-left-style
border-top-width,border-right-width,border-bottom-width,border-left-width
border-style: solid double dashed[块状虚线] dotted[点状虚线]
例如:
6.css尺寸(Dimension)
CSS尺寸属性允许你控制元素的高度和宽度。同样,他允许你增加行间距
width属性设置元素的宽度
height属性设置元素的高度
line-height属性设置行高
7.css.Display(显示)与Visibility(可见性)
display属性设置一个元素应如何显示
none--设置元素隐藏,清楚当前元素所占用物理空间
block--设置元素显示,当前元素变成块级元素
visibility属性指定一个元素应可见还是隐藏
hidden--设置元素隐藏,不会清楚当前元素所占用的物理空间
show--设置元素显示
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>元素的隐藏/显示设置</title>
<style>
#img1 {
display:block;
}
#img2{
visibility: hidden;
}
</style>
</head>
<body>
<h4>display属性设置一个元素应如何显示</h4>
<h5>none--设置隐藏,清除当前元素占用的物理空间</h5>
<h5>block--设置元素显示,当前元素变成块级元素</h5>
<span>图片之前</span><img id="img1" src="img/微信截图_20210916152812.png"><span>图片之后</span>
<h4>visibilty属性指定一个元素应可见还是隐藏</h4>
<h5>hidden--设置元素隐藏,不会清除当前元素所占用的物理空间</h5>
<h5>show--设置元素显示</h5>
<span>图片之前</span><img id="img2" src="img/微信截图_20210916152812.png" > <span>图片之后</span>
</body>
</html>
8.css盒子模型
在html中,所有HTML元素都可以被看作为一个盒子
被看作为壳子的HTML元素由外边距,内边距,内容
计算html元素的宽度==左右外边距+左右边框+左右内边距+内容宽度
计算html元素的高度==上下外边距+上下边框+上下内边距+内容高度
例如:
div {
background-color: lightgrey;
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
元素的宽度内容为300px,其中margin:25px设置外边距,border:25px solid green设置边框,
padding:25px设置内边框
div的总宽度300px(宽)+50px(左+右填充)+50px(左+右边框)+50px(左+右边距)=450px
9.CSS maring(外边距)
maring 可以单独改变元素的上,下,左,右边距,也可以一次性改变所有的属性
maring 可以使用负值,重叠内容
一次改变所有的外边距
maring:1个数据值【4边都一样】
2和数据值【第一个控制上下,第二个控制左右】
3个数据值【第一个控制上,第二个控制左右,第三个控制下】
4个数据值【上,右,下,左】
maring-top[上]margin-left[左] margin-right[右] margin-bottom[下]
例如:
10 CSS padding(填充)
padding 可以单独改变元素的上,下,左,右外边距,也可以一次性改变所有属性。
一次改变所有的外边距
padding:1个数据值【4边都一样】
2个数据值【第一个值控制上下,第二个值控制左右】
3个数据值【第一个值控制上,第二个值控制左右,第三个值控制下】
4个数据值【上,右,下,左】
padding-top[上] padding-left[左] padding-right[右] padding-bottom[下]
例如:
<!DOCTYPE html>
<html>
<head>
<title>
内边距(填充)
</title>
<meta charset="utf-8">
<style>
div{
width: 300px;
height: 300px;
border: 5px solid red;
background: red;
padding-top: 50px;
}
div img{
border: 5px solid greenyellow;
}
</style>
</head>
<body>
<div>
<img src="img/avatar5.png" >
</div>
</body>
</html>
注意:1.父元素的padding会增大当前父元素的大小
2.padding不要出现负数
3.父元素的padding不等于子元素的margin
4.如果需要控制子元素在父元素中的位置使用子元素的margin,可以改变子元素的位置且保持父元素的大小不变。