网页设计基础——CSS常用语法
一、注释；
例如：
/* 在此处书写注释 */
二、清除浏览器默认设置；
例如：
*{ /* 全局声明 */
margin: 0;
padding: 0;
}
三、CSS选择器；
1.标记选择器
<html>
<head>
<style>
p{
font-size: 30px;
}
</style>
</head>
<body>
<p>标记选择器</p>
</body>
</html>
2.类别选择器
<html>
<head>
<style>
.m{
font-size=30px;
}
</style>
</head>
<body>
<p class="m">类别选择器</p>
</body>
</html>
3.ID选择器
<html>
<head>
<style>
#m{
font-size=30px;
}
</style>
</head>
<body>
<p id="m">类别选择器</p>
</body>
</html>
4.集体声明
<html>
<head>
<style>
h1, #m{
font-size=30px;
}
</style>
</head>
<body>
<h1>一级标题</h1>
<p id="m">类别选择器</p>
</body>
</html>
5.后代选择器
规则：
- 用来选择元素或元素组的所有后代元素。
例如：
<html>
<head>
<style>
ul{color:#00FFFF;}
ul li{color:#FF0000;} /* 所有li标签内的文本颜色都为红色 */
</style>
</head>
<body>
<ul>蓝色<li>红色</li>红色</ul>
<ul>蓝色<ol>蓝色<li>红色</li>蓝色</ol>蓝色</ul>
</body>
</html>
6.子元素选择器
规则：
- 与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素。
- 如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器
例如：
<html>
<head>
<style>
ul{color:#00FFFF;}
ul>li{color:#FF0000;} /* 第二个ul标签里“li标签内的文本颜色”不为红色 */
</style>
</head>
<body>
<ul>蓝色<li>红色</li>红色</ul>
<ul>蓝色<ol>蓝色<li>蓝色</li>蓝色</ol>蓝色</ul>
</body>
</html>
7.伪类选择器
规则
- 鼠标选中元素的各种状态。
例如：
<html>
<head>
<style>
a:link {color: black;} /* 访问之前的情况 */
a:visited {color: green;} /* 访问过的情况 */
a:hover {color: red;} /* 鼠标悬停 */
a:active {color: gray;} /* 鼠标按下，尚未放开的情况 */
</style>
</head>
<body>
<a href="#">这是一个链接</a>
</bpdy>
<html>
四、字体样式；
1.字体类型
规则：
- 若和下面的代码一样同时声明多个字体名称，则浏览器会先寻找“楷体”，若没找到则会继续寻找“宋体”，若代码所声明的所有字体都没有找到，则使用浏览器默认字体显示。
例如：
font-family: "楷体", "宋体";
2.字体大小
font-size: 8px;
3.字体粗细
font-weight: 800;
4.字体颜色
color: #FF0000; /* 红色 */
color: #000000; /* 黑色 */
color: #FFFFFF; /* 白色 */
color: #0000FF; /* 蓝色 */
color: #FFFF00; /* 黄色 */
5.文字对齐
text-align: center; /* 居中对齐 */
text-align: left; /* 靠左对齐 */
text-align: right; /* 靠右对齐 */
6.字体样式
font-style: italic; /* 斜体 */
text-decoration: underline; /* 下划线 */
text-decoration: overline; /* 上划线 */
text-decoration: line-through; /* 删除线 */
7.英文字母大小写
text-transform: capitalize; /* 单词首字母大写 */
text-transform: uppercase; /* 全部字母大写 */
text-transform: lowercase; /* 全部字母小写 */
五、背景；
1.背景颜色
background-color: #FF0000;
2.背景图片
background-image: url(xxx.jpg);
3.背景图片大小
background-size: 500px 200px; /* 宽度 高度 */
4.背景图片平铺
background-repeat: repeat; /* 平铺 */
background-repeat: no-repeat; /* 不平铺 */
background-repeat: repeat-x; /* 水平平铺 */
background-repeat: repeat-y; /* 垂直平铺 */
5.背景图片位置
background-position: center center; /* 居中 */
background-position: 50% 50%; /* 居中 */
background-position: 200px 100px; /* 平面直角坐标系 */
