DAY 3

编程入门行业动态更新时间:2024-10-21 12:57:18

DAY 3

多敲代码会让自己更熟练

今天学习一下CSS基础选择器、字体属性和文本属性。

CSS 美化网页，布局页面。

HTML的局限性：只关注内容的语义。丑。
CSS是层叠样式表（Cascading Style Sheels)的简称。也称为CSS样式表或级联样式表。
CSS也是标记语言。
CSS主要设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
CSS可以美化HTML，让页面布局更简单。
CSS最大价值：由HTML专注去做结构呈现，样式交给CSS，结构与样式相分离。

CSS语法规范

CSS规则由选择器以及一条或多条声明。
选择器指定CSS样式的HTML标签，{}是对该对象设置的具体样式。
属性和属性值以“键值对”的形式出现。
属性是对特定对象设置的样式属性，例如字体大小、文本颜色。
属性和属性值之间用英文 : 分开。
每组键值对后面一定有 ;

CSS代码风格

样式格式书写：

紧凑格式：
```
h3{color:red;font-size:20px;}
```
展开格式：（推荐，更直观）
```
h3{
color:red;
font-size:20px;
}
```

样式大小写风格：（推荐小写）

样式空格风格：

属性值前面，冒号后面保留一个空格。

h3{
color: red;
font-size: 20px;
}

选择器和大括号中间也要保留一个空格。

h3 {
color: red;
font-size: 20px;
}

CSS基础选择器

选择器是用来选择标签的。

选择器分为基础选择器和复合选择器。
基础选择器由单个选择器组成；
基础选择器包括：标签选择器、类选择器、ID选择器和通配符选择器；
标签选择器：以html标签名为选择器。把某一类标签全部选择出来，可以快速为页面同类型标签统一设置样式。不能差异化设置。

 <style>/* 标签选择器：写上标签名 */p {color: green;}div {color: pink;}</style>
</head>
<body><p>男生</p><p>男生</p><p>男生</p><div>女生</div><div>女生</div><div>女生</div>
</body>

类选择器：用.标识，后面紧跟类（class）名。可以理解给标签起名分组。长名称可以用短横线表示。不要使用纯数字、中文等命名，尽量使用英文字母来表示。命名一定要有意义，让人知道这个类名的目的。命名规范。

  <style>/* 类选择器口诀：样式点定义 结构类（class）调用  一个或多个 开发最常用*/.red {color: red;}.love-name {color: pink;}</style>
</head>
<body><ul><li class="red">胖胖</li><li >葡萄籽</li><li class="love-name">雪饼</li><li class="red">奶啤</li><li>草莓籽</li></ul><div class="red">胖胖的葡萄籽</div>
</body>

课堂案例：设置下面样式。

 <style>.red {width: 100px;height: 100px;background-color: red;}.green {width: 100px;height: 100px;background-color: green;}</style>
</head>
<body><div  class="red"></div><div  class="green"></div><div  class="red"></div>
</body>

类选择器-多类名：

在<class>属性中写多个类名；
多个类名需要空格分开；
可以分别拥有类名的样式。

 <style>.purple {color: purple;}.font35 {font-size: 35px;}</style>
</head>
<body><div class="purple font35" >胖胖</div>
</body>

多类名使用场景：

可以把一些标签元素相同样式放到一个类里面；
这些标签都可以调用这个公共的类，然后再调用自己独有的类；
节省CSS代码量，统一修改也方便；
多类名选择器在后期布局复杂的情况下，使用较多。

<style>.box {width: 50px;height: 50px;font-size: 20px;}.red {background-color: red;}.green {background-color: green;}</style>
</head>
<body><div class="box red">红色</div><div class="box green">绿色</div><div class="box red">红色</div>
</body>

ID选择器：为有特定ID的HTML元素标签指定样式。以#定义，ID属性只能在每个HTML文档中出现一次。样式#定义，结构id调用,只能调用一次，别人切勿使用。类选择器可多次使用。

   <style>/* 样式#定义 结构id调用，只能调用一次，别人切勿使用 */#purple {color: purple;}</style>
</head>
<body><div id="purple">胖胖的葡萄籽</div><div>胖胖奶啤</div>
</body>

