版权声明：本文为博主原创文章，如果喜欢欢迎收藏转载！ https://blog.csdn.net/Never_Give_up_z/article/details/83045029
首先，什么是css呢？？
css指层叠样式表(Cascading Style Sheets)
CSS语法
CSS规则由选择器，以及一条或多条声明 构成
选择器通常是要改变样式的html元素
每条声明由一个属性和一个值组成
h1 {
color:blue;
font-size:12px;
}CSS注释
CSS注释以 /* 开头 */ 结尾
CSS选择器：id和class选择器
id 选择器为标有特定id的HTML元素指定特定的样式，CSS中id选择器以 “#” 来定义
#part1 {
text-align:center;
color:red;
}class选择器用于描述一组元素的样式，CSS中class选择器以 “.” 来定义
.center {
text-align:center;
}那么我们该如何插入样式表呢？
1.外部样式表：
<link rel="stylesheet" type="text/css" href="mystyle.css">
2.内部样式表：
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
3.内联样式：
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
在实际项目开发中，多用于外部样式表，如果某个页面需要特定的样式就需要在该页面使用内部样式表，如果某个HTML元素需要特定的样式，就在该元素中使用内联样式。多重样式的优先级
内联样式 > 内部样式 > 外表样式 > 浏览器默认样式
CSS背景：用于定义HTML元素的背景
1.背景颜色：background-color
body {background-color:#b0c4de;}
css 中 颜色有以下方式定义
1) 十六进制：#ff0000
2) RGB ：rgb(255,0,0)
3) 颜色名称：red
2.背景图像：background-image
默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体
body {background-image:url('img.jpg');}
3.背景图像-水平或垂直平铺
background-repeat:repeat-x 水平方向
background-repeat:repeat-y 垂直方向
4.背景图像-设置定位与不平铺
background-repeat:no-repeat 不平埔
background-position:right top 设置定位
background 简写属性，作用是将背景属性设置在一个声明中。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
值 说明
scroll 背景图片随页面的其余部分滚动。这是默认
fixed 背景图像是固定的
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
值 说明
url('URL') 图像的URL
background-position 设置背景图像的起始位置。
值 描述
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom 如果仅指定一个关键字，其他值将会是"center"
background-repeat 设置背景图像是否及如何重复。
值 说明
repeat 背景图像将向垂直和水平方向重复。这是默认
repeat-x 只有水平位置会重复背景图像
repeat-y 只有垂直位置会重复背景图像
no-repeat background-image不会重复CSS文本格式
color 设置文本颜色
direction 设置文本方向。
值 描述
ltr 默认。文本方向从左到右。
rtl 文本方向从右到左。
inherit 规定应该从父元素继承 direction 属性的值。
letter-spacing 设置字符间距
值 描述
normal 默认。规定字符间没有额外的空间。
length 定义字符间的固定空间（允许使用负值）。
line-height 设置行高
值 描述
normal 默认。设置合理的行间距。
number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length 设置固定的行间距。
% 基于当前字体尺寸的百分比行间距。
text-align 对齐元素中的文本
值 描述
left 把文本排列到左边。默认值：由浏览器决定。
right 把文本排列到右边。
center 把文本排列到中间。
justify 实现两端对齐文本效果。
text-decoration 向文本添加修饰
值 描述
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
blink 定义闪烁的文本。
text-indent 缩进元素中文本的首行
值 描述
length 定义固定的缩进。默认值：0。
% 定义基于父元素宽度的百分比的缩进。
text-shadow 设置文本阴影
值 描述
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色。
text-transform 控制元素中的字母
值 描述
none 默认。定义带有小写字母和大写字母的标准的文本。
capitalize 文本中的每个单词以大写字母开头。
uppercase 定义仅有大写字母。
lowercase 定义无大写字母，仅有小写字母。
unicode-bidi 设置或返回文本是否被重写
值 描述 测试
normal 默认。不使用附加的嵌入层面。
embed 创建一个附加的嵌入层面。
bidi-override 创建一个附加的嵌入层面。重新排序取决于 direction 属性。
initial 设置该属性为它的默认值。
vertical-align 设置元素的垂直对齐
值 描述
baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的底端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
length
% 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
white-space 设置元素中空白的处理方式
值 描述
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
word-spacing 设置字间距
值 描述
normal 默认。定义单词间的标准空间。
length 定义单词间的固定空间。CSS字体：定义字体，加粗，大小，文本样式
font 在一个声明中设置所有的字体属性
值 描述
font-style 规定字体样式。
font-variant 规定字体异体。
font-weight 规定字体粗细。
font-size/line-height 规定字体尺寸和行高。
font-family 规定字体系列。
caption 定义被标题控件（比如按钮、下拉列表等）使用的字体。
icon 定义被图标标记使用的字体。
menu 定义被下拉列表使用的字体。
message-box 定义被对话框使用的字体。
small-caption caption 字体的小型版本。
status-bar 定义被窗口状态栏使用的字体。
font-family 指定文本的字体系列
font - family属性指定一个元素的字体。
font-family 可以把多个字体名称作为一个"回退"系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。
family-name - 指定的系列名称：具体字体的名称，比如："times"、"courier"、"arial"。
font-size 指定文本的字体大小
值 描述
xx-small
x-small
small
medium
large
x-large
xx-large
把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large。默认值：medium。
smaller 把 font-size 设置为比父元素更小的尺寸。
larger 把 font-size 设置为比父元素更大的尺寸。
length 把 font-size 设置为一个固定的值。
% 把 font-size 设置为基于父元素的一个百分比值。
font-style 指定文本的字体样式
值 描述
normal 默认值。浏览器显示一个标准的字体样式。
italic 浏览器会显示一个斜体的字体样式。
oblique 浏览器会显示一个倾斜的字体样式。
font-variant以小型大写字体或者正常字体显示文本。
值 描述
normal 默认值。浏览器会显示一个标准的字体。
small-caps 浏览器会显示小型大写字母的字体。
font-weight 指定字体的粗细。
值 描述
normal 默认值。定义标准的字符。
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符。CSS链接：不同的链接可以有不同的样式
链接样式
链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。
特别的链接，可以有不同的样式，这取决于他们是什么状态。
这四个链接状态是：
a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
text-decoration 属性主要用于删除链接中的下划线：
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}CSS列表
list-style-image 将图象设置为列表项标志。
值 描述
URL 图像的路径。
none 默认。无图形被显示。
list-style-position 设置列表中列表项标志的位置。
值 描述
inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
list-style-type 设置列表项标志的类型。
值 描述
none 无标记。
disc 默认。标记是实心圆。
circle 标记是空心圆。
square 标记是实心方块。
decimal 标记是数字。
decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。)
lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman 大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek 小写希腊字母(alpha, beta, gamma, 等。)
lower-latin 小写拉丁字母(a, b, c, d, e, 等。)
upper-latin 大写拉丁字母(A, B, C, D, E, 等。)
hebrew 传统的希伯来编号方式
armenian 传统的亚美尼亚编号方式
georgian 传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic 简单的表意数字
hiragana 标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）
katakana 标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）
hiragana-iroha 标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
katakana-iroha 标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）CSS表格
表格边框
指定CSS表格边框，使用border属性。
table, th, td
{
border: 1px solid black;
}
值 描述
none 定义无边框。
hidden 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted 定义点状边框。在大多数浏览器中呈现为实线。
dashed 定义虚线。在大多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。双线的宽度等于 border-width 的值。
groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。
inset 定义 3D inset 边框。其效果取决于 border-color 的值。
outset 定义 3D outset 边框。其效果取决于 border-color 的值。
折叠边框
border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
表格宽度和高度
Width和height属性定义表格的宽度和高度。
table
{
width:100%;
}
th
{
height:50px;
}
表格文字对齐
表格中的文本对齐和垂直对齐属性。
text-align属性设置水平对齐方式，向左，右，或中心
td
{
text-align:right;
}
垂直对齐属性设置垂直对齐，比如顶部，底部或中间：
td
{
height:50px;
vertical-align:bottom;
}
表格填充
td
{
padding:15px;
}
表格颜色
th
{
background-color:green;
color:white;
}