CSS
的主要作用是用来美化页面、布局页面的
HTML
只关注页面的内容
,只关注页面内容的显示,但至于显示的丑与美,并不在意。
CSS
是层叠样式表
的简称,也称CSS 样式表
或级联样式表
,CSS 也是一种标记语言
,主要用于页面的美化,包括字体颜色、字体大小、图片的宽高以及页面的布局和外观的显示。
CSS 语法规范主要由两部分组成:
选择器和多条声明
01-体验CSS语法规范.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatiable" content="ie=edge">
<title>体验CSS语法规范</title>
<!-- CSS 代码写在 style 标签中,style 标签嵌套在 head 标签中-->
<style>
/*选择器 -> 选择 p 标签*/
p {
/*声明 -> 颜色为红色*/
color: red;
/*声明 -> 字体大小 12 个像素*/
font-size: 12px;
}
</style>
</head>
<body>
<p>有点意思</p>
</body>
</html>
紧凑格式
p {
color: red;font-size: 12px;}
展开格式(建议)
p {
color: red;
font-size: 12px;
}
使用
小写
选择器名和括号之间
冒号和属性值之间
选择器就是根据不同的需求将指定的标签选择出来,简单来说就是
选择标签用的
选择器分为
基础选择器
和复合选择器
两大类
标签选择器
是指使用HTML 标签名
作为选择器,优点
:可以快速为页面内同名标签统一修改样式。缺点
:不能差异化设置,无法单独设置指定标签,比如有 3 个 div 标签,要么都改,要么都不改,不能只改其中一个
标签名 {
样式......
}
02-标签选择器.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatiable" content="ie=edge">
<title>标签选择器</title>
<!-- CSS 代码写在 style 标签中,style 标签嵌套在 head 标签中-->
<style>
/*标签选择器,只选择 p 标签*/
p {
color: green;;
}
/*标签选择器,选择 div 标签*/
div {
color: pink;
}
</style>
</head>
<body>
<p>男生</p>
<p>男生</p>
<p>男生</p>
<div>女生</div>
<div>女生</div>
<div>女生</div>
</body>
</html>
通过
类
属性,可以为指定的单独某个标签设置样式,可以实现同名标签差异化设置
.类名 {
样式......
}
<p class=“类名”></p>
03-类选择器.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatiable" content="ie=edge">
<title>类选择器</title>
<!-- CSS 代码写在 style 标签中,style 标签嵌套在 head 标签中-->
<style>
/*类选择器,定义 red 类*/
/*一定要注意类名前有个“.”,类名可以自定义名称,但不可以使用标签名,如“.div”*/
.red {
color: red;
}
</style>
</head>
<body>
<ul>
<!-- 谁的 class 属性添加了 red 类,谁就会被 red 类选择器修改样式 -->
<li class="red">冰雨</li>
<li>来生缘</li>
<li class="red">李香兰</li>
<li>生僻字</li>
<li>江南Style</li>
</ul>
</body>
</html>
04-课堂案例.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatiable" content="ie=edge">
<title>画盒子</title>
<style>
.red {
width: 100px;
higth: 100px;
background-color: red;
}
.green {
width: 100px;
higth: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="red">红色</div>
<div class="green">绿色</div>
<div class="red">红色</div>
</body>
</html>
class
属性可以有多个值,也就是说一个标签可以使用多个类名
,在使用的时候使用空格
隔开即可
05-类选择器多类名的使用.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatiable" content="ie=edge">
<title>画盒子</title>
<style>
.red {
width: 100px;
higth: 100px;
background-color: red;
}
.font-size-big {
font-size: 35ps;
}
</style>
</head>
<body>
<!-- 使用两个类名 -->
<div class="red font-size-big">CodeDog</div>
</body>
</html>
06-课堂案例.html(使用多类名改进)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatiable" content="ie=edge">
<title>画盒子</title>
<style>
/*公共样式抽出处理*/
.rectangle {
width: 100px;
higth: 100px;
}
.red {
background-color: red;
}
.green {
background-color: red;
}
</style>
</head>
<body>
<div class="red rectangle">红色</div>
<div class="green rectangle">绿色</div>
<div class="red rectangle">红色</div>
</body>
</html>
和
类选择器
相似,只不过是通过id
属性来选择标签
#nav {
color: red;
}
<div id="nav">id 选择器</div>
07-id选择器.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatiable" content="ie=edge">
<title>id选择器</title>
<style>
/*因为 id 在画面中是唯一的,所以一个 id 选择器只能被一个标签使用,且一个标签只能使用一个 id 选择器*/
#pink {
color: pink;
}
</style>
</head>
<body>
<div id="pink">粉色</div>
</body>
</html>
可以使用
*
来选择页面内的所有标签
* {
color: red;
}
08-通配符选择器.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatiable" content="ie=edge">
<title>通配符选择器</title>
<style>
* {
color: pink;
}
</style>
</head>
<body>
<div>粉色</div>
<p>粉色</p>
</body>
</html>
CSS 使用
font-family
属性定义文本的字体
p {
font-family: '微软雅黑';
}
09-字体系列.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatiable" content="ie=edge">
<title>字体系列</title>
<style>
h2 {
font-family: '微软雅黑';
}
p {
/* 微软雅黑 英文写法(推荐)*/
/* 可以使用多个字体,用逗号隔开,按顺序检测字体是否可用 */
font-family: 'Microsoft Yahei', Arial;
}
</style>
</head>
<body>
<h2>微软雅黑</h2>
<p>Microsoft Yahei</p>
</body>
</html>
使用
font-size
设置字体大小,单位是px(像素)
p {
font-size: 20px;
}
10-字体大小.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatiable" content="ie=edge">
<title>字体大小</title>
<style>
p {
font-size: 20px;
}
</style>
</head>
<body>
<p>字体大小</p>
</body>
</html>
使用
font-weight
设置字体粗细
p {
font-weigth: normal;
}
属性值 | 描述 |
---|---|
lighter | 细体 |
normal | 正常 |
bold | 粗体 |
bolder | 特粗 |
number | 直接写数字,如font-weigth: 400; ,400 等同于 normal、700 等同于 bold |
11-字体粗细.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatiable" content="ie=edge">
<title>字体粗细</title>
<style>
p {
/* font-weigth: bold; */
font-weigth: 700;
}
</style>
</head>
<body>
<p>字体粗细</p>
</body>
</html>
CSS 使用
font-style
设置文字样式
p {
font-style: normal;
}
属性值 | 描述 |
---|---|
normal | 默认值。浏览器显示一个标准的字体样式。 |
italic | 浏览器会显示一个斜体的字体样式。 |
oblique | 浏览器会显示一个倾斜的字体样式。 |
inherit | 规定应该从父元素继承字体样式。 |
12-文字样式.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatiable" content="ie=edge">
<title>文字样式</title>
<style>
p {
font-style: italic;
}
</style>
</head>
<body>
<p>文字样式</p>
</body>
</html>
p {
font:/* font-style font-weight font-size/line-height font-family*/;
}
13-字体复合属性.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatiable" content="ie=edge">
<title>字体复合属性</title>
<style>
/* p {
font-style: italic;
font-weight: 400;
font-size: 16px;
font-family: 'Microsoft YaHei';
} */
p {
/* 严格按照顺序填写各属性的值,不可以颠倒顺序 */
font: italic 400 16px 'Microsoft YaHei';
}
</style>
</head>
<body>
<p>字体复合属性</p>
</body>
</html>
使用
color
属性来修改文本颜色
p {
color: red;
}
属性值 | 描述 |
---|---|
red、green、blue… | 预定义的颜色值,颜色对应的英文单词 |
#FFFFFF、#FFF000、#3213D1 | 十六进制颜色值 |
RGB代码 | rbg(255, 0, 0),取值范围 0 ~ 255 |
14-文本颜色.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatiable" content="ie=edge">
<title>文本颜色</title>
<style>
p {
/* color: red; */
/* color: #FF0000; */
color: rgb(255, 0, 0);
}
</style>
</head>
<body>
<p>文本颜色</p>
</body>
</html>
使用
text-align
属性可以设置标签内的文本相对于标签本身
的水平对齐方式
p {
text-align: center;
}
属性值 | 描述 |
---|---|
left | 靠左 |
center | 居中 |
right | 靠右 |
15-文本对齐.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatiable" content="ie=edge">
<title>文本对齐</title>
<style>
div {
text-align: center; /* center、left、right */
}
</style>
</head>
<body>
<div>文本对齐</div>
</body>
</html>
使用
text-decoration
属性可以对文本进行装饰,比如添加上划线、下划线、删除线
p {
text-decoration: underline;
}
属性值 | 描述 |
---|---|
none | 没有装饰线,默认是 none |
underline | 下划线 |
overline | 上划线 |
line-through | 删除线 |
16-文本装饰.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatiable" content="ie=edge">
<title>文本装饰</title>
<style>
p {
text-decoration: underline;
}
</style>
</head>
<body>
<p>文本装饰</p>
</body>
</html>
使用
text-indent
属性可以指定文本段落的首行缩进
p {
text-indent: 10px;
}
17-文本缩进.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatiable" content="ie=edge">
<title>文本缩进</title>
<style>
p {
/* text-indent: 20px; */
/* em 是一种相对单位,相对于当前一个文字大小的单位 */
/* 如果当前文字是 16 px,那么 1em = 16px */
/* 所以不论文字多大,2em 始终等于两个文字大小 */
text-indent: 2em;
}
</style>
</head>
<body>
<p>文本缩进</p>
</body>
</html>
使用
line-hight
指定文本行与行之间的距离
p {
line-hight: 10px;
}
17-行间距.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatiable" content="ie=edge">
<title>行间距</title>
<style>
p {
line-hight: 20px;
}
</style>
</head>
<body>
<p>行间距</p>
<p>行间距</p>
<p>行间距</p>
</body>
</html>
行内样式表
内部样式表
外部样式表
在
HTML文档内部
的<style>
标签中编写 CSS 代码,理论上<style>
标签可以放到任何位置,但是建议放在<head>
标签内
19-内部样式表.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatiable" content="ie=edge">
<title>内部样式表</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>内部样式表</p>
</body>
</html>
通过
style
属性,可以为单个标签设置一些简单样式
<p style="color: red; font-size: 16px;">行内样式表</p>
20-行内样式表.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatiable" content="ie=edge">
<title>行内样式表</title>
</head>
<body>
<p style="color: red; font-size: 16px;">行内样式表</p>
</body>
</html>
单独创建一个后缀为
css
的文件来编写样式代码,然后通过<link rel="stylesheet" href="css文件路径" >
标签引入 CSS 文件
新建 style.css
文件
编写样式代码
p {
color: red;
}
新建 21-外部样式表.html
文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatiable" content="ie=edge">
<title>外部样式表</title>
<!-- 引入 css 文件 -->
<link rel="stylesheet" href="./style.css" >
</head>
<body>
<p>外部样式表</p>
</body>
</html>
略
略
文章浏览阅读1.1w次,点赞7次,收藏34次。vue-grid-layout的使用、实例、遇到的问题和解决方案_vue-grid-layout
文章浏览阅读218次。然后连接一个数据源,就会在下面自动产生一个添加附件的组件。把这个控件复制粘贴到页面里,就可以单独使用来上传了。插入一个“编辑”窗体。_powerapps点击按钮上传附件
文章浏览阅读264次。(1) Abstraction (抽象)(2) Polymorphism (多态)(3) Inheritance (继承)(4) Encapsulation (封装)_"object(cnofd[\"ofdrender\"])十条"
文章浏览阅读133次。删除node_modules,重新npm install看是否成功。在 package.json 文件中的 scripts 中加入。修改你的第三方库的bug等。然后目录会多出一个目录文件。_修改 node_modules
文章浏览阅读883次。【代码】【】kali--password:su的 Authentication failure问题,&sudo passwd root输入密码时Sorry, try again._password: su: authentication failure
文章浏览阅读1w次,点赞13次,收藏97次。整理5个优秀的微信小程序开源项目。收集了微信小程序开发过程中会使用到的资料、问题以及第三方组件库。_微信小程序开源模板
文章浏览阅读128次。Centos7最简搭建NFS服务器_centos7 搭建nfs server
文章浏览阅读1.2k次,点赞2次,收藏3次。前言mybatis在持久层框架中还是比较火的,一般项目都是基于ssm。虽然mybatis可以直接在xml中通过SQL语句操作数据库,很是灵活。但正其操作都要通过SQL语句进行,就必须写大量的xml文件,很是麻烦。mybatis-plus就很好的解决了这个问题。..._mybaitis-plus ruledataobjectattributemapper' and 'com.picc.rule.management.d
文章浏览阅读325次。EECE 1080C / Programming for ECESummer 2022Laboratory 4: Global Functions PracticePlagiarism will not be tolerated:Topics covered:function creation and call statements (emphasis on global functions)Objective:To practice program development b_eece1080c
文章浏览阅读53次。被同机房早就1年前就学过的东西我现在才学,wtcl。设要求的数为\(x\)。设当前处理到第\(k\)个同余式,设\(M = LCM ^ {k - 1} _ {i - 1}\) ,前\(k - 1\)个的通解就是\(x + i * M\)。那么其实第\(k\)个来说,其实就是求一个\(y\)使得\(x + y * M ≡ a_k(mod b_k)\)转化一下就是\(y * M ...
文章浏览阅读1.3k次。首先,问题是如何出现的?晚上复查代码,发现一个activity没有调用自己的ondestroy方法我表示非常的费解,于是我检查了下代码。发现再finish代码之后接了如下代码finish();System.exit(0);//这就是罪魁祸首为什么这样写会出现问题System.exit(0);////看一下函数的原型public static void exit (int code)//Added ..._android 手动杀死app,activity不执行ondestroy
文章浏览阅读894次。Q: SylixOS 版权是什么形式, 是否分为<开发版税>和<运行时版税>.A: SylixOS 是开源并免费的操作系统, 支持 BSD/GPL 协议(GPL 版本暂未确定). 没有任何的运行时版税. 您可以用她来做任何 您喜欢做的项目. 也可以修改 SylixOS 的源代码, 不需要支付任何费用. 当然笔者希望您可以将使用 SylixOS 开发的项目 (不需要开源)或对 SylixOS 源码的修改及时告知笔者.需要指出: SylixOS 本身仅是笔者用来提升自己水平而开发的_select函数 导致堆栈溢出 sylixos