目录
[五、CSS属性: 字体font](#五、CSS属性: 字体font)
一、CSS的介绍
1.什么是CSS?
CSS是 层叠样式表(Cascading Style Sheets) 的缩写,是页面美化的一种编程语言
2.CSS作用是什么?
给页面中的HTML标签设置样式进行美化
二、CSS语法规则
1.CSS写在哪里?
CSS写在<style></style>标签中,或者CSS文件中,或者HTML的style属性里
2.CSS的书写格式(常用)
CSS选择器 {
CSS属性 : 属性值 ;
······
}
三、CSS引入方式
1.内嵌式
css写在style标签中,style标签一般写在head标签中,title标签下面
html
<!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>
</head>
<body>
<p>css初体验</p>
</body>
</html>
2.外联式
另创一个.css文件,专门写css,然后html文件引入css文件
然后通过link标签引入
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css文件名.css"></link>
</head>
<body>
<p>css初体验</p>
</body>
</html>
p {
color : red;
}
3.行内式
写在标签的style属性中
一般配合js使用
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p style="color:red;">css初体验</p>
</body>
</html>
四、CSS的基础选择器
选择器的作用:选中页面中对应的标签(定位标签)
1.标签选择器
概念:标签选择器就是以标签名命名的选择器
结构:标签名 { }
作用:通过标签名选中页面中所有这类标签
2.类选择器
概念:类选择器就是以类名命名的选择器
结构:.类名 { }
作用:通过类名,选中页面中所有带有这个类名的标签
知识补充:类(class)
类(class)是html标签的一个属性,它的属性值是一个类名
相当于给这个标签起了一个名字
格式: class = "类名"
通常给css使用,用于做美化工作
温馨提示:·
1.由于是代表名字,所以不同标签类名
可以
相同2.一个标签可以有多个名字,所以
可以有多个类名
格式:class = "类名1 类名2"
3.类名要遵循标识符规则
3.id选择器
概念:id选择器就是以id名命名的选择器
结构:#id名 { }
作用:通过id名,找到页面中所有带有这个id名的标签,设置样式
知识补充: id
id是html标签的一个属性,它的属性值是id名
相当于给标签起了一个独一无二的id
格式:id = "id名"
通常给js使用,不做美化工作
温馨提示:·
1.由于是代表独一无二id,所以不同标签id名
不可以
相同2.一个标签
只可以有一个id
3.id名要遵循标识符规则
4.通配符选择器
概念:通配符选择器就全选选择器
格式:* { }
作用:找到页面中所有的标签,设置样式
常用来用来去除标签默认的margin和padding(后面学习)
五、CSS属性:字体font
1.字体样式
属性名: font-style
属性值:
正常:normal
倾斜:italic
css
* {
font-style: normal;
font-style: italic;
}
2.字体粗细
属性名: font-weight
属性值:
1.关键字
正常:normal
加粗:bold(bou的)
2.数字(常用)
正常:400
加粗:700
css
* {
font-weight: normal;
font-weight: bold;
font-weight: 400;
font-weight: 700;
}
3.字体大小
属性名: font-size
属性值:数字+px
注意:谷歌浏览器默认16px大小字体
css
* {
font-size: 20px;
}
4.字体类型
属性名:font-family
属性值:具体字体1,具体字体2,具体字体3,······
具体字体例
微软雅黑、黑体、宋体、楷体·······
渲染规则:从左往右顺序查找电脑安装的字体
温馨提示:开发时,尽量选择系统常见自带的字体
css
* {
font-family: 微软雅黑,黑体,宋体;
}
5.字体复合属性
属性名:font
属性值:style值 weight值 size值 family值
温馨提示:可以省略前两个,省略的为默认值,size/后面乘以对应的行高倍数来设置行高
css
* {
font: italic 700 10px 宋体;
font: 19px 微软雅黑;
font: 16px/1.5 "Helvetica Neue", "Helvetica", "Arial", "Microsoft Yahei";
}
六、CSS属性:文本text
1.文本(首行)缩进
属性名:text-indent
属性值:
1.数字+px(需要参考font-size的px)
2.数字+em (推荐使用: 1em = 当前标签的font-size的大小)
css
* {
text-indent: 50px; 如果font-size是50px则表示缩进1个字符
text-indent: 2em; 缩进2个字符
}
2.文本水平对其方式
属性名:text-align
属性值:
左对齐:left
居中对其:center
右对齐:right
温馨提示:如果需要让文本(p\h\div)水平居中,text-align属性给文本所在标签设置
css
* {
text-align: left;
text-align: center;
text-align: right;
}
3.text-align: center 还能能让哪些元素水平居中?
注意:如果需要让以下元素水平居中,需要给以上元素的父元素设置
- input标签、span标签、img标签、a标签
html
<div>
<span>水平居中</span> 需要给div设置,给span设置无效果
</div>
<div class="gg">
<div ckass="dd">
<span>水平居中</span> 需要给gg和dd设置都可以,给span设置无效
</div>
</div>
3.文本装饰
属性名:text-decoration
属性值
无装饰线:none
下划线:underline
删除线:line-through
温馨提示:开发中经常使用text-decoration: none 来清除a标签的下划线
css
* {
text-decoration: none;
text-decoration: underline;
text-decoration: line-through;
}
a {
text-decoration: none;
}
4.文本行高
属性名:line-height
属性值
1.数字+px
2.倍数(当前标签font-size的倍数)
温馨提示:行高一般用于让内容垂直居中,开发中可以使用line-height: 1 取消上下间距
行高
行高由
上间距+文字高度+下间距组成
文字高度是保持不变的,在变的是上间距和下间距
css
* {
line-height: 20px;
line-height: 2;
}
七、CSS属性:颜色
1.字体颜色
属性名:color
2.背景颜色
属性名: background-color
3.两者的属性值
-
颜色英文单词:red、blue、·····
-
rgb表示:rgb(数字,数字,数字)
-
rgba表示:gba(数字,数字,数字,不透明度数字) a表示透明度,数字在0-1范围内
-
十六进制法:#十六进制数
温馨提示:开发中ui设计师会把颜色编号写在旁边,不需要我们去记忆
css
* {
color: red;
color: rgb(1,2,3);
color: rgba(1,2,3,0.5);
color: #0000;
}
八、样式层叠问题
问题:如果给同一个标签设置了相同的样式,此时浏览器如何渲染?
结果:覆盖,写在上面的被写在下面的样式覆盖,生效下面的
css
* {
color: red;
color: blue;
}
* {
color: green;
}
九、谷歌浏览器的调试工具
1.排错
打开页面右击检查
看到elements这行,表示元素
左边表示html标签右边表示css样式
当出现css被划线了,代表该css未被使用
如果出现黄色三角,则代表该附近css语法错误
2.调试
样式那块区域打勾代表使用该样式,可以去掉打勾不使用该样式
也可以双击属性值,然后修改属性值
也可以双击属性值,然后按tab换行,换到最后一行可以添加css语句
这些操作都会使页面发生变化,有助于我们调试
温馨提示:这些调试修改的样式,是不会改变CSS的代码的,需要我们调试完对应样式后,进入到代码里面修改成需要的
十、拓展:标签(盒子)水平居中的方法
属性名:margin
属性值:0 auto
css
* {
margin: 0 auto;
}