网络编程（二）之 CSS（1）

作者: blackmanba_084b | 来源:发表于2021-05-17 17:11 被阅读0次

花了1周的时间也学完了CSS, 在这里我也讲黑马博客中pink老师的讲解内容记录一下。

CSS 是层叠样式表 (Cascading Style Sheets) 的简称.
有时我们也会称之为 CSS 样式表或级联样式表。CSS 是也是一种标记语言CSS 主要用于设置 HTML 页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解:CSS 可以美化 HTML , 让 HTML 更漂亮，让页面布局更简单。
CSS 最大价值: 由 HTML 专注去做结构呈现，样式交给 CSS，即结构 ( HTML ) 与样式( CSS ) 相分离。

一、 CSS语法规范

展开格式书写

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

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

h3 {
  color: pink;
}

空格规范

h3 {
   color: pink;
}

属性值签名，冒号后面，保留一个空格
选择器（标签）和大括号中间保留空格

二、CSS选择器

选择器简单来说就是选择标签用的。这里选择其可以分为两个大类分别是基础选择器以及复合选择器。

基础选择器 是由单个选择器组成的, 基础选择器又包括：标签选择器， 类选择器， id选择器和通配符选择器

2.1 标签选择器

标签名{
属性1: 属性值1; 
属性2: 属性值2; 
属性3: 属性值3;
 ...
}

标签选择器可以把某一类标签全部选择出来，能快速为页面中同类型的标签统一设置样式,不能设计差异化样式，只能选择全部的当前标签。简单理解就是把所有的div或span标签全部选出来，即我们按照标签名称进行选择。

2.2 类选择器

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

.red {
  color: red;
}

<div class=‘red’> 变红色 </div>

咱们也可以使用多类名进行选择，如下所示。

<!--比如第一个类名表示颜色， 第二个类名表示字体-->
<div class=‘class1 class2 class3'> 变红色 </div>

2.3 id选择器

HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以“#" 来定义。
注意:id 属性只能在每个 HTML 文档中出现一次。口诀: 样式#定义,结构id调用, 只能调用一次, 别人切勿使用

#nav {
  color:red;
}

<div id="nav">test</div>

2.4 通配符选择器

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

*{
margin: 0;
padding: 0; 
}

三、字体选择

3.1 字体

CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)， CSS 使用 font-family 属性定义文本的字体系列。写多个就是为了防止某种字体不支持，则选择下一个字体。

p { font-family:"微软雅黑";}
div {font-family: Arial,"Microsoft Yahei", "微软雅黑";}

3.2 字体大小

CSS 使用font-size属性定义字体大小。(谷歌浏览器默认的文字大小为16px)

p{
font-size: 20px;
}

3.3 字体粗细

CSS 使用 font-weight 属性设置文本字体的粗细。下面不同的粗细代表不同的属性作用
normal 默认值不加粗
bold 定义粗体
100-900 400等同于normal， 700等同于bold，注意不加单位

p{
font-weight: bold;
}

3.4 文字样式

CSS 使用 font-style 属性设置文本的风格。下面不同的属性值代表不同的样式：
normal 默认值，浏览器会显示标准的字体样式font-style：normal
italic 浏览器回显示斜体的字体样式

p{
font-style: normal;
}

3.5 字体复合属性

必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开不需要设置的属性可以省略(取默认值)，但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用

body {
font: font-style font-weight font-size/line-height font-family;
}

四、文字属性

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

4.1 文本颜色

color 属性用于定义文本的颜色。一下不同的属性值代表不同的含义，
【1】这里color可以使用预设定的颜色值，如pink, red等
【2】或十六进制，如##FF0000
【3】或RGB代码rgb(255, 0, 0)或rgb(100%, 0%, 0%)

div {
  color: red;
}

4.2 文本对齐

text-align 属性用于设置元素内文本内容的水平对齐方式。text-align有三个属性分别是left（左对齐）, right（右对齐）, center（居中对齐）

div {
text-align: center;
}

4.3 文本装饰

text-decoration 属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。该属性还有其他的属性值如下：
none 默认，没有装饰性(如果想消去链接下划线可以用)
underline 下划线
overline 上划线
line-through 删除线

div { text-decoration:underline;
}

4.4 文本缩进

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


div {
text-indent: 10px;
}

<!--em 是一个相对单位，就是当前元素(font-size) 1 个文字的大小, 如果当前元素没有设置大小，则会按照父元 素的 1 个文字大小。-->
p{
text-indent: 2em;
}

4.5 行间距

line-height 属性用于设置行间的距离(行高)。可以控制文字行与行之间的距离（如果想让文字垂直居中，则字体大小等于行间距，这样上间距及下间距都为0）

p{
line-height: 26px;
}

五、CSS引入方式

CSS引入方式主要分为三种样式表分别为：

行内样式表（行内式）
内部样式表（嵌入式）
外部样式表（链接式）

5.1 行内样式表

内部样式表(内嵌样式表)是写到html页面内部. 是将所有的 CSS 代码抽取出来，单独放到一个 <style> 标签中。<style> 标签理论上可以放在 HTML 文档的任何地方，但一般会放在文档的<head>标签中。使用内部样式表设定 CSS，通常也被称为嵌入式引入，这种方式是我们练习时常用的方式

