CSS字体和文本相关属性
字体常用属性
| font-family | 字体 |
| font-size | 大小 |
| font-style | 是否斜体，normal（正常），italic（斜体），oblique（倾斜） |
| font-weight | 粗细，lighter（更细），normal（正常 400），bold（更粗 700），bolder（更粗）或100，200，...900 |
文本常用属性
| color | 文本颜色 |
| letter-spacing | 字符间距 |
| line-height | 文本行高 注：行级或者块级元素都生效，一行的更多 |
| text-align | 文本的水平对齐方式，left（左对齐），right（右对齐），center（区中） 注：不仅仅针对文本 |
| text-decoration | 文本的装饰效果，主要有overline、underline和line-through，none（无） |
| text-indent | 文本快首行缩进 |
| text-transform | 控制文本的大小写，主要有uppercase（大写），lowercase（小写），capitalize（单词首字母大写） |
| word-spacing | 单词间距 |
示例
<!--常用字体和文本样式属性-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用字体和文本样式属性</title>
<style type="text/css">
.p1{
font-family: "楷体"; /*字体*/
font-size: 20px; /*尺寸，大小*/
font-style: italic; /*倾斜*/
font-weight: bold; /*粗细*/
color: blue; /*颜色*/
/*text-decoration: underline line-through overline; */ /*文字装饰*/
text-indent: 2em; /*首行缩进2个字符 px表示像素，em是相对单位，表示当前字符的大小，1em等于当前一个字符的大小*/
line-height: 40px; /*行高*/
background-color: yellow;
text-align: center;
}
a{
text-decoration: none; /*去掉链接下划线*/
}
.p2{
word-spacing: 4px; /*单词间距*/
letter-spacing: 2px; /*字符间距*/
text-transform: capitalize; /*单词大小写，capitalize（单词首字母大写），仅针对于英文*/
}
</style>
</head>
<body>
<p class="p1">今天星期二，今天天气不错<br/>今天星期二，今天天气不错</p>
<a href="www.baidu.com">百度</a>
<p class="p2">Today is cloudy!</p>
</body>
</html>CSS边框和背景相关属性
常用边框属性
| border | 在一个声明中设置所以属性 |
| border-width | 设置四条边框宽度 |
| border-style | 边框样式，dotted：点、’solid：实线，double：双线、dashed：虚线 |
| border-color | 设置四条边框的颜色 |
| border-left | 在一个声明中设置左边框属性，对应还有border-right等三边属性（right，left，top，bottom） |
| border-left-color | 设置左边框的颜色，对应还有border-right-color等三边颜色 |
| border-left-style | 设置左边框的样式，对应还有border-right-color等三边样式 |
| border-left-width | 设置左边框的宽度，对应还有border-right-color等三边宽度 |
示例：
<!--边框样式属性-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框样式属性</title>
<style type="text/css">
img{
/*border-style: solid; !*样式*!
border-color: green;!* 颜色*!
border-width: 6px; !* 宽度*!*/
/*简化写法，上下等价*/
border:solid 6px green;
/* left,right,top,bottom,左右上下*/
border-bottom-style: dashed;
border-bottom-color: yellow;
border-bottom-width: 3px;
}
</style>
</head>
<body>
<img src="../imgs/卫庄&赤练.jpg" width="384" height="216"/>
</body>
</html>常用背景属性
| background | 在一个声明中设置所有的背景属性 |
| background-attachment | 设置背景图片是否固定，或者随着页面的其余部分滚动。主要有fixed和scroll（默认） |
| background-color | 设置元素背景颜色 |
| background-image | 设置元素背景图像，主要有url和none两个属性 |
| background-position | 设置背景图像的开始位置，可以指定top，left等，也可以指定具体的像素位置 |
| background-repeat | 设置是否及如何重复背景图像。主要有repeat，repeat-x，repeat-y，no-repeat |
示例：
<!--背景样式属性-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景样式属性</title>
<style>
body{
/*background-color: green; !*背景色*!*/
background-image: url("../imgs/background1.jpg"); /*背景图片*/
background-repeat: no-repeat; /*是否重复铺设*/
/*左，上*/
background-position: 30px 30px; /*距离左边和上边各30px*/
background-attachment: fixed; /*scroll:随着滚动而滚动，默认的，fixed：固定位置*/
}
</style>
</head>
<body>
<p>过年，在物质贫乏年代，是个让大人怕孩子盼的日子。<br/>
对于吃的欲望，是人之本能。过年，孩子最先想的是吃，自然无可厚非，无关乎饱，无关乎好，只因能尝到平时吃不到的零食，譬如炒红薯干、南瓜子、炒米糖，偶尔，还有少许的芝麻糖。<br/>
“过了腊八便是年”的概念着实有些偏颇，许是大集体劳动模式将农活安排的紧凑，抑或贫穷家庭原本就没什么可备置，村庄里的年总是要到腊月廿四才有动静。<br/>
腊月廿四是习俗里的小年，主妇们可以不用去队里出工，在家做私活。妈妈早早的爬上阁楼，我的眼光紧跟其后，心提到嗓子眼，果不其然，楼上喊到：这铁皮柜里的红薯干怎么少了许多，盖着的，老鼠怎么能吃到？那一刻，我提醒自己镇定，屏住呼吸，躲在堂厅角落，偷看妈妈提一簸箕红薯干下楼，瞥我一眼后，去了灶台前。伴随着一铲铲石沙和铁锅摩擦的翻炒声，醇厚的甜香越来越浓，终究抵不住诱惑，条件反射的接近灶台，伸手，锅中取物，“馋猫。”妈妈笑骂。我倒一乐：妈妈已不再追究那只“老鼠”了。<br/>
那时，没有“年货”一说，米糖是过年家里唯一甜食，倘若有少许芝麻糖，那真是奢侈。米糖好吃制作难，糖与米搅和，比例、火候掌握不好，势必影响定型和口感。方家俩兄弟是村里出名的制糖手艺人，无月的夜晚，刺骨的北风在村庄巷道里四处奔跑，催赶着方家兄弟的足迹。村子大，兄弟俩单独操作，哥哥从村东往村西，弟弟从村北往村南，方家，张家，王家……忙好一家再一家，一晚上好几家。兄弟俩热心，大年初一早上，村里每个果盒里都能看到方家兄弟手艺。孩子们最期盼的，自然是方家兄弟来自家的夜晚，且顾不上妈妈在灶下加柴添火，眼睛乃至每根神经的注意力都集中到他的那双手，看他将山芋糖倒锅里，用锅铲不停搅拌，熬成稠状，又一次次用铲将糖油提起看粘状，那黄金般的丝线，一根根从锅铲滑入锅中，晶莹剔透，诱人忍不住将舌头舔了再舔，直咽口水。目不转睛，看他往锅里倒炒米，搅拌，不一会，米裹着糖，糖粘着米，便可装模定型。方家兄弟刀法是一流的，“嚓嚓嚓嚓”，眨眼间，一码码厚薄均匀的长方形糖片，就出现案台上，整齐且精制。<br/>
灯光昏黄，小堂厅的空气里飘散着浓浓香甜，寒冷的夜晚，瞬间温暖起来。</p>
</body>
</html>CSS列表和表格相关属性
常用列表属性如下
| list-style | 在一个声明中设置所有的列表属性 |
| list-style-image | 将图像设置为列表项标记。主要有URL值 |
| list-style-position | 设置列表标记的放置位置，主要有outside和inside两个值 |
| list-style-type | 设置列表项标记的类型。主要有：disc,circle,square,decimal,decimal-leading-zero，lower-roman,upper-roman,lower-greek，lower-latin，upper-latin，armenian，georgian，none（无，去掉默认样式） |
示例
<!--列表样式属性-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表样式属性</title>
<style>
ul{
/*list-style-type: upper-roman; !*样式设置 罗马样式*!*/
/*list-style-type:none; !*去掉样式*!*/
list-style-image: url("../imgs/photo2.jpg");
/*inside,outside,默认outside*/
list-style-position: outside;
}
li{
background-color: gray;
}
</style>
</head>
<body>
国产手机推荐
<ul>
<li>华为</li>
<li>vivo</li>
<li>oppo</li>
<li>小米</li>
</ul>
</body>
</html>表格常用属性
| border-collapse | 设置是否把表格边框合并为单一的边框 |
| border-spacing | 设置分隔单元格边框的距离 |
| border-side | 设置表格标题的位置 |
| border-cells | 设置是否显示表格中的空单元格 |
示例：
<!--表格常用属性-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格常用属性</title>
<style>
table,th,td{
border: solid 1px black;
}
table{
border-collapse: collapse; /*把表格边框合并为单一的边框*/
}
tr{
text-align: center; /*居中*/
}
.head{
background-color: lightcyan;
}
</style>
</head>
<body>
<table>
<thead>
<tr class="head">
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>班级</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>17</td>
<td>男</td>
<td>1班</td>
</tr>
<tr>
<td>小王</td>
<td>18</td>
<td>男</td>
<td>2班</td>
</tr>
<tr>
<td>小红</td>
<td>18</td>
<td>女</td>
<td>1班</td>
</tr>
</tbody>
</table>
</body>
</html>CSS常用伪类别属性
超链接（a标签）样式属性
默认，没访问蓝色，激活（点在上面没放）红色，访问过紫色
| a:link | 超链接的普通样式 |
| a:visited | 被点击时超链接样式 |
| a:hover | 鼠标悬浮 |
| a:active | 激活，鼠标按下没有抬起来 |
- 一个超链接可能同时满足多个状态
- 一个链接没有访问过，也没有悬浮或激活，只是普通的
- 点击链接后回来： a:link, a:visited，在悬浮和激活时，四个状态都有
- 顺序：
- a:link{}
- a:visited{}
- a:hover{}
- a:active{}
- 在后面的更优先
- 当一个链接符合多个状态时，从上到下综合效果，相同覆盖掉，不同相加
示例：
<!---->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接样式属性</title>
<style>
/*编写顺序为a:link,a:visited,a:hover,a:active,（后面覆盖前面）*/
a:link{ /*普通样式*/
text-decoration: none; /* 去掉下划线*/
color:black;
}
a:visited{ /*访问过*/
text-decoration: none;
color:darkgreen;
}
a:hover,a:active{ /*鼠标悬浮，鼠标点击不放 两个样式设为相同*/
background-color: blue;
color:white;
}
</style>
</head>
<body>
<a href="http://www.taobao.com">淘宝</a>
</body>
</html>多个链接：
<!---->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>链接样式属性</title>
<style>
ul{
list-style-type: none; /*去掉默认样式*/
}
a:link,a:visited{
background-color: yellow;
color: black;
text-decoration: none;
}
a:hover{
background-color: blue;
color: yellow;
}
a:active{
color: red;
}
</style>
</head>
<body>
<ul>
<li><a href="http://www.taobao.com">淘宝网</a></li>
<li><a href="http://www.JD.com">京东</a></li>
<li><a href="http://www.vip.com">唯品会</a></li>
</ul>
</body>
</html>
2777
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
