DAY 3 | 自学前端第三天-CSDN博客

本文链接：https://blog.csdn.net/weixin_39108774/article/details/123621813

多敲代码会让自己更熟练

今天学习一下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;
}