CSS简介

CSS的主要使用场景就是美化网页,布局网页的

HTML的局限性

说起HTML,其实是很单纯的语言,只关注网页内容的语义,比如<h1>表明这是一个大标题,<p>表明这是一个段落,<img>表明这里有个图片,<a>表示此处有链接.很早的时期,世界上的网站虽然很多,但都样式单一且不美观,虽然HTML可以做简单的样式,但是带来的是无尽的臃肿与繁琐

CSS-网页的美容师

CSS是层叠样式表(Casading Style Sheets)的简称,有时我们也会称之为CSS样式表或级联样式表,CSS也是一种标记语言,CSS主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图形的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式,CSS让我们的网页更加丰富多彩,布局更加灵活自如,简单理解:CSS可以美化HTML,让HTML更漂亮,让页面布局更简单

CSS最大价值:由HTML专注去做结构呈现,样式交给CSS,即结构(HTML)与样式(CSS)相分离

CSS语法规范

使用HTML时,需要遵从一定的规范,CSS也是如此,要想熟练地使用CSS对网页进行修饰,首先需要了解CSS样式规则

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

CSS组成.png

    <style>
      p {
        color: red;
        /* 修改文字的像素 */
        font-size: 12px;
      }
    </style>
  • CSS主要写在</head>上面
  • 选择器是用于指定CSS样式的HTML标签,花括号内是对该对象的具体样式
  • 属性和属性值以"键值对"的形式出现
  • 属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等
  • 属性和属性值之间用英文:分开
  • 多个"键值对"之间用英文;进行区分
CSS代码风格

以下代码书写风格不是强制规范,而是符合实际开发书写方式

样式格式书写
  • 紧凑格式
      h3 {color: deeppink; font-size: 20px;}
  • 展开格式
      h3 {
        color: deeppink;
        font-size: 20px;
      }

强烈推荐第二种格式,因为更直观

样式大小写
  • 小写
      h3 {
        color: pink;
      }
  • 大写
      h3 {
        COLOR: PINK;
      }

强烈推荐样式选择器、属性名、属性值关键字全部使用小写字母,特殊情况除外

空格规范
      h3 {
        color: pink;
      }
  • 属性值前面,冒号后面,保留一个空格
  • 选择器(标签)和大括号中间保留空格

CSS基础选择器

CSS选择器的作用

选择器(选择符)就是根据不同需求把不同的标签选出来,这就是选择器的作用,简单来说,就是选择标签用的

例:

      h3 {
        color: pink;
      }

以上CSS做了两件事:

  • 找到所有的h3标签,选择器(选对人)
  • 设置这些标签的样式,比如颜色为红色(做对事)
选择器分类

选择器分为基础选择器和复合选择器两个大类,先了解一下基础选择器

  • 基础选择器是由单个选择器组成的
  • 基础选择器又包括:标签选择器、类选择器、id选择器和通配符选择器
标签选择器

标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式

作用:

标签选择器可以把某一类标签全部选择出来,比如所有的<div>标签和所有的<span>标签

优点:

能快速为页面中同类型的标签统一设置样式

缺点:

不能设计差异化样式,只能选择全部的当前标签

例:

    <style>
      p {
        color: green;
      }
      div {
        color: pink;
      }
    </style>
  </head>
  <body>
    <p>I'am green</p>
    <p>I'am green</p>
    <p>I'am green</p>
    <div>I'am pink</div>
    <div>I'am pink</div>
    <div>I'am pink</div>
  </body>

标签选择器.png

类选择器

如果想要差异化选择不同的标签,单独选一个或者某几个标签,可以使用类选择器

语法:

      .类名 {
        属性1: 属性值1;
        ...
      }

结构需要用clss属性来调用class类的意思

    <div class="red">变红色</div>

例:

    <style>
      .red {
        color: red;
      }
      .green {
        color: green;
      }
      .blue {
        color: blue;
      }
      .yellow {
        color: yellow;
      }
    </style>
  </head>
  <body>
    <ul>
      <li class="red">我是红色</li>
      <li class="green">我是绿色</li>
      <li class="blue">我是蓝色</li>
      <li class="yellow">我是黄色</li>
    </ul>
  </body>

