文章目录
一、 前端
构成 | 语言 | 描述 |
---|---|---|
结构 | HTML | 网页元素和内容 |
表现 | CSS | 网页元素的外观和位置等页面样式(如颜色、大小等) |
行为 | JavaScript | 网页交互 |
二、CSS
2.1 css概念
CSS,层叠样式表(Cascading Style Sheet),给网页中的HTML标签设置样式
2.2 CSS样式引入方式
2.2.1 外部样式
CSS写在一个单独的.css
文件中,通过link标签在网页中引入
<link rel="stylesheet" href="文件路径">
2.2.2 内部样式
CSS写在网页的head标签中,用style标签包裹
<style>
/* 写在style标签中的样式 */
</style>
2.2.3 行内样式
CSS写在标签的style属性中
<标签名 style="行内样式写在这"></标签名>
三种CSS样式引入方式的区别
引入方式 | 书写位置 | 作用范围 | 使用场景 |
---|---|---|---|
外部样式 | CSS写在单独的css文件中,通过link标签引入 | 多个页面 | 项目中 |
内部样式 | CSS写在head头部style标签中 | 当前页面 | 案例演示中 |
行内样式 | CSS写在标签的style属性中 | 当前标签 | 配合js使用 |
2.3 基础选择器
选择器,就是选取(查找)需要设置样式元素的方式
选择器 {
属性名: 属性值;
}
属性名和属性值合称为css属性
2.3.1 元素选择器
通过元素名称,选取(查找)相同元素,然后对相同元素设置CSS样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>我爱中国</p>
<p>我爱人民</p>
<div>我爱家乡</div>
</body>
</html>
小结:
1、无论嵌套多少层,只要元素名称相同都会被找到
2.3.2 类选择器
通过类名称,找到页面中所有带这个类名称的元素,然后对其设置CSS样式
类选择器,也有人叫class选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.color-style {
color: red;
}
</style>
</head>
<body>
<p class="color-style">我爱中国</p>
<p>我爱人民</p>
<div class="color-style">我爱家乡</div>
</body>
</html>
小结:
1、所有元素都有class属性,class属性的属性值叫类名
2、类名由数字、字母、下划线、中划线组成,不能以数字、中划线开头
3、一个元素可以有多个类名,类名之间用空格隔开
2.3.3 id选择器
通过元素id属性的属性值,找到页面中带这个id属性值的元素,然后对其设置CSS样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#one {
color: red;
}
</style>
</head>
<body>
<p id="one">我爱中国</p>
<p id="two">我爱人民</p>
<div>我爱家乡</div>
</body>
</html>
小结:
1、所有元素都有id属性
2、id属性值在一个页面中是唯一的
3、一个元素只能有一个id属性值
2.3.4 通配符选择器
查找页面中所有的元素,然后对其设置CSS样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
* {
color: red;
}
</style>
</head>
<body>
<p id="one">我爱中国</p>
<p id="two">我爱人民</p>
<div>我爱家乡</div>
</body>
</html>
小结:
1、通常用于网页重置样式,不常用
2.3.5 后代选择器
根据选择器查找符合条件的元素,再根据后代选择器查找符合条件的元素,然后对其设置CSS样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#one p {
color: red;
}
</style>
</head>
<body>
<div id="one">
<p>我爱中国</p>
<p>我爱人民</p>
<div>我爱家乡</div>
<div>
<p>我爱中国</p>
<p>我爱人民</p>
</div>
</div>
<div id="two">
<p>我爱中国</p>
<p>我爱人民</p>
<div>我爱家乡</div>
<div>
<p>我爱中国</p>
<p>我爱人民</p>
</div>
</div>
</body>
</html>
2.3.6 群组选择器
根据多个选择器各自查找符合条件的元素,然后对其设置CSS样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p,h3 {
color: red;
}
</style>
</head>
<body>
<p>我爱中国</p>
<h3>我爱人民</h3>
<div>我爱家乡</div>
</body>
</html>
2.4 字体样式
字体样式,针对文字本身样式
字体相关的CSS属性
属性 | 说明 |
---|---|
font-family | 字体类型 |
font-size | 字体大小 |
font-weight | 字体粗细 |
font-style | 字体风格 |
color | 字体颜色 |
2.4.1 字体类型
语法:
font-family: 字体1,字体2,字体3...;
说明:
1、font-family属性可是设置多个属性值,用英文逗号隔开,生效顺序是从左到右。浏览器默认字体类型一般是"宋体"
2、字体类型只有一个英文单词,则不需要加上引号;字体类型是多个英文单词或中文的,则需要加上双引号
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p {
font-family: Arial;
}
h3 {
font-family: monospace;
}
div {
font-family: "新宋体";
}
</style>
</head>
<body>
<p>我爱中国</p>
<h3>我爱人民</h3>
<div>我爱家乡</div>
</body>
</html>
2.4.2 字体大小
语法:
font-size: 数字 + px
说明:
1、px是像素单位,单位需要设置,否则无效
2、谷歌浏览器默认文字大小是16px
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p {
font-size: 18px;
}
div {
font-size: 36px;
}
</style>
</head>
<body>
<p>我爱中国</p>
<div>我爱家乡</div>
</body>
</html>
2.4.3 字体粗细
语法:
font-weight: normal/bold/100~900
说明:
属性值 | 说明 |
---|---|
normal | 正常(默认值) |
bold | 较粗 |
100~900 | 取100~900九种数值,但部分字体没有9种粗细,设置可能不生效 |
实际开发一般会设置bold,不设置默认是normal
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p {
font-weight: normal;
}
div {
font-weight: bold;
}
</style>
</head>
<body>
<p>我爱中国</p>
<div>我爱家乡</div>
</body>
</html>
2.4.4 字体风格
语法:
font-style: 取值
说明:
属性值 | 说明 |
---|---|
normal | 正常(默认值) |
italic | 斜体 |
oblique | 斜体 |
不是所有字体都有italic属性值,如果没有italic的,则用oblique
font连写
语法:
font: style weight size family;
说明:
1、可以省略前两项,省略了相当于设置了默认值
不常用,作为了解
2.4.5 字体颜色
语法:
color: 颜色值
说明:
color属性取值常用有两种,一种是关键字(比如red、green、blue),另外一种是16进制RGB值(#000000,#FFFFFF)
问题一:给同一个元素设置了相同的属性样式,哪个生效?
答:样式会层叠(覆盖),写在最后面的会生效。
问题二:html里面有注释,css有没有注释,如何写?
<style>
/* 采用元素选择器给p元素设置css样式 */
p {
color: #000000; /* p元素字体颜色为黑色 */
}
</style>
2.5 文本样式
文本样式,针对段落的排版效果
文本相关CSS属性
属性 | 说明 |
---|---|
text-indent | 首行缩进 |
text-align | 水平对齐 |
text-decoration | 文本修缮 |
text-transform | 大小写转换 |
line-height | 行高 |
letter-spacing | 字母间距 |
word-spacing | 词间距 |
2.5.1 首行缩进
语法:
text-indent: 像素值
说明:
缩进大小和字体大小是有关的,缩进1个字的空间等同于1个字的字体大小。
<!DOCTYPE html>
<html>
<head>