《网页设计基础——CSS常用语法》
网页设计基础——CSS常用语法
一、注释；
例如：
/* 在此处书写注释 */
二、清除浏览器默认设置；
例如：
*{ /* 全局声明 */
margin: 0;
padding: 0;
}
三、CSS选择器；
1.标记选择器
标记选择器
2.类别选择器
类别选择器
3.ID选择器
类别选择器
4.集体声明
一级标题
类别选择器
5.后代选择器
规则：
- 用来选择元素或元素组的所有后代元素。
例如：
蓝色- 红色
红色
蓝色蓝色- 红色
蓝色
蓝色
6.子元素选择器
规则：
- 与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素。
- 如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器
例如：
蓝色- 红色
红色
蓝色蓝色- 蓝色
蓝色
蓝色
7.伪类选择器
规则
- 鼠标选中元素的各种状态。
例如：
这是一个链接
四、字体样式；
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; /* 平面直角坐标系 */