【Web前端】2.0 CSS（上）——选择器、字体和外观属性
2020-04-06 本文已影响0人
bobokaka
1.0 行内样式代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>世纪佳缘-你在我也在</title>
<style>
tr {
height: 40px;
}
</style>
</head>
<body>
<table width="600" align="center">
<caption> <h4 style="color: pink;"> 青春不常在，抓紧谈恋爱 </h4></caption>
<!-- 1 -->
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" checked="checked" /><img src="images/man.jpg" /> 男
<input type="radio" name="sex" /><img src="images/women.jpg" /> 女
</td>
</tr>
<!-- 2 -->
<tr>
<td>生日</td>
<td>
<!-- 年份的 -->
<select>
<option>--请选择年--</option>
<option>1995</option>
<option>1996</option>
<option>1997</option>
<option>1998</option>
</select>
<!-- 月份的 -->
<select>
<option>--请选择月--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<!-- 日子 -->
<select>
<option>--请选择日--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</td>
</tr>
<!-- 3 -->
<tr>
<td>所在地区</td>
<td>
<input type="text" value="北京思密达" style="color: gray;" />
</td>
</tr>
<!-- 4行 -->
<tr>
<td>婚姻状况</td>
<td>
<input type="radio" name="marry" checked="checked"/> 未婚
<input type="radio" name="marry" /> 已婚
<input type="radio" name="marry" /> 离婚
</td>
</tr>
<!-- 5行 -->
<tr>
<td>学历</td>
<td>
<input type="text" value="幼儿园">
</td>
</tr>
<!-- 6行 -->
<tr>
<td>月薪</td>
<td>
<input type="text" value="10000-20000">
</td>
</tr>
<!-- 7行 -->
<tr>
<td>手机号码</td>
<td>
<input type="text">
</td>
</tr>
<!-- 8行 -->
<tr>
<td>昵称</td>
<td>
<input type="text" >
</td>
</tr>
<!-- 9行 -->
<tr>
<td>喜欢的类型</td>
<td>
<input type="checkbox" name="love" /> 妩媚的
<input type="checkbox" name="love" /> 可爱的
<input type="checkbox" name="love" /> 小鲜肉
<input type="checkbox" name="love" /> 老腊肉
<input type="checkbox" name="love" /> 都喜欢
</td>
</tr>
<!-- 10 行 -->
<tr>
<td>自我介绍</td>
<td>
<textarea> 自我介绍 </textarea>
</td>
</tr>
<!-- 11行 -->
<tr>
<td></td>
<td>
<input type="image" src="images/btn.png" />
</td>
</tr>
<!-- 12 行 -->
<tr>
<td></td>
<td> <input type="checkbox" name="agree" checked="checked" />我同意注册条款和会员加入标准</td>
</tr>
<!-- 13行 -->
<tr>
<td></td>
<td>
<a href="#">我是会员，立即登录</a>
</td>
</tr>
<!-- 14 -->
<tr>
<td></td>
<td>
<h3>我承诺</h3>
<ul>
<li>年满18岁、单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
执行：
image.png
2.0 内嵌式css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h2 {
color: green;
font-size: 20px;
}
h4 {
color: purple;
}
p {
color: blue;
}
</style>
</head>
<body>
<h2>忆江南 唐.白居易</h2>
<p>
江南好,风景旧曾谙。<br />
日出江花红胜火，<br />
春来江水绿如蓝，<br />
能不忆江南。</p>
<h4>作者介绍</h4>
<p>白居易(772－846) ，字乐天,白居易(772－846) ，字乐天，
太原(今属山西)人。唐德宗朝进士，元和三年(808)拜左拾遗，后贬江州(今属江西)司马，移忠州(今属四川)刺史，又为苏州(今属江苏)、同州(今属陕西大荔)刺史。晚居洛阳，自号醉吟先生、香山居士。其诗政治倾向鲜明，重讽喻，尚坦易，为中唐大家。也是早期词人中的佼佼者，所作对后世影响甚大。
</p>
<h4>注释</h4>
<p>(1)据《乐府杂录》，此词又名《谢秋娘》，系唐李德裕为亡姬谢秋娘作。又名《望江南》、
《梦江南》等。分单调、双调两体。单调二十七字，双凋五十四字，皆平韵。(2)谙(音安)：熟悉。(3)蓝：蓝草，其叶可制青绿染料。</p>
<h4>品评</h4>
<p>此词写江南春色，首句“江南好”，以一个既浅切又圆活的“好”字，摄尽江南春色的种种佳处，而作者的赞颂之意与向往之情也尽寓其中。同时，唯因“好”之已甚，方能“忆”之不休，因此，此句又已暗逗结句“能不忆江南”，并与之相关阖。次句“风景旧曾谙”，点明江南风景之“好”，并非得之传闻，而是作者出牧杭州时的亲身体验与亲身感受。这就既落实了“好”字，又照应了“忆”字，不失为勾通一篇意脉的精彩笔墨。三、四两句对江南之“好”进 行形象化的演绎，突出渲染江花、江水红绿相映的明艳色彩，给人以光彩夺目的强烈印象。其中，既有同色间的相互烘托，又有异色间的相互映衬，充分显示了作者善于著色的技巧。篇末，以“能不忆江南”收束全词，既托出身在洛阳的作者对江南春色的无限赞叹与怀念，又造成一种悠远而又深长的韵味，把读者带入余情摇漾的境界中。</p>
</body>
</html>
执行：
image.png
3.0 外部样式表（外链式）
同级目录下的html页面代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 这句话就是给html文件 和 css 文件 建立一种联系 -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h3>来呀！快活呀~ 反正有大把时间</h3>
</body>
</html>
CSS
h3 {
color: deeppink;
font-size: 20px;
}
执行：
image.png
4.0 标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
color: red;
}
span {
color: green;
}
</style>
</head>
<body>
标签选择器口诀：
<div>标签选择器，</div>
<div>页面同选起。</div>
<div>直接写标签，</div>
<div>全部不放弃。</div>
<span>标签选择器，</span>
<span>页面同选起。</span>
<span>直接写标签，</span>
<span>全部不放弃</span>
</body>
</html>
执行：
image.png
5.0 类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style>
.red {
color: red;
}
</style>
</head>
<body>
类选择器口诀：
<div>差异化选择，</div>
<div class="red">一个或多个。</div>
<div>上面点定义，</div>
<div>类名别写错。</div>
<div>谁用谁调用，</div>
<div>class来做。</div>
<div class="red">嘿嘿，工作类最多。</div>
</body>
</html>
执行：
image.png
6.0 google案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Google案例</title>
<style type="text/css">
.blue {
font-size: 100px;
color: blue;
}
.red {
font-size: 100px;
color: red;
}
.orange {
font-size: 100px;
color: orange;
}
.green {
font-size: 100px;
color: green;
}
</style>
</head>
<body>
<span class="blue">G</span>
<span class="red">o</span>
<span class="orange">o</span>
<span class="blue">g</span>
<span class="green">l</span>
<span class="red">e</span>
</body>
</html>
执行：
image.png
7.0 多类名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Google案例</title>
<style type="text/css">
.font100 {
font-size: 100px;
}
.blue {
color: blue;
}
.red {
color: red;
}
.orange {
color: orange;
}
.green {
color: green;
}
</style>
</head>
<body>
<!-- 在一个标签内部只能有一个class -->
<span class="blue font100">G</span>
<span class="red font100">o</span>
<span class="orange font100">o</span>
<span class="blue font100">g</span>
<span class="green font100">l</span>
<span class="red font100">e</span>
</body>
</html>
执行：
image.png
8.0 Unicode字体
为了解决，在不同浏览器上中文乱码的问题，采取Unicode字体代替。
-
为什么使用 Unicode字体
- 在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。
- xp 系统不支持 类似微软雅黑的中文。
-
解决：
-
方案一： 你可以使用英文来替代。 比如
font-family:"Microsoft Yahei"。 -
方案二： 在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的。
-
font-family: "\5FAE\8F6F\96C5\9ED1"; 表示设置字体为“微软雅黑”。
| 字体名称 | 英文名称 | Unicode 编码 |
|---|---|---|
| 宋体 | SimSun | \5B8B\4F53 |
| 新宋体 | NSimSun | \65B0\5B8B\4F53 |
| 黑体 | SimHei | \9ED1\4F53 |
| 微软雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 |
| 楷体_GB2312 | KaiTi_GB2312 | \6977\4F53_GB2312 |
| 隶书 | LiSu | \96B6\4E66 |
| 幼园 | YouYuan | \5E7C\5706 |
| 华文细黑 | STXihei | \534E\6587\7EC6\9ED1 |
| 细明体 | MingLiU | \7EC6\660E\4F53 |
| 新细明体 | PMingLiU | \65B0\7EC6\660E\4F53 |
为了照顾不同电脑的字体安装问题，我们尽量只使用宋体和微软雅黑中文字体
9.0 font-weight:字体粗细
- 在html中如何将字体加粗我们可以用标签来实现
- 使用 b 和 strong 标签是文本加粗。
- 可以使用CSS 来实现，但是CSS 是没有语义的。
| 属性值 | 描述 |
|---|---|
| normal | 默认值（不加粗的） |
| bold | 定义粗体（加粗的） |
| 100~900 | 400 等同于 normal，而 700 等同于 bold 我们重点记住这句话 |
提倡：
我们平时更喜欢用数字来表示加粗和不加粗。
10.0 font-style:字体风格
- 在html中如何将字体倾斜我们可以用标签来实现
- 字体倾斜除了用 i 和 em 标签，
- 可以使用CSS 来实现，但是CSS 是没有语义的
font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：
| 属性 | 作用 |
|---|---|
| normal | 默认值，浏览器会显示标准的字体样式 font-style: normal; |
| italic | 浏览器会显示斜体的字体样式。 |
<img src="media/good.png" />
小技巧：
平时我们很少给文字加斜体，反而喜欢给斜体标签（em，i）改为普通模式。
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
font-size: 16px;
}
.title {
/* 字体大小 */
font-size: 20px;
/*设置字体 */
font-family: Arial, "Microsoft YaHei", "微软雅黑", "黑体";
/*字体加粗 */
/*font-weight: bold; */
/*这个 700 一定不要跟单位 700 等价于 bold*/
font-weight: 700;
/*字体倾斜*/
font-style: italic;
}
h1 {
/*让粗体的不加粗*/
/*font-weight: normal; 400 等价于 normal*/
font-weight: 400;
}
em {
/* 让倾斜的字体 不倾斜 */
font-style: normal;
}
</style>
</head>
<body>
<p class="title">粉红色的回忆</p>
<p>夏天夏天悄悄过去留下小秘密</p>
<p>压心底 压心底 不能告诉你</p>
<p>晚风春过温暖我心底 我又想起你</p>
<p>多甜蜜 多甜蜜 怎能忘记</p>
<h1> 韩宝仪 </h1>
<em>韩宝仪音乐专辑</em>
</body>
</html>
执行：
image.png
综合写法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
font-size: 16px;
}
.title {
/* font: font-style font-weight font-size/line-height font-family;*/
/*综合性写法*/
font: italic 700 20px "微软雅黑";
}
h1 {
/*让粗体的不加粗*/
/*font-weight: normal; 400 等价于 normal*/
font-weight: 400;
}
em {
/* 让倾斜的字体 不倾斜 */
font-style: normal;
}
</style>
</head>
<body>
<p class="title">粉红色的回忆</p>
<p>夏天夏天悄悄过去留下小秘密</p>
<p>压心底 压心底 不能告诉你</p>
<p>晚风春过温暖我心底 我又想起你</p>
<p>多甜蜜 多甜蜜 怎能忘记</p>
<h1> 韩宝仪 </h1>
<em>韩宝仪音乐专辑</em>
</body>
</html>
执行：
image.png
11. CSS外观属性
11.1 color:文本颜色
-
作用：
color属性用于定义文本的颜色，
-
其取值方式有如下3种：
| 表示表示 | 属性值 |
|---|---|
| 预定义的颜色值 | red，green，blue，还有我们的御用色 pink |
| 十六进制 | #FF0000，#FF6600，#29D794 |
| RGB代码 | rgb(255,0,0)或rgb(100%,0%,0%) |
-
注意
我们实际工作中， 用 16进制的写法是最多的，而且我们更喜欢简写方式比如 #f00 代表红色
11.2 text-align:文本水平对齐方式
-
作用：
text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性
-
其可用属性值如下：
| 属性 | 解释 |
|---|---|
| left | 左对齐（默认值） |
| right | 右对齐 |
| center | 居中对齐 |
-
注意：
是让盒子里面的内容水平居中， 而不是让盒子居中对齐
11.3 line-height:行间距
-
作用：
line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。
-
单位：
- line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px
-
技巧：
一般情况下，行距比字号大7.8像素左右就可以了。
line-height: 24px;
11.4 text-indent:首行缩进
-
作用：
text-indent属性用于设置首行文本的缩进，
-
属性值
- 其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值,
- 建议使用em作为设置单位。
1em 就是一个字的宽度 如果是汉字的段落， 1em 就是一个汉字的宽度
p {
/*行间距*/
line-height: 25px;
/*首行缩进2个字 em 1个em 就是1个字的大小*/
text-indent: 2em;
}
11.5 text-decoration 文本的装饰
text-decoration 通常我们用于给链接修改装饰效果
| 值 | 描述 |
|---|---|
| none | 默认。定义标准的文本。 取消下划线（最常用） |
| underline | 定义文本下的一条线。下划线 也是我们链接自带的（常用） |
| overline | 定义文本上的一条线。（不用） |
| line-through | 定义穿过文本下的一条线。（不常用） |
12.0 CSS外观属性总结
| 属性 | 表示 | 注意点 |
|---|---|---|
| color | 颜色 | 我们通常用 十六进制 比如 而且是简写形式 #fff |
| line-height | 行高 | 控制行与行之间的距离 |
| text-align | 水平对齐 | 可以设定文字水平的对齐方式 |
| text-indent | 首行缩进 | 通常我们用于段落首行缩进2个字的距离 text-indent: 2em; |
| text-decoration | 文本修饰 | 记住 添加 下划线 underline 取消下划线 none |
综合案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>综合案例-体育页面</title>
<style>
body {
font-size: 16px;
}
.title {
font-size: 28px;
/*让字体不加粗*/
font-weight: 400;
/*color: #FF6700;*/
/*color: rgb(255,103,0);*/
}
em {
/*让倾斜的标签 不倾斜*/
font-style: normal;
color: skyblue;
}
.time {
color: #ccc;
/*#ff0000 #f00
#000000 #000
#ffffff #fff
#ff1234
#ff1122 #f12*/
}
.people {
/*color: #990000;*/
color: #900;
text-decoration: underline;
}
.search {
color: red;
}
.btn {
color: green;
font-weight: 700;
}
/*文本 水平居中对齐*/
.tac {
text-align: center;
}
p {
/*行高 */
line-height: 26px;
/*首行缩进2个字的距离 em 是倍数关系， 1em 就是1个字的距离 2em 就是2个字的宽度*/
text-indent: 2em;
}
a {
/*取消下划线 a 默认自带下划线的*/
text-decoration: none;
}
</style>
</head>
<body>
<h1 class="title tac">中乙队赛前突然换帅仍胜毅腾 高原黑马欲阻击舜天</h1>
<div class="tac">
<span class="time">2017年07月16日20:11</span>
<span class="people"> 新浪体育 评论中大奖 （11人参与）</span>
<a href="#">收藏本文</a>
<input type="text" value="请输入查询条件" class="search" />
<input type="button" value="搜索" class="btn" />
</div>
<hr />
<p>
新浪体育讯 7月16日是燕京啤酒<em>[微博]</em>2017中国足协杯第三轮比赛，丽江嘉云昊队主场迎战哈尔滨毅腾队的比赛日。然而就在比赛日中午，丽江嘉云昊队主帅李虎和另外两名成员悄然向俱乐部提出了辞呈，并且收拾行囊准备离开。在这样的情况下，丽江嘉云昊队不得不由此前的教练员杨贵东代理指挥了本场比赛。
</p>
<p>
在昨日丽江嘉云昊队主帅李虎就缺席了赛前的新闻发布会，当时俱乐部给出的解释是李虎由于身体欠佳，去医院接受治疗。然而今日李虎出现在俱乐部时，向记者否认了这一说法，并且坦言已经向俱乐部提出了辞呈。
</p>
<p>
据记者多方了解的情况，李虎<em>[微博]</em>极其教练组近来在执教成绩上承受了不小的压力，在联赛间歇期期间，教练组曾向俱乐部提出能够多引进有实力的球员补强球队，然而由于和俱乐部在投入以及成绩指标上的分歧，李虎最终和教练组一起在比赛日辞职。
</p>
<p>
这样的情况并没有影响到丽江嘉云昊队<em>[微博]</em>的队员，在比赛中丽江队在主场拼的非常凶，在暴雨之中仍然发挥出了体能充沛的优势，最终凭借点球击败了中超球队哈尔滨毅腾，顺利晋级下一轮比赛。<strong>根据中国足协杯的赛程，丽江嘉云昊队将在本月23日迎战江苏舜天队。</strong>
</p>
</body>
</html>
执行：
图片.png
END
