【CSS】CSS还不会？一文带你深入浅出！
文章目录
- 一、什么是CSS？
- 二、CSS基本语法规范
- 三、CSS的引入方式
- 四、CSS选择器
-
- 1. 标签选择器
- 2. 类选择器
- 3. 通配符选择器
- 4. 后代选择器
- 5. 伪类选择器
- 五、常用元素属性
-
- 1. 字体属性
- 2. 文本属性
- 3. 背景属性
- 六、圆角矩形和元素显示模式
-
- 1. 圆角矩形
- 2. 元素显示模式
- 七、盒模型
- 八、chrome调试工具和弹性布局
-
- 1. chrome调试工具
- 2. 弹性布局
- 九、实战案例
-
- 1. 新闻页面实现
- 2. 小广告
- 3. 百度热榜实现
一、什么是CSS？
CSS指的是层叠样式表 (Cascading Style Sheets)。它能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离。
HTML用来决定页面的结构，CSS用来控制页面的展示效果。
二、CSS基本语法规范
选择器 + {一条/N条声明}
选择器决定针对谁修改 (找谁)声明决定修改啥 (干啥)声明的属性是键值对使用 ; 区分键值对, 使用 : 区分键和值
这里我们需要注意的是，CSS要写到style标签中，style标签一般放到head标签内部。下面我们举个例子看一下：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
p {
color: red;
font-size: 40px;
}
style>
head>
<body>
<p>hello worldp>
<p>hello 程序人p>
body>
html>
注意：
- CSS 要写到
style标签中(后面还会介绍其他写法)。- style 标签可以放到页面任意位置，一般放到 head 标签内。
- CSS 使用
/* */作为注释。 (使用 ctrl + / 快速切换)
三、CSS的引入方式
内部样式
写在 style 标签中. 嵌入到 html 内部。理论上来说 style 放到 html 的哪里都行，但是一般都是放到 head 标签中。这种写法在实际开发中并不常用。
优点:这样做能够让样式和页面结构分离。缺点:分离的还不够彻底，尤其是 css 内容多的时候
行内样式
通过 style 属性，来指定某个标签的样式，只适合于写简单样式。只针对某个标签生效。
<p style="color: green;">hello worldp>
<p>hello 程序人p>
<h1 style="color: blue; font-size: 80px;">你好h1>
这里我们可以看到，第一个样式表中的red颜色被覆盖了
缺点:不能写太复杂的样式，这种写法优先级较高，会覆盖其他的样式
外部样式
使用外部样式是实际开发中最常用的方式。它分为两步：
- 创建一个
css文件 - 使用
link标签引入css
- 创建 style.css 文件
p {
color: red;
font-size: 80px;
}
- 使用
link标签引入css
<link rel="stylesheet" href="[CSS文件路径]">
四、CSS选择器
选择器的功能： 选中页面中指定的标签元素，要先选中元素，才能设置元素的属性，就好比 SC2, War3 这样的游戏，需要先选中单位，再指挥该单位行动。
选择器的种类
基础选择器：单个选择器构成- 标签选择器
- 类选择器
- id 选择器
- 通配符选择器
复合选择器：把多种基础选择器综合运用起来- 后代选择器
- 子选择器
- 并集选择器
- 伪类选择器
1. 标签选择器
标签选择器能快速为同一类型的标签都选择出来，但是不能差异化选择
p {
color: red;
font-size: 40px;
}
2. 类选择器
通过类别名称选择具有特定类别的 HTML 元素。类选择器以. 开头，后面跟着类别名称。在HTML标签中可以使用class属性来设置类别名称。
如下代码，.eat 选择器将选择所有具有类别为 “eat” 的元素，.sleep 选择器将选择所有具有类别为 “sleep” 的元素，.game 选择器将选择所有具有类别为 “game” 的元素。
.eat {
color: red;
}
.sleep {
color: orange;
}
.game {
color: blue;
}
除此之外，一个标签使用多个类名，在设置时不同的类名中间用空格分隔开，这样做可以把相同的属性提取出来, 达到简化代码的效果。
"box red">
"box green">
"box red">
3. 通配符选择器
使用 * 的定义, 选取所有的标签。
举例说明一下，写入以下代码后，整个页面的背景都会被设置成一种颜色
* {
background-color: burlywood;
}
通配符选择器在实际应用开发过程中用来针对页面中所有的元素默认样式进行消除，主要用来消除边距。
4. 后代选择器
又叫包含选择器. 选择某个父元素中的某个子元素
元素1 元素2 {样式声明}
- 元素 1 和 元素 2 要使用空格分割
- 元素 1 是父级, 元素 2 是子级, 只选元素 2 , 不影响元素 1
代码示例: 把 ol 中的 li 修改颜色，不影响 ul中li的颜色
<style>
ol li {
color: green;
}
style>
代码示例: 元素2 不一定非是儿子, 也可以是孙子
代码示例: 可以是任意基础选择器的组合。 (包括类选择器, id 选择器)
5. 伪类选择器
这里我们重点讲解一下链接伪类选择器。那么伪类选择器主要用来实现一种什么样的效果呢？
a:link选择未被访问过的链接a:visited选择已经被访问过的链接a:hover选择鼠标指针悬停上的链接a:active选择活动链接(鼠标按下了但是未弹起)
<style>
a {
color: black;
}
a:hover {
color: red;
}
a:active {
color: green;
}
style>
示例二：同样对于input按钮标签也同样适用
<style>
input:hover {
color: red;
}
input:active {
color: green;
}
style>
五、常用元素属性
1. 字体属性
字体设置
font-family : '所要设的字体';——字体类型设置font-size: 字体大小;——字体大小设置
- 字体名称可以用中文, 但是不建议。
- 多个字体之间使用逗号分隔。(从左到右查找字体, 如果都找不到, 会使用默认字体)
- 如果字体名有空格, 使用引号包裹。
- 建议使用常见字体, 否则兼容性不好。
<style>
div {
font-family: '宋体';
font-size: 80px;
}
style>
字体颜色
字体颜色的三种设置方法：预定义的颜色值(直接是单词)[最常用]、十六进制形式和RGB 方式
color: red;color: #ff0000;color: rgb(255, 0, 0);
<style>
div {
font-family: '宋体';
color: #ff0000;
}
p {
font-family: '宋体';
color: rgb(0, 0, 255);
}
style>
字体粗细
font-weight: 数值;
<style>
div {
font-weight: lighter;
}
p {
font-weight: bolder;
}
style>
字体样式
font-style: 样式;
<style>
div {
font-style: italic;
}
p {
font-style: normal;
}
style>
2. 文本属性
对齐方式
text-align: 选项;
文本排列属性是用来设置文本的水平对齐方式。文本可居中或对齐到左或右，两端对齐，当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。
center: 居中对齐left: 左对齐right: 右对齐
<style>
h1 {
text-align: left;
}
h2 {
text-align: center;
}
h3 {
text-align: right;
}
style>
文本修饰
text-decoration: [值];
常用取值：
underline下划线. [常用]none啥都没有. 可以给 a 标签去掉下划线.overline上划线. [不常用]line-through删除线 [不常用]
<style>
h1 {
text-align: left;
text-decoration: overline;
}
h2 {
text-align: center;
text-decoration: line-through;
}
h3 {
text-align: right;
text-decoration: underline;
}
style>
文本缩进
控制段落的 首行 缩进 (其他行不影响)
text-indent: [值];
注意：
- 单位可以使用
px或者em。 - 使用
em作为单位更好，1 个em就是当前元素的文字大小。 - 缩进可以是负的, 表示往左缩进. (会导致文字就冒出去了)
<style>
p {
text-indent: 2em;
}
style>
行高
行高指的是上下文本行之间的基线距离
line-height: [值];
<style>
p {
text-indent: 2em;
line-height: 40px;
}
style>
3. 背景属性
背景颜色
background-color: [指定颜色]
<style>
body {
background-color: #d6c1e9;
}
style>
背景图片
background-image: url(图片地址); 比 image 更方便控制位置(图片在盒子中的位置)；背景颜色和背景图片可以同时存在，背景图片在背景颜色的上方
注意:
- url 不要遗漏.
- url 可以是绝对路径, 也可以是相对路径
- url 上可以加引号, 也可以不加
<style>
div {
background-image: url(./图片.png);
}
style>
我们发现图片展示不全，需要设置一下div背景的宽和高。
<style>
div {
background-image: url(./图片.png);
width: 700px;
height: 300px;
}
style>
背景平铺
background-repeat: [平铺方式]
重要取值:
- repeat: 平铺
- no-repeat: 不平铺
- repeat-x: 水平平铺
- repeat-y: 垂直平铺
<style>
div {
background-image: url(./图片.png);
background-repeat: repeat-x;
width: 1200px;
height: 300px;
}
style>
背景位置
background-position: x y;
参数有三种风格:
- 方位名词: (top, left, right, bottom)
- 精确单位: 坐标或者百分比(以左上角为原点)
- 混合单位: 同时包含方位名词和精确单位
<style>
div {
background-image: url(./图片.png);
background-repeat:no-repeat;
width: 600px;
height: 300px;
background-position: right;
}
style>
背景尺寸
background-size指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定。CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小，你指定的大小是相对于父元素的宽度和高度的百分比的大小。
<style>
div {
background-image: url(./图片.png);
background-repeat:no-repeat;
width: 600px;
height: 300px;
background-size:80px 60px;
}
style>
六、圆角矩形和元素显示模式
1. 圆角矩形
border 是边框属性的简写属性。我们可以通过 border-radius 使边框带圆角效果。
基本用法
border-radius: length;length 是内切圆的半径. 数值越大, 弧线越强烈。
<style>
div {
width: 400px;
height: 200px;
border: 2px green solid;
border-radius: 10px;
}
style>
生成圆形
让 border-radius 的值为正方形宽度的一半或者用 50% 表示宽度的一半。
<style>
div {
width: 400px;
height: 400px;
border: 2px green solid;
border-radius: 200px;
}
style>
生成圆角矩形
让 border-radius 的值为矩形高度的一半即可
<style>
div {
width: 400px;
height: 200px;
border: 2px green solid;
border-radius: 100px;
}
style>
展开写法
border-radius 是一个复合写法. 实际上可以针对四个角分别设置。
border-top-left-radius: 20px;
border-top-right-radius: 40px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 40px;
等价于
border-radius: 20px 40px 20px 40px;
2. 元素显示模式
在 CSS 中, HTML 的标签的显示模式有很多。
此处只重点介绍两个:
- 块级元素
- 行内元素
块级元素
例如：
特点:
- 独占一行
- 高度, 宽度, 内外边距, 行高都可以控制.
- 宽度默认是父级元素宽度的 100% (和父元素一样宽)
- 是一个容器(盒子), 里面可以放行内和块级元素
文字类的元素内不能使用块级元素，p 标签主要用于存放文字, 内部不能放块级元素, 尤其是 div
行内元素/内联元素
例如：
特点:
- 不独占一行, 一行可以显示多个
- 设置高度, 宽度, 行高无效
- 左右外边距有效(上下无效). 内边距有效.
- 默认宽度就是本身的内容
- 行内元素只能容纳文本和其他行内元素, 不能放块级元素
行内元素和块级元素的区别
- 块级元素独占一行, 行内元素不独占一行。
- 块级元素可以设置宽高, 行内元素不能设置宽高。
- 块级元素四个方向都能设置内外边距, 行内元素垂直方向不能设置。
改变显示模式
使用 display 属性可以修改元素的显示模式，可以把 div 等变成行内元素, 也可以把 a , span 等变成块级元素。
display: block改成块级元素 [常用]display: inline改成行内元素 [很少用]display: inline-block改成行内块元素
<style>
a {
display: block;
}
style>
七、盒模型
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model)：
Margin(外边距)- 清除边框外的区域，外边距是透明的。Border(边框)- 围绕在内边距和内容外的边框。Padding(内边距)- 清除内容周围的区域，内边距是透明的。Content(内容)- 盒子的内容，显示文本和图像。
边框
基础属性：
- 粗细:
border-width- 样式:
border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框- 颜色:
border-color
<style>
div {
width: 200px;
height: 100px;
border-color: black;
border-style: solid;
border-width: 10px;
}
style>
除此之外，边框的粗细、颜色和样式还支持简写, 没有顺序要求：
border: 1px solid red;
这里我们看到这里的边框变成了 219.2*119.2 ，这是因为加上了边框的厚度，想要解决这个问题就必须加入一行：box-sizing: border-box;
内边距
padding 设置内容和边框之间的距离。可以给四个方向都加上边距：
- padding-top
- padding-bottom
- padding-left
- padding-right
没加padding之前：
加上padding之后：
<style>
div {
width: 200px;
height: 100px;
padding-left: 5px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
}
style>
可以把多个方向的 padding 合并到一起。(四种情况都要记住, 都很常见)
padding: 5px;表示四个方向都是 5pxpadding: 5px 10px;表示上下内边距 5px, 左右内边距为 10pxpadding: 5px 10px 20px;表示上边距 5px, 左右内边距为 10px, 下内边距为 20pxpadding: 5px 10px 20px 30px;表示 上5px, 右10px, 下20px, 左30px (顺时针)
外边距
margin控制盒子和盒子之间的距离，可以给四个方向都加上边距：
- margin-top
- margin-bottom
- margin-left
- margin-right
没有设置外边距之前：三个边框紧紧挨在一起。
<style>
div {
border: 5px solid green;
width: 200px;
height: 50px;
margin-top: 5px;
}
style>
加了外边框之后：边框之间有了间隙。
块级元素水平居中
三种写法均可：
margin-left: auto; margin-right: auto;margin: auto;margin: 0 auto;
八、chrome调试工具和弹性布局
1. chrome调试工具
-
按F12进入开发者工具
-
选择按钮可以选择页面中的某个布局。
-
被选中模块的html代码和样式表
-
前后端交互相关调试工具和JS调试工具
2. 弹性布局
创建一个 div, 内部包含三个 span：
<div>
<span>1span>
<span>2span>
<span>3span>
div>
<style>
div {
width: 100%;
height: 150px;
background-color: red;
}
div span {
background-color: green;
width: 100px;
width: 100px;
}
style>
此时看到的效果为：
当我们给 div 加上 display:flex; 之后, 效果为：
我们看到span有了高度，它不再是”行内元素“了。
再给 div 加上 justify-content: space-around; 此时效果为：
此时可以看到这些 span 已经能够水平隔开了。
把 justify-content: space-around; 改为 justify-content: flex-end; 可以看到此时三个元素在右侧显示了：
在上面的代码中, 我们是让元素按照主轴的方向排列, 同理我们也可以指定元素按照侧轴方向排列：align-items
align-items: start;：
align-items: center;：
align-items: end;：
九、实战案例
1. 新闻页面实现
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.title {
text-align: center;
font-size: 40px;
font-family: '微软雅黑';
font-weight: bolder;
}
.time {
text-align: right;
}
p {
text-indent: 2em;
}
.picture {
text-align: center;
}
img {
width: 200px;
height: 300px;
}
.finnaly {
text-align: right;
}
style>
head>
<body>
<div>
<div class="title">这是新闻标题div>
<p class="time">2020年3月10日p>
<hr>
div>
<div>
<p>这是新闻第一段这是新闻第一段这是新闻第一段这是新闻第一段这是新闻第一段这是新闻第一段这是新闻第一段这是新闻第一段
这是新闻第一段这是新闻第一段这是新闻第一段这是新闻第一段这是新闻第一段这是新闻第一段这是新闻第一段这是新闻第一段
这是新闻第一段这是新闻第一段这是新闻第一段这是新闻第一段这是新闻第一段这是新闻第一段这是新闻第一段这是新闻第一段
p>
<p>这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段
这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段
这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段
这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段
p>
<div class="picture">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQsPHf1t0btLrJT-BpcVPhXAM68oLZeklPhIw&usqp=CAU" alt="">
div>
<p>这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段
这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段
这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段
p>
<p>这是新闻第四段这是新闻第四段这是新闻第四段这是新闻第四段这是新闻第四段这是新闻第四段这是新闻第四段这是新闻第四段
这是新闻第四段这是新闻第四段这是新闻第四段这是新闻第四段这是新闻第四段这是新闻第四段这是新闻第四段这是新闻第四段
这是新闻第四段这是新闻第四段这是新闻第四段
p>
div>
<div class="finnaly">这是落款div>
body>
html>
效果如下：
2. 小广告
- 预期效果
- 如何测量尺寸
- 需要获取到当前界面上的尺寸/颜色信息，例如：图片大小，边距大小，文字大小，文字颜色，背景颜色等。
- 此处可以用到一个简单轻量的网页版PS来进行测量：在线PS软件
使用步骤：
- 使用截图工具截取目标图片，粘贴到网页PS中（直接
ctrl + v即可）- 使用
ctrl + ‘+’放大- 使用标尺固定好边界
- 是用矩形工具测量好尺寸
- 使用取色器获取颜色
- 实际开发中一般不需要手动测量，美工人员会给前端提供设计稿，设计稿中会包含所有尺寸颜色的详细信息。
注意：
- 测量时要注意当前页面是否有缩放，使用
ctrl + 0还原缩放效果。- 测量时候还需要注意当前系统是否有缩放（在系统设置中搜索“缩放与布局”），改为100%
- 测量
- 整个区域
308*204，边框颜色d8dad8，实心，背景fcfffc- 标题区域高度
40px，下边框为圆点e8ebe8，文字大小18px，颜色9e9d9a距离左侧20px- 正文部分文字大小
16px，颜色898b76，距离左侧25px，行高28px，上方边距10px- 提示
- 写代码的时候一定要先确定结构(
html)，在确定样式(CSS)- 测量的时候一定要耐性
代码实现
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.box {
width: 308px;
height: 204px;
border: #d8dad8 solid 2px;
}
.title {
padding-left: 40px;
border-bottom: 2px dotted #e8ebe8;
}
.item {
font-size: 16px;
flood-color: #898b76;
padding-left: 25px;
line-height: 28px;
padding-top: 10px;
}
style>
head>
<body>
<div class="box">
<div class="title">广告板div>
<div class="content">
<div class="item">赔钱清仓甩卖,全场一律八折优惠div>
<div class="item">赔钱清仓甩卖,全场一律八折优惠div>
<div class="item">赔钱清仓甩卖,全场一律八折优惠div>
<div class="item">赔钱清仓甩卖,全场一律八折优惠div>
div>
div>
body>
html>
展示效果
3. 百度热榜实现
代码实现
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
a {
color: blue;
text-decoration: none;
}
a :hover{
text-decoration: underline;
}
table {
width: 536px;
}
.title .col-1 {
font-size: 20px;
font-weight: bolder;
}
.col-1 {
width: 80%;
text-align: left;
}
.col-2 {
width: 20%;
text-align: center;
}
.icon {
background-image: url(./refresh.png);
display: inline-block;
width: 24px;
height: 24px;
background-size: 100% 100%;
vertical-align: bottom;
}
.content {
font-size: 18px;
line-height: 40px;
}
.content .col-1, .content .col-2{
border-bottom: 2px solid #f3f3f3;
}
.num {
font-size: 20px;
color: #fffff3;
}
.first {
background-color: #f54545;
padding-right: 8px;
}
.second {
background-color: #ff8547;
padding-right: 8px;
}
.third {
background-color: #ffac38;
padding-right: 8px;
}
.other {
background-color: #8eb9f5;
padding-right: 8px;
}
style>
head>
<body>
<table cellspacing="0px">
<th class="title col-1">百度热榜th>
<th class="title col-2"><a href="#">换一换<span class="icon">span>a>th>
<tr class="content">
<td class="col-1"><span class="num first">1span><a href="#">共促开放合作,共创美好未来a>td>
<td class="col-2">474万td>
tr>
<tr class="content">
<td class="col-1"><span class="num second">2span><a href="#">美将对华出售芯片, 但不卖最顶尖的a>td>
<td class="col-2">474万td>
tr>
<tr class="content">
<td class="col-1"><span class="num third">3span><a href="#">记者实测喝完酱香拿铁吹检测仪a>td>
<td class="col-2">474万td>
tr>
<tr class="content">
<td class="col-1"><span class="num other">4span><a href="#">期待杭州亚运会到来a>td>
<td class="col-2">474万td>
tr>
table>
body>
html>
