一、基础认知
1.1css初识
css写在style标签中，style标签一般写在head标签里面，title标签下面
1.2css引入方式
内嵌式：css写在style标签中
外联式：css写在单独css文件中（通过link标签在网页中引入）
行内式：css写在标签style属性中（配合js使用，基础不推荐）
| 引入方式 | 书写位置 | 作用范围 | 使用场景 |
|---|---|---|---|
| 内嵌式 | css写在style标签中 | 当前页面 | 小案例 |
| 外嵌式 | css写在单独的css文件中，通过link标签引入 | 多个页面 | 项目中 |
| 行内式 | css写在标签的style属性中 | 当前标签 | 配合js使用 |
二、基础选择器
1.1标签选择器
选中的所有标签都生效
结构：
标签名{css属性名：属性值;}
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p{
color: red;
}
</style>
</head>
<body>
<p>文字</p>
</body>
</html>
image.png
1.2类选择器
通过类名，找到页面中所有带有这个类名的标签，设置样式
结构：.类名{css属性名：属性值;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.red{
color: red;
}
</style>
</head>
<body>
<p class="red">文字</p>
</body>
</html>
1.3id选择器
通过id属性值，找到页面中带有这个id属性值的标签，设置样式
结构：#id属性值{css属性值：属性值；}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#pa{
color: aqua;
}
</style>
</head>
<body>
<p id="pa">文字</p>
</body>
</html>
1.4通配符选择器
把样式应用到页面中所有的标签
结构:*{css属性名：属性值；}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
color: coral;
}
</style>
</head>
<body>
<h1>今天不学习，明天变垃圾</h1>
<p id="pa">学无止境</p>
</body>
</html>
image.png
三、字体和文字样式
1.字体样式
1.1字体大小 font-size
font-size：数字+px
1.2字体粗细 font-weight
font-weight
取值：
| 正常 | 加粗 |
|---|---|
| normal | bold |
| 400 | 700 |
纯数字：100~900的整百整数
1.3字体样式 font-style
font-style（是否倾斜）
取值
正常（默认值）normal
倾斜 italic
1.4 字体系列 font-family
取值字体名字
2.文本样式
1.文本缩进 text-indent
取值数字+px;或者数字+em，推荐后者
2.文本水平对齐方式 text-align：center
能让下面这些居中：
1.文本
2.span标签，a标签
3.input标签，img标签
3.文本修饰 text-decoration
| 属性值 | 效果 |
|---|---|
| underilne | 下划线 |
| line-through | 删除先 |
| overline | 上划线 |
| none | 无装饰线 |
扩展：开发中会使用text-decoration:none清除a标签默认的下划线
3.line-height行高
作用：控制一行的上下行间距
取值
数字+px；
倍数
当line-height:1；可以取消上下间距
如何让div、p、h水平居中？
可以通过 margin： 0 auto；实现
网友评论