css的几种导入方式
内嵌式
行内式
外链式
导入式
<head>
<!--1. 内嵌式 -->
<style>
p{background-color: pink;}
</style>
</head>
<body>
<!-- 2. 行内式（内联式）-->
<div style="width: 200px ; background-color: blue;">111</div>
</body>
<head>
<!-- 3.外链式 -->
<!-- <link rel="stylesheet" href="/index.css"> -->
<!-- 4.导入式 记得写分号-->
<!-- <style>
@import"./index.css";
</style> -->
</head>
清楚默认样式
<style>
/* <!-- *是选中所有的人标签 --> */
*{
/* 清除外边距和内填充 */
/* margin: 0;
padding: 0; */
}
</style>
<style>
清除排列序号
ul,ol{list-style: none;}
ul{list-style: none;}
ol{list-style: none;}
li{width: 100px;}
</style>
a 标签去除下划线
<style>
a{text-decoration: none;}
</style>
color针对的文字颜色
1.直接写颜色单词
2.rag（三原色）
3.十六进制的值去控制
直接写颜色单词
<style>
div{color:blue}
</style>
rag （三原色）
/* div{color: rgb(red, green, blue);}rgb的值是从0-255中任意一个数 */
/* div{color: rgb(1,22,22);} */
/* 最后一个a代表透明度，是0-1之间值 控制的是文字透明度 */
/* div{color: rgba(1, 22, 2, 0.5);} */
十六进制的值去控制
/* 十六进制简写：aabbcc-abc(最大是到f) */
div{color: #aaccff; }
a标签颜色继承的特殊性
</*如果a 标签没有href属性，就没有默认样式 */ -->
<!-- <a >我是a</a> -->
<!-- 如果a标签有href属性会有默认样式 ：颜色和下划线-->
<a href="#">我是a</a>
<!-- 如果有href属性，会默认把颜色样式覆盖掉，所以我们日常开发中，会单独设置a标签颜色 -->
div{
/* 如果字体是多个英文单词或者中文，需要用引号包裹（单引号或双信号） */
/* 字体是从左往右依次识别，如果第一个识别不成功，会依次往后识别，如果都不成 功，就会展示默认自带的 */
font-family:"宋体","Time New Romn",Times,serif ;
/* 字号大小 单位：px,em,rem,vh,vw */
/* 谷歌默认是16px 最小是12px */
/* font-size: 16px; */
font-size: 40px;
/* 字体风格 */
/* 字体样式-倾斜 针对的是斜体或者i、em标签 */
font-style: italic;
/* 字体风格-正常 */
font-style: normal
}
font-weight:(继承)
用来定义字体的粗细 其实目前浏览器只支持3个级别 细 正常 粗
- normal：正常粗细 可以将默认加粗的字体进行改变为正常 比如 b strong
- bold：加粗
- 100-900 整除100的整数：因为浏览器只支持 细 粗 正常3个 所以100-300 是细，400-500 正常，600-900 加粗
line height(行高）
<style>
*{margin: 0;
padding: 0;}
div{
width: 300px;
height: 300px;
line-height: 300px;
background-color: pink;
/*行高会受字体大小的影响 */
font-size: 30px;
/* line-height: 3; */
/* 如果不带单位指的是当前字体大小的三倍 */
/* line-height:1; */
/* line-height: 40px; */
/* 代表文字本身的百分比 */
/* line-height: 200&; */
/* 如果单行文本想要垂直居中，可以将line-height的值和height的值保持一致 */
}
</style>
text-indent(首航文本缩进）
- 单位是px 缩进的像素
- 2em单位 em是一个相对单位，1em=当前文字的字号大小 如果缩进两个文字 那么2em
- 3只针对块级元素生效
<style>
*{margin: 0;
padding: 0;}
p{
/* 直接写像素 */
/* text-indent: 32px; */
/* 可以说em ,一个em等同于当前字体的大小*/
text-indent: 2em;
}
</style>
text-align:(继承)
-
规定行内的内容如何相对于它的块级父元素水平方向对齐
-
并不是控制元素自己的对齐，只是控制它里边的行内容水平方向对齐
- left：默认 左对齐
- center：居中
- right：右对齐
/* 文字水平对齐方式 默认值是left:左对齐 */
text-align: left;左对齐
text-align: center;居中
text-align: right;右对齐
text-decoration：文本修饰（不继承）
虽然不继承，但是延伸到后代元素，因为后代元素属于这个元素的下划线范围
- none：取消下划线
- underline:下划线
- overline:上划线
- line-through：删除线
13、让块级元素水平居中：margin:0 auto;
div{
width:100px;
height:100px;
background:green;
margin:0 auto;
}
14、边框：border
<style>
div{
width:200px;
height:200px;
边框是一个复合属性
/* border:2px solid darkturquoise; */
border:2px dashed darkturquoise;
}
</style>
15、border 是简写属性，设置所有的边框属性。
可以按顺序设置如下属性：
- border-width
- border-style
- border-color
