跳到主要内容

CSS

即 Cascading Style Sheets，它描述了网页的表现与展示效果

引入方式​

具体有3种引入方式，语法如下表格所示：

名称语法描述示例
行内样式在标签内使用style属性，属性值是css属性键值对<h1 style="xxx:xxx;">中国新闻网</h1>
内嵌样式定义<style>标签，在标签内部定义css样式<style> h1 {...} </style>
外联样式定义<link>标签，通过href属性引入外部css文件<link rel="stylesheet" href="css/news.css">

对于上述3种引入方式，企业开发的使用情况如下：

  1. 内联样式会出现大量的代码冗余，不方便后期的维护，所以不常用。
  2. 内部样式，通过定义css选择器，让样式作用于当前页面的指定的标签上。
  3. 外部样式，html和css实现了完全的分离，企业开发常用方式。

颜色表示​

在前端程序开发中，颜色的表示方式常见的有如下三种：

表示方式表示含义取值
关键字预定义的颜色名red、green、blue...
rgb表示法红绿蓝三原色，每项取值范围：0-255rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0)
十六进制表示法#开头，将数字转换成十六进制表示#000000、#ff0000、#cccccc，简写：#000、#ccc

CSS选择器​

顾名思义：选择器是选取需设置样式的元素（标签），但是我们根据业务场景不同，选择的标签的需求也是多种多样的，所以选择器有很多种，因为我们是做后台开发的，所以对于css选择器，我们只学习最基本的3种。

选择器通用语法如下：

选择器名   {
    css样式名：css样式值;
    css样式名：css样式值;
}

我们需要学习的3种选择器是元素选择器，id选择器，class选择器，语法以及作用如下：

1.元素（标签）选择器：

  • 选择器的名字必须是标签的名字
  • 作用：选择器中的样式会作用于所有同名的标签上
元素名称 {
    css样式名:css样式值；
}

例子如下：

 div{
     color: red;
 }

2.id选择器:

  • 选择器的名字前面需要加上#
  • 作用：选择器中的样式会作用于指定id的标签上，而且有且只有一个标签（由于id是唯一的）
#id属性值 {
    css样式名:css样式值；
}

例子如下：

#did {
    color: blue;
}

3.类选择器：

  • 选择器的名字前面需要加上 .
  • 作用：选择器中的样式会作用于所有class的属性值和该名字一样的标签上，可以是多个
.class属性值 {
    css样式名:css样式值；
}

例子如下：

.cls{
     color: green;
 }