CSS基础属性
1.什么是CSS?
2.如何导入CSS到html文件中?【3种】
3.CSS的基本选择器
4.CSS的基本属性
4.1 修饰文本样式属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="5">
<tr>
<td>属性名称</td>
<td>属性的作用</td>
<td>属性的取值</td>
</tr>
<tr>
<td>text-transform</td>
<td>文本转换大小写</td>
<td>None:capitalize:Uppercase:Lowercase
</td>
</tr>
<tr>
<td>text-align</td>
<td>元素内容的水平对齐方式</td>
<td>left|right|center</td>
</tr>
<tr>
<td>word-spacing</td>
<td>单词直接的额外间隙</td>
<td>数字+单位【px】可以为负数</td>
</tr>
<tr>
<td>letter-spacing</td>
<td>字符与字符之间的间隙</td>
<td>数字+单位【px】可以为负数</td>
</tr>
<tr>
<td>text-indent</td>
<td>定义块内文本内容的缩进</td>
<td>数字+单位【px】可以为负数</td>
</tr>
<tr>
<td>vertical-align</td>
<td>定义行内元素在行框内的垂直对齐方式</td>
<td>top middle bottom </td>
</tr>
<tr>
<td>line-height</td>
<td>定义元素中行框的最小高度。</td>
<td>数字+单位【px】不能为负数</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常用的文本属性</title>
<style type="text/css">
#p1{
text-transform: none;
text-align: left;
text-indent:50px;
}
#p2{
text-transform: capitalize;
text-align: center;
}
#p3{
text-transform: uppercase;
text-align: right;
}
#p4{
text-transform: lowercase;
}
#p5{
text-transform:full-width;
}
#p6{
word-spacing: 10px;
letter-spacing: 15px;
}
table{
height: 200px;
}
table tr td{
vertical-align: bottom;
}
#p7{
line-height: 20px;
}
</style>
</head>
<body>
<h1>常用的文本属性</h1>
<p id="p1">none:无转换</p>
<p id="p2">capitalize:将每个单词的第一个字母转换城大写【常用】</p>
<p id="p3">uppercase:将每个单词转换成大写</p>
<p id="p4">lowercase:将每个单词转换成小写</p>
<p id="p5">full-width:将所有字符转换成fullwidth形式。
如果字符没有相应的fullwidth形式,将保留原样。
这个值通常用于排版拉丁字符和数字等表意符号(CSS3)
</p>
<p id="p6">this is a html page 这是一个html文件</p>
<p id="p7">this is a html page 这是一个html文件
this is a html page 这是一个html文件
this is a html page 这是一个html文件
this is a html page 这是一个html文件
</p>
<br>
<table border="1px">
<tr>
<td>vertical-align</td>
<td>定义行内元素在行框内的垂直对齐方式</td>
<td>top middle bottom</td>
</tr>
</table>
</body>
</html>
4.2修饰字体的样式属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="5">
<tr>
<td>属性名称</td>
<td>属性用途</td>
<td>属性取值</td>
</tr>
<tr>
<td>font-style</td>
<td>文本是否为斜体</td>
<td>normal | italic | oblique
</td>
</tr>
<tr>
<td>font-weight</td>
<td>文本字体的粗细</td>
<td>用数字表示文本字体粗细100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900</td>
</tr>
<tr>
<td>font-size</td>
<td>定义元素的字体大小</td>
<td>数字+单位【px】</td>
</tr>
<tr>
<td>letter-spacing</td>
<td>字符与字符之间的间隙</td>
<td>数字+单位【px】可以为负数</td>
</tr>
<tr>
<td>font-family</td>
<td>定义元素文本的字体样式</td>
<td>字体样式名称,可以有多个,中间用“,</td>
</tr>
<tr>
<td>color</td>
<td>设置字体颜色</td>
<td>单词/颜色码</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#p1{
font-style: italic;
}
#p2{
font-weight: 900;
}
#p3{
font-size:50px;
font-weight:900;
}
#p4{
font-style:italic;
font-weight:900;
font-size:50px;
font-family:helvetica, verdana, sans-serif;
color: red;
}
</style>
</head>
<body>
<h1>字体设置属性</h1>
<p id="p1">font-style 文本是否为斜体 normal | italic | oblique</p>
<p id="p2">font-weight 文本字体的粗细 用数字表示文本字体粗细</p>
<p id="p3">font-size 定义元素的字体大小 数字+单位【px】</p>
<p id="p4">font-family 定义元素文本的字体样式 字体样式名称,可以有多个,中间用“,”</p>
<p id="p5">color 设置字体颜色 单词/颜色码</p>
</body>
</html>
4.3 修饰颜色的样式属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>颜色设置</title>
<style>
p{
font-size: 30px;
color: red;
background-color: blue;
}
</style>
</head>
<body>
<p>color 文本颜色 单词/颜色码<br>
background-color 元素的背景色 单词/颜色码
</p>
</body>
</html>
4.4 修饰背景的样式属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景设置</title>
<style>
body{
background-image:url(imgs/avatar04.png);
background-repeat:no-repeat;
}
p{
font-size: 50px;
background-image: url(imgs/bg2.jpg);
}
</style>
</head>
<body>
<p>background-color 定义元素使用的背景颜色。 单词/颜色码</p>
<p>background-image 定义元素使用的背景图像 图片路径url(图片路径);</p>
<p>background-repeat 定义元素的背景图像如何填充 repeat-x: 背景图像在横向上平铺
repeat-y: 背景图像在纵向上平铺 repeat: 背景图像在横向和纵向平铺 no-repeat: 背景图像不平铺
</p>
</body>
</html>
4.5 修饰边框的样式属性
border:<line-width> || <line-style> || <color>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>边框设置</title>
<style>
#div1{
width: 100px;
height: 100px;
border: 5px double red;
}
#div2{
width: 200px;
height: 200px;
border-width: 10px;
border-style: solid;
border-color: blue;
}
#div3{
width: 300px;
height: 300px;
border-width: 10px 20px 30px 40px;
border-style: dotted;
border-color: red blue yellow greenyellow;
}
#div4{
width: 400px;
height: 400px;
border-width: 10px 20px;
border-style: dashed;
border-color: red blue;
}
img{
border: 10px outset black;
}
</style>
</head>
<body>
<div id="div1"></div><br>
<div id="div2"></div><br>
<div id="div3"></div><br>
<div id="div4"></div><br>
<img src="imgs/avatar04.png"/>
</body>
</html>
4.6 修饰文本装饰样式属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本装饰属性</title>
<style>
#p1{
font-size: 40px;
color: red;
text-decoration-line:underline;
text-decoration-color:blue;
text-decoration-style: double;
text-shadow: 5px 5px 20px #000000;
}
a{
font-size: 40px;
text-decoration-line:none;
color: black;
}
</style>
</head>
<body>
<p id="p1">文本装饰属性---text-decoration-line---文本的装饰线</p>
<a href="#">去掉超链接上的下划线</a><br>
<p id="p1">文本装饰属性---text-decoration-color---文本的装饰线的颜色</p>
<p id="p1">文本装饰属性---text-decoration-style---文本的装饰线的形状</p>
<p id="p1">文本装饰属性---text-shadow---文字是否有阴影及模糊效果</p>
</body>
</html>
4.7 修饰尺寸样式属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>尺寸设置</title>
<style>
div{
width: 400px;
height: 400px;
border: 10px solid black;
background-color: red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
4.8修饰边距样式属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>尺寸设置</title>
<style>
div{
width: 400px;
height: 400px;
border: 10px solid black;
background-color: red;
margin-top:-8px;
m
}
body{
padding-left: 100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
4.9修饰列表样式属性
list-style-image–设置或检索作为对象的列表项标记的图像—图片路径
list-style-type-----设置或检索作为对象的列表项预设标记—disc | circle | square | decimal…
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表属性</title>
<style>
ul li{
font-size: 20px;
list-style-type: square;
}
ol li{
font-size: 30px;
list-style-image: url(imgs/list.png);
}
</style>
</head>
<body>
<ul>
<li>name:张三</li>
<li>age:23</li>
<li>sex:男</li>
<li>address:西安</li>
</ul>
<br>
<ol>
<li>name:张三</li>
<li>age:23</li>
<li>sex:男</li>
<li>address:西安</li>
</ol>
</body>
</html>