类选择器.png

注:

  • 类选择器使用.(英文点号)进行标识,后面紧跟类名(自定义,我们自己命名的)
  • 可以理解为给这个标签起了一个名字,来表示
  • 长名称或词组可以使用中横线来为选择器命名
  • 不要使用纯数字、中文等命名,尽量使用英文字母来表示
  • 命名要有意义,尽量使别人一眼就知道这个类名的目的
  • 命名规范:见附件(Web前端开发规范手册)https://segmentfault.com/a/1190000014317104
类选择器-多类名

我们可以给一个标签指定多个类名,从而达到更多的选择目的,这些类名都可以选出这个标签,简单理解就是一个标签有多个名字

多类名使用方式:

  • 在标签class属性中写多个类名
  • 多个类名中间必须用空格分开
  • 这个标签就可以分别具有这些类名的样式

多类名开发中使用场景:

  • 可以把一些标签元素相同的样式(共同的部分)放到一个类里面
  • 这些标签都可以调用这个公共的类,然后再调用自己独有的类
  • 从而节省CSS代码,统一修改也非常方便

例:

    <style>
      .boxone {
        color: red;
      }
      .firstbox {
        font-size: 35px;
      }
    </style>
  </head>
  <body>
    <div class="boxone firstbox">多类名</div>
  </body>

多类名.png

注:

  • 各个类名中间用空格隔开
  • 简单理解:就是给某个标签添加了多个类,或者这个标签有多个名字
  • 这个标签就可以分别具有这些类名的样式
  • 从而节省CSS代码,统一修改也非常方便
  • 多类名选择器在后期布局比较复杂的情况下,还是较多使用的
id选择器

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

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

语法:

      #id名 {
        属性1: 属性1;
        ...;
      }

例:

    <style>
      #monster {
        color: blue;
      }
    </style>
  </head>
  <body>
    <div id="monster">咩咩子</div>
  </body>

cssid.png

id选择器与类选择器的区别

  • 类选择器(class)好比人的名字,一个人可以有多个名字,同时一个名字可以被多个人使用
  • id选择器好比人的身份证号码,是全国唯一的,不得重复
  • id选择器和类选择器最大的不同在于使用次数上
  • 类选择器在修改样式中用的最多,id选择器一般用于页面唯一的元素上,经常与JavaScript搭配使用
通配符选择器

在CSS中,通配符选择器使用*定义,它表示选取页面中所有元素(标签)

语法:

      * {
        属性1: 属性值1;
      }

例:

    <style>
      * {
        color: green;
      }
    </style>
  </head>
  <body>
    <p>我就不变色</p>
  </body>

通配符选择器.png

  • 通配符选择器不需要调用,自动就给所有的元素使用样式
  • 特殊情况才使用,后面讲解使用场景(以下是清除所有的元素标签的内外边距,后期会将)
      * {
        margin: 0%;
        padding: 0;
      }
基础选择器总结
基础选择器作用特点使用情况用法
标签选择器可以选出所有相同的标签,比如p不能差异化选择较多p {color: red;}
类选择器可以选出1个或多个标签可以根据需求选择非常多.nav {color: red;}
id选择器一次只能选择1个标签ID属性只能在每个HTML文档中出现一次一般和js搭配#nav {color :red;}
通配符选择器选择所有的标签选择的太多,有些部分不需要特殊情况使用*{color: red;}

CSS字体属性

CSS Fonts(字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)

字体系列

CSS使用font-family属性定义文本的字体系列

例:

    <style>
      body {
        font-family: "Courier New", Courier, monospace;
      }
    </style>

字体系列.png

注:

  • 各种字体之间必须使用英文状态下的逗号隔开
  • 一般情况下,如果有空格隔开的多个单词组成的字体,加""或''
  • 尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正确显示

字体大小

CSS使用font-size属性定义字体大小

例:

    <style>
      body {
        font-size: 16px;
      }
    </style>

字体大小.png

注:

  • px(像素)大小是我们网页的最常用的单位
  • 谷歌浏览器默认的文字大小为16px
  • 不同浏览器可能默认显示的字号大小不一致,我们尽量给一个明确值大小,不要默认大小
  • 可以给body指定整个页面文字的大小
  • 标题标签比较特殊,需要手动单独更改

