a标签去除下划线css_数据分析师所需的编程技能 : CSS篇

Html篇里提到过css是啥，CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

1、一个CSS样式示例：

CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。

例子：从代码可以看到，我在<head>结构里定义了一个名字为c的css样式，并且在<body>里对其中一个Dathon使用了它。

结果：

2、CSS样式语法

2.1）css 样式由选择符和声明组成，而声明又由属性和值组成，如下图所示：

2.2）选择符：又称选择器，指明网页中要应用样式规则的元素。

2.3）声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”。

注意：为了使用样式更加容易阅读，可以将每条代码写在一个新行内，如下所示：

p{font-size:12px;color:red;}

3、CSS样式的种类

3.1)、内敛式css样式，直接写在现有的html标签中，代码如下：

<p style="color:red">这里文字是红色。</p>

若有多条css样式代码可以写在一起，中间用分号隔开，代码如下：

<p style="color:red;font-size:12px">这里文字是红色。</p>

内联式的缺点：若多个元素都需要用css样式，那么代码量就多很多。

3.2)、嵌入式css样式，写在当前的文件中，嵌入式css样式，就是可以把css样式代码写在<style type="text/css"></style>标签之间，代码如下：

<style type="text/css">span{color:red;}</style>

注：嵌入式css样式必须写在<style></style>之间，并且一般情况下嵌入式css样式写在<head></head>之间。

3.3）、外部式css样式，写在单独的一个文件中。简单来说就是我们新创一个文件，写上css样式并命名为style.css例如：

span{color:red;}

然后我们在另一个html文档中使用<link>标签将样式文件链接，代码如下：

<link href="base.css" rel="stylesheet" type="text/css" />

注：

1、css样式文件名称以有意义的英文字母命名，如 main.css。

2、rel="stylesheet" type="text/css" 是固定写法不可修改。

3、<link>标签位置一般写在<head>标签之内。

3.4）、三种方法的优先级

如果你将这几种方法都用于某个元素，那么它最后会程序哪个CSS样式呢，这其实涉及权值的问题，可以大致的理解为优先级：内联式 > 嵌入式 > 外部式

4、CSS选择器

4.1）、什么是选择器？

在{}之前的部分就是“选择器”，如：

选择器{
样式;}

4.2）、标签选择器

标签选择器其实就是html代码中的标签。如<html>、<body>、<h1>、<p>、<img>。例如下面代码：

p{font-size:12px;line-height:1.6em;}

4.3）、类选择器

类选择器在css样式编码中是最常用到的，语法：

.类选器名称{css样式代码;}

注：

1、英文圆点开头

2、其中类选器名称可以任意起名（但不要起中文噢） 使用方法：

（1）创建css样式：

.setgGeen{color:green;}

（2）将类选择器使用到某个元素中去：

<span class"setgGeen">Dathon</span>

4.4）、ID选择器

语法：与类选择器仅只是.和#的区别

#setGreen{color:green;}

使用方法：与类选择器一致，但class变为id。

4.5）、类和ID选择器的区别

1、ID选择器只能在文档中使用一次。

2、可以使用类选择器词列表方法为一个元素同时设置多个样式。（ID选择器不行）

4.6）、通用选择器

它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色，语法：

* {color:red;}

5、CSS的性质

5.1）、继承

CSS的某些样式是具有继承性的，继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。比如下面代码：如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。但注意有一些css样式是不具有继承性的。如border:1px solid red。

p{color:red;}
<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

5.2）、层叠

如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值怎么办？

标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。

层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。

5.3）、重要性

我们在做网页代码的时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用!important来解决，语法：

p{color:red!important;}

6、CSS样式语法

6.1）、字体设置，语法：

body{font-family:"宋体";}

6.2）、字号与颜色设置，#666灰色

body{font-size:12px;color:#666}

6.3）、粗体。当然也可以用html<strong>等去做

span{font-weight:bold;}

6.4）、斜体

a{font-style:italic;}

6.5）、下划线

a{text-decoration:underline;}

6.6）、删除线

.oldPrice{text-decoration:line-through;}

6.7）、段落排版 -- 缩进：以下为缩进文字2倍大小的意思（可理解为缩进两个空格），再也不用一直打&nbsp

p{text-indent:2em;}

6.8）、段落排版 -- 行高

p{line-height:1.5em;}

6.9）、段落排版 -- 文字间距

h1{letter-spacing:50px;}
...
<h3>Dathon</h3>

结果：

6.10）、段落排版 -- 单词间距

h1{    word-spacing:50px;}
...
<h3>Dathon=Data+python</h3>

结果：

6.11）、段落排版 -- 对齐

h1{text-align:center;}

css相关的内容暂时就总结这些，非常基础，主要是辅助自身工作用，而不是做前端。那数据分析所需要的前端技能篇就暂时告一段落，往后应该是写机器学习入门篇。

姐妹篇：

小匿：数据分析师所需的编程技能 : html篇zhuanlan.zhihu.com

一个记录会计到数据、算法路上所学的微信公众号：Dathon