文章目录

前言
第一节：层叠式样式表

==什么是层叠式样式表==
==样式编写位置==
==CSS 盒子模型(Box Model)==

标准盒子模型
盒子的属性和值
外边距margin与内边距padding

第二节：选择器

==选择器的格式==
==选择器的类型==

id选择器
class类选择器
标签选择器
属性选择器
伪类选择器
伪元素选择器
复合选择器

前言

上一章初试了一下在行内属性style和在以及在头部head里使用style标签进行编写简单的样式。但是想要制作出丰富多彩的页面样式，就需要更加详细地了解CSS，本章节将一步步说明要点。

第一节：层叠式样式表

什么是层叠式样式表

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。简称CSS.
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化

样式编写位置

内部样式：
就是以style标签，写在HTML内部的样式。例如前面所学的,写在head里面的style标签内的就是内部样式。
例：

浏览器结果：
内联样式：
使用内联样式也可以实现上面例子的样式结果，内联样式就是写在每一个标签的style属性内的样式
例：
外部样式：

内联样式或内部样式都能用自己的方法实现样式处理，但
在实际开发中，几乎很少如此操作。更多地会把样式写在CSS文件当中.这种写在文件外部的样式，叫外部样式(也叫外链)。
调用外部CSS文件，还需要运一个标签<link>
【link标签属性】
href —— CSS文件地址
rel —— 指定href属性为样式表

例：
用回上面的例子，在当前HTML文件 index.html 位置上有一个CSS文件夹，文件夹内创建一个CSS文件。此时，就可以把原来的内部样式全部写到一个文件上。
在这里插入图片描述
浏览器结果：跟上面两个例子实现的样式是一样的。

PS：在实际工作工，绝大多数都是以外部样式操作的。为了方便截图和代码编写，以后内容相关的样式位置，以内部样式为主。

CSS 盒子模型(Box Model)

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型就是把页面上的每个元素都被当成一个矩形盒子，占据一定的页面空间。它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：
在这里插入图片描述

标准盒子模型

在这里插入图片描述

盒子的属性和值

width / height —— 宽高
border —— 围绕在内边距和内容外的边框。
border-width —— 边框宽度
border-style ——边宽类型
【属性值】
solid —— 实线
dashed ——虚线
dotted —— 点线
double —— 双线(border-width大小超过3px才有效)
border-color ——边框颜色
margin ——外边距
padding ——内边距
Content —— 盒子的内容，显示文本和图像。

外边距margin与内边距padding

padding是指内边距，即元素边框与元素内容之间的距离，上下左右的内边区域。
作用：设定内容到元素的边缘的间距，四个方向的值为整数
padding:10px; —— 上下左右填充都是 10px
padding:10px 5px; —— 上下填充是10px,左右填充是5px
padding:10px 5px 3px —— 上10px,左右填充5px,下3px
padding:10px 5px 3px 1px —— 顺时针原则，代表上、右、下、左的值

margin是指外边距，即元素边框（外边框）到其它的元素边框的距离，即上下左右的外边区域
作用：用于设置元素之间的间距，值可以为负数。其他用法同padding

第二节：选择器

浏览器是有自己的默认样式的，当我们不对样式进行操作，也可以看到文字有颜色、大小、字体等。平时可以通过浏览器中的设置-自定义字体进行简单调整（一般不会动它）。虽然可以调整，但想要更漂亮的样式，可以通过重置样式的设计，前提编写CSS样式。对样式进行编写，就要用到选择器。
选择器的作用是：选择所需的元素。

选择器的格式

选择器 + { 属性：属性值；}
如：#idname{ attr1 : value1 ; attr2 : value2 ;}

选择器的类型

id选择器 —— 如：#idName{ }
class类选择器 —— 如：.className{ }
标签选择器 —— 如：a{ }
属性选择器 —— 如：[type-text]{ }
伪类选择器 —— 如：:hover{ }
伪元素选择器 —— 如：::after{ }
复合选择器 —— 如：div,p{ }
PS：最常用的是前面三种选择器，只要能选择到所需的元素正常操作，理论上哪种选择器任君选择。推荐尽量用类选择器比较好，当然例如有一些一开始需要重置的样式可以使用签选择器，例如a标签的会有下划线和字体蓝色，可以重置。