字体粗细

CSS使用font-weight属性设置文本字体的粗细

属性值描述
normal默认值(不加粗的)
bold定义粗体(加粗的)
100-900400等同于normal,而700等同于bold,注意这个数字后面不跟单位

例:

    <style>
      p {
        font-weight: 700;
      }
      h4 {
        font-weight: 400;
      }
    </style>

字体粗细.png

注:

  • 实际开发中,我们更喜欢用数字表示粗细

文字样式

CSS使用font-style属性设置文本的风格

属性值作用
normal默认值,浏览器会显示标准的字体样式:font style: normal
italic浏览器会显示斜体的字体样式

例:

    <style>
      em {
        font-style: normal;
      }
      p {
        font-style: italic;
      }
    </style>

字体样式.png

注:

  • 平时我们很少给文字加斜体,反而要给斜体标签em,i改为不倾斜字体

字体的复合属性

字体属性可以把以上文字样式综合来写,这样更节约代码

标准格式:

      body {
        font: font-style font-weight font-size/line-height font-family;
      }
  • 使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,并且各个属性间以空格隔开
  • 不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用

例:

    <style>
      body {
        font: italic 700 16px "Microsoft yahei";
      }
    </style>

复合属性1.png

    <style>
      body {
        font: 16px "Microsoft yahei";
      }
    </style>

复合属性2.png

字体属性总结

属性表示注意点
font-size字号我们通常用的单位是px像素,一定要跟上单位
font-family字体实际工作中按照团队约定来写字体
font-weight字体粗细加粗的是700或者bold,不加粗的是normal或者400,数字不要跟单位
font-style字体样式斜体是italic,不倾斜是normal,工作中我们最常用的是normal
font字体连写字体连写是有顺序的,不能随意换位置,其中字号和字体必须同时出现

CSS文本属性

CSS Text(文本)属性可以定义文本的外观,比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等

文本颜色

color属性用于定义文本的颜色

表示属性值
预定义的颜色red,green,blue等
十六进制#FF0000,#FF6600,#29D794
RGB代码rgb(255,0,0)或rgb(100%,0%,0%)

例:

      p {
        color: blue;
      }
      p {
        color: #ff0000;
      }
      p {
        color: rgb(255, 0, 0);
      }

对齐文本

text-align属性用于设置元素内文本内容的水平对齐方式

属性值解释
left左对齐(默认值)
right右对齐
center居中对齐

例:

    <style>
      h1 {
        text-align: center;
      }
    </style>

text-align.png

装饰文本

text-decoration属性规定添加到文本的修饰,可以给文本添加下划线、删除线、上划线等

属性值描述
none默认,没有任何装饰线(最常用)
underline下划线,链接a自带下划线(常用)
overline上划线(几乎不用)
line-through删除线(不常用)

例:

    <style>
      a {
        text-decoration: none;
        color: #333;
      }
    </style>
  </head>
  <body>
    <a href="http://www.google.cn/">跳转到Google</a>
  </body>

text-decoration.png

注:

  • none属性常与a标签在一起使用,取消掉跳转链接下的下划线

文本缩进

text-indent属性用来指定文本的第一行的缩进,通常是将段落的首行缩进

例:

      p {
        text-indent: 20px;
      }

通过设置该属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值

    <style>
      p {
        text-indent: 2em;
      }
    </style>

em是一个相对单位,就是当前元素(font-size)1个文字的大小,如果当前元素没有设置大小,则会按照父元素的1个文字大小

行间距

line-height属性用于设置行间的距离(行高),可以控制文字行与行之间的距离

行间距.png

例:

      p {
        line-height: 26px;
      }

文字属性总结

属性表示注意点
color文本颜色通常用十六进制,比如简写#FFF
text-align文本对齐可以设定文字水平的对齐方式
text-indent文本缩进通常我们用于段落首行缩进2个字的距离text-indent:2em;
text-decoration文本修饰添加下划线underline,取消下划线none
line-height行高控制行与行之间的距离
Last modification：February 14, 2021
© Allow specification reprint
If you think my article is useful to you, please feel free to appreciate