- css指层叠样式表（Cascading Style Sheets）
- 是一组样式设置规则，用于控制页面的外观设计
###2、为什么要使用css- 实现内容与样式的分离，便于团队的开发
- 样式服用，便于网站的后期维护
- 页面的精确控制，让页面更精美
###3、css作用- 页面外观美化
- 布局和定位
直接在标签的开始标签中，使用style属性。
我要评论<p style="color:red;">第一种引入css的方式</p>
直接使用style标签来完成，在heed部分，添加style标签，注意，style标签要写在head部分，不要写到body里面了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
color: red;
}
</style>
</head>
<body>
<p>这是第二种引用的方法</p>
</body>
</html>
将css作为一个独立的文件来保存，一般后缀.css，然后使用link标签引入。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="method.css">
</head>
<body>
<p>这是第三种引用的方法</p>
</body>
</html>
CSS样式(或规则)都必须由两部分组成：
注意：
- 声明块是由{}来构成的
- 声明之间必须有一个分号，所以在写单个声明的>时* 候，尽量加上最后的分号
- 声明的属性和属性值之间使用冒号隔开，
- 在写这些符号的时候，要注意必须是英文的。
也称为元素选择器，使用HTML标签作为选择器的名称，以标签名作为样式应用的依据。
p{color: red;}
a{font-size: 15px;}
使用自定义的名称，以·号作为前缀，然后再通过HTML标签的CLASS属性调用类选择器，以标签的class属性作为样式应用的依据。
注意事项：
· 调用时不能添加.号
· 同时调用多个类选择器时，以空格分隔
· 类选择器名称不能以数字开头
.box{
font-size: 15px;
}
.......
<div class="box">类选择器</div>
使用自定义名称，以#作为前缀，然后通过HTML标签的ID属性进行名称匹配，以标签的id属性作为样式应用的依据，一对一的关系。
#top{
margin:10px
}
.......
<div id="top">ID选择器</div>
使用通配符 * 表示所有的标签（元素）。
使用*来去掉所有标签的margin和padding
*{
padding: 0;
margin: 0;
}
在书写css的时候，有可能对两个不同的标签、class、id，设置相同的css。在css中，使用逗号来实现分组。两个选择器之间使用逗号进行分隔。
P,a{
font-size: 15px;
}
在某个选择器内部再设置选择器，通过空格隔开，只有满足层次关系最里层的选择器所对应的标签才会应用样式。
注意：使用空格时不区分父子还是后代，使用CSS3中新增的 > 时必须是父子关系才行。
.box h2{
font-size: 15px;
}
........
<div class="box">
<h2>父子选择器</h2>
</div>
目前我们就掌握一个，最常用的，就是a标签的hover伪类。
hover，表示将鼠标放到a上面的这个状态。
a:hover{
color: red;
}
| 属性 | 含义 | 属性值 |
|---|---|---|
| font-style | 设置字体是否倾斜 | normal、italic |
| font-weight | 设置字体是否加粗 | normal、bold、bolder、100、200、…、900 |
| font-size | 设置字体大小 | |
| font-family | 设置字体类型 | |
| color | 设置字体颜色 |
（1） font-style : 设置字体是否倾斜
- narmal : 默认值，浏览器显示一个标准的字体样式。
- italic ：浏览器会显示一个斜体的字体样式。
- inherit ：从父元素继承字体尺寸。
（2） font-weight : 设置字体是否加粗
- normal ：默认值，定义标准的字符。
- bold ：定义粗体字符。
- bolder ：定义更粗的字符。
- 100、200、…、900 ：定义由粗到细的字符，400等同于normal，700等同于bold。
- inherit ：从父元素继承字体尺寸。
（3）font-size : 设置字体大小
- 谷歌浏览器默认是16px 用的最多是的12px 和 14px 。
- 单位也可以用em，1em=16px。
- inherit ：从父元素继承字体尺寸。
（4）font-family : 设置字体类型
- 和用户电脑上设置的字体也有关系 。
- font-family:A,B,C,D
（5) font是上面的几个属性的复合属性
font : font-style font-weight font-size/line-height font-family。
font-style font-weight 可以不写,也可以交换位置。
font-size/line-height font-family 必须写,能交换位置 。
| 属性 | 含义 | 属性值 |
|---|---|---|
| line-height | 设置行高 | normal、inherit、number、length |
| text-align | 对齐元素中的文本 | left、right、center、inherit |
| text-decoration | 向文本添加修饰 | none、underline、overline、line-through、inherit |
| text-indent | 缩进元素中文本的首行 | length、inherit、% |
| direction | 设置文本方向 | ltr、rtl、inherit |
（1）line-height ：属性设置行间的距离（行高）
- normal : 默认值，设置合理的行间距。
- inherit ：规定应该从父元素继承 line-height 属性的值。
- number ：设置数字，此数字会与当前的字体尺寸相乘来设置。
- length ：设置固定的行间距。
（2) text-align ：属性规定元素中的文本的水平对齐方式
- left ：把文本排列到左边，默认值。
- right ：把文本排列到右边。
- center ：把文本排列到中间。
- inherit ：规定应该从父元素继承 text-align 属性的值。
（3）text-decoration属 ：性规定添加到文本的修饰
- none ：默认，定义标准的文本。
- underline ：定义文本下的一条线。
- overline ：定义文本上的一条线。
- line-through ：定义穿过文本下的一条线。
- inherit ：规定应该从父元素继承 text-decoration 属性的值。
（4）text-indent ：属性规定文本块中首行文本的缩进
- length ：定义固定的缩进，默认值：0。
- % ：定义基于父元素宽度的百分比的缩进。
- inherit ：规定应该从父元素继承 text-indent 属性的值。
（5）direction ：属性规定文本的方向/书写方向
- ltr ：默认。文本方向从左到右。
- rtl ：文本方向从右到左。
- inherit ：规定应该从父元素继承 direction 属性的值。
| 属性 | 含义 | 属性值 |
|---|---|---|
| list-style-image | 将图象设置为列表项标志 | URL、none、inherit |
| list-style-type | 设置列表项标志的类型 | none、disc、circle、square等 |
| 属性 | 含义 | 属性值 |
|---|---|---|
| border-collapse | 设置分隔单元格边框的距离 | separate、collapse、inherit |
| border-spacing | 设置表格标题的位置 | length length、inherit |
（1）border-collapse ：属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示
- separate ：默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
- collapse ：如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
- inherit ：规定应该从父元素继承 border-collapse 属性的值
从日常生活中出发，在我们的HTML中，所有的标签都是矩形的。围绕着整个矩形，我们可以使用一系列的属性来控制它的显示外观。具体来说，有如下一些属性：
- 它们表示元素的宽度和高度。不是指整个盒子所占据的空间。
- 在设置的时候，通常使用px来进行，如果要实现响应式，则可以使用百分比。
border右三部分构成 ：
border: 1px solid red;
border的边框可以分开设置：border-top、border-right、border-bottom、border-left。
border-top: 1px solid #000;
border-right: 1px solid red ;
border-bottom: 1px solid #00f;
border-left: 1px solid #0f0;
元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。
CSS padding 属性定义元素边框与元素内容之间的空白区域。
CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。
例如，所有 h1 元素的各边都有 10 像素的内边距，只需要这样：
h1 {padding: 10px;}
还可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值。
h1 {padding: 10px 0.25em 2ex 20%;}
也通过使用下面四个单独的属性，分别设置上、右、下、左内边距：
h1 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}
注意点：
1）有些标签是有默认的padding 如ul ol… 等，{padding:0; }可以消除所有标签的padding
2）对于行内元素来说，padding在垂直方向上不影响行高，效看似是有padding，但是padding不是真正的padding，或者说一个女盒子来说，padding在垂直方向上无效。
3）对于块级元素来说，上下padding可以撑起男盒子的高度。
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。
使用下列任何一个属性来只设置相应上的外边距，而不会直接影响所有其他外边距：
margin后面也可以跟一个值，二个值，三个值，四个值：
注意点：
1）有此标签有默认的margin ,*{ margin:0; padding:0>}可以消除所有标签的margin
2）对于行内元素来说，margin在垂直方向上是无效的
3）margin可以设置auto。 表示尽可以大 div{ margin:0 auto; }
4）margin可以设置负值
| 属性 | 含义 | 属性值 |
|---|---|---|
| background-color | 设置元素的背景颜色 | color_name、hex_number、rgb_number、transparent、inherit |
| background-image | 把图像设置为背景 | url(‘URL’)、none、inherit |
| background-position | 设置背景图像的起始位置 | |
| background-repeat | 设置背景图像是否平铺 | repeat、repeat-x、repeat-y、no-repeat 、inherit |
| background-attachment | 背景图像是否固定或者随着页面的其余部分滚动 | scroll、fixed、inherit |
（1）background-color ：属性设置元素的背景颜色
- color_name ：规定颜色值为颜色名称的背景颜色（比如 red）。
- hex_number ：规定颜色值为十六进制值的背景颜色（比如 #ff0000）。
- rgb_number ：规定颜色值为 rgb 代码的背景颜色（比如 rgb(255,0,0））。
- transparent ：默认值，背景颜色为透明。
- inherit ：规定应该从父元素继承 background-color 属性的设置。
（2）background-image ：属性为元素设置背景图像
- url(‘URL’) ：指向图像的路径。
- none ：默认值，不显示背景图像。
- inherit ：规定应该从父元素继承 background-image 属性的设置。
（3）background-position ：属性设置背景图像的起始位置
- top left、top center、top right、center left、center center、center right、bottom left、bottom center、bottom right，如果您仅规定了一个关键词，那么第二个值将是"center"，默认值：0% 0%。
- x% y% ：第一个值是水平位置，第二个值是垂直位置，如果您仅规定了一个值，另一个值将是 50%。
- xpx ypx ：第一个值是水平位置，第二个值是垂直位置，如果您仅规定了一个值，另一个值将是50%。
（4）background-repeat ：属性设置是否及如何重复背景图像
- repeat ：默认，背景图像将在垂直方向和水平方向重复。
- repeat-x ：背景图像将在水平方向重复。
- repeat-y ：背景图像将在垂直方向重复。
- no-repeat ：背景图像将仅显示一次。
- inherit ：规定应该从父元素继承 background-repeat 属性的设置。
（5）background-attachment ：属性设置背景图像是否固定或者随着页面的其余部分滚动
- scroll ：默认值。背景图像会随着页面其余部分的滚动而移动
- fixed ：当页面的其余部分滚动时，背景图像不会移动。
- inherit ：规定应该从父元素继承 background-attachment 属性的设置。
本文地址：https://blog.csdn.net/qq_49310434/article/details/107290566
如对本文有疑问， 点击进行留言回复！！
荐 css的3中水平居中方式和4中水平垂直居中方式及应用情形速记
网友评论