`CSS`小白入门篇

CSS全称是Cascading Style Sheets, 它描述了网页的展现与展示效果，这里只是初步了解一下CSS

样式

即css代码编写的位置，一共有三种样式捏

行内样式

举个例子在

 <body>
     <h1>欢迎来到ttdr的菜鸟空间</h1>
 </body>

我们要把这个标题变为红色，我们该怎么办捏，行内样式就是给元素加一个新的属性style

 <body>
     <h1 style="color: red;">欢迎来到ttdr的菜鸟空间</h1>
 </body>

这样标题就变成红色啦，但是我又想把文字加大一点捏，注意css里面一定要加px单位哦

 <body>
     <h1 style="color: red;font-size=60px;">欢迎来到ttdr的菜鸟空间</h1>
 </body>

来我们看看效果

注：编写css代码的时候，属性和值用:分隔，写完一个样式要用;分割哦

关于css的属性和值，实在是太多太多了，大家可以浏览MDN进行查看了解更多属性和值哦

虽然但是，可以这么写，但是很不推荐用行内样式哦，因为如果属性特别多，会发现样式混在一起，不利于维护捏，同时这个并不能多次使用，只能僵硬的复制粘贴。（手动一个嫌弃）

内部样式

所谓内部样式，则是增加<style>标签，当然你可以加在任何地方，标准是放在了<head>里面，但是注意一定要放在<head>or<body>里面，不能放在其他地方哦

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>内部样式</title>
      <style>
         h1{
             color: red(255, 0, 0);
             font-size: 80px;
         }
     </style>
 </head>

欸这里h1是个什么东西捏，这个是个选择器我们在后面会说捏。{}里面就是属性捏。

虽然内部样式实现了代码的复用，但是捏，不同HTML之间不能复用捏，结构与样式也没有完全分离。

外部样式

就是单独建立一个css文件来处理样式信息

首先我们要将css引入到html当中，我们需要在<head>标签下加入这行代码

   <link rel="stylesheet" href="style.css">

前面的rel属性都是固定的，后面的href的属性规定的是路径和文件名，由于这个在同一目录下，所以直接写文件名即可。

下面我们开始在style.css文件里写代码喽，

   h1 {
       color: rgb(255, 0, 0);
       font-size: 80px;
       /* 我是注释喵 */
   }

外部样式实现了真正的样式和结构的分离，实际开发中大部分都是用外部样式。

样式表的优先级

行内样式>内部样式=外部样式

内部样式和外部样式虽然优先级相同，但是后写的会覆盖前面的（后来者居上）

同一个样式表中国，优先级也和顺序有关，后面写的样式会覆盖前面写的样式（后来者居上）

选择器

那我们就从需求出发，把一个白不拉几网页变得好看，我们首先要找到页面上的元素，想要定位页面上的元素，我们就需要用到选择器。

这里我们的HTML网页是这样的

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 <body>
     <p>1111111111111111111111111111</p>
     <p>2222222222222222222222222222</p>
     <p>3333333333333333333333333333</p>
 </body>
 </html>

我们先要定位一个元素，我们先来认识最简单的元素选择器吧。

type选择器

这个是根据标签的名字进行匹配，比如段落标签的名字是<p>,那么我们用p可以定位到所有的段落

 p{
     
 }

找到了元素之后呢，我们要去添加样式了，像背景色，字体大小，字体粗细等等，这些样式可以细分为属性和值。

那就让我们先来添加一个背景色吧

 p {
     background-color: rgb(71, 203, 203);
 }

让我们来看看效果捏

好像还不错欸，但是好像有些多余欸，我只想给第二行和第三行加背景色该怎么办捏？

class选择器

这个是根据标签的class属性进行匹配，用这个可以解决上面的问题哦，我们先来给后两个段落加一个class属性吧

 <p class="c1">2222222222222222222222222222</p>
 <p class="c1">3333333333333333333333333333</p>

然后我们回到css文件

 .c1{
     background-color: rgb(61, 23, 205);
 }

让我们看看效果

目标达成，再让我们看一个相似的选择器

id选择器

这个是根据元素的id属性进行匹配，听着好像和class一样欸，那么二者有区别吗？

有的有的兄弟，他们的区别只有两个，一个就是class的取值是可以重复的，而id的取值是不能重复的，id是一个唯一标识,如果非要搞事情，id重复了，那么浏览器只会默认第一个。

 <p id="p3">3333333333333333333333333333</p>

另一个区别就是css代码上

 #p3{
     background-color: rgb(50, 73, 25);
 }

那么我们学了这么多选择器，我们再来搞点事情，我们让选择器选择到同一个元素，看看哪个选择器会生效捏？话不多说我们先上代码

 <!DOCTYPE html>
 <html lang="en">
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <link rel="stylesheet" href="style.css">
 </head>
 
 <body>
     <p>1111111111111111111111111111</p>
     <p class="c1">2222222222222222222222222222</p>
     <p class="c1" id="p3">3333333333333333333333333333</p>
 </body>
 
 </html>

 
 p {
     background-color: rgb(71, 203, 203);
 }
 .c1 {
     background-color: rgb(61, 23, 205);
 }
 #p3 {
     background-color: rgb(50, 73, 25);
 }

来看看结果

好像id选择器在这三方大战中取得了优胜欸，由此我们也可以推断出三个选择器的优先级哦

id选择器>class选择器>type选择器>通配选择器

这里增加了一个通配选择器捏，这里简单提一下

作用是对网页全局进行的配置。

格式

* {
    background-color: rgb(61, 23, 205);
}

PS：这里只是介绍了常用的简单选择器，一些复合选择器，我们留在下一篇文章再见哦。

布局

与布局相关的HTML元素

我们来把网页分为四块，我们想要实现这样一个网页，我们需要css以及div标签。

这里介绍一下<div>标签，这个标签又称为容器标签，也就是说里面可以放其他标签

我们先上链接，啊不上代码

     <div class="contain">
         <div id="header">#header</div>
         <div id="aside">#aside</div>
         <div id="main">#main</div>
         <div style="clear: both;"></div>
         <div id="footer">#footer</div>
     </div>

每个div标签都是对应着一个区域，，当然我们可以在里面加一个表单

     <div class="contain">
         <div id="header">#header</div>
         <div id="aside">#aside</div>
         <div id="main">
             <form>
                 <form action="">
                     <input type="test">
                 </form>
             </form>
         </div>
         <div style="clear: both;"></div>
         <div id="footer">#footer</div>
     </div>

由于小编能力有限捏，我们就先了解这么多。

我们来了解另外一个标签template

我们先上代码

 
 <body>
     <div class="out">
         <div class="btn">
             <input type="button" value="根据模板创建" id="add">
         </div>
     </div>
     <template id="t">
         <div class="in">
             <form action="">
                 <p><label>姓名</label> <input type="text"></p>
                 <p><label>年龄</label> <input type="text"></p>
                 <p><input type="submit" value="添加"></p>
             </form>
         </div>
     </template>
 </body>

一开始并不会在页面上显示，那么他什么时候会被用到捏，这里需要结合JavaScript代码，JavaScript会读到<template>标签所包含的代码,然后把标签里面的格式动态的加入到其他的div标签里面去。

从这个代码来看就是结合的script代码动态的加入到了上面的div容器之中，点击一下就会加入一个

CSS小白入门篇

样式