基础认知
CSS简称层叠样式表 Cascading style sheets 作用是给页面中HTML标签设置样式
其中CSS有三种引入方式,分别是内嵌式,外联式和行内式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 内嵌式 -->
<!-- <style>
p {
color: red;
}
</style> -->
<!-- 外联式 -->
<!-- <link rel="stylesheet" href="./02.css"> -->
</head>
<body>
<p>我是一个p标签</p>
<!-- 行内式 -->
<p style="color: green;">我也是一个p标签</p>
</body>
</html>
基础选择器
- 标签选择器
通过标签名,找到页面中所有这类标签,设置样式,选择的是一类标签,并不是单独的某一个;无论嵌套关系有多深,都能找到对应的标签。
p {
color: red;
}
/* div {
color: red;
} */
- 类选择器
所有标签上都有class属性,它的属性值称为类名
类名可以由数字,字母,下划线,中划线组成,但不能以数字或中划线开头
一个标签可以同时有多个类名,类名之间用空格隔开
类名可以重复,一个类选择器可以同时选中多个标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.red {
color: red;
}
.yellow {
color: yellow;
}
.pink {
color: pink;
}
.big {
font-size: 30px;
}
</style>
</head>
<body>
<!-- 要求:让下面三个标签变成想要的颜色 -->
<p class="red big">小红</p>
<p class="yellow">小黄</p>
<p class="pink">小粉</p>
<p class="red">我也想变红</p>
</body>
</html>
- id选择器
ID类似于身份证号码,在一个页面中是唯一的,不可重复的。
一个标签上只能有一个ID属性值
一个ID选择器只能选中一个标签
- 通配符选择器
找到页面中所有的标签,设置样式,目前来说只会在一种情况下遇到。
去除标签默认的margin和padding
字体和文本样式
- 四个常用的字体样式以及连写语法
font-size 字体大小,取指为数字+px 谷歌默认文字大小是16px
font-weight 字体粗细 700为粗,400为细
font-style normal正常 italic斜体字体。字体分为三种。
font-family 规则如下。从左往右按照顺序查找,如果电脑中未安装该字体,则显示下一个字体。如果都不支持,会根据操作系统,显示最后字体系列的默认字体
最后一项字体系列不需要引号包裹
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
有关样式的层叠问题,样式会进行覆盖,写在最下面的会生效。
字体font的属性连写 font:style weight size family (swsf)
只能省略前两个,如果省略就相当于设置默认值
- 文本样式
文本缩进text-indent
数字+px 或者 数字+em(推荐)
因为1em=当前标签的font-size的大小,我们一般设置为text-indent=2em
文本水平对齐方式text-align,left-center-right
如果需要让文本水平居中,属性给文本的父元素设置
文本修饰 text-decoration
我们一般会设置为none 来清除a标签默认的下划线
水平居中的两种方法
- text-align:center 能让文本 span a input img标签水平居中,此时我们需要给以上元素的父元素设置该属性
- margin:0 auto 能让div p h 水平居中 直接给当前元素本身设置即可,一般针对于固定宽度的盒子,如果大盒子没有设置宽度,此时会默认占满父元素的宽度
line-height行高 控制一行的上下行间距
单行文本垂直居中可以设置line-height为文字父元素高度
网页精准布局 line-height:1可以取消上下间距