CSS基础（1）| 青训营笔记

0xFDFDFDFD
281 阅读10分钟

DAY 5

CSS引入

HTML局限性

HTML简单易学，但是用它做网页远远不够。HTML主要负责的是网页的结构，显示网页的元素内容。但如果做样式，HTML还有很大的局限性，只能做一些简单的样式。如果想实现多种样式，就要不断往HTML里加很多语句，就会显得整个文档很臃肿繁琐。为此，就需要与CSS一起使用。由HTML专注做结构呈现，CSS负责样式，实现结构与样式相分离，从而更好的操作与管理网页。

CSS-网页的美容师

CSS(Cascading Style Sheets)，层叠样式表， 有时也称为CSS样式表或级联样式表。

CSS是一种标记语言，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。

CSS可以让我们的页面更加丰富多彩，布局更加灵活、简单。

在HTML中使用CSS

如何在HTML中引入CSS样式表？有三种方式：内联样式、嵌入样式、外部样式。

内联样式

内联样式又称行内样式，是指在元素标签内部的style属性中设置CSS样式。适用于修改简单的样式或者测试样式。

<div style="color: red; font-size: 12px;">减少内耗，专心学习</div>
  • 这里的style可以控制当前标签“div”的样式。
  • 当设置的样式多了，就会显得繁琐。在每一个元素重复设置各个样式，增加网页的维护和更新难度。
  • 不能体现结构与样式相分离的思想，不推荐大量使用。

嵌入样式

嵌入样式，又称为内嵌样式，一般是通过HTML文档头部定义在style标签里。

<head>
<style type="text/CSS">
    选择器（选择的标签） { 
      属性1: 属性值1;
      属性2: 属性值2; 
      属性3: 属性值3;
    }
</style>
</head>

特点：

  • 该方式可以方便控制当前整个页面中的元素样式。
  • 代码结构清晰。
  • 没有实现结构和样式完全分离，当此文档的CSS样式需要被其他HTML文档使用，就必须重新定义。大量重复的CSS嵌套在HTML文档中，会造成网络负担过重。需要修改网站风格时，必须对网站的每一个网页进行修改，不利于更新和维护。

外部样式

外部样式是将所有样式代码写在外部文件中，在HTML文档中使用link元素，将该外部文件链接到需要设置样式的HTML文档中。

<link rel="stylesheet" href="index.css">
  • rel： 定义当前文档与被链接文档之间的关系。这里指定为“styleshet”，表明被链接的文档是一个样式表文档。
  • href：定义所链接外部样式表文件的URL，可以是相对路径或者绝对路径。

特点： 使用外部样式，只需要修改链接的文件，就可以完全改变网站的整体风格。在实际开发中常用这种引入方式。

CSS语法规范

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

632877C9-2462-41D6-BD0E-F7317E4C42AC.jpg

  • 选择器是需要设置CSS样式的HTML标签，花括号里是要设置的具体样式。
  • 每条声明由一个属性和一个值组成。
  • 属性是对指定对象设置的的样式属性，比如字体大小，字体颜色等。
  • 每条声明之间用英文的“;”分开。

注释：CSS的注释以“ /* ”开头，以“ */ ”结尾。

/* 注释的内容 */

CSS代码风格

1.紧凑格式

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

2.展开格式(推荐使用，更直观）

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

3.小写格式（强烈建议使用）

样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写。

 h3{
    color: red;
    }

4.大写格式（没有特殊情况还是用小写）

H3{
    COLOR:RED;
   }

5.空格规范

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

h3{
    color: red;
   }

CSS选择器

CSS选择器就是根据不同需求把不同标签选出来，然后在选择器中对标签设置样式。

选择器又分为基础选择器和复合选择器。

CSS基础选择器

基础选择器由单个选择器组成的，分为标签选择器、类选择器、id选择器和通配符选择器。

标签选择器

标签选择器是指用HTML标签名称作为选择器，按标签名进行分类，为页面中某一类标签指定统一的CSS样式。

p{
    width: 300px;
    height: 300px;
    color: red;
    background-color: pink;
  }

作用： 可以把某一类标签全部选择出来，比如上面代码把所有的p标签选择出来。

优点： 能快速为页面中同类型的标签统一样式。

缺点： 不能设计差异化样式。

类选择器

类选择器，也称class选择器，可以差异化不同的标签，使一个或某几个标签可以被单独选择。

类选择器在HTML中用class属性表示。在CSS中以一个点“.”进行类的标识，后面紧跟类名。可以理解为给一个HTML标签起了一个名字，用class属性来命名。

<div class="box"></div>

 .box{
         width: 300px;
         height: 300px;
         background-color: aqua;
        }

如上代码，用标签div起了一个类名为“box"，在类选择器中直接根据这个类名来选择。

注意事项：

  • 长名或词组可以用中横线来为选择器命名。
  • 类名的第一个字符不能使用数字。
  • 类名不要使用纯数字、中文，尽量用英文字母表示。
  • 多类名选择器：在class属性中写多个类名，用空格分开，即可用多类名表示一个标签。

id选择器

id选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器，CSS 中 id 选择器以 "#" 来定义。

 <div id="box"></div>

 #box{
        width: 300px;
        height: 300px;
        background-color: aqua;
     }

