为什么出现CSS?
- HTML满足不了设计者的需求
- HTML操作属性不方便
- HTML里面添加样式带来的是臃肿和繁琐
CSS
CSS：层叠样式表 设置网页外观的样式
css的书写方式
行内样式表
通过style的属性值来设置元素的样式
<标签名 style="属性1:属性值1; 属性2:属性值2;">内容</标签名>
注意事项
1. style便是元素的属性
2. 属性与属性值之间用:相隔
3. 多组属性值之间用;相隔
4. 没有实现元素样式和结构相分离
代码案例
<h2 style="font-family: '楷体'; color: blue; ">二级标题</h2>
内联样式表
将CSS代码写在<head></head>之间 并用style标签定义
<head>
<style>
选择器 {
属性1：属性值1;
属性2：属性值2;
属性3：属性值3;
}
<style>
<head>
注意事项
- type="text/css"可以省略
- 只能控制当前页面
- 没有彻底实现样式和结构相分离
<head>
<meta charset="utf-8">
<title></title>
<style>
h2 {
color:red;
font-family: 楷体;
}
</style>
</head>
外部样式表
将一个或多个以.css扩展名的文件f放入单独的css文件夹中 ，用link标签将样式表引入html文件中
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="./stylesheet.css">
</head>
CSS样式表总结
CSS选择器
作用：找到特定的页面HTML元素
标签选择器
优点: 能够快速为某一类元素设置样式
缺点： 不能设计差异化样式。
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
color: blue;
font-family: "楷体";
font-size: 20px;
}
span {
color: green;
font-family: "宋体";
}
</style>
</head>
<body>
<div>分割 分区</div>
<div>分割 分区</div>
<div>分割 分区</div>
<div>分割 分区</div>
<span>跨度 跨距</span>
<span>跨度 跨距</span>
<span>跨度 跨距</span>
<span>跨度 跨距</span>
</body>
</html>
类选择器
可为一个或某几个元素设置相同的样式 类名用英语表示，见命之意。
.类名 {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
属性4:属性值4;
}
语法
<标签 class="类名" >内容</标签>
结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.c-red {
color: red;
}
</style>
</head>
<body>
<h2>二级标题</h2>
<h2 class="c-red">二级标题</h2>
<h2>二级标题</h2>
<h2>二级标题</h2>
</body>
</html>
谷歌案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
span {
font-size: 100px;
}
.c-red {
color:red;
}
.c-blue {
color:blue;
}
.c-yellow {
color:yellow;
}
.c-green {
color:green;
}
</style>
</head>
<body>
<span class="c-blue">G</span>
<span class="c-yellow">o</span>
<span class="c-red">o</span>
<span class="c-blue">g</span>
<span class="c-green">l</span>
<span class="c-red" >e</span>
</body>
</html>
多类名选择器
标签可以拥有多个类名，以达到更好的目的。类名之间用空格相隔开。
样式
<style>
.c-red {
color: red;
}
.f-family {
font-family: "楷体";
}
</style>
结构
<h2 class="c-red f-family">二级标题</h2>
id选择器
语法
#id名 { 属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
属性4:属性值4;
}
标签
<标签 id="id名">内容</标签>
注意事项
- ID选择器是唯一的，一个标签只能拥有一个id名
- id选择器和类选择唯一的区别在于使用次数上
样式
<style>
#c-red {
color: #0A9CE8;
}
</style>
结构
<p id="c-red">段落 </p>
通配符选择器
选择页面中所有的标签设置相同的样式，不建议轻易使用
* {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
属性4:属性值4;
}
样式
<style>
* {
color: #87CEEB;
}
</style>
标签
<body>
<p>段落</p>
<div>分割 分区</div>
<span>跨度 跨距</span>
<h2>标题</h2>
</body>
选择器总结
CSS字体
font-size
作用：设置字号
样式
<style>
body {
font-size: 16px;
}
.f-fz {
font-size: 20px;
}
</style>
结构
<body>
<p class="f-fz">尧子陌</p>
<p>临风笑却世间</p>
</body>
- 不同浏览器的默认字号都不一样，因此直接给body设置默认字体。
font-family
font-family:设置字体
样式
p { font-family: "agency fb", "microsoft yahei,楷体";
结构
<p>尧子陌</p>
- 可以指定多个字体，字体之间用英文状态下逗号相隔
- 英文的字体要用""包裹
unicode字体
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
span {
font-family:"\6977\4F53";
}
</style>
</head>
<body>
<span>跨度 跨距</span>
</body>
</html>
fon-weight
font-weiht：字体粗细
注意事项
- 可以用HTML实现加粗效果 也可以用css实现 但没有语义
样式
<style>
p {
font-weight: 700;
}
h2 {
font-weight: normal;
}
</style>
标签
<body>
<p>段落</p>
<h2>二级标题</h2>
</body>
font-style
font-style:字体倾斜
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
em {
font-style: normal;
}
</style>
</head>
<body>
<em>让倾斜的字体变得正常</em>
</body>
</html>
font综合写法
选择器 {font:font-style font-weight font-size/line-height font-family}
注意事项
- 不能省略font-size font-family两个属性
CSS外观属性
color
样式
<style>
h2 {
color: red;
}
h4 {
color: #008000;
}
p {
color: rgb(255, 255, 0);
}
</style>
结构
<body>
<p>尧子陌</p>
<h2>二级标题</h2>
<h4>四级标题</h4>
</body>
text-align
text-align:文本对齐方式
注意事项
- 是让盒子的内容水平居中 而不是让盒子水平居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
h2 {
text-align: center;
}
</style>
</head>
<body>
<h2>二级标题</h2>
</body>
</html>
line-height
line-height:行高
一般情况下 行高比默认字体大7 8像素即可
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
font-size: 16px;
}
p {
line-height: 24px;
}
</style>
</head>
<body>
<p>《欲望号街车》改编自著名剧作家田纳西的同名戏剧。影片讲述了美国南方美女布兰奇被解除家庭教师职务后，来到新奥尔良投靠妹妹的故事。妹妹的丈夫是一个性格粗鲁的波兰移民后裔，名为斯坦利。布兰奇和斯坦利一见面，就彼此产生厌恶。后来，她结识了斯坦利的朋友米奇，两人产生感情，但斯坦利并不看好这段恋情。当斯坦利发现布兰奇被开除教师职务的原因后，他告诉了米奇，致使米奇和布兰奇分手。婚姻的不幸、家庭的破产、亲人的死亡，加上周围的男人都不理想，一系列的悲剧致使布兰奇精神失常，最终导致毁灭的悲剧命运。</p>
<p>
片中费雯·丽和马龙·白兰度的表演已成为经典。影片荣获1952年第24届奥斯卡金像奖12项提名，并最终获得最佳女主角、最佳男配角、最佳女配角、最佳艺术指导4项大奖。同时，影片荣获1951年第16届电影节评审团特别奖。男主角马龙·白兰度凭借斯坦利一角声名鹊起。</p>
</body>
</html>
text-indent
text-indent:首行缩进 一般用em表示 1em等于一个汉字的宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p {
text-indent: 2em;
}
</style>
</head>
<body>
<p>《欲望号街车》改编自著名剧作家田纳西的同名戏剧。影片讲述了美国南方美女布兰奇被解除家庭教师职务后，来到新奥尔良投靠妹妹的故事。妹妹的丈夫是一个性格粗鲁的波兰移民后裔，名为斯坦利。布兰奇和斯坦利一见面，就彼此产生厌恶。后来，她结识了斯坦利的朋友米奇，两人产生感情，但斯坦利并不看好这段恋情。当斯坦利发现布兰奇被开除教师职务的原因后，他告诉了米奇，致使米奇和布兰奇分手。婚姻的不幸、家庭的破产、亲人的死亡，加上周围的男人都不理想，一系列的悲剧致使布兰奇精神失常，最终导致毁灭的悲剧命运。</p>
</p>
</body>
</html>
text-decoration
text-decoration:文本装饰
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
span {
text-decoration: underline;
}
</style>
</head>
<body>
<span>尧子陌</span>
</body>
</html>
开发工具
快捷方式
- f12
- ctrl+shift+I
- 右击检查 即可打开
- 左侧是结构 右侧是样式
快捷方式
