关于字体的 css 属性设置
color–设置字体颜色[颜色单词/颜色码【#0000ff】]
font-family—设置字体名称[黑体…]
font-size --设置字体大小【数字 px】
font-style–设置字体倾斜【normal | italic | oblique 】
font-weight–设置字体粗细【整百的数字【100~900】】
text-decoration–设置字体的修饰线 【none || underline 下划线 || overline 上划线 || line-through 贯穿线 】
text-shadow–文本的文字是否有阴影及模糊效果
text-transform–文本的大小写转换【none | capitalize | uppercase | lowercase 】 line-height–行高【数字 px】
letter-spacing–字符之间的间隔 normal | length 【数字 px】
word-spacing–单词之间插入的空隔 normal | length 【数字 px】
关于文本属性设置
text-indent :文本的缩进 length 【数字 px】
vertical-align：垂直对齐方式 top middle bottom text-align :水平对齐方式 left | right | center
关于背景的设置
- 整个网页的背景颜色【在 body 元素中设置 bgcolor】
- 整个网页的背景图片【在 body 元素中设置 background】 Html 元素的背景设置
- Html 元素的背景颜色【background-color】
- Html 元素的背景图片【background-image:url(“imgs/banner1.png”);】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景设置</title>
<style>
div{
width: 300px;
height: 300px;
background-color: pink;
}
p{
font-size: 40px;
color: yellow;
background-color: aqua;
}
table{
background-image: url("imgs/banner1.PNG");
}
tr{
font-size: 20px;
color: #00FFFF;
}
</style>
</head>
<body background="imgs/美眉.jpg " >
<h1>关于背景的设置</h1>
<h2>1. 整个网页的背景颜色【在 body 元素中设置 bgcolor】</h2>
<h2>2. 整个网页的背景图片【在 body 元素中设置 background】 Html 元素的背景设置</h2>
<h1>1. Html 元素的背景颜色【background-color】</h1>
<div></div>
<p>关于背景的设置</p>
<table border="1px" width="600px" height="200px" >
<tr>
<td>Html 元素的背景颜色</td>
<td>background-color</td>
</tr>
<tr>
<td>Html 元素的背景图片</td>
<td>background-image:url("imgs/banner1.png");</td>
</tr>
</table>
</body>
</html>
关于 html 元素的尺寸设置
width : 设置元素的宽度 auto | length
height : 设置元素的高度 auto | length
关于边框设置
border-color : 边框颜色
border-style ：边框样式
border-width：边框粗细
上面这三个属性可以分为 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 属性设置 4 边的边框 border:粗细 样式 颜色。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>边框设置</title>
<style>
div{
width: 200px;
height: 200px;
border: 10px solid red;
}
#img1{
border-top-width: 5px;
border-top-style: double;
border-top-color:blueviolet;
border-right-width: 10px;
border-right-style: solid;
border-right-color: #8A2BE2;
border-bottom-width: 15px;
border-bottom-style: dashed;
border-bottom-color: aqua;
border-left-width:20px ;
border-left-style:dotted ;
border-left-color: yellow;
}
#img2{
border-top:5px double black;
border-right:10px solid blue;
border-bottom:15px dashed red ;
border-left:20px dotted green;
}
</style>
</head>
<body>
<h1>关于 html 元素的尺寸设置</h1>
<div></div>
<br />
<img id="img1" src="imgs/banner1.JPG"/>
<br />
<img id="img2" src="imgs/HTML.JPG"/>
</body>
</html>
关于列表的设置
列表–
1.有序列表 <ol><li></li></ol>
2.无序列表<ul><li></li></ul>
3.自定义列表<dl><dt><dd></dd></dt></dl>
列表的设置就是改变一下列表的前面的标识。
list-style-image :设置标识图标 none | url ( url )
关于表格的设置
border-collapse :设置表格单元格之间的边框合并[ separate | collapse 相邻边被合并]
border-spacing :表格边框独立时，行和单元格的边在横向和纵向上的间距。 【数字 px】
empty-cells :当单元格中没有内容时,单元格的边框是否显示 show | hide
关于布局的属性设置
float：html 元素是否及如何浮动【none 没有 | left{左浮动} | right{右浮动} 】
块级元素:其元素的前后会自动折行 行内元素:按照由左向右一次排列，除非使用<br>元素强制换行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置元素浮动</title>
<style>
span {
float: right;
}
ul {
list-style-type: none;
}
ul li {
float: left;
padding-left: 30px;
}
ul a {
font-size: 20px;
text-decoration: none;
color: pink;
}
ul li a:hover {
color: red;
}
</style>
</head>
<body>
<span>
<a href="#">登录</a>
<a href="#">注册</a>
</span>
<ul>
<li> <a href="http://www.baidu.com" target="_blank">新闻</a> </li>
<li> <a href="#">123</a> </li>
<li> <a href="#">地图</a> </li>
<li> <a href="#">视频</a> </li>
<li> <a href="#">贴吧</a> </li>
<li> <a href="#">学术</a> </li>
<li> <a href="#">更多</a> </li>
</ul>
</body>
</html>
设置 html 元素的隐藏和显示
display:html 元素是否及如何显示【block：显示/none:隐藏】
visibility:是否显示 html 元素【visible：显示/hidden:隐藏】
display 与 visibility 的区别?
Display 隐藏元素之后，元素的物理空间也会消失， Visibility:隐藏元素之后，元素的物理空间不会消失，会留出空白。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