id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。可以应用于任何元素。id 选择器以 “#” 来定义

例：对指定的两个p标签内文字指定样式

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>id选择器</title>
      <style type="text/css">
      	#myred{color: #f00;}
      	#mygreen{color: #58cb58;}
      </style>
   </head>
   <body>
      <div>
         <p id="myred">这个段落是红色。</p>
         <p id="mygreen">这个段落是绿色。</p>
      </div>
   </body>
</html>

浏览器结果：
在这里插入图片描述

class类选择器

类选择器可以为标有特定 class 的 HTML 元素指定特定的样式。也可以应用于任何元素。类选择器以 “.” 来定义

例：同样用上面的例子,不再使用id，而是用class

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>类选择器</title>
      <style type="text/css">
      	.myred{color: #f00;}
      	.mygreen{color: #58cb58;}
      </style>
   </head>
   <body>
      <div>
        <p class="myred">这个段落是红色。</p>
        <p class="mygreen">这个段落是绿色。</p>
      </div>
   </body>
</html>

浏览器结果是一样的：
在这里插入图片描述

类选择器与id选择器区别

1、ID选择器只能在文档中使用一次。类选择器与之不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）

例1：类选择器可以使用多次

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>类选择器与id选择器</title>
      <style type="text/css">
      	.mycolor{color: #f00;}
      	#yourcolor{color: #58cb58;}
      </style>
   </head>
   <body>
      <div>
         <p>这个段落是<span class="mycolor">红色</span>的。</p>
         <p>这个段落也是<span class="mycolor">红色</span>的。</p>
         <p>这个段落是<span id="yourcolor">绿色</span>的。</p>	
      </div>
   </body>
</html>

浏览器结果：
在这里插入图片描述

例2：类选择器词列表方法为一个元素同时设置多个样式

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>类选择器与id选择器</title>
      <style type="text/css">
      	.mycolor{color: #f00;}
      	.mysize{font-size: 25px;}
      	#yourcolor{
           color: #58cb58;
           font-size: 25px
      	}
      </style>
   </head>
   <body>
      <div>
         <p>这个段落是<span class="mycolor mysize">红色</span>的。</p>
         <p>这个段落是<span id="yourcolor">绿色</span>的。</p>	
      </div>
   </body>
</html>

浏览器结果：
在这里插入图片描述

标签选择器

例：

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>标签选择器</title>
      <style type="text/css">
         a{                           /*选择对所有a标签*/
            color: #333;                   /*设置颜色*/
            text-decoration: none;         /*设置为无下划线*/
         }
      </style>
   </head>
   <body>
      <div>
         <a href="http://http://www.ifeng.com">凤凰网</a><br/>
         <a href="http://www.baidu.com">百度一下</a><br/>
         <a href="http://www.sina.com.cn">新浪网</a><br/>
         <a href="http://vip.iqiyi.com">爱奇艺.VIP会员</a><br/>
         <a href="http://www.taobao.com">淘宝网</a><br/>
      </div>
   </body>
</html>

浏览器结果：
在这里插入图片描述

属性选择器

有时候，我们会遇到很尴尬的局面，在数据非常多，并且使用了相同的标签的元素中，想对其中某些元素进行不同样式的处理。但又不可能对大量数据花时间给出id或class。这时便可使用属性选择器解决。它能根据元素的属性及属性值来准确选择元素
[attr=val] —— 属性等于val
[attr^=val] —— 属性以val开头
[attr$=val] —— 属性以val结尾

例：在无数个链接里，给百度，并且name=baidu2的链接中，文字设定为红色字体样式

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>属性选择器</title>
      <style type="text/css">
         a[href="http://www.baidu.com"][name="baidu2"] {color: red;}
      </style>
   </head>
   <body>
      <div>
         <a href="http://www.baidu.com" name="baidu1">百度一下</a><br/>
         <a href="http://www.baidu.com" name="baidu2">百度一下</a><br/>
         <a href="http://www.sina.com.cn" name="xinlang">新浪网</a><br/>
         <a href="http://vip.iqiyi.com" name="aiqiyi">爱奇艺.VIP会员</a><br/>
         <a href="http://www.baidu.com" name="baidu3">百度一下</a><br/>
         <a href="http://www.baidu.com" name="baidu2">百度一下</a><br/>
         <a href="http://www.taobao.com" name="taobao">淘宝网</a><br/>
         <a href="http://www.baidu.com" name="baidu3">百度一下</a><br/>
         ...
      </div>
   </body>
</html>

浏览器结果：
在这里插入图片描述

伪类选择器

在里面定义的样式只有当元素处于某种状态下时才起作用，在默认状态下无效。这类选择器，我们就称它为【伪类选择器】
伪类选择器有多，像::hover 、:active 、:focus

例：

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>伪类选择器</title>
      <style type="text/css">
         a{                          
            color: #333;             
            text-decoration: none;
         }
         a:hover{                         /*添加伪类选择器*/
            color: #f00;                       /*鼠标移动到的时改变的样式*/
            text-decoration: underline;
         }
      </style>
   </head>
   <body>
      <div>
         <a href="http://http://www.ifeng.com">凤凰网</a><br/>
         <a href="http://www.baidu.com">百度一下</a><br/>
         <a href="http://www.sina.com.cn">新浪网</a><br/>
         <a href="http://vip.iqiyi.com">爱奇艺.VIP会员</a><br/>
         <a href="http://www.taobao.com">淘宝网</a><br/>
      </div>
   </body>
</html>

浏览器结果：
在这里插入图片描述

伪元素选择器

能在指定标签的内容前面/后面添加一个子元素，这类选择器，我们称它为【伪元素选择器】
::after —— 在内容前面添加一个子元素
::before —— 在内容后面添加一个子元素

例：对商品价格数字前面加入美元符号

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>伪元素选择器</title>
      <style type="text/css">
         span{color: #f00;}
         span::before{
            content: '$';
            color: #58cb58;
         }
      </style>
   </head>
   <body>
      <div>
         <p>商品1价格：<span>998</span></p>
         <p>商品2价格：<span>658</span></p>
         <p>商品3价格：<span>888</span></p>
         <p>商品4价格：<span>168</span></p>
         <p>商品5价格：<span>528</span></p>
         <p>商品6价格：<span>988</span></p>
      </div>
   </body>
</html>

浏览器结果：
在这里插入图片描述

复合选择器

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。

【交集选择器】
“交集”复合选择器由两个选择器直接连接构成；其中第一个必须是标记选择器，第二个必须是类别选择器或者ID选择器；这两个选择器之间不能有空格。
例：

<style>
   div#sidebar {
	border: 1px dotted #000;
	padding: 10px;
	}
</style>

【并集选择器】
并集选择器简称“集体声明”；并集选择器是多个选择器通过逗号连接而成的。
【后代选择器】
css选择器中，还可以通过嵌套的方式对特殊位置的html 标记进行声明，例如当 <p>与</p>之间包含标记时，就可以使用后代选择器进行相应的控制。后代选择器的写法就是把外层的标记写在前面，内层的标记写在后面，之间用空格分隔。当标记发生嵌套时，内层的标记就成为外层标记的后代。

第三章：CSS样式（前篇）

文章目录

前言

第一节：层叠式样式表

什么是层叠式样式表

样式编写位置

CSS 盒子模型(Box Model)

标准盒子模型

盒子的属性和值

外边距margin与内边距padding

第二节：选择器

选择器的格式

选择器的类型

id选择器

class类选择器

标签选择器

属性选择器

伪类选择器

伪元素选择器

复合选择器

猜你喜欢