<style> 
div {
color: red;
font-size: 12px; 
}
</style>

5.2 行内样式表

行内样式表(内联样式表)是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式.

<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>

5.3 外部样式表

实际开发都是外部样式表. 适合于样式比较多的情况. 核心是:样式单独写到CSS 文件中，之后把CSS文件引入到 HTML 页面中使用.

新建一个后缀名为 .css 的样式文件，把所有 CSS 代码都放入此文件中。
在 HTML 页面中，使用<link> 标签引入这个文件。
ref 定义当前文档与被链接文档之间的关系，在这里需要制定为stylesheet，表示被链接的文档是一个样式表文件。
href 定义所链接外部样式表文件的URL，可以是相对路径也可以是绝对路经。

六、 CSS的复合选择器

上面第二个部分已经介绍了CSS基础选择器，这里我们说的复合选择器则是建立在基础选择器之上，对基础选择器进行合成的。这里的复合选择器分为以下几个部分，分别是：后代选择器, 子选择器, 并集选择器以及伪类选择器。

6.1后代选择器

/*元素1 是父级，元素2 是儿子级，也可以是孙子级*/
ul li{样式声明} /* 选择ul里面所有的li标签元素 */

6.2 子选择器 (重要)

必须是亲儿子，其孙子、重孙之类都不归他管. 你也可以叫他亲儿子选择器

div>p{样式声明} /* 选择div里面所有最近一级p标签元素 */

6.3 并集选择器

并集选择器是各选择器通过英文逗号(,)连接而成，任何形式的选择器都可以作为并集选择器的一部分。逗号可以理解为和的意思

ul,div { 样式声明 } 
/* 选择 ul 和 div标签元素 */

6.4 伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。伪类选择器书写最大的特点是用冒号(:)表示，比如 :hover 、 :first-child 。

因为伪类选择器很多，比如有链接伪类、结构伪类等，所以这里先给大家讲解常用的链接伪类选择器。
具体属性如下所示：
a:link 选择所有未被访问的链接
a:visited 选择所有已经访问过的链接
a:hover 选择鼠标位于其上的链接（如果是a的子类b 则是a:hover .b{...}）
a:active 选择活动链接（鼠标按下未弹起的链接）
为了确保生效，请按照 LVHA 的循顺序声明:link-:visited-:hover-:active。

/* a 是标签选择器 所有的链接 */ 
a{
color: gray; 
}
/* :hover 是链接伪类选择器 鼠标经过 */ a:hover {
color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */ 
}

:focus伪类选择器用于选取获得焦点的表单元素

input:focus { 
background-color:pink;
}

效果如下所示，输入框颜色会变成粉红色。

七、 CSS的显示元素

7.1 块元素，行内元素以及行内块元素

HTML 元素一般分为块元素和行内元素以及行内块类型。

块元素（自己独占一行，有宽高，宽度未容器宽度（父亲宽度），内部可以放行内或块级元素）：常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中 <div> 标签是最典型的块元素。（注意元素内不能放块元素例如 h1～h7或者<p)等）

行元素（一行可以显示多个，设置宽高无效，默认宽度为内容宽度，只能容纳文本或行内元素）：常见的行内元素有 <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中 <span> 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。（注意链接内不能再放链接， <a>内可以放块元素）

行内快元素（一行可以有多个并且可以设置宽高） : 在行内元素中有几个特殊的标签 —— <img />、<input />、<td>，它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素

7.2 元素模式转换

主要有以下三种转换方式
display:block;转换为块元素
diplay:inline;转换为行内元素
display:inline-block：转换为行内快元素

7.3 单行文字垂直居中

解决方案: 让文字的行高等于盒子的高度就可以让文字在当前盒子内垂直居中

<style>
      div{
              width: 200px;
              height: 40px
              <!--行高等于盒子的高度-->
              line-height: 40px
           }
</style>

八、 CSS的背景

8.1 背景颜色

background-color 属性定义了元素的背景颜色。一般情况下元素背景颜色默认值是 transparent(透明)，我们也可以手动指定背景颜色为透明色。

background-color:颜色值;
background-color:transparent;

8.2 背景图片

background-image 属性描述了元素的背景图像。实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置. (精灵图也是一种运用场景)

## none为无背景图， url为图片地址（不加引号）
background-image : none | url (url）
background-image: url("test.jpg")

8.3 背景平铺

如果需要在 HTML 页面上对背景图像进行平铺，可以使用 background-repeat 属性。（背景图片会压住背景颜色）
repeat 背景图像在纵向和横向上平铺（默认）
no-repeat 背景图像不平铺
repeat-x 背景图像在横向上平铺
repeat-y 背景图像在纵向平铺
``

8.4 背景图片位置

background-position: x y
background-postion: 12 32
background-postion: center 0
background-position:right center

参数代表的意思是:x 坐标和 y 坐标。可以使用方位名词或者精确单位
如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

8.5 背景图片图像固定

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。

background-attachment : scroll | fixed

scroll 背景图下时随着对象内容滚动的
fixed 背景图下固定

8.6 背景图像复合写法

background: 背景颜色背景图片地址背景平铺背景图像滚动背景图片位置;

background: transparent url(image.jpg) repeat-y fixed top ;

8.7 背景颜色半透明

background: rgba(0, 0, 0, 0.3)