如上代码，将id名为box的div元素设置样式。

注意：id属性在每个HTML文档中只能出现一次。命名规范和class相同。

id选择器和类选择器的区别？
  • class好比人的名字，一个人可以有多个名字，一个名字也可以被多人使用。
  • id相当于人的身份证号码，是唯一的，不能重复。
  • 类选择器在修改样式上用的最多，id选择器一般用于页面唯一性的元素上，经常与js搭配使用。

通配符选择器

通配符选择器通常用“*”定义，表示选取页面中所有元素标签。

*{
    color: black;
    font-size: 20px;
 }

注意：会匹配页面所有的元素，降低页面响应速度，不建议随便使用

可用于清除所有元素标签的内外边距，达到比如让盒子默认贴着网页边框的效果。

* {
    margin: 0;                    /* 定义外边距*/
    padding: 0;                   /* 定义内边距*/
}

基础选择器总结：

image.png 在修改样式中，通常类选择器用的最多。

CSS复合选择器

复合选择器是建立在基础选择器基础上，由两个或多个基础选择器，通过不同方式组合而成。

根据不同的组合方式，就有不同的复合选择器：后代选择器、子选择器、并集选择器、伪类选择器。

后代选择器

又称为包含选择器，用来选择元素的子元素。写法就是将外层标签写在前面，内层标签写在后面，中间用空格分开。当标签发生嵌套时，内层标签就成为外层标签的后代。

<div>
    <span></span>
</div>

div span{
            display: inline-block;
            width: 300px;
            height: 300px;
            background-color: aqua;
        }

上面代码表示选择div里面所有的span元素。div在这里是父级，span是子级，最终选择的是span。 span不一定只能是div的儿子，也可以是孙子，只要是div的后代就行。

<div>
     <p>
       <span></span>
     </p>  
</div>

子选择器

子选择器只能选择某元素的一级子元素。

语法是E>F，E是父元素，F是子元素，并且是以及子元素。也就是说，如果F处于二级或更深层次，就不会被选择。

<div>

    <h3>儿子</h3>
    <span>
         <h3>孙子</h3>
     </span>
    <h3>二儿子</h3>
 </div>

div>h3{
         color: cyan;
       }

如图所示效果，只有最近一级的子元素才能被选择。

image.png

注意区分E F和E>F的区别：

E F是后代选择器，选择E的所有级别的F子元素（包括儿子，孙子...)。

E>F是子选择器，选择的是E最近一级的F子元素(仅包括儿子）。

相邻兄弟选择器

该选择器可以选择紧接在另一元素后的元素，且二者需要具有同一个父元素。

语法为E+F，就是选择紧邻在E后面的F元素，且E和F元素具有相同的父元素。

比如如下代码，给紧接在h1元素后面的p元素设置颜色：

 <div>
        <h1>这是标题</h1>
        <p>段落一</p>
        <p>段落二</p>
        <p>段落三</p>
 </div>

h1+p{
       color: red;
    }

image.png

通用兄弟选择器

通用兄弟选择器是CSS3新增的选择器，选择某元素后面的所有兄弟元素，需要都在同一个父元素中。

语法为E~F，选择的是E元素后面的所有F元素。E和F元素属于同一父元素，且F元素在E元素之后。

比如下列代码，将h2元素后面的所有p元素都设置为粉色：

 <div>
      <h2>这是h2标题</h2>
      <p>段落一</p>
      <p>段落二</p>
      <p>段落三</p>
 </div>

h2~p{
      color: pink;
     }

image.png

注意区分E+F和E~F的区别：

E+F是相邻兄弟选择器，仅选择与E相邻的一个元素；

E~F是通用兄弟选择器，选择的是E后面的所有F元素。

并集选择器

并集选择器用英文逗号“,”连接而成，任何形式的选择器（包括标签选择器，id选择器，类选择器）都能成为并集选择器的一部分，通常用于集体声明。

语法为E,F，选择E和F元素。

<h1>title1</h1>
<h2 id="two">title2</h2>
<h3 class="three">title3</h3>

 h1,#two,.three{
       color: blue;
  }

image.png

链接伪类选择器

Q：什么是伪类选择器？

伪类选择器用于向某些选择器添加特殊的效果，用冒号“:”表示，比如:hover、:first-child。

伪类选择器很多，有链接伪类、结构伪类等，这里讲一下链接伪类选择器和focus伪类选择器。

链接伪类选择器写的时候按照LVHA（link、visited、hover、active）的顺序声明：

a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */

focus伪类选择器

focus伪类选择器用于选取获得焦点（鼠标点击到就是焦点）的表单元素。一般情况下input类表单元素才能获取，因此这个选择器也主要针对表单元素来说。

<p>点击文本输入框表单可以看到黄色背景:</p>
First name: <input type="text" name="firstname" /><br>
Last name: <input type="text" name="lastname" />

input:focus
{
   background-color:yellow;
}

image.png

复合选择器总结：

image.png

avatar
文章
阅读
粉丝