通配符选择器 ：* 定义，表示选取页面所有标签，元素；不需要调用，自动修改所有样式。特殊情况适用。

<style>/* * 把html body div span li 等标签都改成了红色 */* {color: red;}</style>
</head>
<body><div>胖胖</div><span>胖胖</span><ul><li>还是胖胖</li></ul>

CSS字体属性

CSS字体属性用于定义字体系列，大小，粗细和文字样式（如斜体）

字体系列： 使用 font-famliy属性定义文本字体系列。

各个字体用英文,隔开，
一般情况，有空格的单词组，加""
尽量使用系统默认字体：body{font-famliy,"Microsoft Yahei",tahoma,arial,"Hiragino Sans G8}。

 <style>h2 {font-family: '微软雅黑';}p {font-family: 'Times New Roman', Times, serif;}</style>
</head>
<body><h2>胖胖的佳作</h2><p>“十步闲林今年招收新生十人，莫子祁当选榜首。”古朴平淡的声音以传教阁为中心清晰传送至各公布石，余音经久不散。</p><p>与此同时，驻留在十步闲林外的一群人却是炸开了锅。无论是名门大族，还是散人修士，放眼望去都在议论此次十步闲林招收。</p><p> “莫子祁不愧是莫家百年来天赋最高的小辈，竟能从天域容家，栖凤界白家拔得头筹！”</p><p> “这有什么，听说莫家老祖这次可是将玄芝给了莫小公子，玄芝是什么？那可是一百年前圣墟里得来的无价之宝！能够洗净精髓的宝药，饶是闲林圣地都不得不动容。”</p>
</body>

字体大小：使用 font-size属性定义文本字体大小。不要忘记加px

px（像素）是网页的最常用单位；
谷歌默认 16px；
不同浏览器可能默认显示字号大小不一致，所以要明确字体大小；
可以给body指定整个页面文字大小；
标题标签需要单独指定文字大小。

<style>body {font-size: 16px;}/* 标题标签比较特殊，需要单独指定文字大小 */h2 {font-size: 16px;}</style>
</head>
<body><h2>胖胖的佳作</h2><p>“十步闲林今年招收新生十人，莫子祁当选榜首。”古朴平淡的声音以传教阁为中心清晰传送至各公布石，余音经久不散。</p><p>与此同时，驻留在十步闲林外的一群人却是炸开了锅。无论是名门大族，还是散人修士，放眼望去都在议论此次十步闲林招收。</p><p> “莫子祁不愧是莫家百年来天赋最高的小辈，竟能从天域容家，栖凤界白家拔得头筹！”</p><p> “这有什么，听说莫家老祖这次可是将玄芝给了莫小公子，玄芝是什么？那可是一百年前圣墟里得来的无价之宝！能够洗净精髓的宝药，饶是闲林圣地都不得不动容。”</p>
</body>

字体粗细：使用 font-weight属性定义文本字体粗细。

normal：默认值，不加粗，400
bold：加粗，700

   <style>.bold {/* font-weight: bold; */font-weight: 700;}.normal {font-weight: 400;}</style>
</head>
<body><h2 class="normal">胖胖的佳作</h2><p>“十步闲林今年招收新生十人，莫子祁当选榜首。”古朴平淡的声音以传教阁为中心清晰传送至各公布石，余音经久不散。</p><p>与此同时，驻留在十步闲林外的一群人却是炸开了锅。无论是名门大族，还是散人修士，放眼望去都在议论此次十步闲林招收。</p><p class="bold"> “莫子祁不愧是莫家百年来天赋最高的小辈，竟能从天域容家，栖凤界白家拔得头筹！”</p>
</body>

文字样式：使用 font-style属性定义文本风格。

normal，默认值，标准样式 font-style：normal 。使倾斜字体不倾斜。
italic，斜体。

 <style>p {font-style: italic;}em {font-style: normal;}</style>
</head>
<body><p>胖胖的CSS进阶之路</p><em>下一个是JavaScript</em><br><i>之后去学习ES6</i>
</body>

复合属性：把以上文字样式综合写，节约代码。

{font font-style font-weight font-size/line-height font-family} 顺序

必须按照顺序写，各个属性之间用空格隔开；
不需要的属性可以省略，但必须保留 font-size和font-family属性，否则 font不起作用。

<title>CSS字体属性之复合属性</title><style>/* DIV文字 变倾斜，加粗，字号 16 并且 微软雅黑 *//* div {font-style: italic;font-size: 16px;font-weight: 700;font-family: "Microsoft Yahei";} *//* 复合属性：简写方式,严格按照顺序 *//* div {font: font-style font-weight font-size/line-height font-family;} */div {font: italic 700 16px 'microsoft yahei';/* font:  16px 'microsoft yahei'; */}</style> 
</head>
<body><div>早八晚十每天练，不信技术不会高</div>
</body>

CSS文本属性

CSS Text（文本）可以定义文本的外观，比如文本的颜色，对齐文本，装饰文本，文本缩进，行间距等。

文本颜色： color属性定义文本颜色

表示	属性值
预定义颜色值	red blue green
十六进制（用的多）	#ff0000.#FF6600
RGB代码	rgb(255,0,0)或rgb(100%,0%,0%)

 <title>CSS文本属性之文本颜色</title><style>div {color :bisque;/* color: #47c74e; *//* color : rgb(123, 256, 456); */}</style>
</head>
<body><div>实践出真知，计算机科学是一门需要应用的学科</div>

对齐文本：text-align 设置文本内容水平对齐方式。

<title>CSS文本属性之对齐文本</title><style>h1 {/* 让h1盒子里的文字水平居中对齐 *//* text-align: center; */text-align: right;}</style>
</head>
<body><h1>居中对齐的标题</h1>
</body>

装饰文本：text-decoration 设置下划线、删除线、上划线，去除装饰等。

 <title>CSS文本属性之装饰文本</title><style>h1 {/* underline下划线 *//* text-decoration: underline; *//* overline 上划线 *//* text-decoration: overline; *//* line-through 删除线 *//* text-decoration: line-through; *//* 去下划线 */text-decoration: none;}a {text-decoration: none;}</style>
</head>
<body><h1>胖胖学习CSS文本属性</h1><a href= "#">去个下划线</a>
</body>

文本缩进：text-indent 设置z文本呢第一行的缩进，通常是将段落的首行缩进。

 <title>CSS文本属性之文本缩进</title><style>p {/* text-indent: 20px; */text-indent: 2em;/* 如果 2em 则是缩进当前文字2个大小的距离 */}</style>
</head>
<body><p>“十步闲林今年招收新生十人，莫子祁当选榜首。”古朴平淡的声音以传教阁为中心清晰传送至各公布石，余音经久不散。与此同时，驻留在十步闲林外的一群人却是炸开了锅。无论是名门大族，还是散人修士，放眼望去都在议论此次十步闲林招收。</p><p>“莫子祁不愧是莫家百年来天赋最高的小辈，竟能从天域容家，栖凤界白家拔得头筹！”“这有什么，听说莫家老祖这次可是将玄芝给了莫小公子，玄芝是什么？那可是一百年前圣墟里得来的无价之宝！能够洗净精髓的宝药，饶是闲林圣地都不得不动容。”</p>
</body>

行间距：line-height 设置行间的距离。

 <title>CSS文本属性之行间距</title><style>/* p {line-height: 30px;} */p.small {line-height: 90%;}</style>
</head>
<body><p>“十步闲林今年招收新生十人，莫子祁当选榜首。”古朴平淡的声音以传教阁为中心清晰传送至各公布石，余音经久不散。与此同时，驻留在十步闲林外的一群人却是炸开了锅。无论是名门大族，还是散人修士，放眼望去都在议论此次十步闲林招收。</p><p>“莫子祁不愧是莫家百年来天赋最高的小辈，竟能从天域容家，栖凤界白家拔得头筹！”“这有什么，听说莫家老祖这次可是将玄芝给了莫小公子，玄芝是什么？那可是一百年前圣墟里得来的无价之宝！能够洗净精髓的宝药，饶是闲林圣地都不得不动容。”</p>
</body>

CSS引入方式

根据CSS书写位置的不同，CSS样式表分为：

行内样式表（行内式）
内部样式表（嵌入式）
外部样式表（链接式）

内部样式表：写到html页面内部，将所有CSS代码抽取出来，单独放到一个<style>标签中。

<style>标签理论上可以放在HTML标签的任何地方，但一般放在文档的<head>标签里；
此种方式可以控制当前整个页面的样式设置；
代码结构清晰，但没有实现结构和样式完全分离。

   <title>内部样式表</title><style>div {color: purple;}</style>
</head>
<body><div>内部样式表，是在html页面内部写样式，但是单独写到style标签内部。</div>
</body>

行内样式表：写到元素标签内部，适合修改简单样式。

style其实就是标签的属性；
在双引号中间，写法要规范；
可以控制当前的标签设置样式。

  <title>行内样式表</title>
</head>
<body><p>“十步闲林今年招收新生十人，莫子祁当选榜首。”古朴平淡的声音以传教阁为中心清晰传送至各公布石，余音经久不散。</p><p>与此同时，驻留在十步闲林外的一群人却是炸开了锅。无论是名门大族，还是散人修士，放眼望去都在议论此次十步闲林招收。</p><p style="color: green; font-size: 20px; font-weight: 700;"> “莫子祁不愧是莫家百年来天赋最高的小辈，竟能从天域容家，栖凤界白家拔得头筹！”</p>
</body>

外部样式表：写到CSS文件里，实际开发中使用，适合样式比较多的情况。将样式单独写到CSS文件中，再把CSS文件引到HTML页面中使用。

新建后缀名为.css的样式文件，将所有的CSS代码都放到这个文件里；
在HTML页面中，使用<link>标签引进这个文件。
<link rel="stylesheet" href="css文件路径">

html文件：外部样式表.html

 <title>外部样式表</title><link rel="stylesheet" href="style.css">
</head>
<body><div>终生学习是我所期望的</div>
</body>

css文件： style.css

/* 这个CSS文件里只有样式没有标签 */
div {color: purple;
}

综合案例-新闻页面

html文件：

   <title>综合案例-新闻页面</title><link rel="stylesheet" href="style1.css">
</head>
<body><h2> 中东部新一轮大范围雨雪将至 华南多降雨</h2><form>2022-3-23 21:18:19 来源 :<a href="#">中国天气网</a><input type="text" value="请输入查询条件" class="search"><input type="button" value="搜索" class="btn"><!-- <button>搜索</button> --></form><hr><p>中国天气网讯 今天（3月23日）广东、广西等地局地仍有暴雨；明天起至27日，中东部新一轮大范围雨雪降温天气将至，江南、华南北部有大到暴雨，东北等局地有大雪，气温自西向东下降4～6℃，局地下降10℃以上，需注意防范。</p><h4>昨天，我国较强降雨主要出现的华南一带，北方部分地区有较强降雪，监测显示，浙江南部、江西东北部和南部、福建、广东中北部、广西北部和西南部、云南南部等地部分地区降大雨或暴雨，江西赣州、福建漳州、广东梅州等局地大暴雨。</h4><p class="pic"> <img src="weather.jpg"></p><h4>新疆西北部、内蒙古西部、山西北部、河北西北部等地部分地区降雪、雨或雨夹雪2～8毫米，新疆伊犁、内蒙古呼和浩特和鄂尔多斯等局地10～13毫米。</h4><p>今天，广东、广西等地部分地区仍有较强降水，局地有暴雨；同时，新疆北疆等地有较强降雪。明天开始至27日，受冷暖空气共同影响，中东部地区将出现大范围降水过程，甘肃、内蒙古东部、河北北部、黑龙江、吉林等地部分地区有小到中雪或雨夹雪，局地大雪，华北及其以南大部地区有小到中雨，江南、华南北部部分地区有大到暴雨。</p><div>编辑：宋华成</div>
</body>

css文件：

body {font : 16px/28px "mircrosoft yahei"
}
h2 {text-align: center;font-weight: 400;
}
form {text-align: center;font-size: 12px;color: rgb(146, 84, 84);
}
a {text-decoration: none;
}
p {text-indent: 2em;
}
.search {width: 100px;color: rgb(131, 123, 112);
}
.btn {font-weight: 700;
}
/* 图片居中对齐不了，要给他的上一级居中对齐 */
.pic {text-align: center;
}
div {font-size: 10px;
}