css的属性 长度单位
属性
字体大小的几种写法
注意:font-size的大小设置会把子代都设置上如果不改变子代大小就从新设置子代的font-size
font-size : 30px 直接给像素
font-size:10% 100% 200% 按照百分比
font-size: 1em 2em(2倍) 按照倍数写
字体样式
font-style:normal 正常
font-style: italic 斜体
font-style: oblique 倾斜体
font-style:inherit 规定从父元素上继承字体
font-weight:bold/normal 字体加粗
font-family: '宋体' '黑体'
font-varinat:small-caps 小型大写字母(不常用)
font的综合写法:
font:bold 20px(字体大小)/100px(行高) '宋体'
颜色的写法
color:red 直接给颜色
color:rgb(255,255,255) 黑色
color:rgb(0,0,0) 白色
color:rgb(30%,100%,10%) 按照百分比
color:#333 (黑体) 十六进法
背景属性
background-color:red
background-imge:url('路径')
| background-repeat | 样式 |
|---|---|
| background-repeat | repeat(重复) |
| background-repeat | no-repeat(不重复) |
| background-repeat | repeat-x(横向重复) |
| background-repeat | repeat-y(纵向重复) |
background-attachment:scroll 这个方法不常用
| background-position | 位置01 | 位置02 |
|---|---|---|
| background-position | center | center |
| background-position | top | center |
| background-position | left | center |
| background-position | top | right |
| background-position | 100 | 200 |
颜色的综合写法:
background: red url('路径') repeat top right
markdown表格语法
写法一: 内容居中
username | password
:-: | :-:
sunziheng01 | 123456
sunziheng02 | 45678
写的二:内容左对齐
username | password
------ | -----
sunziheng01 | 123456
sunziheng02 | 45678
写法三: 内容右对齐
username | password
-: | -:
sunziheng01 | 123456
sunziheng02 | 45678
设置行高
line-height:40px
设置光标的样式 (很多这里只列举了几种)
cursor:pointer 光标呈现为指示链接的指针（一只手）
cursor:move 此光标指示某对象可被移动
cursor:crosshair 光标呈现为十字线。
cursor:text 此光标指示文本。
文本属性
letter-spacing:10px/0.1em 字母间隔
word-spacing:10px/0.1em 单词间隔
| text-decoration | 装饰 |
|---|---|
| underline | 下划线 |
| overline | 上划线 |
| line-through | 删除线 |
| none | 去除下划线 |
去除标签a 的下划线
<a href="https://www.baidu.com" style="text-decoration:none">百度</a>
text-align :center/left/right 居中对齐
text-indent: 2em 设置缩进
设置边框
border-width:5px
border-color:red
border-style: solid/dotted/dashed
border-left-style:solid
boder-bottom:none
border:1px solid yellow
列表属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul{
/*list-style: none; !*清空样式*!*/
list-style-type: circle;
/*list-style-type: inherit; 默认*/
/*list-style-type: armenian; 外文*/
/*list-style-type: decimal; 数字*/
/*list-style-type: square; 方形*/
/*list-style-image: url("./images/p3.jpg"); 前面可以添加小图标*/
list-style-position: outside; /*如果有表格样式在表格外 inside 在内*/
}
li{
border: 1px yellow solid;
}
</style>
</head>
<body>
<ul>
<li>hahahahah</li>
<li>hahahahah</li>
<li>hahahahah</li>
<li>hahahahah</li>
<li>hahahahah</li>
</ul>
</body>
</html>
表格属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table{
width: 300px;
caption-side: top;
table-layout: fixed; /*如果内容超出单元格 单元格不改变 auto随着内容单元格变大*/
empty-cells: show; /*如果单元格为空也展示*/
border-collapse: collapse; /*合并单元条*/
}
tr td {
padding: 20px;
}
</style>
</head>
<body>
<table border="1px">
<caption><h1>人员基本信息表</h1></caption>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>职业</td>
</tr>
<tr>
<td>sunziheng</td>
<td>22</td>
<td>男</td>
<td></td>
</tr>
<tr>
<td>sunziheng</td>
<td>22</td>
<td>男</td>
<td>it</td>
</tr>
<tr>
<td>sunziheng</td>
<td>22</td>
<td>男</td>
<td>it</td>
</tr>
<tr>
<td>sunziheng</td>
<td>22</td>
<td>男</td>
<td>itdfghjkldfghjklsdfghjkldfghjklsdfghjkldfghjk</td>
</tr>
<tr>
<td>sunziheng</td>
<td>22</td>
<td>男</td>
<td>it</td>
</tr>
</table>
</body>
</html>
