一、选择器
1.1 元素选择器：
指定元素统一格式
p {text_align: center;}
1.2 id选择器：
当我们想精准找到某元素的时候要就id选择器
/* id选择器使用 # 来定义 */
#para1{ text-align:center;}
1.3 class选择器：
多个元素统一类型
/* class选择器使用 . 来定义 */
.classname{text-align:center;}
1.4 分组选择器
在样式表中有很多具有相同样式的元素就可以用分组选择器
h1,h2,p {color:green;}
1.5 嵌套选择器
适用于选择器内部的选择器样式
div p{
color:white;
}
二、CSS样式创建
2.1 外部样式表
<head><link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
2.2 内部样式表
<head>/* 将style写在head标签中的样式 */<style>body {background-image:url("images/back40.gif");}</style>
</head>
2.3 内联样式
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
2.4 多重样式优先级
（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
三、背景
3.1 背景颜色
body {background-color:#b0c4de;}/* 十六进制表示 */
body {background-color:rgb(255,0,0);}/* RGB表示 */
body {background-color:red;}/* 颜色名称 */
3.2 背景图像
/* 默认情况下进行平铺显示，以覆盖整个元素实体 */
body {background-image:url('url');}
body {background: url('url')}
3.2.1背景图像——平铺与定位
body {background-image:url('url');background-image:no-repeat;/* 设置图片不平铺 */background-repeat:repeat-x; /* 设置只在水平方向平铺 */background-repeat:repeat-y; /* 设置只在垂直方向平铺 */background-position: right top;/* 设置图片位置 */background-attachment: fixed;/* 设置图片随页面滚动时位置固定 */background-attachment: scroll;/* 设置图片随页面滚动时滚动 */
}
3.2.2 背景——简写属性
body {background:#ffffff url('img_tree.png') no-repeat right top;}
/* 此时简写属性的顺序 */
background-color > background-image > background-repeat > background-attachment > background-position
| 属性 | 描述 |
|---|---|
| background | 在一条声明中设置所有背景属性的简写属性。 |
| background-attachment | 设置背景图像是固定的还是与页面的其余部分一起滚动。 |
| background-clip | 规定背景的绘制区域。 |
| background-color | 设置元素的背景色。 |
| background-image | 设置元素的背景图像。 |
| background-origin | 规定在何处放置背景图像。 |
| background-position | 设置背景图像的开始位置。 |
| background-repeat | 设置背景图像是否及如何重复。 |
| background-size | 规定背景图像的尺寸。 |
四、文本、字体
4.1 Text文本
| 属性 | 描述 |
|---|---|
| color | 设置文本颜色 |
| direction | 设置文本方向。 |
| letter-spacing | 设置字符间距 |
| line-height | 设置行高 |
| text-align | 对齐元素中的文本 |
| text-decoration | 向文本添加修饰 |
| text-indent | 缩进元素中文本的首行 |
| text-shadow | 设置文本阴影 |
| text-transform | 控制元素中的字母 |
| unicode-bidi | 设置或返回文本是否被重写 |
| vertical-align | 设置元素的垂直对齐 |
| white-space | 设置元素中空白的处理方式 |
| word-spacing | 设置字间距 |
4.2 Fonts字体
| Property | 描述 |
|---|---|
| font | 在一个声明中设置所有的字体属性 |
| font-family | 指定文本的字体系列 |
| font-size | 指定文本的字体大小 |
| font-style | 指定文本的字体样式 |
| font-variant | 以小型大写字体或者正常字体显示文本。 |
| font-weight | 指定字体的粗细。 |
五、超链接
5.1 链接样式
a:link {color:#FF0000;} /* 未访问时链接样式*/
a:visited {color:#00FF00;} /* 用户已访问过后链接样式 */
a:hover {color:#FF00FF;} /* 当用户鼠标放在链接上时链接的样式 */
a:active {color:#0000FF;} /* 当链接被点击时的链接样式 *//* a:hover 必须跟在 a:link 和 a:visited 后面 a:active 必须跟在 a:hover 后面
*/
5.2 文本修饰
a:link {text-decoration:none;} /* 链接未访问时没有下划线 */
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;} /* 用户鼠标放在链接上时有下划线 */
a:active {text-decoration:underline;}
5.3 背景颜色
a:link {background-color:#B2FF99;} /* 链接未访问时背景颜色 */
a:visited {background-color:#FFFF85;} /* 链接访问过后的链接的背景颜色 */
a:hover {background-color:#FF704D;} /* 当鼠标放在链接上时的背景颜色 */
a:active {background-color:#FF704D;} /* 当链接被点击时的链接背景颜色 */
5.4 鼠标形状
/* 当鼠标放在链接上时鼠标的样式 */
a:hover {cursor: default;/* 鼠标呈十字状 */cursor: pointer;/* 超链接的指针，手型 */cursor: wait;/* 指示程序正在忙 */cursor: help; /* 只是可用的帮助 */cursor: text;/* 指示文本 */cursor: crosshair;/* 鼠标呈十字状 */
}
六、列表样式
6.1 CSS无序列表
<ul><li>唱</li><li>跳</li><li>rap</li>
</ul>
6.2 CSS有序列表
<ol><li>唱</li><li>跳</li><li>rap</li>
</ol>
6.3 CSS列表符号
ul {list-style-type: none}; /* 不使用项目符号 */
ul {list-style-type: disc}; /* 空心圆 */
ul {list-style-type: circle}; /* 实心圆 */
ul {list-style-type: square}; /* 实心方块 */
ul {list-style-type: decimal}; /* 阿拉伯数字 */
ul {list-style-type: lower-alpha}; /* 小写英文字母 */
ul {list-style-type: upper-alpha}; /* 大写英文字母 */
ul {list-style-type: lower-roman}; /* 小写罗马数字 */
ul {list-style-type: upper-roman}; /* 大写罗马数字 */
6.4 图像作为列表符号
ul {list-style-image: url('url');}
七、Table表格
7.1 表格边框
<table>/* th是table head的简写，是表格的首行，字体自动居中加粗 */<th>/* td是 table data */<td></td></th>/* tr是 table row*/<tr><td></td></tr>
</table>
7.2 表格属性
table { border-collapse:collapse; } /* 设置边框宽度为0 */
table { width: 100%; height:100%; } /* 设置表格的宽度和长度 */
td {text-align: center; }/* 设置表格文字位置 */
td {vertical-align: bottom; } /* 设置表格文字对其方式 */
td {background-color: grenn; color: white;} /* 设置表格背景色和边框颜色 */
八、CSS Box Model（盒子模型）
CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：内边距，外边距，边框，内容。
8.1 元素的宽度和高度
body {border:2px solid red; /* 设置边框的样式 */width:100% ; /* 设置内容填充的高度 */padding:20px; /* 设置内边距和内容的距离 */margin:10px; /* 设置外边框的距离 */
}
8.2 padding（填充）
CSS Padding（填充）属性定义元素边框与元素内容之间的空间。
8.2.1 Padding的取值：
- length：定义一个固定的填充（像素、pt、em等）。
- %：使用百分之定义一个填充，相较于父元素的百分值。
8.2.2 单边内边距属性
padding-top: 20% ;
padding-bottom: 20% ;
padding-right: 20% ;
padding-left: 20%;
8.3 margin（外边距）
CSS Margin (外边距)属性定义元素周围的空间。CSS Margin 属性接受任何长度单位、百分数值甚至负值。
| 值 | 说明 |
|---|---|
| auto | 设置浏览器边距。 这样做的结果会依赖于浏览器 |
| length | 定义一个固定的margin（使用像素，pt，em等） |
| % | 定义一个使用百分比的边距 |
九、CSS边框
9.1 设置边框
p.none {border-style: none;}/* 无边框 */
p.dotted {border-style: dotted;}/* 点状边框 */
p.dashed {border-style: dashed;}/* 虚线边框 */
p.solid {border-style: solid;}/* 实线边框 */
p.double {border-style: double;}/* 双线边框 */
p.groove {border-style: groove;}/* 凹槽边框。其效果取决于 border-color 的值*/
p.ridge {border-style: ridge;}/* 垄状边框。其效果取决于 border-color 的值 */
p.hidden {border-style: hidden;}/* 隐藏边框 */
p.mix {border-style: dotted dashed solid double;}/* 混合边框 */
9.2 设置边的宽度
.one {border-style: solid;border-width: 1px 3px; /* 上边框和下边框为 1px，其他边为 3px */
}
.two {border-style: solid;border-width: 3px 1px; /* 上边框和下边框为 3px，其他边为 1px */
}
.three {border-style: solid;border-width: 1px 2px 3px 4px; /* 上边框 1px，右边框 2px，下边框 3px，左边框 4px */
}
9.3 设置边框颜色
.one {border-style: solid;border-color: red;
}.one {border-style: solid;border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */
}.one {border-style: solid;border-color: #ff0000; /* 十六进制值 */
}.one {border-style: solid;border-color: rgb(255, 0, 0); /* RGB值 */
}
日常学习笔记，不喜勿喷，欢迎纠错与探讨！
![[.NET学习笔记] - Thread.Sleep与Task.Delay在生产中应用的性能测试](https://img-blog.csdnimg.cn/b7fcefc987cd462283171b5d3b538217.png)
