CSS基本属性
1. 什么是CSS?
2. 如何导入css到html文件中？【3种】
3. CSS的基本选择器
4. CSS的基本属性
4.1 修饰文本的样式属性
属性名称
属性的作用
属性的取值
text-transform
文本转换大小写
None:capitalize:Uppercase：
Lowercase
text-align
元素内容的水平对齐方式。
left | right | center....
word-spacing
单词之间的额外间隙
数字+单位【px】可以为负数
letter-spacing
字符与字符之间的间隙
数字+单位【px】可以为负数
text-indent
定义块内文本内容的缩进
数字+单位【px】可以为负数
vertical-align
定义行内元素在行框内的垂直对齐方式
top middle bottom
line-height
定义元素中行框的最小高度。
数字+单位【px】不能为负数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常用的文本属性</title>
<style>
#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文件
this is a html page! 这是一个html文件
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 修饰字体的样式属性
属性名称
属性用途
属性取值
font-style
文本是否为斜体
normal | italic | oblique
font-weight
文本字体的粗细
用数字表示文本字体粗细
100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
font-size
定义元素的字体大小
数字+单位【px】
font-family
定义元素文本的字体样式
字体样式名称，可以有多个，中间用“，”
color
设置字体颜色
单词/颜色码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字体设置属性</title>
<style>
#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 修饰颜色的样式属性
属性名称
用途
取值
color
文本颜色
单词/颜色码
background-color
元素的背景色
单词/颜色码
<!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 修饰背景的样式属性
属性名称
用途
取值
background-color
定义元素使用的背景颜色。
单词/颜色码
background-image
定义元素使用的背景图像
图片路径
url(图片路径);
background-repeat
定义元素的背景图像如何填充
repeat-x： 背景图像在横向上平铺
repeat-y： 背景图像在纵向上平铺
repeat： 背景图像在横向和纵向平铺
no-repeat： 背景图像不平铺
<!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-width
定义元素的边框厚度
数字。
上、右、下、左的顺序
1个值 -- 全部4边
2个值 -- 上/下 左/右
3个值-- 上 左/右 下
4个值 -- 上、右、下、左
border-style
定义元素的边框样式
none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
border-color
定义元素的边框颜色
单词/颜色码。
上、右、下、左的顺序
1个值 -- 全部4边
2个值 -- 上/下 左/右
3个值-- 上 左/右 下
4个值 -- 上、右、下、左
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 修饰文本装饰样式属性
属性名称
用途
取值
text-decoration-line
设置文本的装饰线
none： 指定文字无装饰
underline： 指定文字的装饰是下划线
overline： 指定文字的装饰是上划线
line-through： 指定文字的装饰是贯穿线
blink： 指定文字的装饰是闪烁。
text-decoration-color
设置文本的装饰线颜色
单词/颜色码
text-decoration-style
设置文本的装饰线的样式
solid | double | dotted | dashed | wavy
text-shadow
文字是否有阴影及模糊效果
数字1[水平偏移量]
数字2[垂直偏移量]
数字3[模糊度]
颜色
<!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 修饰尺寸样式属性
属性名称
用途
取值
width
定义元素的宽度
数字
height
定义元素的高度
数字
<!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修饰边距样式属性
属性名称
用途
取值
margin
margin-top
margin-bottom
margin-left
margin-right
元素设置所有四个方向（上右下左）的外边距
数字
上、右、下、左的顺序
1个值 -- 全部4边
2个值 -- 上/下 左/右
3个值-- 上 左/右 下
4个值 -- 上、右、下、左
padding
padding-top
padding-bottom
padding-left
padding-right
元素设置所有四个方向（上右下左）的内边距
数字
上、右、下、左的顺序
1个值 -- 全部4边
2个值 -- 上/下 左/右
3个值-- 上 左/右 下
4个值 -- 上、右、下、左
<!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>