1 基础知识
1.1 CSS介绍
CSS:层叠样式表(Cascading style sheets)
作用:美化网页
结构:
<style>
<style>
/* css注释 */
p {
color: blueviolet;
font-size: 30px;
background-color: blanchedalmond;
width: 300px;
height: 100px;
}
</style>
</style>`
1.2 CSS引入方式
1.内嵌式:CSS写到style标签中
通常在head中
2.外联式:单独写在.css文件中
需要link标签引入
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 关系:样式表 -->
<link rel="stylesheet" href="my.css">
</head>
新建.css文件
p{
color: blue;
}
3.行内式:写在style中
<div style="color: aqua; font-size : 20px;">这是div标签</div>
2.基础选择器
2.1 标签
2.2 类
结构:.类名{ css属性名:属性值;}
作用:通过类名,找到页面中所有带有这个类名的标签,设置样式注意点:
1.所有标签上都有class属性,class属性的属性值称为类名(类似于名字)
2.类名可以由数字、字母、下划线、中划线组成,但不能以数字或者中划线开头
3.—个标签可以同时有多个类名,类名之间以空格隔开
4.类名可以重复,一个类选择器可以同时选中多个标签
.red{
color: blueviolet;
}
.size{
font-size: 66px;
}
<div class="red size">这个标签也要变紫色</div>
2.3 id选择器
结构:#id属性值{css属性名:属性值;}
作用:通过id属性值,找到页面中带有这个id属性值的标签,设置样式注意点:
1.所有标签上都有id属性
2. id属性值类似于身份证号码,在一个页面中是唯一的,不可重复的!3.一个标签上只能有一个id属性值
4.—个id选择器只能选中一个标签
2.4 通配符选择器
结构:*{ css属性名:属性值;}
作用:找到页面中所有的标签,设置样式
注意点:
1.开发中使用极少,只会在极特殊情况下才会用到
2.在基础班小页面中可能会用于去除标签默认的margin和padding(后续讲解)
*{
color: yellow;
}
3 字体和文本样式
3.1 字体大小
属性名:font-size
取值:数字+px
注意点:
- 谷歌浏览器默认文字大小是16px
- 单位需要设置,否则无效
3.2 字体粗细
属性名:font-size
取值:
关键字:
正常:normal
加粗:bold
纯数字:
正常:400
加粗:700
不是所有字体都提供了九种粗细,因此部分取值页面中无变化
实际开发中以:正常、加粗两种取值使用最多。
3.3 字体样式(是否倾斜)
属性名:font-style
取值:
- 正常:normal
- 倾斜:italic
3.4 字体
属性名:font-family
常见取值:具体字体1,具体字体2,具体字体3,具体字体4…,字体系列
- 具体字体:“Microsoft YaHei”、微软雅黑、黑体、宋体、楷体等…
- 字体系列:sans-serif、serif、monospa ce等.……
渲染规则:
- 从左往右按照顺序查找,如果电脑中未安装该字体,则显示下一个字体
- 如果都不支持,此时会根据操作系统,显示最后字体系列的默认字体
注意点:
- 如果字体名称中存在多个单词,推荐使用引号包裹
- 最后一项字体系列不需要引号包裹
- 网页开发时,尽量使用系统常见自带字体
保证不同用户浏览网页都可以正确显示
3.5 样式的层叠问题
问题:
- 给同一个标签设置了相同的样式,此时浏览器会如何渲染呢?
结果:
- 如果给同一个标签设置了相同的属性,此时样式会层叠(覆盖),写在最下面的会生效
TIP:
- CSS (Cascading style sheets)层叠样式表
- 所谓的层叠即叠加的意思,表示样式可以一层一层的层叠覆盖
3.6 字体font相关属性的连写
属性名:font(复合属性:一个属性冒号后面书写多个值)
取值:
- font : style weight size family;
省略要求:
- 只能省略前两个,如果省略了相当于设置了默认值,空格隔开
注意点:如果需要同时设置单独和连写形式 - 要么把单独的样式写在连写的下面
- 要么把单独的样式写在连写的里面
3.7 文本样式
1.文本缩进
属性名:text-ident
取值:
- 数字+px
- 数字+em(一个字的大小)
2.文本对齐水平方式
属性名:text-align
取值:
- left 左对齐
- center 居中对齐
- right 右对齐
能让哪些元素水平居中?
-
文本
-
span标签,a标签
-
input标签,img标签
如果需要让以上元素水平居中, text-align : center需要给以上元素的父元素设置
3.文本修饰
属性名: text-decoration
取值:
属性值 | 效果 |
---|---|
underline | 下划线(常用) |
line-through | 删除线(不常用) |
overline | 上划线(几乎不用) |
none | 无装饰线(常用) |
开发中会使用text-decoration : none ;清除a标签默认的下划线
3.8 line-hight行高
1.行高
作用:控制一行的上下行间距
属性名:line-height
取值:
- 数字+px
- 倍数(当前标签font-size的倍数)
应用:
1.让单行文本垂直居中可以设置line-height:文字父元素高度
2.网页精准布局时,会设置line-height : 1可以取消上下间距
行高与font连写的注意点:
- 如果同时设置了行高和font连写,注意覆盖问题
- font : style weight size/line-height family ;
3.9 字体和文本样式
- 标签水平居中: margin: 0 auto
4 调试工具
F12
·
·
·